@zendeskgarden/react-dropdowns 8.62.2 → 8.63.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 (6) hide show
  1. package/dist/index.cjs.js +33 -46
  2. package/dist/index.esm.js +33 -46
  3. package/dist/typings/styled/items/media/StyledMediaFigure.d.ts +2 -1
  4. package/dist/typings/types/index.d.ts +2 -2
  5. package/dist/typings/utils/useDropdownContext.d.ts +1 -1
  6. package/package.json +5 -5
package/dist/index.cjs.js CHANGED
@@ -91,10 +91,12 @@ const Dropdown = props => {
91
91
  const containsMultiselectRef = React.useRef(false);
92
92
  const itemSearchRegistry = React.useRef([]);
93
93
  const [dropdownType, setDropdownType] = React.useState('');
94
- const themeContext = React.useContext(styled.ThemeContext);
94
+ const {
95
+ rtl
96
+ } = React.useContext(styled.ThemeContext);
95
97
  const hasMenuRef = React.useRef(false);
96
98
  const popperReferenceElementRef = React.useRef(null);
97
- const customGetInputProps = (_ref, downshift, rtl) => {
99
+ const customGetInputProps = (_ref, downshift) => {
98
100
  let {
99
101
  onKeyDown,
100
102
  ...other
@@ -133,7 +135,7 @@ const Dropdown = props => {
133
135
  ...downshift
134
136
  } = _ref2;
135
137
  return {
136
- getInputProps: p => getInputProps(customGetInputProps(p, downshift, themeContext.rtl)),
138
+ getInputProps: p => getInputProps(customGetInputProps(p, downshift)),
137
139
  getToggleButtonProps: p => getToggleButtonProps({
138
140
  'aria-label': undefined,
139
141
  ...p
@@ -304,7 +306,7 @@ function getMenuPosition(popperPlacement) {
304
306
  const COMPONENT_ID$m = 'dropdowns.menu';
305
307
  const StyledMenu = styled__default.default.ul.attrs(props => ({
306
308
  'data-garden-id': COMPONENT_ID$m,
307
- 'data-garden-version': '8.62.2',
309
+ 'data-garden-version': '8.63.1',
308
310
  className: props.isAnimated && 'is-animated'
309
311
  })).withConfig({
310
312
  displayName: "StyledMenu",
@@ -321,7 +323,7 @@ StyledMenu.defaultProps = {
321
323
  const COMPONENT_ID$l = 'dropdowns.menu_wrapper';
322
324
  const StyledMenuWrapper = styled__default.default.div.attrs(props => ({
323
325
  'data-garden-id': COMPONENT_ID$l,
324
- 'data-garden-version': '8.62.2',
326
+ 'data-garden-version': '8.63.1',
325
327
  className: props.isAnimated && 'is-animated'
326
328
  })).withConfig({
327
329
  displayName: "StyledMenuWrapper",
@@ -340,7 +342,7 @@ StyledMenuWrapper.defaultProps = {
340
342
  const COMPONENT_ID$k = 'dropdowns.separator';
341
343
  const StyledSeparator = styled__default.default.li.attrs({
342
344
  'data-garden-id': COMPONENT_ID$k,
343
- 'data-garden-version': '8.62.2',
345
+ 'data-garden-version': '8.63.1',
344
346
  role: 'separator'
345
347
  }).withConfig({
346
348
  displayName: "StyledSeparator",
@@ -373,7 +375,7 @@ const getColorStyles = props => {
373
375
  };
374
376
  const StyledItem = styled__default.default.li.attrs(props => ({
375
377
  'data-garden-id': COMPONENT_ID$j,
376
- 'data-garden-version': '8.62.2',
378
+ 'data-garden-version': '8.63.1',
377
379
  'aria-disabled': props.disabled
378
380
  })).withConfig({
379
381
  displayName: "StyledItem",
@@ -386,7 +388,7 @@ StyledItem.defaultProps = {
386
388
  const COMPONENT_ID$i = 'dropdowns.add_item';
387
389
  const StyledAddItem = styled__default.default(StyledItem).attrs({
388
390
  'data-garden-id': COMPONENT_ID$i,
389
- 'data-garden-version': '8.62.2'
391
+ 'data-garden-version': '8.63.1'
390
392
  }).withConfig({
391
393
  displayName: "StyledAddItem",
392
394
  componentId: "sc-ekqk50-0"
@@ -398,7 +400,7 @@ StyledAddItem.defaultProps = {
398
400
  const COMPONENT_ID$h = 'dropdowns.item_meta';
399
401
  const StyledItemMeta = styled__default.default.span.attrs({
400
402
  'data-garden-id': COMPONENT_ID$h,
401
- 'data-garden-version': '8.62.2'
403
+ 'data-garden-version': '8.63.1'
402
404
  }).withConfig({
403
405
  displayName: "StyledItemMeta",
404
406
  componentId: "sc-k6xy28-0"
@@ -413,7 +415,7 @@ const getSizeStyles = props => {
413
415
  };
414
416
  const StyledItemIcon = styled__default.default.div.attrs({
415
417
  'data-garden-id': COMPONENT_ID$g,
416
- 'data-garden-version': '8.62.2'
418
+ 'data-garden-version': '8.63.1'
417
419
  }).withConfig({
418
420
  displayName: "StyledItemIcon",
419
421
  componentId: "sc-1v0ty11-0"
@@ -425,7 +427,7 @@ StyledItemIcon.defaultProps = {
425
427
  const COMPONENT_ID$f = 'dropdowns.next_item';
426
428
  const StyledNextItem = styled__default.default(StyledItem).attrs({
427
429
  'data-garden-id': COMPONENT_ID$f,
428
- 'data-garden-version': '8.62.2'
430
+ 'data-garden-version': '8.63.1'
429
431
  }).withConfig({
430
432
  displayName: "StyledNextItem",
431
433
  componentId: "sc-1bcygn5-0"
@@ -435,9 +437,7 @@ StyledNextItem.defaultProps = {
435
437
  };
436
438
 
437
439
  var _path$4;
438
-
439
440
  function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : 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); }
440
-
441
441
  var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
442
442
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$4({
443
443
  xmlns: "http://www.w3.org/2000/svg",
@@ -445,8 +445,7 @@ var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
445
445
  height: 16,
446
446
  focusable: "false",
447
447
  viewBox: "0 0 16 16",
448
- "aria-hidden": "true",
449
- role: "img"
448
+ "aria-hidden": "true"
450
449
  }, props), _path$4 || (_path$4 = /*#__PURE__*/React__namespace.createElement("path", {
451
450
  fill: "currentColor",
452
451
  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"
@@ -460,7 +459,7 @@ const NextIconComponent = _ref => {
460
459
  } = _ref;
461
460
  return React__namespace.default.createElement(SvgChevronRightStroke, {
462
461
  "data-garden-id": COMPONENT_ID$e,
463
- "data-garden-version": '8.62.2',
462
+ "data-garden-version": '8.63.1',
464
463
  className: className
465
464
  });
466
465
  };
@@ -475,7 +474,7 @@ StyledNextIcon.defaultProps = {
475
474
  const COMPONENT_ID$d = 'dropdowns.previous_item';
476
475
  const StyledPreviousItem = styled__default.default(StyledItem).attrs({
477
476
  'data-garden-id': COMPONENT_ID$d,
478
- 'data-garden-version': '8.62.2'
477
+ 'data-garden-version': '8.63.1'
479
478
  }).withConfig({
480
479
  displayName: "StyledPreviousItem",
481
480
  componentId: "sc-1nmdds9-0"
@@ -485,9 +484,7 @@ StyledPreviousItem.defaultProps = {
485
484
  };
486
485
 
487
486
  var _path$3;
488
-
489
487
  function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : 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); }
490
-
491
488
  var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
492
489
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
493
490
  xmlns: "http://www.w3.org/2000/svg",
@@ -495,8 +492,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
495
492
  height: 16,
496
493
  focusable: "false",
497
494
  viewBox: "0 0 16 16",
498
- "aria-hidden": "true",
499
- role: "img"
495
+ "aria-hidden": "true"
500
496
  }, props), _path$3 || (_path$3 = /*#__PURE__*/React__namespace.createElement("path", {
501
497
  fill: "currentColor",
502
498
  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"
@@ -510,7 +506,7 @@ const PreviousIconComponent = _ref => {
510
506
  } = _ref;
511
507
  return React__namespace.default.createElement(SvgChevronLeftStroke, {
512
508
  "data-garden-id": COMPONENT_ID$c,
513
- "data-garden-version": '8.62.2',
509
+ "data-garden-version": '8.63.1',
514
510
  className: className
515
511
  });
516
512
  };
@@ -525,7 +521,7 @@ StyledPreviousIcon.defaultProps = {
525
521
  const COMPONENT_ID$b = 'dropdowns.header_icon';
526
522
  const StyledHeaderIcon = styled__default.default.div.attrs({
527
523
  'data-garden-id': COMPONENT_ID$b,
528
- 'data-garden-version': '8.62.2'
524
+ 'data-garden-version': '8.63.1'
529
525
  }).withConfig({
530
526
  displayName: "StyledHeaderIcon",
531
527
  componentId: "sc-1fl6nsz-0"
@@ -543,7 +539,7 @@ const getHorizontalPadding = props => {
543
539
  };
544
540
  const StyledHeaderItem = styled__default.default(StyledItem).attrs({
545
541
  'data-garden-id': COMPONENT_ID$a,
546
- 'data-garden-version': '8.62.2'
542
+ 'data-garden-version': '8.63.1'
547
543
  }).withConfig({
548
544
  displayName: "StyledHeaderItem",
549
545
  componentId: "sc-137filx-0"
@@ -555,7 +551,7 @@ StyledHeaderItem.defaultProps = {
555
551
  const COMPONENT_ID$9 = 'dropdowns.media_body';
556
552
  const StyledMediaBody = styled__default.default.div.attrs({
557
553
  'data-garden-id': COMPONENT_ID$9,
558
- 'data-garden-version': '8.62.2'
554
+ 'data-garden-version': '8.63.1'
559
555
  }).withConfig({
560
556
  displayName: "StyledMediaBody",
561
557
  componentId: "sc-36j7ef-0"
@@ -578,7 +574,7 @@ _ref => {
578
574
  );
579
575
  }).attrs({
580
576
  'data-garden-id': COMPONENT_ID$8,
581
- 'data-garden-version': '8.62.2'
577
+ 'data-garden-version': '8.63.1'
582
578
  }).withConfig({
583
579
  displayName: "StyledMediaFigure",
584
580
  componentId: "sc-2f2x8x-0"
@@ -590,7 +586,7 @@ StyledMediaFigure.defaultProps = {
590
586
  const COMPONENT_ID$7 = 'dropdowns.media_item';
591
587
  const StyledMediaItem = styled__default.default(StyledItem).attrs({
592
588
  'data-garden-id': COMPONENT_ID$7,
593
- 'data-garden-version': '8.62.2'
589
+ 'data-garden-version': '8.63.1'
594
590
  }).withConfig({
595
591
  displayName: "StyledMediaItem",
596
592
  componentId: "sc-ikwshz-0"
@@ -602,7 +598,7 @@ StyledMediaItem.defaultProps = {
602
598
  const COMPONENT_ID$6 = 'dropdowns.faux_input';
603
599
  const StyledFauxInput = styled__default.default(reactForms.FauxInput).attrs(props => ({
604
600
  'data-garden-id': COMPONENT_ID$6,
605
- 'data-garden-version': '8.62.2',
601
+ 'data-garden-version': '8.63.1',
606
602
  mediaLayout: true,
607
603
  theme: props.theme
608
604
  })).withConfig({
@@ -617,7 +613,7 @@ const COMPONENT_ID$5 = 'dropdowns.input';
617
613
  const hiddenStyling = styled.css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
618
614
  const StyledInput = styled__default.default(reactForms.Input).attrs({
619
615
  'data-garden-id': COMPONENT_ID$5,
620
- 'data-garden-version': '8.62.2',
616
+ 'data-garden-version': '8.63.1',
621
617
  isBare: true
622
618
  }).withConfig({
623
619
  displayName: "StyledInput",
@@ -630,7 +626,7 @@ StyledInput.defaultProps = {
630
626
  const COMPONENT_ID$4 = 'dropdowns.select';
631
627
  const StyledSelect = styled__default.default.div.attrs({
632
628
  'data-garden-id': COMPONENT_ID$4,
633
- 'data-garden-version': '8.62.2'
629
+ 'data-garden-version': '8.63.1'
634
630
  }).withConfig({
635
631
  displayName: "StyledSelect",
636
632
  componentId: "sc-xifmwj-0"
@@ -651,7 +647,7 @@ const visibleStyling = props => {
651
647
  };
652
648
  const StyledMultiselectInput = styled__default.default(StyledInput).attrs({
653
649
  'data-garden-id': COMPONENT_ID$3,
654
- 'data-garden-version': '8.62.2'
650
+ 'data-garden-version': '8.63.1'
655
651
  }).withConfig({
656
652
  displayName: "StyledMultiselectInput",
657
653
  componentId: "sc-1avnf6f-0"
@@ -675,7 +671,7 @@ const sizeStyles = props => {
675
671
  };
676
672
  const StyledMultiselectItemsContainer = styled__default.default.div.attrs({
677
673
  'data-garden-id': COMPONENT_ID$2,
678
- 'data-garden-version': '8.62.2'
674
+ 'data-garden-version': '8.63.1'
679
675
  }).withConfig({
680
676
  displayName: "StyledMultiselectItemsContainer",
681
677
  componentId: "sc-1jzhet8-0"
@@ -687,7 +683,7 @@ StyledMultiselectItemsContainer.defaultProps = {
687
683
  const COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
688
684
  const StyledMultiselectItemWrapper = styled__default.default.div.attrs({
689
685
  'data-garden-id': COMPONENT_ID$1,
690
- 'data-garden-version': '8.62.2'
686
+ 'data-garden-version': '8.63.1'
691
687
  }).withConfig({
692
688
  displayName: "StyledMultiselectItemWrapper",
693
689
  componentId: "sc-1rb2bye-0"
@@ -699,7 +695,7 @@ StyledMultiselectItemWrapper.defaultProps = {
699
695
  const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
700
696
  const StyledMultiselectMoreAnchor = styled__default.default.div.attrs({
701
697
  'data-garden-id': COMPONENT_ID,
702
- 'data-garden-version': '8.62.2'
698
+ 'data-garden-version': '8.63.1'
703
699
  }).withConfig({
704
700
  displayName: "StyledMultiselectMoreAnchor",
705
701
  componentId: "sc-1m9v46e-0"
@@ -858,9 +854,7 @@ Trigger.defaultProps = {
858
854
  };
859
855
 
860
856
  var _path$2;
861
-
862
857
  function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : 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); }
863
-
864
858
  var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
865
859
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
866
860
  xmlns: "http://www.w3.org/2000/svg",
@@ -868,8 +862,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
868
862
  height: 16,
869
863
  focusable: "false",
870
864
  viewBox: "0 0 16 16",
871
- "aria-hidden": "true",
872
- role: "img"
865
+ "aria-hidden": "true"
873
866
  }, props), _path$2 || (_path$2 = /*#__PURE__*/React__namespace.createElement("path", {
874
867
  fill: "currentColor",
875
868
  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"
@@ -1713,9 +1706,7 @@ const Separator = React__namespace.default.forwardRef((props, ref) => React__nam
1713
1706
  Separator.displayName = 'Separator';
1714
1707
 
1715
1708
  var _path$1;
1716
-
1717
1709
  function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : 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); }
1718
-
1719
1710
  var SvgPlusStroke = function SvgPlusStroke(props) {
1720
1711
  return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
1721
1712
  xmlns: "http://www.w3.org/2000/svg",
@@ -1723,8 +1714,7 @@ var SvgPlusStroke = function SvgPlusStroke(props) {
1723
1714
  height: 16,
1724
1715
  focusable: "false",
1725
1716
  viewBox: "0 0 16 16",
1726
- "aria-hidden": "true",
1727
- role: "img"
1717
+ "aria-hidden": "true"
1728
1718
  }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
1729
1719
  stroke: "currentColor",
1730
1720
  strokeLinecap: "round",
@@ -1733,9 +1723,7 @@ var SvgPlusStroke = function SvgPlusStroke(props) {
1733
1723
  };
1734
1724
 
1735
1725
  var _path;
1736
-
1737
1726
  function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
1738
-
1739
1727
  var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
1740
1728
  return /*#__PURE__*/React__namespace.createElement("svg", _extends({
1741
1729
  xmlns: "http://www.w3.org/2000/svg",
@@ -1743,8 +1731,7 @@ var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
1743
1731
  height: 16,
1744
1732
  focusable: "false",
1745
1733
  viewBox: "0 0 16 16",
1746
- "aria-hidden": "true",
1747
- role: "img"
1734
+ "aria-hidden": "true"
1748
1735
  }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
1749
1736
  fill: "none",
1750
1737
  stroke: "currentColor",
package/dist/index.esm.js CHANGED
@@ -65,10 +65,12 @@ const Dropdown = props => {
65
65
  const containsMultiselectRef = useRef(false);
66
66
  const itemSearchRegistry = useRef([]);
67
67
  const [dropdownType, setDropdownType] = useState('');
68
- const themeContext = useContext(ThemeContext);
68
+ const {
69
+ rtl
70
+ } = useContext(ThemeContext);
69
71
  const hasMenuRef = useRef(false);
70
72
  const popperReferenceElementRef = useRef(null);
71
- const customGetInputProps = (_ref, downshift, rtl) => {
73
+ const customGetInputProps = (_ref, downshift) => {
72
74
  let {
73
75
  onKeyDown,
74
76
  ...other
@@ -107,7 +109,7 @@ const Dropdown = props => {
107
109
  ...downshift
108
110
  } = _ref2;
109
111
  return {
110
- getInputProps: p => getInputProps(customGetInputProps(p, downshift, themeContext.rtl)),
112
+ getInputProps: p => getInputProps(customGetInputProps(p, downshift)),
111
113
  getToggleButtonProps: p => getToggleButtonProps({
112
114
  'aria-label': undefined,
113
115
  ...p
@@ -278,7 +280,7 @@ function getMenuPosition(popperPlacement) {
278
280
  const COMPONENT_ID$m = 'dropdowns.menu';
279
281
  const StyledMenu = styled.ul.attrs(props => ({
280
282
  'data-garden-id': COMPONENT_ID$m,
281
- 'data-garden-version': '8.62.2',
283
+ 'data-garden-version': '8.63.1',
282
284
  className: props.isAnimated && 'is-animated'
283
285
  })).withConfig({
284
286
  displayName: "StyledMenu",
@@ -295,7 +297,7 @@ StyledMenu.defaultProps = {
295
297
  const COMPONENT_ID$l = 'dropdowns.menu_wrapper';
296
298
  const StyledMenuWrapper = styled.div.attrs(props => ({
297
299
  'data-garden-id': COMPONENT_ID$l,
298
- 'data-garden-version': '8.62.2',
300
+ 'data-garden-version': '8.63.1',
299
301
  className: props.isAnimated && 'is-animated'
300
302
  })).withConfig({
301
303
  displayName: "StyledMenuWrapper",
@@ -314,7 +316,7 @@ StyledMenuWrapper.defaultProps = {
314
316
  const COMPONENT_ID$k = 'dropdowns.separator';
315
317
  const StyledSeparator = styled.li.attrs({
316
318
  'data-garden-id': COMPONENT_ID$k,
317
- 'data-garden-version': '8.62.2',
319
+ 'data-garden-version': '8.63.1',
318
320
  role: 'separator'
319
321
  }).withConfig({
320
322
  displayName: "StyledSeparator",
@@ -347,7 +349,7 @@ const getColorStyles = props => {
347
349
  };
348
350
  const StyledItem = styled.li.attrs(props => ({
349
351
  'data-garden-id': COMPONENT_ID$j,
350
- 'data-garden-version': '8.62.2',
352
+ 'data-garden-version': '8.63.1',
351
353
  'aria-disabled': props.disabled
352
354
  })).withConfig({
353
355
  displayName: "StyledItem",
@@ -360,7 +362,7 @@ StyledItem.defaultProps = {
360
362
  const COMPONENT_ID$i = 'dropdowns.add_item';
361
363
  const StyledAddItem = styled(StyledItem).attrs({
362
364
  'data-garden-id': COMPONENT_ID$i,
363
- 'data-garden-version': '8.62.2'
365
+ 'data-garden-version': '8.63.1'
364
366
  }).withConfig({
365
367
  displayName: "StyledAddItem",
366
368
  componentId: "sc-ekqk50-0"
@@ -372,7 +374,7 @@ StyledAddItem.defaultProps = {
372
374
  const COMPONENT_ID$h = 'dropdowns.item_meta';
373
375
  const StyledItemMeta = styled.span.attrs({
374
376
  'data-garden-id': COMPONENT_ID$h,
375
- 'data-garden-version': '8.62.2'
377
+ 'data-garden-version': '8.63.1'
376
378
  }).withConfig({
377
379
  displayName: "StyledItemMeta",
378
380
  componentId: "sc-k6xy28-0"
@@ -387,7 +389,7 @@ const getSizeStyles = props => {
387
389
  };
388
390
  const StyledItemIcon = styled.div.attrs({
389
391
  'data-garden-id': COMPONENT_ID$g,
390
- 'data-garden-version': '8.62.2'
392
+ 'data-garden-version': '8.63.1'
391
393
  }).withConfig({
392
394
  displayName: "StyledItemIcon",
393
395
  componentId: "sc-1v0ty11-0"
@@ -399,7 +401,7 @@ StyledItemIcon.defaultProps = {
399
401
  const COMPONENT_ID$f = 'dropdowns.next_item';
400
402
  const StyledNextItem = styled(StyledItem).attrs({
401
403
  'data-garden-id': COMPONENT_ID$f,
402
- 'data-garden-version': '8.62.2'
404
+ 'data-garden-version': '8.63.1'
403
405
  }).withConfig({
404
406
  displayName: "StyledNextItem",
405
407
  componentId: "sc-1bcygn5-0"
@@ -409,9 +411,7 @@ StyledNextItem.defaultProps = {
409
411
  };
410
412
 
411
413
  var _path$4;
412
-
413
414
  function _extends$4() { _extends$4 = Object.assign ? Object.assign.bind() : 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); }
414
-
415
415
  var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
416
416
  return /*#__PURE__*/React.createElement("svg", _extends$4({
417
417
  xmlns: "http://www.w3.org/2000/svg",
@@ -419,8 +419,7 @@ var SvgChevronRightStroke = function SvgChevronRightStroke(props) {
419
419
  height: 16,
420
420
  focusable: "false",
421
421
  viewBox: "0 0 16 16",
422
- "aria-hidden": "true",
423
- role: "img"
422
+ "aria-hidden": "true"
424
423
  }, props), _path$4 || (_path$4 = /*#__PURE__*/React.createElement("path", {
425
424
  fill: "currentColor",
426
425
  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"
@@ -434,7 +433,7 @@ const NextIconComponent = _ref => {
434
433
  } = _ref;
435
434
  return React__default.createElement(SvgChevronRightStroke, {
436
435
  "data-garden-id": COMPONENT_ID$e,
437
- "data-garden-version": '8.62.2',
436
+ "data-garden-version": '8.63.1',
438
437
  className: className
439
438
  });
440
439
  };
@@ -449,7 +448,7 @@ StyledNextIcon.defaultProps = {
449
448
  const COMPONENT_ID$d = 'dropdowns.previous_item';
450
449
  const StyledPreviousItem = styled(StyledItem).attrs({
451
450
  'data-garden-id': COMPONENT_ID$d,
452
- 'data-garden-version': '8.62.2'
451
+ 'data-garden-version': '8.63.1'
453
452
  }).withConfig({
454
453
  displayName: "StyledPreviousItem",
455
454
  componentId: "sc-1nmdds9-0"
@@ -459,9 +458,7 @@ StyledPreviousItem.defaultProps = {
459
458
  };
460
459
 
461
460
  var _path$3;
462
-
463
461
  function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : 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); }
464
-
465
462
  var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
466
463
  return /*#__PURE__*/React.createElement("svg", _extends$3({
467
464
  xmlns: "http://www.w3.org/2000/svg",
@@ -469,8 +466,7 @@ var SvgChevronLeftStroke = function SvgChevronLeftStroke(props) {
469
466
  height: 16,
470
467
  focusable: "false",
471
468
  viewBox: "0 0 16 16",
472
- "aria-hidden": "true",
473
- role: "img"
469
+ "aria-hidden": "true"
474
470
  }, props), _path$3 || (_path$3 = /*#__PURE__*/React.createElement("path", {
475
471
  fill: "currentColor",
476
472
  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"
@@ -484,7 +480,7 @@ const PreviousIconComponent = _ref => {
484
480
  } = _ref;
485
481
  return React__default.createElement(SvgChevronLeftStroke, {
486
482
  "data-garden-id": COMPONENT_ID$c,
487
- "data-garden-version": '8.62.2',
483
+ "data-garden-version": '8.63.1',
488
484
  className: className
489
485
  });
490
486
  };
@@ -499,7 +495,7 @@ StyledPreviousIcon.defaultProps = {
499
495
  const COMPONENT_ID$b = 'dropdowns.header_icon';
500
496
  const StyledHeaderIcon = styled.div.attrs({
501
497
  'data-garden-id': COMPONENT_ID$b,
502
- 'data-garden-version': '8.62.2'
498
+ 'data-garden-version': '8.63.1'
503
499
  }).withConfig({
504
500
  displayName: "StyledHeaderIcon",
505
501
  componentId: "sc-1fl6nsz-0"
@@ -517,7 +513,7 @@ const getHorizontalPadding = props => {
517
513
  };
518
514
  const StyledHeaderItem = styled(StyledItem).attrs({
519
515
  'data-garden-id': COMPONENT_ID$a,
520
- 'data-garden-version': '8.62.2'
516
+ 'data-garden-version': '8.63.1'
521
517
  }).withConfig({
522
518
  displayName: "StyledHeaderItem",
523
519
  componentId: "sc-137filx-0"
@@ -529,7 +525,7 @@ StyledHeaderItem.defaultProps = {
529
525
  const COMPONENT_ID$9 = 'dropdowns.media_body';
530
526
  const StyledMediaBody = styled.div.attrs({
531
527
  'data-garden-id': COMPONENT_ID$9,
532
- 'data-garden-version': '8.62.2'
528
+ 'data-garden-version': '8.63.1'
533
529
  }).withConfig({
534
530
  displayName: "StyledMediaBody",
535
531
  componentId: "sc-36j7ef-0"
@@ -552,7 +548,7 @@ _ref => {
552
548
  );
553
549
  }).attrs({
554
550
  'data-garden-id': COMPONENT_ID$8,
555
- 'data-garden-version': '8.62.2'
551
+ 'data-garden-version': '8.63.1'
556
552
  }).withConfig({
557
553
  displayName: "StyledMediaFigure",
558
554
  componentId: "sc-2f2x8x-0"
@@ -564,7 +560,7 @@ StyledMediaFigure.defaultProps = {
564
560
  const COMPONENT_ID$7 = 'dropdowns.media_item';
565
561
  const StyledMediaItem = styled(StyledItem).attrs({
566
562
  'data-garden-id': COMPONENT_ID$7,
567
- 'data-garden-version': '8.62.2'
563
+ 'data-garden-version': '8.63.1'
568
564
  }).withConfig({
569
565
  displayName: "StyledMediaItem",
570
566
  componentId: "sc-ikwshz-0"
@@ -576,7 +572,7 @@ StyledMediaItem.defaultProps = {
576
572
  const COMPONENT_ID$6 = 'dropdowns.faux_input';
577
573
  const StyledFauxInput = styled(FauxInput).attrs(props => ({
578
574
  'data-garden-id': COMPONENT_ID$6,
579
- 'data-garden-version': '8.62.2',
575
+ 'data-garden-version': '8.63.1',
580
576
  mediaLayout: true,
581
577
  theme: props.theme
582
578
  })).withConfig({
@@ -591,7 +587,7 @@ const COMPONENT_ID$5 = 'dropdowns.input';
591
587
  const hiddenStyling = css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
592
588
  const StyledInput = styled(Input).attrs({
593
589
  'data-garden-id': COMPONENT_ID$5,
594
- 'data-garden-version': '8.62.2',
590
+ 'data-garden-version': '8.63.1',
595
591
  isBare: true
596
592
  }).withConfig({
597
593
  displayName: "StyledInput",
@@ -604,7 +600,7 @@ StyledInput.defaultProps = {
604
600
  const COMPONENT_ID$4 = 'dropdowns.select';
605
601
  const StyledSelect = styled.div.attrs({
606
602
  'data-garden-id': COMPONENT_ID$4,
607
- 'data-garden-version': '8.62.2'
603
+ 'data-garden-version': '8.63.1'
608
604
  }).withConfig({
609
605
  displayName: "StyledSelect",
610
606
  componentId: "sc-xifmwj-0"
@@ -625,7 +621,7 @@ const visibleStyling = props => {
625
621
  };
626
622
  const StyledMultiselectInput = styled(StyledInput).attrs({
627
623
  'data-garden-id': COMPONENT_ID$3,
628
- 'data-garden-version': '8.62.2'
624
+ 'data-garden-version': '8.63.1'
629
625
  }).withConfig({
630
626
  displayName: "StyledMultiselectInput",
631
627
  componentId: "sc-1avnf6f-0"
@@ -649,7 +645,7 @@ const sizeStyles = props => {
649
645
  };
650
646
  const StyledMultiselectItemsContainer = styled.div.attrs({
651
647
  'data-garden-id': COMPONENT_ID$2,
652
- 'data-garden-version': '8.62.2'
648
+ 'data-garden-version': '8.63.1'
653
649
  }).withConfig({
654
650
  displayName: "StyledMultiselectItemsContainer",
655
651
  componentId: "sc-1jzhet8-0"
@@ -661,7 +657,7 @@ StyledMultiselectItemsContainer.defaultProps = {
661
657
  const COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
662
658
  const StyledMultiselectItemWrapper = styled.div.attrs({
663
659
  'data-garden-id': COMPONENT_ID$1,
664
- 'data-garden-version': '8.62.2'
660
+ 'data-garden-version': '8.63.1'
665
661
  }).withConfig({
666
662
  displayName: "StyledMultiselectItemWrapper",
667
663
  componentId: "sc-1rb2bye-0"
@@ -673,7 +669,7 @@ StyledMultiselectItemWrapper.defaultProps = {
673
669
  const COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
674
670
  const StyledMultiselectMoreAnchor = styled.div.attrs({
675
671
  'data-garden-id': COMPONENT_ID,
676
- 'data-garden-version': '8.62.2'
672
+ 'data-garden-version': '8.63.1'
677
673
  }).withConfig({
678
674
  displayName: "StyledMultiselectMoreAnchor",
679
675
  componentId: "sc-1m9v46e-0"
@@ -832,9 +828,7 @@ Trigger.defaultProps = {
832
828
  };
833
829
 
834
830
  var _path$2;
835
-
836
831
  function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : 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); }
837
-
838
832
  var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
839
833
  return /*#__PURE__*/React.createElement("svg", _extends$2({
840
834
  xmlns: "http://www.w3.org/2000/svg",
@@ -842,8 +836,7 @@ var SvgChevronDownStroke = function SvgChevronDownStroke(props) {
842
836
  height: 16,
843
837
  focusable: "false",
844
838
  viewBox: "0 0 16 16",
845
- "aria-hidden": "true",
846
- role: "img"
839
+ "aria-hidden": "true"
847
840
  }, props), _path$2 || (_path$2 = /*#__PURE__*/React.createElement("path", {
848
841
  fill: "currentColor",
849
842
  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"
@@ -1687,9 +1680,7 @@ const Separator = React__default.forwardRef((props, ref) => React__default.creat
1687
1680
  Separator.displayName = 'Separator';
1688
1681
 
1689
1682
  var _path$1;
1690
-
1691
1683
  function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : 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); }
1692
-
1693
1684
  var SvgPlusStroke = function SvgPlusStroke(props) {
1694
1685
  return /*#__PURE__*/React.createElement("svg", _extends$1({
1695
1686
  xmlns: "http://www.w3.org/2000/svg",
@@ -1697,8 +1688,7 @@ var SvgPlusStroke = function SvgPlusStroke(props) {
1697
1688
  height: 16,
1698
1689
  focusable: "false",
1699
1690
  viewBox: "0 0 16 16",
1700
- "aria-hidden": "true",
1701
- role: "img"
1691
+ "aria-hidden": "true"
1702
1692
  }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
1703
1693
  stroke: "currentColor",
1704
1694
  strokeLinecap: "round",
@@ -1707,9 +1697,7 @@ var SvgPlusStroke = function SvgPlusStroke(props) {
1707
1697
  };
1708
1698
 
1709
1699
  var _path;
1710
-
1711
1700
  function _extends() { _extends = Object.assign ? Object.assign.bind() : 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); }
1712
-
1713
1701
  var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
1714
1702
  return /*#__PURE__*/React.createElement("svg", _extends({
1715
1703
  xmlns: "http://www.w3.org/2000/svg",
@@ -1717,8 +1705,7 @@ var SvgCheckLgStroke = function SvgCheckLgStroke(props) {
1717
1705
  height: 16,
1718
1706
  focusable: "false",
1719
1707
  viewBox: "0 0 16 16",
1720
- "aria-hidden": "true",
1721
- role: "img"
1708
+ "aria-hidden": "true"
1722
1709
  }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
1723
1710
  fill: "none",
1724
1711
  stroke: "currentColor",
package/dist/typings/styled/items/media/StyledMediaFigure.d.ts CHANGED
@@ -26,6 +26,7 @@ export declare const StyledMediaFigure: import("styled-components").StyledCompon
26
26
  hidden?: boolean | undefined;
27
27
  id?: string | undefined;
28
28
  lang?: string | undefined;
29
+ nonce?: string | undefined;
29
30
  placeholder?: string | undefined;
30
31
  slot?: string | undefined;
31
32
  spellCheck?: (boolean | "true" | "false") | undefined;
@@ -66,7 +67,7 @@ export declare const StyledMediaFigure: import("styled-components").StyledCompon
66
67
  'aria-colindex'?: number | undefined;
67
68
  'aria-colspan'?: number | undefined;
68
69
  'aria-controls'?: string | undefined;
69
- 'aria-current'?: boolean | "time" | "true" | "false" | "step" | "date" | "page" | "location" | undefined;
70
+ 'aria-current'?: boolean | "time" | "true" | "false" | "step" | "page" | "location" | "date" | undefined;
70
71
  'aria-describedby'?: string | undefined;
71
72
  'aria-details'?: string | undefined;
72
73
  'aria-disabled'?: (boolean | "true" | "false") | undefined;
package/dist/typings/types/index.d.ts CHANGED
@@ -10,8 +10,8 @@ import { Modifiers } from 'popper.js';
10
10
  import { IFauxInputProps } from '@zendeskgarden/react-forms';
11
11
  export declare const PLACEMENT: readonly ["auto", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "end", "end-top", "end-bottom", "start", "start-top", "start-bottom"];
12
12
  export declare const POPPER_PLACEMENT: readonly ["auto", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"];
13
- export declare type GardenPlacement = typeof PLACEMENT[number];
14
- export declare type PopperPlacement = typeof POPPER_PLACEMENT[number];
13
+ export type GardenPlacement = (typeof PLACEMENT)[number];
14
+ export type PopperPlacement = (typeof POPPER_PLACEMENT)[number];
15
15
  export interface IDropdownProps {
16
16
  /** Opens the dropdown */
17
17
  isOpen?: boolean;
package/dist/typings/utils/useDropdownContext.d.ts CHANGED
@@ -6,7 +6,7 @@
6
6
  */
7
7
  import React from 'react';
8
8
  import { ControllerStateAndHelpers } from 'downshift';
9
- export declare type DROPDOWN_TYPE = '' | 'autocomplete' | 'combobox' | 'multiselect';
9
+ export type DROPDOWN_TYPE = '' | 'autocomplete' | 'combobox' | 'multiselect';
10
10
  export interface IDropdownContext {
11
11
  itemIndexRef: React.MutableRefObject<number>;
12
12
  previousItemRef: React.MutableRefObject<any>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-dropdowns",
3
- "version": "8.62.2",
3
+ "version": "8.63.1",
4
4
  "description": "Components relating to dropdowns in the Garden Design System",
5
5
  "license": "Apache-2.0",
6
6
  "author": "Zendesk Garden <garden@zendesk.com>",
@@ -23,8 +23,8 @@
23
23
  "dependencies": {
24
24
  "@zendeskgarden/container-selection": "^2.0.0",
25
25
  "@zendeskgarden/container-utilities": "^1.0.0",
26
- "@zendeskgarden/react-forms": "^8.62.2",
27
- "downshift": "^6.0.0",
26
+ "@zendeskgarden/react-forms": "^8.63.1",
27
+ "downshift": "^7.0.0",
28
28
  "polished": "^4.0.0",
29
29
  "prop-types": "^15.5.7",
30
30
  "react-merge-refs": "^1.1.0",
@@ -38,7 +38,7 @@
38
38
  },
39
39
  "devDependencies": {
40
40
  "@types/lodash.debounce": "4.0.7",
41
- "@zendeskgarden/react-theming": "^8.62.2",
41
+ "@zendeskgarden/react-theming": "^8.63.1",
42
42
  "@zendeskgarden/svg-icons": "6.33.0",
43
43
  "lodash.debounce": "4.0.8"
44
44
  },
@@ -52,5 +52,5 @@
52
52
  "access": "public"
53
53
  },
54
54
  "zendeskgarden:src": "src/index.ts",
55
- "gitHead": "27a7d6c021f3360396af60d51ecbf66e9076a405"
55
+ "gitHead": "1c1d67d2b98ee0539975cee53f457081e5ae479a"
56
56
  }