baseui 10.3.0 → 10.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/app-nav-bar/user-menu.js +1 -0
- package/app-nav-bar/user-menu.js.flow +1 -0
- package/button/styled-components.js +1 -1
- package/button/styled-components.js.flow +4 -1
- package/card/styled-components.js +0 -1
- package/card/styled-components.js.flow +0 -1
- package/combobox/combobox.js +5 -1
- package/combobox/combobox.js.flow +4 -0
- package/combobox/index.d.ts +6 -3
- package/data-table/column-datetime.js +2 -0
- package/data-table/column-datetime.js.flow +2 -0
- package/data-table/data-table.js +13 -3
- package/data-table/data-table.js.flow +20 -4
- package/data-table/types.js.flow +2 -1
- package/datepicker/calendar-header.js +255 -109
- package/datepicker/calendar-header.js.flow +282 -145
- package/datepicker/calendar.js +6 -1
- package/datepicker/calendar.js.flow +5 -1
- package/datepicker/constants.js +9 -2
- package/datepicker/constants.js.flow +7 -0
- package/datepicker/datepicker.js +135 -73
- package/datepicker/datepicker.js.flow +161 -62
- package/datepicker/day.js +2 -0
- package/datepicker/day.js.flow +2 -0
- package/datepicker/index.d.ts +8 -0
- package/datepicker/month.js +4 -0
- package/datepicker/month.js.flow +3 -0
- package/datepicker/styled-components.js +116 -56
- package/datepicker/styled-components.js.flow +101 -36
- package/datepicker/types.js.flow +18 -1
- package/datepicker/utils/calendar-header-helpers.js +51 -0
- package/datepicker/utils/calendar-header-helpers.js.flow +53 -0
- package/datepicker/utils/date-helpers.js +1 -1
- package/datepicker/utils/date-helpers.js.flow +1 -1
- package/datepicker/week.js +1 -0
- package/datepicker/week.js.flow +1 -0
- package/dnd-list/index.js.flow +2 -1
- package/dnd-list/list.js +1 -2
- package/dnd-list/list.js.flow +1 -1
- package/dnd-list/styled-components.js +1 -1
- package/dnd-list/styled-components.js.flow +1 -0
- package/drawer/close-icon.js +3 -2
- package/drawer/close-icon.js.flow +2 -2
- package/drawer/drawer.js +5 -2
- package/drawer/drawer.js.flow +2 -2
- package/es/app-nav-bar/user-menu.js +1 -0
- package/es/button/styled-components.js +1 -1
- package/es/card/styled-components.js +0 -1
- package/es/combobox/combobox.js +5 -1
- package/es/data-table/column-datetime.js +2 -0
- package/es/data-table/data-table.js +13 -3
- package/es/datepicker/calendar-header.js +204 -93
- package/es/datepicker/calendar.js +7 -2
- package/es/datepicker/constants.js +6 -1
- package/es/datepicker/datepicker.js +70 -42
- package/es/datepicker/day.js +2 -0
- package/es/datepicker/month.js +3 -0
- package/es/datepicker/styled-components.js +98 -37
- package/es/datepicker/types.js +1 -1
- package/es/datepicker/utils/calendar-header-helpers.js +34 -0
- package/es/datepicker/utils/date-helpers.js +1 -1
- package/es/datepicker/week.js +1 -0
- package/es/dnd-list/index.js +2 -1
- package/es/dnd-list/list.js +1 -2
- package/es/dnd-list/styled-components.js +1 -0
- package/es/drawer/close-icon.js +3 -2
- package/es/drawer/drawer.js +5 -2
- package/es/helper/helper.js +1 -0
- package/es/layer/layer.js +8 -0
- package/es/list/list-heading.js +17 -6
- package/es/map-marker/constants.js +69 -0
- package/es/map-marker/fixed-marker.js +98 -0
- package/es/map-marker/floating-marker.js +65 -0
- package/es/map-marker/index.js +9 -0
- package/es/map-marker/pin-head.js +108 -0
- package/es/map-marker/styled-components.js +156 -0
- package/es/map-marker/types.js +8 -0
- package/es/menu/maybe-child-menu.js +1 -0
- package/es/popover/popover.js +6 -5
- package/es/popover/stateful-container.js +8 -2
- package/es/rating/emoticon-rating.js +3 -1
- package/es/rating/star-rating.js +3 -1
- package/es/select/select-component.js +20 -5
- package/es/select/styled-components.js +34 -4
- package/es/snackbar/snackbar-context.js +16 -4
- package/es/spinner/styled-components.js +1 -1
- package/es/table-semantic/styled-components.js +6 -4
- package/es/table-semantic/table-builder.js +3 -0
- package/es/themes/dark-theme/color-component-tokens.js +1 -1
- package/es/themes/light-theme/color-component-tokens.js +9 -9
- package/es/themes/shared/lighting.js +5 -1
- package/es/timepicker/timepicker.js +16 -11
- package/es/tooltip/styled-components.js +8 -0
- package/es/tooltip/tooltip.js +1 -0
- package/esm/app-nav-bar/user-menu.js +1 -0
- package/esm/button/styled-components.js +1 -1
- package/esm/card/styled-components.js +0 -1
- package/esm/combobox/combobox.js +5 -1
- package/esm/data-table/column-datetime.js +2 -0
- package/esm/data-table/data-table.js +13 -3
- package/esm/datepicker/calendar-header.js +255 -110
- package/esm/datepicker/calendar.js +7 -2
- package/esm/datepicker/constants.js +6 -1
- package/esm/datepicker/datepicker.js +136 -74
- package/esm/datepicker/day.js +2 -0
- package/esm/datepicker/month.js +3 -0
- package/esm/datepicker/styled-components.js +112 -55
- package/esm/datepicker/types.js +1 -1
- package/esm/datepicker/utils/calendar-header-helpers.js +45 -0
- package/esm/datepicker/utils/date-helpers.js +1 -1
- package/esm/datepicker/week.js +1 -0
- package/esm/dnd-list/index.js +2 -1
- package/esm/dnd-list/list.js +1 -2
- package/esm/dnd-list/styled-components.js +1 -1
- package/esm/drawer/close-icon.js +3 -2
- package/esm/drawer/drawer.js +5 -2
- package/esm/helper/helper.js +1 -0
- package/esm/layer/layer.js +8 -0
- package/esm/list/list-heading.js +17 -6
- package/esm/map-marker/constants.js +62 -0
- package/esm/map-marker/fixed-marker.js +137 -0
- package/esm/map-marker/floating-marker.js +94 -0
- package/esm/map-marker/index.js +9 -0
- package/esm/map-marker/pin-head.js +144 -0
- package/esm/map-marker/styled-components.js +168 -0
- package/esm/map-marker/types.js +8 -0
- package/esm/menu/maybe-child-menu.js +1 -0
- package/esm/popover/popover.js +6 -5
- package/esm/popover/stateful-container.js +8 -2
- package/esm/rating/emoticon-rating.js +2 -2
- package/esm/rating/star-rating.js +2 -2
- package/esm/select/select-component.js +19 -5
- package/esm/select/styled-components.js +28 -4
- package/esm/snackbar/snackbar-context.js +16 -4
- package/esm/spinner/styled-components.js +1 -1
- package/esm/table-semantic/styled-components.js +6 -4
- package/esm/table-semantic/table-builder.js +3 -0
- package/esm/themes/dark-theme/color-component-tokens.js +1 -1
- package/esm/themes/light-theme/color-component-tokens.js +9 -9
- package/esm/themes/shared/lighting.js +5 -1
- package/esm/timepicker/timepicker.js +17 -11
- package/esm/tooltip/styled-components.js +8 -0
- package/esm/tooltip/tooltip.js +1 -0
- package/helper/helper.js +1 -0
- package/helper/helper.js.flow +1 -0
- package/layer/layer.js +8 -0
- package/layer/layer.js.flow +9 -0
- package/link/index.d.ts +1 -0
- package/list/index.d.ts +36 -0
- package/list/list-heading.js +24 -7
- package/list/list-heading.js.flow +17 -8
- package/map-marker/constants.js +82 -0
- package/map-marker/constants.js.flow +74 -0
- package/map-marker/fixed-marker.js +152 -0
- package/map-marker/fixed-marker.js.flow +137 -0
- package/map-marker/floating-marker.js +109 -0
- package/map-marker/floating-marker.js.flow +102 -0
- package/map-marker/index.d.ts +105 -0
- package/map-marker/index.js +55 -0
- package/map-marker/index.js.flow +23 -0
- package/map-marker/package.json +4 -0
- package/map-marker/pin-head.js +159 -0
- package/map-marker/pin-head.js.flow +155 -0
- package/map-marker/styled-components.js +184 -0
- package/map-marker/styled-components.js.flow +177 -0
- package/map-marker/types.js +11 -0
- package/map-marker/types.js.flow +114 -0
- package/menu/index.d.ts +7 -0
- package/menu/maybe-child-menu.js +1 -0
- package/menu/maybe-child-menu.js.flow +1 -0
- package/menu/types.js.flow +12 -0
- package/modal/index.d.ts +1 -1
- package/modal/types.js.flow +4 -1
- package/package.json +5 -3
- package/popover/index.d.ts +2 -1
- package/popover/popover.js +6 -5
- package/popover/popover.js.flow +11 -4
- package/popover/stateful-container.js +8 -2
- package/popover/stateful-container.js.flow +5 -0
- package/popover/types.js.flow +6 -1
- package/rating/emoticon-rating.js +2 -2
- package/rating/emoticon-rating.js.flow +4 -1
- package/rating/star-rating.js +2 -2
- package/rating/star-rating.js.flow +4 -1
- package/select/select-component.js +19 -5
- package/select/select-component.js.flow +19 -5
- package/select/styled-components.js +28 -4
- package/select/styled-components.js.flow +30 -2
- package/select/types.js.flow +9 -0
- package/snackbar/index.d.ts +21 -16
- package/snackbar/snackbar-context.js +15 -4
- package/snackbar/snackbar-context.js.flow +15 -3
- package/spinner/styled-components.js +1 -1
- package/spinner/styled-components.js.flow +1 -1
- package/table-semantic/styled-components.js +6 -4
- package/table-semantic/styled-components.js.flow +6 -4
- package/table-semantic/table-builder.js +3 -0
- package/table-semantic/table-builder.js.flow +3 -0
- package/themes/dark-theme/color-component-tokens.js +1 -1
- package/themes/dark-theme/color-component-tokens.js.flow +1 -1
- package/themes/light-theme/color-component-tokens.js +9 -9
- package/themes/light-theme/color-component-tokens.js.flow +9 -9
- package/themes/shared/lighting.js +5 -1
- package/themes/shared/lighting.js.flow +4 -0
- package/themes/types.js.flow +4 -0
- package/timepicker/index.d.ts +1 -0
- package/timepicker/timepicker.js +17 -11
- package/timepicker/timepicker.js.flow +31 -12
- package/timepicker/types.js.flow +10 -0
- package/tooltip/styled-components.js +8 -0
- package/tooltip/styled-components.js.flow +8 -0
- package/tooltip/tooltip.js +1 -0
- package/tooltip/tooltip.js.flow +6 -1
|
@@ -0,0 +1,137 @@
|
|
|
1
|
+
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); }
|
|
2
|
+
|
|
3
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
4
|
+
|
|
5
|
+
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."); }
|
|
6
|
+
|
|
7
|
+
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); }
|
|
8
|
+
|
|
9
|
+
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; }
|
|
10
|
+
|
|
11
|
+
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; }
|
|
12
|
+
|
|
13
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
|
+
|
|
15
|
+
/*
|
|
16
|
+
Copyright (c) Uber Technologies, Inc.
|
|
17
|
+
|
|
18
|
+
This source code is licensed under the MIT license found in the
|
|
19
|
+
LICENSE file in the root directory of this source tree.
|
|
20
|
+
*/
|
|
21
|
+
import * as React from 'react';
|
|
22
|
+
import { useStyletron } from '../styles/index.js';
|
|
23
|
+
import { getOverrides } from '../helpers/overrides.js';
|
|
24
|
+
import { PINHEAD_TYPES, NEEDLE_SIZES, NEEDLE_HEIGHTS, PINHEAD_SIZES_SHAPES, dragShadowHeight, dragShadowMarginTop, dragShadowWidth } from './constants.js';
|
|
25
|
+
import PinHead from './pin-head.js';
|
|
26
|
+
import { FixedMarkerDragContainer as StyledFixedMarkerDragContainer, FixedMarkerRoot as StyledRoot, Needle as StyledNeedle, DragShadow as StyledDragShadow, DragShadowContainer as StyledDragShadowContainer } from './styled-components.js';
|
|
27
|
+
|
|
28
|
+
var Needle = function Needle(_ref) {
|
|
29
|
+
var size = _ref.size,
|
|
30
|
+
background = _ref.background,
|
|
31
|
+
_ref$overrides = _ref.overrides,
|
|
32
|
+
overrides = _ref$overrides === void 0 ? {} : _ref$overrides;
|
|
33
|
+
|
|
34
|
+
var _getOverrides = getOverrides(overrides.Needle, StyledNeedle),
|
|
35
|
+
_getOverrides2 = _slicedToArray(_getOverrides, 2),
|
|
36
|
+
Needle = _getOverrides2[0],
|
|
37
|
+
needleProps = _getOverrides2[1];
|
|
38
|
+
|
|
39
|
+
return /*#__PURE__*/React.createElement(Needle, _extends({
|
|
40
|
+
$background: background,
|
|
41
|
+
$height: NEEDLE_HEIGHTS[size]
|
|
42
|
+
}, needleProps));
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
var DragShadow = function DragShadow(_ref2) {
|
|
46
|
+
var background = _ref2.background,
|
|
47
|
+
dragging = _ref2.dragging,
|
|
48
|
+
height = _ref2.height,
|
|
49
|
+
_ref2$overrides = _ref2.overrides,
|
|
50
|
+
overrides = _ref2$overrides === void 0 ? {} : _ref2$overrides;
|
|
51
|
+
|
|
52
|
+
var _getOverrides3 = getOverrides(overrides.DragShadowContainer, StyledDragShadowContainer),
|
|
53
|
+
_getOverrides4 = _slicedToArray(_getOverrides3, 2),
|
|
54
|
+
DragShadowContainer = _getOverrides4[0],
|
|
55
|
+
dragShadowContainerProps = _getOverrides4[1];
|
|
56
|
+
|
|
57
|
+
var _getOverrides5 = getOverrides(overrides.DragShadow, StyledDragShadow),
|
|
58
|
+
_getOverrides6 = _slicedToArray(_getOverrides5, 2),
|
|
59
|
+
DragShadow = _getOverrides6[0],
|
|
60
|
+
dragShadowProps = _getOverrides6[1];
|
|
61
|
+
|
|
62
|
+
return /*#__PURE__*/React.createElement(DragShadowContainer, _extends({
|
|
63
|
+
$width: dragShadowWidth,
|
|
64
|
+
$height: height,
|
|
65
|
+
$dragging: dragging
|
|
66
|
+
}, dragShadowContainerProps), /*#__PURE__*/React.createElement(DragShadow, _extends({
|
|
67
|
+
$width: dragShadowWidth,
|
|
68
|
+
$background: background
|
|
69
|
+
}, dragShadowProps)));
|
|
70
|
+
};
|
|
71
|
+
|
|
72
|
+
var FixedMarker = function FixedMarker(_ref3) {
|
|
73
|
+
var _ref3$size = _ref3.size,
|
|
74
|
+
size = _ref3$size === void 0 ? PINHEAD_SIZES_SHAPES.medium : _ref3$size,
|
|
75
|
+
_ref3$needle = _ref3.needle,
|
|
76
|
+
needle = _ref3$needle === void 0 ? NEEDLE_SIZES.medium : _ref3$needle,
|
|
77
|
+
label = _ref3.label,
|
|
78
|
+
startEnhancer = _ref3.startEnhancer,
|
|
79
|
+
endEnhancer = _ref3.endEnhancer,
|
|
80
|
+
color = _ref3.color,
|
|
81
|
+
background = _ref3.background,
|
|
82
|
+
_ref3$dragging = _ref3.dragging,
|
|
83
|
+
dragging = _ref3$dragging === void 0 ? false : _ref3$dragging,
|
|
84
|
+
_ref3$overrides = _ref3.overrides,
|
|
85
|
+
overrides = _ref3$overrides === void 0 ? {} : _ref3$overrides;
|
|
86
|
+
|
|
87
|
+
var _useStyletron = useStyletron(),
|
|
88
|
+
_useStyletron2 = _slicedToArray(_useStyletron, 2),
|
|
89
|
+
theme = _useStyletron2[1];
|
|
90
|
+
|
|
91
|
+
var _theme$colors = theme.colors,
|
|
92
|
+
backgroundInversePrimary = _theme$colors.backgroundInversePrimary,
|
|
93
|
+
primaryB = _theme$colors.primaryB;
|
|
94
|
+
color = color || primaryB;
|
|
95
|
+
background = background || backgroundInversePrimary;
|
|
96
|
+
var doesPinHeadTransformOnDrag = needle !== NEEDLE_SIZES.none;
|
|
97
|
+
|
|
98
|
+
var _getOverrides7 = getOverrides(overrides.Root, StyledRoot),
|
|
99
|
+
_getOverrides8 = _slicedToArray(_getOverrides7, 2),
|
|
100
|
+
Root = _getOverrides8[0],
|
|
101
|
+
rootProps = _getOverrides8[1];
|
|
102
|
+
|
|
103
|
+
var _getOverrides9 = getOverrides(overrides.DragContainer, StyledFixedMarkerDragContainer),
|
|
104
|
+
_getOverrides10 = _slicedToArray(_getOverrides9, 2),
|
|
105
|
+
FixedMarkerDragContainer = _getOverrides10[0],
|
|
106
|
+
fixedMarkerDragContainerProps = _getOverrides10[1];
|
|
107
|
+
|
|
108
|
+
return /*#__PURE__*/React.createElement(Root, _extends({
|
|
109
|
+
"data-baseweb": "fixed-map-marker"
|
|
110
|
+
}, rootProps), /*#__PURE__*/React.createElement(FixedMarkerDragContainer, _extends({
|
|
111
|
+
$translateAmount: dragShadowMarginTop + dragShadowHeight,
|
|
112
|
+
$performTranslate: doesPinHeadTransformOnDrag && dragging
|
|
113
|
+
}, fixedMarkerDragContainerProps), /*#__PURE__*/React.createElement(PinHead, _extends({
|
|
114
|
+
size: size,
|
|
115
|
+
label: label
|
|
116
|
+
}, startEnhancer ? {
|
|
117
|
+
startEnhancer: startEnhancer
|
|
118
|
+
} : {}, endEnhancer ? {
|
|
119
|
+
endEnhancer: endEnhancer
|
|
120
|
+
} : {}, {
|
|
121
|
+
color: color,
|
|
122
|
+
background: background,
|
|
123
|
+
type: PINHEAD_TYPES.fixed,
|
|
124
|
+
overrides: overrides
|
|
125
|
+
})), /*#__PURE__*/React.createElement(Needle, {
|
|
126
|
+
size: needle,
|
|
127
|
+
background: background,
|
|
128
|
+
overrides: overrides
|
|
129
|
+
})), doesPinHeadTransformOnDrag && /*#__PURE__*/React.createElement(DragShadow, {
|
|
130
|
+
background: background,
|
|
131
|
+
dragging: dragging,
|
|
132
|
+
height: dragShadowMarginTop + dragShadowHeight,
|
|
133
|
+
overrides: overrides
|
|
134
|
+
}));
|
|
135
|
+
};
|
|
136
|
+
|
|
137
|
+
export default FixedMarker;
|
|
@@ -0,0 +1,94 @@
|
|
|
1
|
+
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); }
|
|
2
|
+
|
|
3
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
4
|
+
|
|
5
|
+
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."); }
|
|
6
|
+
|
|
7
|
+
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); }
|
|
8
|
+
|
|
9
|
+
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; }
|
|
10
|
+
|
|
11
|
+
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; }
|
|
12
|
+
|
|
13
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
|
+
|
|
15
|
+
/*
|
|
16
|
+
Copyright (c) Uber Technologies, Inc.
|
|
17
|
+
|
|
18
|
+
This source code is licensed under the MIT license found in the
|
|
19
|
+
LICENSE file in the root directory of this source tree.
|
|
20
|
+
*/
|
|
21
|
+
import * as React from 'react';
|
|
22
|
+
import { useStyletron } from '../styles/index.js';
|
|
23
|
+
import PinHead from './pin-head.js';
|
|
24
|
+
import { getOverrides } from '../helpers/overrides.js';
|
|
25
|
+
import { FloatingMarkerRoot as StyledRoot, FloatingMarkerAnchorContainer as StyledFloatingMarkerAnchorContainer, FloatingMarkerPinHeadContainer as StyledFloatingMarkerPinHeadContainer } from './styled-components.js';
|
|
26
|
+
import { FLOATING_MARKER_ANCHOR_POSITIONS, PINHEAD_SIZES_SHAPES, PINHEAD_TYPES, FLOATING_MARKER_ANCHOR_TYPES, anchorSize } from './constants.js';
|
|
27
|
+
|
|
28
|
+
var FloatingMarker = function FloatingMarker(_ref) {
|
|
29
|
+
var color = _ref.color,
|
|
30
|
+
background = _ref.background,
|
|
31
|
+
label = _ref.label,
|
|
32
|
+
_ref$size = _ref.size,
|
|
33
|
+
size = _ref$size === void 0 ? PINHEAD_SIZES_SHAPES.medium : _ref$size,
|
|
34
|
+
_ref$anchor = _ref.anchor,
|
|
35
|
+
anchor = _ref$anchor === void 0 ? FLOATING_MARKER_ANCHOR_POSITIONS.bottomLeft : _ref$anchor,
|
|
36
|
+
endEnhancer = _ref.endEnhancer,
|
|
37
|
+
startEnhancer = _ref.startEnhancer,
|
|
38
|
+
_ref$anchorType = _ref.anchorType,
|
|
39
|
+
anchorType = _ref$anchorType === void 0 ? FLOATING_MARKER_ANCHOR_TYPES.circle : _ref$anchorType,
|
|
40
|
+
_ref$overrides = _ref.overrides,
|
|
41
|
+
overrides = _ref$overrides === void 0 ? {} : _ref$overrides;
|
|
42
|
+
|
|
43
|
+
var _useStyletron = useStyletron(),
|
|
44
|
+
_useStyletron2 = _slicedToArray(_useStyletron, 2),
|
|
45
|
+
theme = _useStyletron2[1];
|
|
46
|
+
|
|
47
|
+
var _theme$colors = theme.colors,
|
|
48
|
+
backgroundPrimary = _theme$colors.backgroundPrimary,
|
|
49
|
+
backgroundInversePrimary = _theme$colors.backgroundInversePrimary,
|
|
50
|
+
primaryA = _theme$colors.primaryA,
|
|
51
|
+
primaryB = _theme$colors.primaryB;
|
|
52
|
+
color = color || primaryA;
|
|
53
|
+
background = background || backgroundPrimary;
|
|
54
|
+
var anchorPinHeadSize = anchorType === FLOATING_MARKER_ANCHOR_TYPES.circle ? PINHEAD_SIZES_SHAPES.xSmallCircle : PINHEAD_SIZES_SHAPES.xSmallSquare;
|
|
55
|
+
|
|
56
|
+
var _getOverrides = getOverrides(overrides.Root, StyledRoot),
|
|
57
|
+
_getOverrides2 = _slicedToArray(_getOverrides, 2),
|
|
58
|
+
Root = _getOverrides2[0],
|
|
59
|
+
rootProps = _getOverrides2[1];
|
|
60
|
+
|
|
61
|
+
var _getOverrides3 = getOverrides(overrides.PinHeadContainer, StyledFloatingMarkerPinHeadContainer),
|
|
62
|
+
_getOverrides4 = _slicedToArray(_getOverrides3, 2),
|
|
63
|
+
FloatingMarkerPinHeadContainer = _getOverrides4[0],
|
|
64
|
+
floatingMarkerPinHeadContainerProps = _getOverrides4[1];
|
|
65
|
+
|
|
66
|
+
var _getOverrides5 = getOverrides(overrides.AnchorContainer, StyledFloatingMarkerAnchorContainer),
|
|
67
|
+
_getOverrides6 = _slicedToArray(_getOverrides5, 2),
|
|
68
|
+
FloatingMarkerAnchorContainer = _getOverrides6[0],
|
|
69
|
+
floatingMarkerAnchorContainerProps = _getOverrides6[1];
|
|
70
|
+
|
|
71
|
+
return /*#__PURE__*/React.createElement(Root, _extends({
|
|
72
|
+
"data-baseweb": "floating-map-marker"
|
|
73
|
+
}, rootProps), /*#__PURE__*/React.createElement(FloatingMarkerPinHeadContainer, _extends({
|
|
74
|
+
$anchor: anchor,
|
|
75
|
+
$anchorSize: anchorSize
|
|
76
|
+
}, floatingMarkerPinHeadContainerProps), /*#__PURE__*/React.createElement(PinHead, {
|
|
77
|
+
size: size,
|
|
78
|
+
color: color,
|
|
79
|
+
background: background,
|
|
80
|
+
type: PINHEAD_TYPES.floating,
|
|
81
|
+
label: label,
|
|
82
|
+
startEnhancer: startEnhancer,
|
|
83
|
+
endEnhancer: endEnhancer,
|
|
84
|
+
overrides: overrides
|
|
85
|
+
})), anchor !== FLOATING_MARKER_ANCHOR_POSITIONS.none && /*#__PURE__*/React.createElement(FloatingMarkerAnchorContainer, floatingMarkerAnchorContainerProps, /*#__PURE__*/React.createElement(PinHead, {
|
|
86
|
+
size: anchorPinHeadSize,
|
|
87
|
+
color: primaryB,
|
|
88
|
+
background: backgroundInversePrimary,
|
|
89
|
+
type: PINHEAD_TYPES.fixed,
|
|
90
|
+
overrides: overrides
|
|
91
|
+
})));
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
export default FloatingMarker;
|
|
@@ -0,0 +1,9 @@
|
|
|
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
|
+
export { default as FixedMarker } from './fixed-marker.js';
|
|
8
|
+
export { default as FloatingMarker } from './floating-marker.js';
|
|
9
|
+
export { FLOATING_MARKER_ANCHOR_POSITIONS, FLOATING_MARKER_SIZES, FLOATING_MARKER_ANCHOR_TYPES, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES } from './constants.js';
|
|
@@ -0,0 +1,144 @@
|
|
|
1
|
+
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); }
|
|
2
|
+
|
|
3
|
+
function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
|
|
4
|
+
|
|
5
|
+
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."); }
|
|
6
|
+
|
|
7
|
+
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); }
|
|
8
|
+
|
|
9
|
+
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; }
|
|
10
|
+
|
|
11
|
+
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; }
|
|
12
|
+
|
|
13
|
+
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
14
|
+
|
|
15
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
16
|
+
|
|
17
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
18
|
+
|
|
19
|
+
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; }
|
|
20
|
+
|
|
21
|
+
/*
|
|
22
|
+
Copyright (c) Uber Technologies, Inc.
|
|
23
|
+
|
|
24
|
+
This source code is licensed under the MIT license found in the
|
|
25
|
+
LICENSE file in the root directory of this source tree.
|
|
26
|
+
*/
|
|
27
|
+
import * as React from 'react';
|
|
28
|
+
import { useStyletron, styled } from '../styles/index.js';
|
|
29
|
+
import { getOverrides } from '../helpers/overrides.js';
|
|
30
|
+
import { InnerXSmallAnchor as StyledInnerXSmallAnchor, OuterXSmallAnchor as StyledOuterXSmallAnchor, PinHead as StyledPinHead } from './styled-components.js';
|
|
31
|
+
import { PINHEAD_DIMENSIONS, PINHEAD_TYPES, PINHEAD_SIZES_SHAPES } from './constants.js';
|
|
32
|
+
export var _ContentItem = styled('div', function (_ref) {
|
|
33
|
+
var _match;
|
|
34
|
+
|
|
35
|
+
var $theme = _ref.$theme,
|
|
36
|
+
$color = _ref.$color,
|
|
37
|
+
$height = _ref.$height,
|
|
38
|
+
$size = _ref.$size;
|
|
39
|
+
var match = (_match = {}, _defineProperty(_match, PINHEAD_SIZES_SHAPES.xSmallCircle, 'LabelSmall'), _defineProperty(_match, PINHEAD_SIZES_SHAPES.xSmallSquare, 'LabelSmall'), _defineProperty(_match, PINHEAD_SIZES_SHAPES.small, 'LabelSmall'), _defineProperty(_match, PINHEAD_SIZES_SHAPES.medium, 'LabelMedium'), _defineProperty(_match, PINHEAD_SIZES_SHAPES.large, 'LabelLarge'), _match);
|
|
40
|
+
return _objectSpread(_objectSpread({}, $theme.typography[match[$size]]), {}, {
|
|
41
|
+
display: 'flex',
|
|
42
|
+
alignItems: 'center',
|
|
43
|
+
textAlign: 'center',
|
|
44
|
+
lineHeight: "".concat($height, "px"),
|
|
45
|
+
height: "".concat($height, "px"),
|
|
46
|
+
color: $color
|
|
47
|
+
});
|
|
48
|
+
});
|
|
49
|
+
_ContentItem.displayName = "_ContentItem";
|
|
50
|
+
|
|
51
|
+
var PinHead = function PinHead(_ref2) {
|
|
52
|
+
var _ref2$size = _ref2.size,
|
|
53
|
+
size = _ref2$size === void 0 ? PINHEAD_SIZES_SHAPES.medium : _ref2$size,
|
|
54
|
+
_ref2$label = _ref2.label,
|
|
55
|
+
label = _ref2$label === void 0 ? '' : _ref2$label,
|
|
56
|
+
StartEnhancer = _ref2.startEnhancer,
|
|
57
|
+
EndEnhancer = _ref2.endEnhancer,
|
|
58
|
+
color = _ref2.color,
|
|
59
|
+
background = _ref2.background,
|
|
60
|
+
_ref2$type = _ref2.type,
|
|
61
|
+
type = _ref2$type === void 0 ? PINHEAD_TYPES.fixed : _ref2$type,
|
|
62
|
+
anchorType = _ref2.anchorType,
|
|
63
|
+
_ref2$overrides = _ref2.overrides,
|
|
64
|
+
overrides = _ref2$overrides === void 0 ? {} : _ref2$overrides;
|
|
65
|
+
|
|
66
|
+
var _useStyletron = useStyletron(),
|
|
67
|
+
_useStyletron2 = _slicedToArray(_useStyletron, 2),
|
|
68
|
+
theme = _useStyletron2[1];
|
|
69
|
+
|
|
70
|
+
var _theme$colors = theme.colors,
|
|
71
|
+
backgroundPrimary = _theme$colors.backgroundPrimary,
|
|
72
|
+
primaryA = _theme$colors.primaryA;
|
|
73
|
+
color = color || backgroundPrimary;
|
|
74
|
+
background = background || primaryA;
|
|
75
|
+
var activeElements = [label, StartEnhancer, EndEnhancer].filter(function (x) {
|
|
76
|
+
return x;
|
|
77
|
+
});
|
|
78
|
+
var gridTemplateColumns = activeElements.map(function () {
|
|
79
|
+
return 'auto';
|
|
80
|
+
}).join(' ');
|
|
81
|
+
var forceCircle = activeElements.length === 1 && !label;
|
|
82
|
+
var _PINHEAD_DIMENSIONS$s = PINHEAD_DIMENSIONS[size],
|
|
83
|
+
height = _PINHEAD_DIMENSIONS$s.height,
|
|
84
|
+
icon = _PINHEAD_DIMENSIONS$s.icon;
|
|
85
|
+
|
|
86
|
+
var _getOverrides = getOverrides(overrides.PinHead, StyledPinHead),
|
|
87
|
+
_getOverrides2 = _slicedToArray(_getOverrides, 2),
|
|
88
|
+
PinHead = _getOverrides2[0],
|
|
89
|
+
pinHeadProps = _getOverrides2[1];
|
|
90
|
+
|
|
91
|
+
var _getOverrides3 = getOverrides(overrides.PinHeadContent, _ContentItem),
|
|
92
|
+
_getOverrides4 = _slicedToArray(_getOverrides3, 2),
|
|
93
|
+
ContentItem = _getOverrides4[0],
|
|
94
|
+
contentItemProps = _getOverrides4[1];
|
|
95
|
+
|
|
96
|
+
var _getOverrides5 = getOverrides(overrides.InnerAnchor, StyledInnerXSmallAnchor),
|
|
97
|
+
_getOverrides6 = _slicedToArray(_getOverrides5, 2),
|
|
98
|
+
InnerXSmallAnchor = _getOverrides6[0],
|
|
99
|
+
innerXSmallAnchorProps = _getOverrides6[1];
|
|
100
|
+
|
|
101
|
+
var _getOverrides7 = getOverrides(overrides.OuterAnchor, StyledOuterXSmallAnchor),
|
|
102
|
+
_getOverrides8 = _slicedToArray(_getOverrides7, 2),
|
|
103
|
+
OuterXSmallAnchor = _getOverrides8[0],
|
|
104
|
+
outerXSmallAnchorProps = _getOverrides8[1];
|
|
105
|
+
|
|
106
|
+
if (type === PINHEAD_TYPES.fixed && (size === PINHEAD_SIZES_SHAPES.xSmallSquare || size === PINHEAD_SIZES_SHAPES.xSmallCircle)) {
|
|
107
|
+
var round = size === PINHEAD_SIZES_SHAPES.xSmallCircle;
|
|
108
|
+
return /*#__PURE__*/React.createElement(OuterXSmallAnchor, _extends({
|
|
109
|
+
$round: round,
|
|
110
|
+
$background: background,
|
|
111
|
+
$size: height
|
|
112
|
+
}, outerXSmallAnchorProps), /*#__PURE__*/React.createElement(InnerXSmallAnchor, _extends({
|
|
113
|
+
$color: color,
|
|
114
|
+
$round: round,
|
|
115
|
+
$size: icon
|
|
116
|
+
}, innerXSmallAnchorProps)));
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
return /*#__PURE__*/React.createElement(PinHead, _extends({
|
|
120
|
+
$background: background,
|
|
121
|
+
$height: height,
|
|
122
|
+
$gridTemplateColumns: gridTemplateColumns,
|
|
123
|
+
$forceCircle: forceCircle,
|
|
124
|
+
$type: type
|
|
125
|
+
}, pinHeadProps), StartEnhancer && /*#__PURE__*/React.createElement(ContentItem, _extends({
|
|
126
|
+
$height: height,
|
|
127
|
+
$color: color,
|
|
128
|
+
$size: size
|
|
129
|
+
}, contentItemProps), /*#__PURE__*/React.createElement(StartEnhancer, {
|
|
130
|
+
size: icon
|
|
131
|
+
})), label && /*#__PURE__*/React.createElement(ContentItem, _extends({
|
|
132
|
+
$height: height,
|
|
133
|
+
$color: color,
|
|
134
|
+
$size: size
|
|
135
|
+
}, contentItemProps), label), EndEnhancer && /*#__PURE__*/React.createElement(ContentItem, _extends({
|
|
136
|
+
$height: height,
|
|
137
|
+
$color: color,
|
|
138
|
+
$size: size
|
|
139
|
+
}, contentItemProps), /*#__PURE__*/React.createElement(EndEnhancer, {
|
|
140
|
+
size: icon
|
|
141
|
+
})));
|
|
142
|
+
};
|
|
143
|
+
|
|
144
|
+
export default PinHead;
|
|
@@ -0,0 +1,168 @@
|
|
|
1
|
+
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
|
|
2
|
+
|
|
3
|
+
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
|
|
4
|
+
|
|
5
|
+
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; }
|
|
6
|
+
|
|
7
|
+
/*
|
|
8
|
+
Copyright (c) Uber Technologies, Inc.
|
|
9
|
+
|
|
10
|
+
This source code is licensed under the MIT license found in the
|
|
11
|
+
LICENSE file in the root directory of this source tree.
|
|
12
|
+
*/
|
|
13
|
+
import { styled } from '../styles/index.js';
|
|
14
|
+
import { FLOATING_MARKER_ANCHOR_POSITIONS, xSmallPinheadDimension } from './constants.js';
|
|
15
|
+
export var getAnchorTransform = function getAnchorTransform(anchor, anchorSize) {
|
|
16
|
+
var _FLOATING_MARKER_ANCH;
|
|
17
|
+
|
|
18
|
+
return (_FLOATING_MARKER_ANCH = {}, _defineProperty(_FLOATING_MARKER_ANCH, FLOATING_MARKER_ANCHOR_POSITIONS.none, ""), _defineProperty(_FLOATING_MARKER_ANCH, FLOATING_MARKER_ANCHOR_POSITIONS.topLeft, "translate(".concat(anchorSize, "px, ").concat(anchorSize, "px)")), _defineProperty(_FLOATING_MARKER_ANCH, FLOATING_MARKER_ANCHOR_POSITIONS.topRight, "translate(-100%, ".concat(anchorSize, "px)")), _defineProperty(_FLOATING_MARKER_ANCH, FLOATING_MARKER_ANCHOR_POSITIONS.bottomLeft, "translate(".concat(anchorSize, "px, -100%)")), _defineProperty(_FLOATING_MARKER_ANCH, FLOATING_MARKER_ANCHOR_POSITIONS.bottomRight, "translate(-100%, -100%)"), _FLOATING_MARKER_ANCH)[anchor];
|
|
19
|
+
};
|
|
20
|
+
export var DragShadowContainer = styled('div', function (_ref) {
|
|
21
|
+
var $theme = _ref.$theme,
|
|
22
|
+
$height = _ref.$height,
|
|
23
|
+
$width = _ref.$width,
|
|
24
|
+
$dragging = _ref.$dragging;
|
|
25
|
+
return {
|
|
26
|
+
width: "".concat($width, "px"),
|
|
27
|
+
height: "".concat($height, "px"),
|
|
28
|
+
opacity: $dragging ? 1 : 0,
|
|
29
|
+
visibility: $dragging ? 'visible' : 'hidden',
|
|
30
|
+
transition: "".concat($theme.animation.timing300, " ").concat($theme.animation.easeOutCurve, " all"),
|
|
31
|
+
position: 'relative',
|
|
32
|
+
boxShadow: $theme.lighting.shadow600
|
|
33
|
+
};
|
|
34
|
+
});
|
|
35
|
+
DragShadowContainer.displayName = "DragShadowContainer";
|
|
36
|
+
export var DragShadow = styled('div', function (_ref2) {
|
|
37
|
+
var $theme = _ref2.$theme,
|
|
38
|
+
$background = _ref2.$background,
|
|
39
|
+
$width = _ref2.$width;
|
|
40
|
+
return {
|
|
41
|
+
background: $background,
|
|
42
|
+
borderRadius: '50%',
|
|
43
|
+
width: "".concat($width, "px"),
|
|
44
|
+
height: "".concat(4, "px"),
|
|
45
|
+
position: 'absolute',
|
|
46
|
+
bottom: 0
|
|
47
|
+
};
|
|
48
|
+
});
|
|
49
|
+
DragShadow.displayName = "DragShadow";
|
|
50
|
+
export var Needle = styled('div', function (_ref3) {
|
|
51
|
+
var $theme = _ref3.$theme,
|
|
52
|
+
$background = _ref3.$background,
|
|
53
|
+
$height = _ref3.$height;
|
|
54
|
+
return {
|
|
55
|
+
background: $background,
|
|
56
|
+
width: '4px',
|
|
57
|
+
height: "".concat($height, "px"),
|
|
58
|
+
boxShadow: $theme.lighting.shadow600
|
|
59
|
+
};
|
|
60
|
+
});
|
|
61
|
+
Needle.displayName = "Needle";
|
|
62
|
+
export var FloatingMarkerRoot = styled('div', function () {
|
|
63
|
+
return {
|
|
64
|
+
position: 'relative',
|
|
65
|
+
height: "".concat(xSmallPinheadDimension.height, "px"),
|
|
66
|
+
width: "".concat(xSmallPinheadDimension.height, "px")
|
|
67
|
+
};
|
|
68
|
+
});
|
|
69
|
+
FloatingMarkerRoot.displayName = "FloatingMarkerRoot";
|
|
70
|
+
export var FloatingMarkerPinHeadContainer = styled('div', function (_ref4) {
|
|
71
|
+
var $theme = _ref4.$theme,
|
|
72
|
+
$anchor = _ref4.$anchor,
|
|
73
|
+
$anchorSize = _ref4.$anchorSize;
|
|
74
|
+
return {
|
|
75
|
+
position: 'absolute',
|
|
76
|
+
transition: "".concat($theme.animation.timing300, " ").concat($theme.animation.easeOutCurve, " all"),
|
|
77
|
+
transform: getAnchorTransform($anchor, $anchorSize)
|
|
78
|
+
};
|
|
79
|
+
});
|
|
80
|
+
FloatingMarkerPinHeadContainer.displayName = "FloatingMarkerPinHeadContainer";
|
|
81
|
+
export var FloatingMarkerAnchorContainer = styled('div', function () {
|
|
82
|
+
return {
|
|
83
|
+
position: 'absolute'
|
|
84
|
+
};
|
|
85
|
+
});
|
|
86
|
+
FloatingMarkerAnchorContainer.displayName = "FloatingMarkerAnchorContainer";
|
|
87
|
+
export var FixedMarkerRoot = styled('div', function () {
|
|
88
|
+
return {
|
|
89
|
+
display: 'flex',
|
|
90
|
+
alignItems: 'center',
|
|
91
|
+
flexDirection: 'column'
|
|
92
|
+
};
|
|
93
|
+
});
|
|
94
|
+
FixedMarkerRoot.displayName = "FixedMarkerRoot";
|
|
95
|
+
export var FixedMarkerDragContainer = styled('div', function (_ref5) {
|
|
96
|
+
var $theme = _ref5.$theme,
|
|
97
|
+
$translateAmount = _ref5.$translateAmount,
|
|
98
|
+
$performTranslate = _ref5.$performTranslate;
|
|
99
|
+
return {
|
|
100
|
+
transform: "translateY(".concat($performTranslate ? '0px' : "".concat($translateAmount, "px"), ")"),
|
|
101
|
+
transition: "".concat($theme.animation.timing300, " ").concat($theme.animation.easeOutCurve, " all"),
|
|
102
|
+
display: 'flex',
|
|
103
|
+
alignItems: 'center',
|
|
104
|
+
flexDirection: 'column'
|
|
105
|
+
};
|
|
106
|
+
});
|
|
107
|
+
FixedMarkerDragContainer.displayName = "FixedMarkerDragContainer";
|
|
108
|
+
export var OuterXSmallAnchor = styled('div', function (_ref6) {
|
|
109
|
+
var $theme = _ref6.$theme,
|
|
110
|
+
$round = _ref6.$round,
|
|
111
|
+
$background = _ref6.$background,
|
|
112
|
+
$size = _ref6.$size;
|
|
113
|
+
return {
|
|
114
|
+
background: $background,
|
|
115
|
+
display: 'flex',
|
|
116
|
+
alignItems: 'center',
|
|
117
|
+
justifyContent: 'center',
|
|
118
|
+
height: "".concat($size, "px"),
|
|
119
|
+
width: "".concat($size, "px"),
|
|
120
|
+
borderRadius: $round ? '50%' : 0,
|
|
121
|
+
boxShadow: $theme.lighting.shadow600
|
|
122
|
+
};
|
|
123
|
+
});
|
|
124
|
+
OuterXSmallAnchor.displayName = "OuterXSmallAnchor";
|
|
125
|
+
export var InnerXSmallAnchor = styled('div', function (_ref7) {
|
|
126
|
+
var $round = _ref7.$round,
|
|
127
|
+
$color = _ref7.$color,
|
|
128
|
+
$size = _ref7.$size;
|
|
129
|
+
return {
|
|
130
|
+
background: $color,
|
|
131
|
+
height: "".concat($size, "px"),
|
|
132
|
+
width: "".concat($size, "px"),
|
|
133
|
+
borderRadius: $round ? '50%' : 0
|
|
134
|
+
};
|
|
135
|
+
});
|
|
136
|
+
InnerXSmallAnchor.displayName = "InnerXSmallAnchor";
|
|
137
|
+
export var PinHead = styled('div', function (_ref8) {
|
|
138
|
+
var $theme = _ref8.$theme,
|
|
139
|
+
$height = _ref8.$height,
|
|
140
|
+
$background = _ref8.$background,
|
|
141
|
+
$gridTemplateColumns = _ref8.$gridTemplateColumns,
|
|
142
|
+
$type = _ref8.$type,
|
|
143
|
+
$forceCircle = _ref8.$forceCircle;
|
|
144
|
+
var sharedStyles = {
|
|
145
|
+
fixed: {
|
|
146
|
+
padding: '0px 12px',
|
|
147
|
+
borderRadius: "".concat($height, "px")
|
|
148
|
+
},
|
|
149
|
+
floating: {
|
|
150
|
+
padding: '0px 8px'
|
|
151
|
+
}
|
|
152
|
+
};
|
|
153
|
+
return _objectSpread(_objectSpread({
|
|
154
|
+
background: $background,
|
|
155
|
+
height: "".concat($height, "px"),
|
|
156
|
+
display: 'grid',
|
|
157
|
+
gridTemplateColumns: $gridTemplateColumns,
|
|
158
|
+
gap: '8px',
|
|
159
|
+
boxShadow: $theme.lighting.shadow600,
|
|
160
|
+
whiteSpace: 'nowrap'
|
|
161
|
+
}, sharedStyles[$type]), $forceCircle && {
|
|
162
|
+
width: "".concat($height, "px"),
|
|
163
|
+
display: 'flex',
|
|
164
|
+
justifyContent: 'center',
|
|
165
|
+
boxSizing: 'border-box'
|
|
166
|
+
});
|
|
167
|
+
});
|
|
168
|
+
PinHead.displayName = "PinHead";
|
|
@@ -0,0 +1,8 @@
|
|
|
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
|
+
import * as React from 'react';
|
|
8
|
+
import { FLOATING_MARKER_ANCHOR_POSITIONS, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES, FLOATING_MARKER_SIZES, PINHEAD_TYPES, FLOATING_MARKER_ANCHOR_TYPES } from './constants.js';
|
|
@@ -44,6 +44,7 @@ export default function MaybeChildMenu(props) {
|
|
|
44
44
|
return /*#__PURE__*/React.createElement(NestedMenuContext.Consumer, null, function (ctx) {
|
|
45
45
|
return /*#__PURE__*/React.createElement(PopoverOverride, _extends({
|
|
46
46
|
focusLock: false,
|
|
47
|
+
autoFocus: false,
|
|
47
48
|
isOpen: props.isOpen,
|
|
48
49
|
renderAll: props.renderAll,
|
|
49
50
|
content: ChildMenu,
|
package/esm/popover/popover.js
CHANGED
|
@@ -39,7 +39,7 @@ LICENSE file in the root directory of this source tree.
|
|
|
39
39
|
|
|
40
40
|
/* eslint-disable cup/no-undef */
|
|
41
41
|
import * as React from 'react';
|
|
42
|
-
import FocusLock from 'react-focus-lock';
|
|
42
|
+
import FocusLock, { MoveFocusInside } from 'react-focus-lock';
|
|
43
43
|
import { getOverride, getOverrideProps } from '../helpers/overrides.js';
|
|
44
44
|
import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE, ANIMATE_OUT_TIME, ANIMATE_IN_TIME, POPOVER_MARGIN } from './constants.js';
|
|
45
45
|
import { Layer, TetherBehavior } from '../layer/index.js';
|
|
@@ -202,7 +202,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
|
|
|
202
202
|
value: function componentDidUpdate(prevProps, prevState) {
|
|
203
203
|
this.init(prevProps, prevState);
|
|
204
204
|
|
|
205
|
-
if (this.props.autoFocus &&
|
|
205
|
+
if (this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
|
|
206
206
|
this.setState({
|
|
207
207
|
autoFocusAfterPositioning: true
|
|
208
208
|
});
|
|
@@ -514,9 +514,10 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
|
|
|
514
514
|
disabled: !this.props.focusLock,
|
|
515
515
|
noFocusGuards: false // see popover-focus-loop.scenario.js for why hover cannot return focus
|
|
516
516
|
,
|
|
517
|
-
returnFocus: this.
|
|
518
|
-
autoFocus: this.state.autoFocusAfterPositioning
|
|
519
|
-
|
|
517
|
+
returnFocus: !this.isHoverTrigger() && this.props.returnFocus,
|
|
518
|
+
autoFocus: this.state.autoFocusAfterPositioning,
|
|
519
|
+
focusOptions: this.props.focusOptions
|
|
520
|
+
}, !this.props.focusLock && this.state.autoFocusAfterPositioning ? /*#__PURE__*/React.createElement(MoveFocusInside, null, this.renderPopover(renderedContent)) : this.renderPopover(renderedContent)))));
|
|
520
521
|
} else {
|
|
521
522
|
rendered.push( /*#__PURE__*/React.createElement(Hidden, {
|
|
522
523
|
key: "hidden-layer"
|
|
@@ -64,6 +64,10 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
64
64
|
_this.props.onBlur(e);
|
|
65
65
|
}
|
|
66
66
|
|
|
67
|
+
if (_this.props.focusLock || _this.props.autoFocus) {
|
|
68
|
+
return;
|
|
69
|
+
}
|
|
70
|
+
|
|
67
71
|
_this.close();
|
|
68
72
|
});
|
|
69
73
|
|
|
@@ -202,7 +206,8 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
202
206
|
returnFocus = _this$props.returnFocus,
|
|
203
207
|
showArrow = _this$props.showArrow,
|
|
204
208
|
triggerType = _this$props.triggerType,
|
|
205
|
-
popoverMargin = _this$props.popoverMargin
|
|
209
|
+
popoverMargin = _this$props.popoverMargin,
|
|
210
|
+
focusOptions = _this$props.focusOptions;
|
|
206
211
|
var popoverProps = {
|
|
207
212
|
accessibilityType: accessibilityType,
|
|
208
213
|
autoFocus: autoFocus,
|
|
@@ -225,7 +230,8 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
|
|
|
225
230
|
returnFocus: returnFocus,
|
|
226
231
|
showArrow: showArrow,
|
|
227
232
|
triggerType: triggerType,
|
|
228
|
-
popoverMargin: popoverMargin
|
|
233
|
+
popoverMargin: popoverMargin,
|
|
234
|
+
focusOptions: focusOptions
|
|
229
235
|
};
|
|
230
236
|
|
|
231
237
|
if (dismissOnClickOutside) {
|
|
@@ -213,8 +213,8 @@ var EmoticonRating = /*#__PURE__*/function (_React$Component) {
|
|
|
213
213
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
|
214
214
|
"data-baseweb": "emoticon-rating",
|
|
215
215
|
role: "radiogroup",
|
|
216
|
-
onBlur: function onBlur() {
|
|
217
|
-
|
|
216
|
+
onBlur: function onBlur(e) {
|
|
217
|
+
if (!e.currentTarget.contains(e.relatedTarget)) _this2.updatePreview(undefined);
|
|
218
218
|
},
|
|
219
219
|
onMouseLeave: function onMouseLeave() {
|
|
220
220
|
return _this2.updatePreview(undefined);
|
|
@@ -216,8 +216,8 @@ var StarRating = /*#__PURE__*/function (_React$Component) {
|
|
|
216
216
|
return /*#__PURE__*/React.createElement(Root, _extends({
|
|
217
217
|
"data-baseweb": "star-rating",
|
|
218
218
|
role: "radiogroup",
|
|
219
|
-
onBlur: function onBlur() {
|
|
220
|
-
|
|
219
|
+
onBlur: function onBlur(e) {
|
|
220
|
+
if (!e.currentTarget.contains(e.relatedTarget)) _this2.updatePreview(undefined);
|
|
221
221
|
},
|
|
222
222
|
onMouseLeave: function onMouseLeave() {
|
|
223
223
|
return _this2.updatePreview(undefined);
|