@zendeskgarden/react-dropdowns 8.47.1 → 8.47.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +288 -303
- package/dist/index.esm.js +100 -111
- package/dist/typings/elements/Dropdown/Dropdown.d.ts +2 -3
- package/dist/typings/elements/Menu/Items/AddItem.d.ts +1 -1
- package/dist/typings/elements/Menu/Items/NextItem.d.ts +1 -1
- package/dist/typings/elements/Menu/Items/PreviousItem.d.ts +1 -1
- package/dist/typings/elements/Menu/Menu.d.ts +1 -2
- package/dist/typings/elements/Multiselect/Multiselect.d.ts +1 -2
- package/dist/typings/index.d.ts +3 -3
- package/dist/typings/styled/items/media/StyledMediaFigure.d.ts +179 -179
- package/package.json +5 -5
package/dist/index.esm.js
CHANGED
|
@@ -8,12 +8,12 @@
|
|
|
8
8
|
import * as React from 'react';
|
|
9
9
|
import React__default, { useContext, useRef, useState, Children, useEffect, useCallback, useMemo } from 'react';
|
|
10
10
|
import PropTypes from 'prop-types';
|
|
11
|
+
import styled, { ThemeContext, css } from 'styled-components';
|
|
11
12
|
import Downshift from 'downshift';
|
|
12
13
|
export { resetIdCounter } from 'downshift';
|
|
13
14
|
import { Manager, Reference, Popper } from 'react-popper';
|
|
14
|
-
import { withTheme, isRtl, arrowStyles, retrieveComponentStyles, DEFAULT_THEME, menuStyles, getColor, getLineHeight } from '@zendeskgarden/react-theming';
|
|
15
15
|
import { composeEventHandlers, KEY_CODES } from '@zendeskgarden/container-utilities';
|
|
16
|
-
import
|
|
16
|
+
import { arrowStyles, retrieveComponentStyles, DEFAULT_THEME, menuStyles, getColor, getLineHeight } from '@zendeskgarden/react-theming';
|
|
17
17
|
import { rgba, math } from 'polished';
|
|
18
18
|
import { FauxInput, Input, MediaInput, Field as Field$1, Hint as Hint$1, Label as Label$1, Message as Message$1 } from '@zendeskgarden/react-forms';
|
|
19
19
|
import mergeRefs from 'react-merge-refs';
|
|
@@ -24,14 +24,9 @@ function ownKeys(object, enumerableOnly) {
|
|
|
24
24
|
|
|
25
25
|
if (Object.getOwnPropertySymbols) {
|
|
26
26
|
var symbols = Object.getOwnPropertySymbols(object);
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
31
|
-
});
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
keys.push.apply(keys, symbols);
|
|
27
|
+
enumerableOnly && (symbols = symbols.filter(function (sym) {
|
|
28
|
+
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
|
|
29
|
+
})), keys.push.apply(keys, symbols);
|
|
35
30
|
}
|
|
36
31
|
|
|
37
32
|
return keys;
|
|
@@ -39,19 +34,12 @@ function ownKeys(object, enumerableOnly) {
|
|
|
39
34
|
|
|
40
35
|
function _objectSpread2(target) {
|
|
41
36
|
for (var i = 1; i < arguments.length; i++) {
|
|
42
|
-
var source = arguments[i]
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
} else if (Object.getOwnPropertyDescriptors) {
|
|
49
|
-
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
|
|
50
|
-
} else {
|
|
51
|
-
ownKeys(Object(source)).forEach(function (key) {
|
|
52
|
-
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
53
|
-
});
|
|
54
|
-
}
|
|
37
|
+
var source = null != arguments[i] ? arguments[i] : {};
|
|
38
|
+
i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
|
|
39
|
+
_defineProperty(target, key, source[key]);
|
|
40
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
|
|
41
|
+
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
|
|
42
|
+
});
|
|
55
43
|
}
|
|
56
44
|
|
|
57
45
|
return target;
|
|
@@ -218,6 +206,7 @@ var Dropdown = function Dropdown(props) {
|
|
|
218
206
|
_useState2 = _slicedToArray(_useState, 2),
|
|
219
207
|
dropdownType = _useState2[0],
|
|
220
208
|
setDropdownType = _useState2[1];
|
|
209
|
+
var themeContext = useContext(ThemeContext);
|
|
221
210
|
var hasMenuRef = useRef(false);
|
|
222
211
|
var popperReferenceElementRef = useRef(null);
|
|
223
212
|
var customGetInputProps = function customGetInputProps(_ref, downshift, rtl) {
|
|
@@ -255,7 +244,7 @@ var Dropdown = function Dropdown(props) {
|
|
|
255
244
|
downshift = _objectWithoutProperties(_ref2, _excluded2$6);
|
|
256
245
|
return _objectSpread2({
|
|
257
246
|
getInputProps: function getInputProps(p) {
|
|
258
|
-
return _getInputProps(customGetInputProps(p, downshift,
|
|
247
|
+
return _getInputProps(customGetInputProps(p, downshift, themeContext.rtl));
|
|
259
248
|
},
|
|
260
249
|
getToggleButtonProps: function getToggleButtonProps(p) {
|
|
261
250
|
return _getToggleButtonProps(_objectSpread2({
|
|
@@ -352,7 +341,6 @@ Dropdown.propTypes = {
|
|
|
352
341
|
onStateChange: PropTypes.func,
|
|
353
342
|
downshiftProps: PropTypes.object
|
|
354
343
|
};
|
|
355
|
-
var Dropdown$1 = withTheme(Dropdown);
|
|
356
344
|
|
|
357
345
|
function getPopperPlacement(gardenPlacement) {
|
|
358
346
|
switch (gardenPlacement) {
|
|
@@ -428,7 +416,7 @@ var COMPONENT_ID$m = 'dropdowns.menu';
|
|
|
428
416
|
var StyledMenu = styled.ul.attrs(function (props) {
|
|
429
417
|
return {
|
|
430
418
|
'data-garden-id': COMPONENT_ID$m,
|
|
431
|
-
'data-garden-version': '8.47.
|
|
419
|
+
'data-garden-version': '8.47.2',
|
|
432
420
|
className: props.isAnimated && 'is-animated'
|
|
433
421
|
};
|
|
434
422
|
}).withConfig({
|
|
@@ -453,7 +441,7 @@ var COMPONENT_ID$l = 'dropdowns.menu_wrapper';
|
|
|
453
441
|
var StyledMenuWrapper = styled.div.attrs(function (props) {
|
|
454
442
|
return {
|
|
455
443
|
'data-garden-id': COMPONENT_ID$l,
|
|
456
|
-
'data-garden-version': '8.47.
|
|
444
|
+
'data-garden-version': '8.47.2',
|
|
457
445
|
className: props.isAnimated && 'is-animated'
|
|
458
446
|
};
|
|
459
447
|
}).withConfig({
|
|
@@ -477,7 +465,7 @@ StyledMenuWrapper.defaultProps = {
|
|
|
477
465
|
var COMPONENT_ID$k = 'dropdowns.separator';
|
|
478
466
|
var StyledSeparator = styled.li.attrs({
|
|
479
467
|
'data-garden-id': COMPONENT_ID$k,
|
|
480
|
-
'data-garden-version': '8.47.
|
|
468
|
+
'data-garden-version': '8.47.2',
|
|
481
469
|
role: 'separator'
|
|
482
470
|
}).withConfig({
|
|
483
471
|
displayName: "StyledSeparator",
|
|
@@ -517,7 +505,7 @@ var getColorStyles = function getColorStyles(props) {
|
|
|
517
505
|
var StyledItem = styled.li.attrs(function (props) {
|
|
518
506
|
return {
|
|
519
507
|
'data-garden-id': COMPONENT_ID$j,
|
|
520
|
-
'data-garden-version': '8.47.
|
|
508
|
+
'data-garden-version': '8.47.2',
|
|
521
509
|
'aria-disabled': props.disabled
|
|
522
510
|
};
|
|
523
511
|
}).withConfig({
|
|
@@ -547,7 +535,7 @@ StyledItem.defaultProps = {
|
|
|
547
535
|
var COMPONENT_ID$i = 'dropdowns.add_item';
|
|
548
536
|
var StyledAddItem = styled(StyledItem).attrs({
|
|
549
537
|
'data-garden-id': COMPONENT_ID$i,
|
|
550
|
-
'data-garden-version': '8.47.
|
|
538
|
+
'data-garden-version': '8.47.2'
|
|
551
539
|
}).withConfig({
|
|
552
540
|
displayName: "StyledAddItem",
|
|
553
541
|
componentId: "sc-ekqk50-0"
|
|
@@ -563,7 +551,7 @@ StyledAddItem.defaultProps = {
|
|
|
563
551
|
var COMPONENT_ID$h = 'dropdowns.item_meta';
|
|
564
552
|
var StyledItemMeta = styled.span.attrs({
|
|
565
553
|
'data-garden-id': COMPONENT_ID$h,
|
|
566
|
-
'data-garden-version': '8.47.
|
|
554
|
+
'data-garden-version': '8.47.2'
|
|
567
555
|
}).withConfig({
|
|
568
556
|
displayName: "StyledItemMeta",
|
|
569
557
|
componentId: "sc-k6xy28-0"
|
|
@@ -586,7 +574,7 @@ var getSizeStyles = function getSizeStyles(props) {
|
|
|
586
574
|
};
|
|
587
575
|
var StyledItemIcon = styled.div.attrs({
|
|
588
576
|
'data-garden-id': COMPONENT_ID$g,
|
|
589
|
-
'data-garden-version': '8.47.
|
|
577
|
+
'data-garden-version': '8.47.2'
|
|
590
578
|
}).withConfig({
|
|
591
579
|
displayName: "StyledItemIcon",
|
|
592
580
|
componentId: "sc-1v0ty11-0"
|
|
@@ -612,7 +600,7 @@ StyledItemIcon.defaultProps = {
|
|
|
612
600
|
var COMPONENT_ID$f = 'dropdowns.next_item';
|
|
613
601
|
var StyledNextItem = styled(StyledItem).attrs({
|
|
614
602
|
'data-garden-id': COMPONENT_ID$f,
|
|
615
|
-
'data-garden-version': '8.47.
|
|
603
|
+
'data-garden-version': '8.47.2'
|
|
616
604
|
}).withConfig({
|
|
617
605
|
displayName: "StyledNextItem",
|
|
618
606
|
componentId: "sc-1bcygn5-0"
|
|
@@ -627,30 +615,30 @@ StyledNextItem.defaultProps = {
|
|
|
627
615
|
theme: DEFAULT_THEME
|
|
628
616
|
};
|
|
629
617
|
|
|
630
|
-
|
|
618
|
+
var _path$4;
|
|
631
619
|
|
|
632
|
-
|
|
633
|
-
fill: "currentColor",
|
|
634
|
-
d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
|
|
635
|
-
});
|
|
620
|
+
function _extends$4() { _extends$4 = 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$4.apply(this, arguments); }
|
|
636
621
|
|
|
637
|
-
function SvgChevronRightStroke(props) {
|
|
622
|
+
var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
|
|
638
623
|
return /*#__PURE__*/React.createElement("svg", _extends$4({
|
|
639
624
|
xmlns: "http://www.w3.org/2000/svg",
|
|
640
625
|
width: 16,
|
|
641
626
|
height: 16,
|
|
642
|
-
viewBox: "0 0 16 16",
|
|
643
627
|
focusable: "false",
|
|
644
|
-
|
|
645
|
-
|
|
646
|
-
}
|
|
628
|
+
viewBox: "0 0 16 16",
|
|
629
|
+
"aria-hidden": "true"
|
|
630
|
+
}, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
|
|
631
|
+
fill: "currentColor",
|
|
632
|
+
d: "M5.61 3.312a.5.5 0 01.718-.69l.062.066 4 5a.5.5 0 01.054.542l-.054.082-4 5a.5.5 0 01-.83-.55l.05-.074L9.359 8l-3.75-4.688z"
|
|
633
|
+
})));
|
|
634
|
+
};
|
|
647
635
|
|
|
648
636
|
var COMPONENT_ID$e = 'dropdowns.next_item_icon';
|
|
649
637
|
var NextIconComponent = function NextIconComponent(_ref) {
|
|
650
638
|
var className = _ref.className;
|
|
651
639
|
return React__default.createElement(SvgChevronRightStroke, {
|
|
652
640
|
"data-garden-id": COMPONENT_ID$e,
|
|
653
|
-
"data-garden-version": '8.47.
|
|
641
|
+
"data-garden-version": '8.47.2',
|
|
654
642
|
className: className
|
|
655
643
|
});
|
|
656
644
|
};
|
|
@@ -671,7 +659,7 @@ StyledNextIcon.defaultProps = {
|
|
|
671
659
|
var COMPONENT_ID$d = 'dropdowns.previous_item';
|
|
672
660
|
var StyledPreviousItem = styled(StyledItem).attrs({
|
|
673
661
|
'data-garden-id': COMPONENT_ID$d,
|
|
674
|
-
'data-garden-version': '8.47.
|
|
662
|
+
'data-garden-version': '8.47.2'
|
|
675
663
|
}).withConfig({
|
|
676
664
|
displayName: "StyledPreviousItem",
|
|
677
665
|
componentId: "sc-1nmdds9-0"
|
|
@@ -684,30 +672,30 @@ StyledPreviousItem.defaultProps = {
|
|
|
684
672
|
theme: DEFAULT_THEME
|
|
685
673
|
};
|
|
686
674
|
|
|
687
|
-
|
|
675
|
+
var _path$3;
|
|
688
676
|
|
|
689
|
-
|
|
690
|
-
fill: "currentColor",
|
|
691
|
-
d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
|
|
692
|
-
});
|
|
677
|
+
function _extends$3() { _extends$3 = 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$3.apply(this, arguments); }
|
|
693
678
|
|
|
694
|
-
function SvgChevronLeftStroke(props) {
|
|
679
|
+
var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
|
|
695
680
|
return /*#__PURE__*/React.createElement("svg", _extends$3({
|
|
696
681
|
xmlns: "http://www.w3.org/2000/svg",
|
|
697
682
|
width: 16,
|
|
698
683
|
height: 16,
|
|
699
|
-
viewBox: "0 0 16 16",
|
|
700
684
|
focusable: "false",
|
|
701
|
-
|
|
702
|
-
|
|
703
|
-
}
|
|
685
|
+
viewBox: "0 0 16 16",
|
|
686
|
+
"aria-hidden": "true"
|
|
687
|
+
}, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
|
|
688
|
+
fill: "currentColor",
|
|
689
|
+
d: "M10.39 12.688a.5.5 0 01-.718.69l-.062-.066-4-5a.5.5 0 01-.054-.542l.054-.082 4-5a.5.5 0 01.83.55l-.05.074L6.641 8l3.75 4.688z"
|
|
690
|
+
})));
|
|
691
|
+
};
|
|
704
692
|
|
|
705
693
|
var COMPONENT_ID$c = 'dropdowns.previous_item_icon';
|
|
706
694
|
var PreviousIconComponent = function PreviousIconComponent(_ref) {
|
|
707
695
|
var className = _ref.className;
|
|
708
696
|
return React__default.createElement(SvgChevronLeftStroke, {
|
|
709
697
|
"data-garden-id": COMPONENT_ID$c,
|
|
710
|
-
"data-garden-version": '8.47.
|
|
698
|
+
"data-garden-version": '8.47.2',
|
|
711
699
|
className: className
|
|
712
700
|
});
|
|
713
701
|
};
|
|
@@ -728,7 +716,7 @@ StyledPreviousIcon.defaultProps = {
|
|
|
728
716
|
var COMPONENT_ID$b = 'dropdowns.header_icon';
|
|
729
717
|
var StyledHeaderIcon = styled.div.attrs({
|
|
730
718
|
'data-garden-id': COMPONENT_ID$b,
|
|
731
|
-
'data-garden-version': '8.47.
|
|
719
|
+
'data-garden-version': '8.47.2'
|
|
732
720
|
}).withConfig({
|
|
733
721
|
displayName: "StyledHeaderIcon",
|
|
734
722
|
componentId: "sc-1fl6nsz-0"
|
|
@@ -758,7 +746,7 @@ var getHorizontalPadding = function getHorizontalPadding(props) {
|
|
|
758
746
|
};
|
|
759
747
|
var StyledHeaderItem = styled(StyledItem).attrs({
|
|
760
748
|
'data-garden-id': COMPONENT_ID$a,
|
|
761
|
-
'data-garden-version': '8.47.
|
|
749
|
+
'data-garden-version': '8.47.2'
|
|
762
750
|
}).withConfig({
|
|
763
751
|
displayName: "StyledHeaderItem",
|
|
764
752
|
componentId: "sc-137filx-0"
|
|
@@ -778,7 +766,7 @@ StyledHeaderItem.defaultProps = {
|
|
|
778
766
|
var COMPONENT_ID$9 = 'dropdowns.media_body';
|
|
779
767
|
var StyledMediaBody = styled.div.attrs({
|
|
780
768
|
'data-garden-id': COMPONENT_ID$9,
|
|
781
|
-
'data-garden-version': '8.47.
|
|
769
|
+
'data-garden-version': '8.47.2'
|
|
782
770
|
}).withConfig({
|
|
783
771
|
displayName: "StyledMediaBody",
|
|
784
772
|
componentId: "sc-36j7ef-0"
|
|
@@ -806,7 +794,7 @@ function (_ref) {
|
|
|
806
794
|
);
|
|
807
795
|
}).attrs({
|
|
808
796
|
'data-garden-id': COMPONENT_ID$8,
|
|
809
|
-
'data-garden-version': '8.47.
|
|
797
|
+
'data-garden-version': '8.47.2'
|
|
810
798
|
}).withConfig({
|
|
811
799
|
displayName: "StyledMediaFigure",
|
|
812
800
|
componentId: "sc-2f2x8x-0"
|
|
@@ -828,7 +816,7 @@ StyledMediaFigure.defaultProps = {
|
|
|
828
816
|
var COMPONENT_ID$7 = 'dropdowns.media_item';
|
|
829
817
|
var StyledMediaItem = styled(StyledItem).attrs({
|
|
830
818
|
'data-garden-id': COMPONENT_ID$7,
|
|
831
|
-
'data-garden-version': '8.47.
|
|
819
|
+
'data-garden-version': '8.47.2'
|
|
832
820
|
}).withConfig({
|
|
833
821
|
displayName: "StyledMediaItem",
|
|
834
822
|
componentId: "sc-ikwshz-0"
|
|
@@ -843,7 +831,7 @@ var COMPONENT_ID$6 = 'dropdowns.faux_input';
|
|
|
843
831
|
var StyledFauxInput = styled(FauxInput).attrs(function (props) {
|
|
844
832
|
return {
|
|
845
833
|
'data-garden-id': COMPONENT_ID$6,
|
|
846
|
-
'data-garden-version': '8.47.
|
|
834
|
+
'data-garden-version': '8.47.2',
|
|
847
835
|
mediaLayout: true,
|
|
848
836
|
theme: props.theme
|
|
849
837
|
};
|
|
@@ -865,7 +853,7 @@ var COMPONENT_ID$5 = 'dropdowns.input';
|
|
|
865
853
|
var hiddenStyling = css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
|
|
866
854
|
var StyledInput = styled(Input).attrs({
|
|
867
855
|
'data-garden-id': COMPONENT_ID$5,
|
|
868
|
-
'data-garden-version': '8.47.
|
|
856
|
+
'data-garden-version': '8.47.2',
|
|
869
857
|
isBare: true
|
|
870
858
|
}).withConfig({
|
|
871
859
|
displayName: "StyledInput",
|
|
@@ -882,7 +870,7 @@ StyledInput.defaultProps = {
|
|
|
882
870
|
var COMPONENT_ID$4 = 'dropdowns.select';
|
|
883
871
|
var StyledSelect = styled.div.attrs({
|
|
884
872
|
'data-garden-id': COMPONENT_ID$4,
|
|
885
|
-
'data-garden-version': '8.47.
|
|
873
|
+
'data-garden-version': '8.47.2'
|
|
886
874
|
}).withConfig({
|
|
887
875
|
displayName: "StyledSelect",
|
|
888
876
|
componentId: "sc-xifmwj-0"
|
|
@@ -905,7 +893,7 @@ var visibleStyling = function visibleStyling(props) {
|
|
|
905
893
|
};
|
|
906
894
|
var StyledMultiselectInput = styled(StyledInput).attrs({
|
|
907
895
|
'data-garden-id': COMPONENT_ID$3,
|
|
908
|
-
'data-garden-version': '8.47.
|
|
896
|
+
'data-garden-version': '8.47.2'
|
|
909
897
|
}).withConfig({
|
|
910
898
|
displayName: "StyledMultiselectInput",
|
|
911
899
|
componentId: "sc-1avnf6f-0"
|
|
@@ -935,7 +923,7 @@ var sizeStyles = function sizeStyles(props) {
|
|
|
935
923
|
};
|
|
936
924
|
var StyledMultiselectItemsContainer = styled.div.attrs({
|
|
937
925
|
'data-garden-id': COMPONENT_ID$2,
|
|
938
|
-
'data-garden-version': '8.47.
|
|
926
|
+
'data-garden-version': '8.47.2'
|
|
939
927
|
}).withConfig({
|
|
940
928
|
displayName: "StyledMultiselectItemsContainer",
|
|
941
929
|
componentId: "sc-1jzhet8-0"
|
|
@@ -951,7 +939,7 @@ StyledMultiselectItemsContainer.defaultProps = {
|
|
|
951
939
|
var COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
|
|
952
940
|
var StyledMultiselectItemWrapper = styled.div.attrs({
|
|
953
941
|
'data-garden-id': COMPONENT_ID$1,
|
|
954
|
-
'data-garden-version': '8.47.
|
|
942
|
+
'data-garden-version': '8.47.2'
|
|
955
943
|
}).withConfig({
|
|
956
944
|
displayName: "StyledMultiselectItemWrapper",
|
|
957
945
|
componentId: "sc-1rb2bye-0"
|
|
@@ -967,7 +955,7 @@ StyledMultiselectItemWrapper.defaultProps = {
|
|
|
967
955
|
var COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
|
|
968
956
|
var StyledMultiselectMoreAnchor = styled.div.attrs({
|
|
969
957
|
'data-garden-id': COMPONENT_ID,
|
|
970
|
-
'data-garden-version': '8.47.
|
|
958
|
+
'data-garden-version': '8.47.2'
|
|
971
959
|
}).withConfig({
|
|
972
960
|
displayName: "StyledMultiselectMoreAnchor",
|
|
973
961
|
componentId: "sc-1m9v46e-0"
|
|
@@ -1128,23 +1116,23 @@ Trigger.defaultProps = {
|
|
|
1128
1116
|
refKey: 'ref'
|
|
1129
1117
|
};
|
|
1130
1118
|
|
|
1131
|
-
|
|
1119
|
+
var _path$2;
|
|
1132
1120
|
|
|
1133
|
-
|
|
1134
|
-
fill: "currentColor",
|
|
1135
|
-
d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
|
|
1136
|
-
});
|
|
1121
|
+
function _extends$2() { _extends$2 = 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$2.apply(this, arguments); }
|
|
1137
1122
|
|
|
1138
|
-
function SvgChevronDownStroke(props) {
|
|
1123
|
+
var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
|
|
1139
1124
|
return /*#__PURE__*/React.createElement("svg", _extends$2({
|
|
1140
1125
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1141
1126
|
width: 16,
|
|
1142
1127
|
height: 16,
|
|
1143
|
-
viewBox: "0 0 16 16",
|
|
1144
1128
|
focusable: "false",
|
|
1145
|
-
|
|
1146
|
-
|
|
1147
|
-
}
|
|
1129
|
+
viewBox: "0 0 16 16",
|
|
1130
|
+
"aria-hidden": "true"
|
|
1131
|
+
}, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
|
|
1132
|
+
fill: "currentColor",
|
|
1133
|
+
d: "M12.688 5.61a.5.5 0 01.69.718l-.066.062-5 4a.5.5 0 01-.542.054l-.082-.054-5-4a.5.5 0 01.55-.83l.074.05L8 9.359l4.688-3.75z"
|
|
1134
|
+
})));
|
|
1135
|
+
};
|
|
1148
1136
|
|
|
1149
1137
|
var FieldContext = React__default.createContext(undefined);
|
|
1150
1138
|
var useFieldContext = function useFieldContext() {
|
|
@@ -1388,8 +1376,9 @@ var Multiselect = React__default.forwardRef(function (_ref, _ref3) {
|
|
|
1388
1376
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
1389
1377
|
focusedItem = _useState6[0],
|
|
1390
1378
|
setFocusedItem = _useState6[1];
|
|
1379
|
+
var themeContext = useContext(ThemeContext);
|
|
1391
1380
|
var _useSelection = useSelection({
|
|
1392
|
-
rtl:
|
|
1381
|
+
rtl: themeContext.rtl,
|
|
1393
1382
|
focusedItem: focusedItem,
|
|
1394
1383
|
selectedItem: undefined,
|
|
1395
1384
|
onFocus: function onFocus(item) {
|
|
@@ -1477,7 +1466,7 @@ var Multiselect = React__default.forwardRef(function (_ref, _ref3) {
|
|
|
1477
1466
|
inputRef.current && inputRef.current.focus();
|
|
1478
1467
|
e.preventDefault();
|
|
1479
1468
|
}
|
|
1480
|
-
if (
|
|
1469
|
+
if (themeContext.rtl) {
|
|
1481
1470
|
if (e.keyCode === KEY_CODES.RIGHT && index === 0) {
|
|
1482
1471
|
e.preventDefault();
|
|
1483
1472
|
}
|
|
@@ -1506,7 +1495,7 @@ var Multiselect = React__default.forwardRef(function (_ref, _ref3) {
|
|
|
1506
1495
|
return React__default.createElement(StyledMultiselectItemWrapper, {
|
|
1507
1496
|
key: key
|
|
1508
1497
|
}, clonedChild);
|
|
1509
|
-
}, [getItemProps, inputValue, renderItem, setDownshiftState, itemToString, selectedItems, props, inputRef]);
|
|
1498
|
+
}, [getItemProps, inputValue, renderItem, setDownshiftState, itemToString, selectedItems, props, inputRef, themeContext.rtl]);
|
|
1510
1499
|
var items = useMemo(function () {
|
|
1511
1500
|
var itemValues = selectedItems || [];
|
|
1512
1501
|
var output = [];
|
|
@@ -1575,9 +1564,9 @@ var Multiselect = React__default.forwardRef(function (_ref, _ref3) {
|
|
|
1575
1564
|
},
|
|
1576
1565
|
onKeyDown: function onKeyDown(e) {
|
|
1577
1566
|
if (!inputValue) {
|
|
1578
|
-
if (
|
|
1567
|
+
if (themeContext.rtl && e.keyCode === KEY_CODES.RIGHT && selectedItems.length > 0 && previousIndexRef.current === undefined) {
|
|
1579
1568
|
setFocusedItem(selectedItems[selectedItems.length - 1]);
|
|
1580
|
-
} else if (!
|
|
1569
|
+
} else if (!themeContext.rtl && e.keyCode === KEY_CODES.LEFT && selectedItems.length > 0 && previousIndexRef.current === undefined) {
|
|
1581
1570
|
setFocusedItem(selectedItems[selectedItems.length - 1]);
|
|
1582
1571
|
} else if (e.keyCode === KEY_CODES.BACKSPACE && selectedItems.length > 0) {
|
|
1583
1572
|
setDownshiftState({
|
|
@@ -1615,7 +1604,7 @@ Multiselect.propTypes = {
|
|
|
1615
1604
|
Multiselect.defaultProps = {
|
|
1616
1605
|
maxItems: 4
|
|
1617
1606
|
};
|
|
1618
|
-
|
|
1607
|
+
Multiselect.displayName = 'Multiselect';
|
|
1619
1608
|
|
|
1620
1609
|
var _excluded$6 = ["children", "start"],
|
|
1621
1610
|
_excluded2$2 = ["type"];
|
|
@@ -1901,11 +1890,12 @@ var Menu = function Menu(props) {
|
|
|
1901
1890
|
return clearTimeout(timeout);
|
|
1902
1891
|
};
|
|
1903
1892
|
}, [isOpen, isAnimated]);
|
|
1893
|
+
var themeContext = useContext(ThemeContext);
|
|
1904
1894
|
itemIndexRef.current = 0;
|
|
1905
1895
|
nextItemsHashRef.current = {};
|
|
1906
1896
|
previousIndexRef.current = undefined;
|
|
1907
1897
|
itemSearchRegistry.current = [];
|
|
1908
|
-
var popperPlacement =
|
|
1898
|
+
var popperPlacement = themeContext.rtl ? getRtlPopperPlacement(placement) : getPopperPlacement(placement);
|
|
1909
1899
|
return (
|
|
1910
1900
|
React__default.createElement(MenuContext.Provider, {
|
|
1911
1901
|
value: {
|
|
@@ -1968,7 +1958,6 @@ Menu.defaultProps = {
|
|
|
1968
1958
|
maxHeight: '400px',
|
|
1969
1959
|
zIndex: 1000
|
|
1970
1960
|
};
|
|
1971
|
-
var Menu$1 = withTheme(Menu);
|
|
1972
1961
|
|
|
1973
1962
|
var Separator = React__default.forwardRef(function (props, ref) {
|
|
1974
1963
|
return React__default.createElement(StyledSeparator, _extends$5({
|
|
@@ -1977,45 +1966,45 @@ var Separator = React__default.forwardRef(function (props, ref) {
|
|
|
1977
1966
|
});
|
|
1978
1967
|
Separator.displayName = 'Separator';
|
|
1979
1968
|
|
|
1980
|
-
|
|
1969
|
+
var _path$1;
|
|
1981
1970
|
|
|
1982
|
-
|
|
1983
|
-
stroke: "currentColor",
|
|
1984
|
-
strokeLinecap: "round",
|
|
1985
|
-
d: "M7.5 2.5v12m6-6h-12"
|
|
1986
|
-
});
|
|
1971
|
+
function _extends$1() { _extends$1 = 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$1.apply(this, arguments); }
|
|
1987
1972
|
|
|
1988
|
-
function SvgPlusStroke(props) {
|
|
1973
|
+
var SvgPlusStroke = function SvgPlusStroke(props) {
|
|
1989
1974
|
return /*#__PURE__*/React.createElement("svg", _extends$1({
|
|
1990
1975
|
xmlns: "http://www.w3.org/2000/svg",
|
|
1991
1976
|
width: 16,
|
|
1992
1977
|
height: 16,
|
|
1993
|
-
viewBox: "0 0 16 16",
|
|
1994
1978
|
focusable: "false",
|
|
1995
|
-
|
|
1996
|
-
|
|
1997
|
-
}
|
|
1979
|
+
viewBox: "0 0 16 16",
|
|
1980
|
+
"aria-hidden": "true"
|
|
1981
|
+
}, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
|
|
1982
|
+
stroke: "currentColor",
|
|
1983
|
+
strokeLinecap: "round",
|
|
1984
|
+
d: "M7.5 2.5v12m6-6h-12"
|
|
1985
|
+
})));
|
|
1986
|
+
};
|
|
1998
1987
|
|
|
1999
|
-
|
|
1988
|
+
var _path;
|
|
2000
1989
|
|
|
2001
|
-
var
|
|
2002
|
-
fill: "none",
|
|
2003
|
-
stroke: "currentColor",
|
|
2004
|
-
strokeLinecap: "round",
|
|
2005
|
-
strokeLinejoin: "round",
|
|
2006
|
-
d: "M1 9l4 4L15 3"
|
|
2007
|
-
});
|
|
1990
|
+
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); }
|
|
2008
1991
|
|
|
2009
|
-
function SvgCheckLgStroke(props) {
|
|
1992
|
+
var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
|
|
2010
1993
|
return /*#__PURE__*/React.createElement("svg", _extends({
|
|
2011
1994
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2012
1995
|
width: 16,
|
|
2013
1996
|
height: 16,
|
|
2014
|
-
viewBox: "0 0 16 16",
|
|
2015
1997
|
focusable: "false",
|
|
2016
|
-
|
|
2017
|
-
|
|
2018
|
-
}
|
|
1998
|
+
viewBox: "0 0 16 16",
|
|
1999
|
+
"aria-hidden": "true"
|
|
2000
|
+
}, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
|
|
2001
|
+
fill: "none",
|
|
2002
|
+
stroke: "currentColor",
|
|
2003
|
+
strokeLinecap: "round",
|
|
2004
|
+
strokeLinejoin: "round",
|
|
2005
|
+
d: "M1 9l4 4L15 3"
|
|
2006
|
+
})));
|
|
2007
|
+
};
|
|
2019
2008
|
|
|
2020
2009
|
var ItemContext = React__default.createContext(undefined);
|
|
2021
2010
|
var useItemContext = function useItemContext() {
|
|
@@ -2305,4 +2294,4 @@ PreviousItem.propTypes = {
|
|
|
2305
2294
|
disabled: PropTypes.bool
|
|
2306
2295
|
};
|
|
2307
2296
|
|
|
2308
|
-
export { AddItem, Autocomplete, Combobox, Dropdown
|
|
2297
|
+
export { AddItem, Autocomplete, Combobox, Dropdown, Field, HeaderIcon, HeaderItem, Hint, Item, ItemMeta, Label, MediaBody, MediaFigure, MediaItem, Menu, Message, Multiselect, NextItem, PreviousItem, Select, Separator, Trigger };
|
|
@@ -40,7 +40,6 @@ export interface IDropdownProps {
|
|
|
40
40
|
* */
|
|
41
41
|
onInputValueChange?: (inputValue: string, stateAndHelpers: ControllerStateAndHelpers<any>) => void;
|
|
42
42
|
/** Passes customization props to the [Downshift](https://www.downshift-js.com/) component */
|
|
43
|
-
downshiftProps?:
|
|
43
|
+
downshiftProps?: Record<string, any>;
|
|
44
44
|
}
|
|
45
|
-
declare const
|
|
46
|
-
export default _default;
|
|
45
|
+
export declare const Dropdown: React.FunctionComponent<IDropdownProps>;
|
|
@@ -9,4 +9,4 @@ import { IItemProps } from './Item';
|
|
|
9
9
|
/**
|
|
10
10
|
* @extends LiHTMLAttributes<HTMLLIElement>
|
|
11
11
|
*/
|
|
12
|
-
export declare const AddItem: React.ForwardRefExoticComponent<
|
|
12
|
+
export declare const AddItem: React.ForwardRefExoticComponent<Omit<IItemProps, "component"> & React.RefAttributes<HTMLLIElement>>;
|
|
@@ -9,4 +9,4 @@ import { IItemProps } from './Item';
|
|
|
9
9
|
/**
|
|
10
10
|
* @extends LiHTMLAttributes<HTMLLIElement>
|
|
11
11
|
*/
|
|
12
|
-
export declare const NextItem: React.ForwardRefExoticComponent<
|
|
12
|
+
export declare const NextItem: React.ForwardRefExoticComponent<Omit<IItemProps, "component"> & React.RefAttributes<HTMLLIElement>>;
|
|
@@ -9,4 +9,4 @@ import { IItemProps } from './Item';
|
|
|
9
9
|
/**
|
|
10
10
|
* @extends LiHTMLAttributes<HTMLLIElement>
|
|
11
11
|
*/
|
|
12
|
-
export declare const PreviousItem: React.ForwardRefExoticComponent<
|
|
12
|
+
export declare const PreviousItem: React.ForwardRefExoticComponent<Omit<IItemProps, "component"> & React.RefAttributes<HTMLLIElement>>;
|
|
@@ -41,8 +41,7 @@ export interface IMenuProps extends HTMLAttributes<HTMLUListElement> {
|
|
|
41
41
|
*/
|
|
42
42
|
maxHeight?: string;
|
|
43
43
|
}
|
|
44
|
-
declare const _default: React.FunctionComponent<IMenuProps>;
|
|
45
44
|
/**
|
|
46
45
|
* @extends HTMLAttributes<HTMLUListElement>
|
|
47
46
|
*/
|
|
48
|
-
export
|
|
47
|
+
export declare const Menu: React.FunctionComponent<IMenuProps>;
|
|
@@ -45,8 +45,7 @@ export interface IMultiselectProps extends HTMLAttributes<HTMLDivElement> {
|
|
|
45
45
|
/** Defines the icon rendered before the element's content */
|
|
46
46
|
start?: any;
|
|
47
47
|
}
|
|
48
|
-
declare const _default: React.FunctionComponent<IMultiselectProps & React.RefAttributes<HTMLDivElement>>;
|
|
49
48
|
/**
|
|
50
49
|
* @extends HTMLAttributes<HTMLDivElement>
|
|
51
50
|
*/
|
|
52
|
-
export
|
|
51
|
+
export declare const Multiselect: React.ForwardRefExoticComponent<IMultiselectProps & React.RefAttributes<HTMLDivElement>>;
|