@zendeskgarden/react-dropdowns 8.49.2 → 8.49.3

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 CHANGED
@@ -446,7 +446,7 @@ var COMPONENT_ID$m = 'dropdowns.menu';
446
446
  var StyledMenu = styled__default["default"].ul.attrs(function (props) {
447
447
  return {
448
448
  'data-garden-id': COMPONENT_ID$m,
449
- 'data-garden-version': '8.49.2',
449
+ 'data-garden-version': '8.49.3',
450
450
  className: props.isAnimated && 'is-animated'
451
451
  };
452
452
  }).withConfig({
@@ -471,7 +471,7 @@ var COMPONENT_ID$l = 'dropdowns.menu_wrapper';
471
471
  var StyledMenuWrapper = styled__default["default"].div.attrs(function (props) {
472
472
  return {
473
473
  'data-garden-id': COMPONENT_ID$l,
474
- 'data-garden-version': '8.49.2',
474
+ 'data-garden-version': '8.49.3',
475
475
  className: props.isAnimated && 'is-animated'
476
476
  };
477
477
  }).withConfig({
@@ -495,7 +495,7 @@ StyledMenuWrapper.defaultProps = {
495
495
  var COMPONENT_ID$k = 'dropdowns.separator';
496
496
  var StyledSeparator = styled__default["default"].li.attrs({
497
497
  'data-garden-id': COMPONENT_ID$k,
498
- 'data-garden-version': '8.49.2',
498
+ 'data-garden-version': '8.49.3',
499
499
  role: 'separator'
500
500
  }).withConfig({
501
501
  displayName: "StyledSeparator",
@@ -535,7 +535,7 @@ var getColorStyles = function getColorStyles(props) {
535
535
  var StyledItem = styled__default["default"].li.attrs(function (props) {
536
536
  return {
537
537
  'data-garden-id': COMPONENT_ID$j,
538
- 'data-garden-version': '8.49.2',
538
+ 'data-garden-version': '8.49.3',
539
539
  'aria-disabled': props.disabled
540
540
  };
541
541
  }).withConfig({
@@ -565,7 +565,7 @@ StyledItem.defaultProps = {
565
565
  var COMPONENT_ID$i = 'dropdowns.add_item';
566
566
  var StyledAddItem = styled__default["default"](StyledItem).attrs({
567
567
  'data-garden-id': COMPONENT_ID$i,
568
- 'data-garden-version': '8.49.2'
568
+ 'data-garden-version': '8.49.3'
569
569
  }).withConfig({
570
570
  displayName: "StyledAddItem",
571
571
  componentId: "sc-ekqk50-0"
@@ -581,7 +581,7 @@ StyledAddItem.defaultProps = {
581
581
  var COMPONENT_ID$h = 'dropdowns.item_meta';
582
582
  var StyledItemMeta = styled__default["default"].span.attrs({
583
583
  'data-garden-id': COMPONENT_ID$h,
584
- 'data-garden-version': '8.49.2'
584
+ 'data-garden-version': '8.49.3'
585
585
  }).withConfig({
586
586
  displayName: "StyledItemMeta",
587
587
  componentId: "sc-k6xy28-0"
@@ -604,7 +604,7 @@ var getSizeStyles = function getSizeStyles(props) {
604
604
  };
605
605
  var StyledItemIcon = styled__default["default"].div.attrs({
606
606
  'data-garden-id': COMPONENT_ID$g,
607
- 'data-garden-version': '8.49.2'
607
+ 'data-garden-version': '8.49.3'
608
608
  }).withConfig({
609
609
  displayName: "StyledItemIcon",
610
610
  componentId: "sc-1v0ty11-0"
@@ -630,7 +630,7 @@ StyledItemIcon.defaultProps = {
630
630
  var COMPONENT_ID$f = 'dropdowns.next_item';
631
631
  var StyledNextItem = styled__default["default"](StyledItem).attrs({
632
632
  'data-garden-id': COMPONENT_ID$f,
633
- 'data-garden-version': '8.49.2'
633
+ 'data-garden-version': '8.49.3'
634
634
  }).withConfig({
635
635
  displayName: "StyledNextItem",
636
636
  componentId: "sc-1bcygn5-0"
@@ -668,7 +668,7 @@ var NextIconComponent = function NextIconComponent(_ref) {
668
668
  var className = _ref.className;
669
669
  return React__default["default"].createElement(SvgChevronRightStroke, {
670
670
  "data-garden-id": COMPONENT_ID$e,
671
- "data-garden-version": '8.49.2',
671
+ "data-garden-version": '8.49.3',
672
672
  className: className
673
673
  });
674
674
  };
@@ -689,7 +689,7 @@ StyledNextIcon.defaultProps = {
689
689
  var COMPONENT_ID$d = 'dropdowns.previous_item';
690
690
  var StyledPreviousItem = styled__default["default"](StyledItem).attrs({
691
691
  'data-garden-id': COMPONENT_ID$d,
692
- 'data-garden-version': '8.49.2'
692
+ 'data-garden-version': '8.49.3'
693
693
  }).withConfig({
694
694
  displayName: "StyledPreviousItem",
695
695
  componentId: "sc-1nmdds9-0"
@@ -725,7 +725,7 @@ var PreviousIconComponent = function PreviousIconComponent(_ref) {
725
725
  var className = _ref.className;
726
726
  return React__default["default"].createElement(SvgChevronLeftStroke, {
727
727
  "data-garden-id": COMPONENT_ID$c,
728
- "data-garden-version": '8.49.2',
728
+ "data-garden-version": '8.49.3',
729
729
  className: className
730
730
  });
731
731
  };
@@ -746,7 +746,7 @@ StyledPreviousIcon.defaultProps = {
746
746
  var COMPONENT_ID$b = 'dropdowns.header_icon';
747
747
  var StyledHeaderIcon = styled__default["default"].div.attrs({
748
748
  'data-garden-id': COMPONENT_ID$b,
749
- 'data-garden-version': '8.49.2'
749
+ 'data-garden-version': '8.49.3'
750
750
  }).withConfig({
751
751
  displayName: "StyledHeaderIcon",
752
752
  componentId: "sc-1fl6nsz-0"
@@ -776,7 +776,7 @@ var getHorizontalPadding = function getHorizontalPadding(props) {
776
776
  };
777
777
  var StyledHeaderItem = styled__default["default"](StyledItem).attrs({
778
778
  'data-garden-id': COMPONENT_ID$a,
779
- 'data-garden-version': '8.49.2'
779
+ 'data-garden-version': '8.49.3'
780
780
  }).withConfig({
781
781
  displayName: "StyledHeaderItem",
782
782
  componentId: "sc-137filx-0"
@@ -796,7 +796,7 @@ StyledHeaderItem.defaultProps = {
796
796
  var COMPONENT_ID$9 = 'dropdowns.media_body';
797
797
  var StyledMediaBody = styled__default["default"].div.attrs({
798
798
  'data-garden-id': COMPONENT_ID$9,
799
- 'data-garden-version': '8.49.2'
799
+ 'data-garden-version': '8.49.3'
800
800
  }).withConfig({
801
801
  displayName: "StyledMediaBody",
802
802
  componentId: "sc-36j7ef-0"
@@ -824,7 +824,7 @@ function (_ref) {
824
824
  );
825
825
  }).attrs({
826
826
  'data-garden-id': COMPONENT_ID$8,
827
- 'data-garden-version': '8.49.2'
827
+ 'data-garden-version': '8.49.3'
828
828
  }).withConfig({
829
829
  displayName: "StyledMediaFigure",
830
830
  componentId: "sc-2f2x8x-0"
@@ -846,7 +846,7 @@ StyledMediaFigure.defaultProps = {
846
846
  var COMPONENT_ID$7 = 'dropdowns.media_item';
847
847
  var StyledMediaItem = styled__default["default"](StyledItem).attrs({
848
848
  'data-garden-id': COMPONENT_ID$7,
849
- 'data-garden-version': '8.49.2'
849
+ 'data-garden-version': '8.49.3'
850
850
  }).withConfig({
851
851
  displayName: "StyledMediaItem",
852
852
  componentId: "sc-ikwshz-0"
@@ -861,7 +861,7 @@ var COMPONENT_ID$6 = 'dropdowns.faux_input';
861
861
  var StyledFauxInput = styled__default["default"](reactForms.FauxInput).attrs(function (props) {
862
862
  return {
863
863
  'data-garden-id': COMPONENT_ID$6,
864
- 'data-garden-version': '8.49.2',
864
+ 'data-garden-version': '8.49.3',
865
865
  mediaLayout: true,
866
866
  theme: props.theme
867
867
  };
@@ -883,7 +883,7 @@ var COMPONENT_ID$5 = 'dropdowns.input';
883
883
  var hiddenStyling = styled.css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
884
884
  var StyledInput = styled__default["default"](reactForms.Input).attrs({
885
885
  'data-garden-id': COMPONENT_ID$5,
886
- 'data-garden-version': '8.49.2',
886
+ 'data-garden-version': '8.49.3',
887
887
  isBare: true
888
888
  }).withConfig({
889
889
  displayName: "StyledInput",
@@ -900,7 +900,7 @@ StyledInput.defaultProps = {
900
900
  var COMPONENT_ID$4 = 'dropdowns.select';
901
901
  var StyledSelect = styled__default["default"].div.attrs({
902
902
  'data-garden-id': COMPONENT_ID$4,
903
- 'data-garden-version': '8.49.2'
903
+ 'data-garden-version': '8.49.3'
904
904
  }).withConfig({
905
905
  displayName: "StyledSelect",
906
906
  componentId: "sc-xifmwj-0"
@@ -923,7 +923,7 @@ var visibleStyling = function visibleStyling(props) {
923
923
  };
924
924
  var StyledMultiselectInput = styled__default["default"](StyledInput).attrs({
925
925
  'data-garden-id': COMPONENT_ID$3,
926
- 'data-garden-version': '8.49.2'
926
+ 'data-garden-version': '8.49.3'
927
927
  }).withConfig({
928
928
  displayName: "StyledMultiselectInput",
929
929
  componentId: "sc-1avnf6f-0"
@@ -953,7 +953,7 @@ var sizeStyles = function sizeStyles(props) {
953
953
  };
954
954
  var StyledMultiselectItemsContainer = styled__default["default"].div.attrs({
955
955
  'data-garden-id': COMPONENT_ID$2,
956
- 'data-garden-version': '8.49.2'
956
+ 'data-garden-version': '8.49.3'
957
957
  }).withConfig({
958
958
  displayName: "StyledMultiselectItemsContainer",
959
959
  componentId: "sc-1jzhet8-0"
@@ -969,7 +969,7 @@ StyledMultiselectItemsContainer.defaultProps = {
969
969
  var COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
970
970
  var StyledMultiselectItemWrapper = styled__default["default"].div.attrs({
971
971
  'data-garden-id': COMPONENT_ID$1,
972
- 'data-garden-version': '8.49.2'
972
+ 'data-garden-version': '8.49.3'
973
973
  }).withConfig({
974
974
  displayName: "StyledMultiselectItemWrapper",
975
975
  componentId: "sc-1rb2bye-0"
@@ -985,7 +985,7 @@ StyledMultiselectItemWrapper.defaultProps = {
985
985
  var COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
986
986
  var StyledMultiselectMoreAnchor = styled__default["default"].div.attrs({
987
987
  'data-garden-id': COMPONENT_ID,
988
- 'data-garden-version': '8.49.2'
988
+ 'data-garden-version': '8.49.3'
989
989
  }).withConfig({
990
990
  displayName: "StyledMultiselectMoreAnchor",
991
991
  componentId: "sc-1m9v46e-0"
@@ -1274,7 +1274,7 @@ Autocomplete.propTypes = {
1274
1274
  isBare: PropTypes__default["default"].bool,
1275
1275
  disabled: PropTypes__default["default"].bool,
1276
1276
  focusInset: PropTypes__default["default"].bool,
1277
- validation: PropTypes__default["default"].oneOf(['success', 'warning', 'error'])
1277
+ validation: PropTypes__default["default"].oneOf(reactForms.VALIDATION)
1278
1278
  };
1279
1279
 
1280
1280
  var _excluded$8 = ["isCompact", "isBare", "disabled", "focusInset", "placeholder", "validation", "inputRef", "start", "end"];
@@ -1357,7 +1357,7 @@ Combobox.propTypes = {
1357
1357
  disabled: PropTypes__default["default"].bool,
1358
1358
  focusInset: PropTypes__default["default"].bool,
1359
1359
  placeholder: PropTypes__default["default"].string,
1360
- validation: PropTypes__default["default"].oneOf(['success', 'warning', 'error'])
1360
+ validation: PropTypes__default["default"].oneOf(reactForms.VALIDATION)
1361
1361
  };
1362
1362
 
1363
1363
  var _excluded$7 = ["renderItem", "placeholder", "maxItems", "renderShowMore", "inputRef", "start", "onKeyDown"],
@@ -1797,7 +1797,8 @@ Select.propTypes = {
1797
1797
  isBare: PropTypes__default["default"].bool,
1798
1798
  disabled: PropTypes__default["default"].bool,
1799
1799
  focusInset: PropTypes__default["default"].bool,
1800
- validation: PropTypes__default["default"].oneOf(['success', 'warning', 'error'])
1800
+ validation: PropTypes__default["default"].oneOf(reactForms.VALIDATION),
1801
+ start: PropTypes__default["default"].any
1801
1802
  };
1802
1803
 
1803
1804
  var Field = React.forwardRef(function (props, fieldRef) {
@@ -1863,9 +1864,12 @@ var Message = React__default["default"].forwardRef(function (props, ref) {
1863
1864
  });
1864
1865
  Message.displayName = 'Message';
1865
1866
  Message.propTypes = {
1866
- validation: PropTypes__default["default"].oneOf(['success', 'warning', 'error'])
1867
+ validation: PropTypes__default["default"].oneOf(reactForms.VALIDATION)
1867
1868
  };
1868
1869
 
1870
+ var SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
1871
+ var PLACEMENT = [].concat(SHARED_PLACEMENT, ['end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom']);
1872
+
1869
1873
  var MenuContext = React__default["default"].createContext(undefined);
1870
1874
  var useMenuContext = function useMenuContext() {
1871
1875
  var menuContext = React.useContext(MenuContext);
@@ -1981,7 +1985,7 @@ Menu.propTypes = {
1981
1985
  eventsEnabled: PropTypes__default["default"].bool,
1982
1986
  zIndex: PropTypes__default["default"].number,
1983
1987
  style: PropTypes__default["default"].object,
1984
- placement: PropTypes__default["default"].oneOf(['auto', 'top', 'top-start', 'top-end', 'end', 'end-top', 'end-bottom', 'bottom', 'bottom-start', 'bottom-end', 'start', 'start-top', 'start-bottom']),
1988
+ placement: PropTypes__default["default"].oneOf(PLACEMENT),
1985
1989
  isAnimated: PropTypes__default["default"].bool,
1986
1990
  isCompact: PropTypes__default["default"].bool,
1987
1991
  hasArrow: PropTypes__default["default"].bool,
package/dist/index.esm.js CHANGED
@@ -15,7 +15,7 @@ import { Manager, Reference, Popper } from 'react-popper';
15
15
  import { composeEventHandlers, KEY_CODES } from '@zendeskgarden/container-utilities';
16
16
  import { arrowStyles, retrieveComponentStyles, DEFAULT_THEME, menuStyles, getColor, getLineHeight } from '@zendeskgarden/react-theming';
17
17
  import { rgba, math } from 'polished';
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';
18
+ import { FauxInput, Input, VALIDATION, 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';
20
20
  import { useSelection } from '@zendeskgarden/container-selection';
21
21
  import { createPortal } from 'react-dom';
@@ -417,7 +417,7 @@ var COMPONENT_ID$m = 'dropdowns.menu';
417
417
  var StyledMenu = styled.ul.attrs(function (props) {
418
418
  return {
419
419
  'data-garden-id': COMPONENT_ID$m,
420
- 'data-garden-version': '8.49.2',
420
+ 'data-garden-version': '8.49.3',
421
421
  className: props.isAnimated && 'is-animated'
422
422
  };
423
423
  }).withConfig({
@@ -442,7 +442,7 @@ var COMPONENT_ID$l = 'dropdowns.menu_wrapper';
442
442
  var StyledMenuWrapper = styled.div.attrs(function (props) {
443
443
  return {
444
444
  'data-garden-id': COMPONENT_ID$l,
445
- 'data-garden-version': '8.49.2',
445
+ 'data-garden-version': '8.49.3',
446
446
  className: props.isAnimated && 'is-animated'
447
447
  };
448
448
  }).withConfig({
@@ -466,7 +466,7 @@ StyledMenuWrapper.defaultProps = {
466
466
  var COMPONENT_ID$k = 'dropdowns.separator';
467
467
  var StyledSeparator = styled.li.attrs({
468
468
  'data-garden-id': COMPONENT_ID$k,
469
- 'data-garden-version': '8.49.2',
469
+ 'data-garden-version': '8.49.3',
470
470
  role: 'separator'
471
471
  }).withConfig({
472
472
  displayName: "StyledSeparator",
@@ -506,7 +506,7 @@ var getColorStyles = function getColorStyles(props) {
506
506
  var StyledItem = styled.li.attrs(function (props) {
507
507
  return {
508
508
  'data-garden-id': COMPONENT_ID$j,
509
- 'data-garden-version': '8.49.2',
509
+ 'data-garden-version': '8.49.3',
510
510
  'aria-disabled': props.disabled
511
511
  };
512
512
  }).withConfig({
@@ -536,7 +536,7 @@ StyledItem.defaultProps = {
536
536
  var COMPONENT_ID$i = 'dropdowns.add_item';
537
537
  var StyledAddItem = styled(StyledItem).attrs({
538
538
  'data-garden-id': COMPONENT_ID$i,
539
- 'data-garden-version': '8.49.2'
539
+ 'data-garden-version': '8.49.3'
540
540
  }).withConfig({
541
541
  displayName: "StyledAddItem",
542
542
  componentId: "sc-ekqk50-0"
@@ -552,7 +552,7 @@ StyledAddItem.defaultProps = {
552
552
  var COMPONENT_ID$h = 'dropdowns.item_meta';
553
553
  var StyledItemMeta = styled.span.attrs({
554
554
  'data-garden-id': COMPONENT_ID$h,
555
- 'data-garden-version': '8.49.2'
555
+ 'data-garden-version': '8.49.3'
556
556
  }).withConfig({
557
557
  displayName: "StyledItemMeta",
558
558
  componentId: "sc-k6xy28-0"
@@ -575,7 +575,7 @@ var getSizeStyles = function getSizeStyles(props) {
575
575
  };
576
576
  var StyledItemIcon = styled.div.attrs({
577
577
  'data-garden-id': COMPONENT_ID$g,
578
- 'data-garden-version': '8.49.2'
578
+ 'data-garden-version': '8.49.3'
579
579
  }).withConfig({
580
580
  displayName: "StyledItemIcon",
581
581
  componentId: "sc-1v0ty11-0"
@@ -601,7 +601,7 @@ StyledItemIcon.defaultProps = {
601
601
  var COMPONENT_ID$f = 'dropdowns.next_item';
602
602
  var StyledNextItem = styled(StyledItem).attrs({
603
603
  'data-garden-id': COMPONENT_ID$f,
604
- 'data-garden-version': '8.49.2'
604
+ 'data-garden-version': '8.49.3'
605
605
  }).withConfig({
606
606
  displayName: "StyledNextItem",
607
607
  componentId: "sc-1bcygn5-0"
@@ -639,7 +639,7 @@ var NextIconComponent = function NextIconComponent(_ref) {
639
639
  var className = _ref.className;
640
640
  return React__default.createElement(SvgChevronRightStroke, {
641
641
  "data-garden-id": COMPONENT_ID$e,
642
- "data-garden-version": '8.49.2',
642
+ "data-garden-version": '8.49.3',
643
643
  className: className
644
644
  });
645
645
  };
@@ -660,7 +660,7 @@ StyledNextIcon.defaultProps = {
660
660
  var COMPONENT_ID$d = 'dropdowns.previous_item';
661
661
  var StyledPreviousItem = styled(StyledItem).attrs({
662
662
  'data-garden-id': COMPONENT_ID$d,
663
- 'data-garden-version': '8.49.2'
663
+ 'data-garden-version': '8.49.3'
664
664
  }).withConfig({
665
665
  displayName: "StyledPreviousItem",
666
666
  componentId: "sc-1nmdds9-0"
@@ -696,7 +696,7 @@ var PreviousIconComponent = function PreviousIconComponent(_ref) {
696
696
  var className = _ref.className;
697
697
  return React__default.createElement(SvgChevronLeftStroke, {
698
698
  "data-garden-id": COMPONENT_ID$c,
699
- "data-garden-version": '8.49.2',
699
+ "data-garden-version": '8.49.3',
700
700
  className: className
701
701
  });
702
702
  };
@@ -717,7 +717,7 @@ StyledPreviousIcon.defaultProps = {
717
717
  var COMPONENT_ID$b = 'dropdowns.header_icon';
718
718
  var StyledHeaderIcon = styled.div.attrs({
719
719
  'data-garden-id': COMPONENT_ID$b,
720
- 'data-garden-version': '8.49.2'
720
+ 'data-garden-version': '8.49.3'
721
721
  }).withConfig({
722
722
  displayName: "StyledHeaderIcon",
723
723
  componentId: "sc-1fl6nsz-0"
@@ -747,7 +747,7 @@ var getHorizontalPadding = function getHorizontalPadding(props) {
747
747
  };
748
748
  var StyledHeaderItem = styled(StyledItem).attrs({
749
749
  'data-garden-id': COMPONENT_ID$a,
750
- 'data-garden-version': '8.49.2'
750
+ 'data-garden-version': '8.49.3'
751
751
  }).withConfig({
752
752
  displayName: "StyledHeaderItem",
753
753
  componentId: "sc-137filx-0"
@@ -767,7 +767,7 @@ StyledHeaderItem.defaultProps = {
767
767
  var COMPONENT_ID$9 = 'dropdowns.media_body';
768
768
  var StyledMediaBody = styled.div.attrs({
769
769
  'data-garden-id': COMPONENT_ID$9,
770
- 'data-garden-version': '8.49.2'
770
+ 'data-garden-version': '8.49.3'
771
771
  }).withConfig({
772
772
  displayName: "StyledMediaBody",
773
773
  componentId: "sc-36j7ef-0"
@@ -795,7 +795,7 @@ function (_ref) {
795
795
  );
796
796
  }).attrs({
797
797
  'data-garden-id': COMPONENT_ID$8,
798
- 'data-garden-version': '8.49.2'
798
+ 'data-garden-version': '8.49.3'
799
799
  }).withConfig({
800
800
  displayName: "StyledMediaFigure",
801
801
  componentId: "sc-2f2x8x-0"
@@ -817,7 +817,7 @@ StyledMediaFigure.defaultProps = {
817
817
  var COMPONENT_ID$7 = 'dropdowns.media_item';
818
818
  var StyledMediaItem = styled(StyledItem).attrs({
819
819
  'data-garden-id': COMPONENT_ID$7,
820
- 'data-garden-version': '8.49.2'
820
+ 'data-garden-version': '8.49.3'
821
821
  }).withConfig({
822
822
  displayName: "StyledMediaItem",
823
823
  componentId: "sc-ikwshz-0"
@@ -832,7 +832,7 @@ var COMPONENT_ID$6 = 'dropdowns.faux_input';
832
832
  var StyledFauxInput = styled(FauxInput).attrs(function (props) {
833
833
  return {
834
834
  'data-garden-id': COMPONENT_ID$6,
835
- 'data-garden-version': '8.49.2',
835
+ 'data-garden-version': '8.49.3',
836
836
  mediaLayout: true,
837
837
  theme: props.theme
838
838
  };
@@ -854,7 +854,7 @@ var COMPONENT_ID$5 = 'dropdowns.input';
854
854
  var hiddenStyling = css(["position:fixed;border:0;clip:rect(1px,1px,1px,1px);padding:0;width:1px;height:1px;overflow:hidden;white-space:nowrap;"]);
855
855
  var StyledInput = styled(Input).attrs({
856
856
  'data-garden-id': COMPONENT_ID$5,
857
- 'data-garden-version': '8.49.2',
857
+ 'data-garden-version': '8.49.3',
858
858
  isBare: true
859
859
  }).withConfig({
860
860
  displayName: "StyledInput",
@@ -871,7 +871,7 @@ StyledInput.defaultProps = {
871
871
  var COMPONENT_ID$4 = 'dropdowns.select';
872
872
  var StyledSelect = styled.div.attrs({
873
873
  'data-garden-id': COMPONENT_ID$4,
874
- 'data-garden-version': '8.49.2'
874
+ 'data-garden-version': '8.49.3'
875
875
  }).withConfig({
876
876
  displayName: "StyledSelect",
877
877
  componentId: "sc-xifmwj-0"
@@ -894,7 +894,7 @@ var visibleStyling = function visibleStyling(props) {
894
894
  };
895
895
  var StyledMultiselectInput = styled(StyledInput).attrs({
896
896
  'data-garden-id': COMPONENT_ID$3,
897
- 'data-garden-version': '8.49.2'
897
+ 'data-garden-version': '8.49.3'
898
898
  }).withConfig({
899
899
  displayName: "StyledMultiselectInput",
900
900
  componentId: "sc-1avnf6f-0"
@@ -924,7 +924,7 @@ var sizeStyles = function sizeStyles(props) {
924
924
  };
925
925
  var StyledMultiselectItemsContainer = styled.div.attrs({
926
926
  'data-garden-id': COMPONENT_ID$2,
927
- 'data-garden-version': '8.49.2'
927
+ 'data-garden-version': '8.49.3'
928
928
  }).withConfig({
929
929
  displayName: "StyledMultiselectItemsContainer",
930
930
  componentId: "sc-1jzhet8-0"
@@ -940,7 +940,7 @@ StyledMultiselectItemsContainer.defaultProps = {
940
940
  var COMPONENT_ID$1 = 'dropdowns.multiselect_item_wrapper';
941
941
  var StyledMultiselectItemWrapper = styled.div.attrs({
942
942
  'data-garden-id': COMPONENT_ID$1,
943
- 'data-garden-version': '8.49.2'
943
+ 'data-garden-version': '8.49.3'
944
944
  }).withConfig({
945
945
  displayName: "StyledMultiselectItemWrapper",
946
946
  componentId: "sc-1rb2bye-0"
@@ -956,7 +956,7 @@ StyledMultiselectItemWrapper.defaultProps = {
956
956
  var COMPONENT_ID = 'dropdowns.multiselect_more_anchor';
957
957
  var StyledMultiselectMoreAnchor = styled.div.attrs({
958
958
  'data-garden-id': COMPONENT_ID,
959
- 'data-garden-version': '8.49.2'
959
+ 'data-garden-version': '8.49.3'
960
960
  }).withConfig({
961
961
  displayName: "StyledMultiselectMoreAnchor",
962
962
  componentId: "sc-1m9v46e-0"
@@ -1245,7 +1245,7 @@ Autocomplete.propTypes = {
1245
1245
  isBare: PropTypes.bool,
1246
1246
  disabled: PropTypes.bool,
1247
1247
  focusInset: PropTypes.bool,
1248
- validation: PropTypes.oneOf(['success', 'warning', 'error'])
1248
+ validation: PropTypes.oneOf(VALIDATION)
1249
1249
  };
1250
1250
 
1251
1251
  var _excluded$8 = ["isCompact", "isBare", "disabled", "focusInset", "placeholder", "validation", "inputRef", "start", "end"];
@@ -1328,7 +1328,7 @@ Combobox.propTypes = {
1328
1328
  disabled: PropTypes.bool,
1329
1329
  focusInset: PropTypes.bool,
1330
1330
  placeholder: PropTypes.string,
1331
- validation: PropTypes.oneOf(['success', 'warning', 'error'])
1331
+ validation: PropTypes.oneOf(VALIDATION)
1332
1332
  };
1333
1333
 
1334
1334
  var _excluded$7 = ["renderItem", "placeholder", "maxItems", "renderShowMore", "inputRef", "start", "onKeyDown"],
@@ -1768,7 +1768,8 @@ Select.propTypes = {
1768
1768
  isBare: PropTypes.bool,
1769
1769
  disabled: PropTypes.bool,
1770
1770
  focusInset: PropTypes.bool,
1771
- validation: PropTypes.oneOf(['success', 'warning', 'error'])
1771
+ validation: PropTypes.oneOf(VALIDATION),
1772
+ start: PropTypes.any
1772
1773
  };
1773
1774
 
1774
1775
  var Field = forwardRef(function (props, fieldRef) {
@@ -1834,9 +1835,12 @@ var Message = React__default.forwardRef(function (props, ref) {
1834
1835
  });
1835
1836
  Message.displayName = 'Message';
1836
1837
  Message.propTypes = {
1837
- validation: PropTypes.oneOf(['success', 'warning', 'error'])
1838
+ validation: PropTypes.oneOf(VALIDATION)
1838
1839
  };
1839
1840
 
1841
+ var SHARED_PLACEMENT = ['auto', 'top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end'];
1842
+ var PLACEMENT = [].concat(SHARED_PLACEMENT, ['end', 'end-top', 'end-bottom', 'start', 'start-top', 'start-bottom']);
1843
+
1840
1844
  var MenuContext = React__default.createContext(undefined);
1841
1845
  var useMenuContext = function useMenuContext() {
1842
1846
  var menuContext = useContext(MenuContext);
@@ -1952,7 +1956,7 @@ Menu.propTypes = {
1952
1956
  eventsEnabled: PropTypes.bool,
1953
1957
  zIndex: PropTypes.number,
1954
1958
  style: PropTypes.object,
1955
- placement: PropTypes.oneOf(['auto', 'top', 'top-start', 'top-end', 'end', 'end-top', 'end-bottom', 'bottom', 'bottom-start', 'bottom-end', 'start', 'start-top', 'start-bottom']),
1959
+ placement: PropTypes.oneOf(PLACEMENT),
1956
1960
  isAnimated: PropTypes.bool,
1957
1961
  isCompact: PropTypes.bool,
1958
1962
  hasArrow: PropTypes.bool,
@@ -4,24 +4,8 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- import React, { HTMLAttributes } from 'react';
8
- import { VALIDATION } from '../../utils/validation';
9
- export interface IAutocompleteProps extends HTMLAttributes<HTMLDivElement> {
10
- /** Applies compact styling */
11
- isCompact?: boolean;
12
- /** Removes borders and padding */
13
- isBare?: boolean;
14
- /** Indicates that the element is not interactive */
15
- disabled?: boolean;
16
- /** Applies inset `box-shadow` styling on focus */
17
- focusInset?: boolean;
18
- /** Defines the element's validation state */
19
- validation?: VALIDATION;
20
- /** Provides ref access to the underlying input element */
21
- inputRef?: React.Ref<HTMLInputElement>;
22
- /** Defines the icon rendered in the start position */
23
- start?: any;
24
- }
7
+ import React from 'react';
8
+ import { IAutocompleteProps } from '../../types';
25
9
  /**
26
10
  * @extends HTMLAttributes<HTMLDivElement>
27
11
  */
@@ -4,28 +4,8 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- import React, { HTMLAttributes } from 'react';
8
- import { VALIDATION } from '../../utils/validation';
9
- export interface IComboboxProps extends HTMLAttributes<HTMLDivElement> {
10
- /** Applies compact styling */
11
- isCompact?: boolean;
12
- /** Removes borders and padding */
13
- isBare?: boolean;
14
- /** Indicates that the element is not interactive */
15
- disabled?: boolean;
16
- /** Applies inset `box-shadow` styling on focus */
17
- focusInset?: boolean;
18
- /** Defines text that appears in the element when no items are selected */
19
- placeholder?: string;
20
- /** Defines the element's validation state */
21
- validation?: VALIDATION;
22
- /** Provides ref access to the underlying input element */
23
- inputRef?: React.Ref<HTMLInputElement>;
24
- /** Defines the icon rendered in the start position */
25
- start?: any;
26
- /** Defines the icon rendered in the end position */
27
- end?: any;
28
- }
7
+ import React from 'react';
8
+ import { IComboboxProps } from '../../types';
29
9
  /**
30
10
  * @extends HTMLAttributes<HTMLDivElement>
31
11
  */
@@ -6,43 +6,8 @@
6
6
  */
7
7
  import { PropsWithChildren } from 'react';
8
8
  import PropTypes from 'prop-types';
9
- import { ControllerStateAndHelpers, StateChangeOptions } from 'downshift';
9
+ import { IDropdownProps } from '../../types';
10
10
  export declare const REMOVE_ITEM_STATE_TYPE = "REMOVE_ITEM";
11
- export interface IDropdownProps {
12
- /** Opens the dropdown */
13
- isOpen?: boolean;
14
- /** Identifies the currently selected item */
15
- selectedItem?: any;
16
- /** Identifies the currently selected items */
17
- selectedItems?: any[];
18
- /** Highlights an element at a selected index */
19
- highlightedIndex?: number;
20
- /** Sets the value of the input element*/
21
- inputValue?: string;
22
- /**
23
- * Handles item selection
24
- *
25
- * @param {any|null} selectedItem The selected item
26
- * @param {Object} stateAndHelpers [Downshift state and helpers](https://github.com/downshift-js/downshift#onselect)
27
- * */
28
- onSelect?: (selectedItem: any | null, stateAndHelpers: ControllerStateAndHelpers<any>) => void;
29
- /**
30
- * Handles state change
31
- *
32
- * @param {Object} options [Downshift internal state changes](https://github.com/downshift-js/downshift#onstatechange)
33
- * @param {Object} stateAndHelpers [Downshift state and helpers](https://github.com/downshift-js/downshift#onstatechange)
34
- * */
35
- onStateChange?: (options: StateChangeOptions<any>, stateAndHelpers: ControllerStateAndHelpers<any>) => void;
36
- /**
37
- * Handles input value change
38
- *
39
- * @param {string} inputValue Value of the input element
40
- * @param {Object} stateAndHelpers [Downshift state and helpers](https://github.com/downshift-js/downshift#oninputvaluechange)
41
- * */
42
- onInputValueChange?: (inputValue: string, stateAndHelpers: ControllerStateAndHelpers<any>) => void;
43
- /** Passes customization props to the [Downshift](https://www.downshift-js.com/) component */
44
- downshiftProps?: Record<string, any>;
45
- }
46
11
  export declare const Dropdown: {
47
12
  (props: PropsWithChildren<IDropdownProps>): JSX.Element;
48
13
  propTypes: {
@@ -4,11 +4,8 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- import React, { LabelHTMLAttributes } from 'react';
8
- export interface ILabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
9
- /** Applies regular (non-bold) font weight */
10
- isRegular?: boolean;
11
- }
7
+ import React from 'react';
8
+ import { ILabelProps } from '@zendeskgarden/react-forms';
12
9
  /**
13
10
  * @extends LabelHTMLAttributes<HTMLLabelElement>
14
11
  */
@@ -4,12 +4,8 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- import React, { HTMLAttributes } from 'react';
8
- import { VALIDATION } from '../../utils/validation';
9
- export interface IMessageProps extends HTMLAttributes<HTMLDivElement> {
10
- /** Applies styles based on validation state */
11
- validation?: VALIDATION;
12
- }
7
+ import React from 'react';
8
+ import { IMessageProps } from '@zendeskgarden/react-forms';
13
9
  /**
14
10
  * @extends HTMLAttributes<HTMLDivElement>
15
11
  */
@@ -5,7 +5,7 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import React from 'react';
8
- import { IItemProps } from './Item';
8
+ import { IItemProps } from '../../../types';
9
9
  /**
10
10
  * @extends LiHTMLAttributes<HTMLLIElement>
11
11
  */
@@ -4,11 +4,8 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- import React, { LiHTMLAttributes } from 'react';
8
- export interface IHeaderItemProps extends LiHTMLAttributes<HTMLLIElement> {
9
- /** Applies icon styling */
10
- hasIcon?: boolean;
11
- }
7
+ import React from 'react';
8
+ import { IHeaderItemProps } from '../../../types';
12
9
  /**
13
10
  * @extends LiHTMLAttributes<HTMLLIElement>
14
11
  */
@@ -4,19 +4,8 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- import React, { LiHTMLAttributes } from 'react';
8
- export interface IItemProps extends LiHTMLAttributes<HTMLLIElement> {
9
- /** Sets the value that is returned upon selection */
10
- value?: any;
11
- /**
12
- * @ignore Sets the wrapping component for the item
13
- */
14
- component?: any;
15
- /** Indicates that the element is not interactive */
16
- disabled?: boolean;
17
- /** Applies danger styling */
18
- isDanger?: boolean;
19
- }
7
+ import React from 'react';
8
+ import { IItemProps } from '../../../types';
20
9
  /**
21
10
  * @extends LiHTMLAttributes<HTMLLIElement>
22
11
  */
@@ -5,7 +5,7 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import React from 'react';
8
- import { IItemProps } from './Item';
8
+ import { IItemProps } from '../../../types';
9
9
  /**
10
10
  * @extends LiHTMLAttributes<HTMLLIElement>
11
11
  */
@@ -5,7 +5,7 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import React from 'react';
8
- import { IItemProps } from './Item';
8
+ import { IItemProps } from '../../../types';
9
9
  /**
10
10
  * @extends LiHTMLAttributes<HTMLLIElement>
11
11
  */
@@ -5,7 +5,7 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  import React from 'react';
8
- import { IItemProps } from './Item';
8
+ import { IItemProps } from '../../../types';
9
9
  /**
10
10
  * @extends LiHTMLAttributes<HTMLLIElement>
11
11
  */
@@ -4,47 +4,8 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- import React, { HTMLAttributes } from 'react';
8
- import { Modifiers } from 'popper.js';
9
- import { GARDEN_PLACEMENT } from '../../utils/garden-placements';
10
- export interface IMenuProps extends HTMLAttributes<HTMLUListElement> {
11
- /**
12
- * Passes configuration options to the [Popper instance](https://popper.js.org/docs/v2/modifiers/)
13
- */
14
- popperModifiers?: Modifiers;
15
- /**
16
- * Allows the menu to reposition during browser resize events
17
- */
18
- eventsEnabled?: boolean;
19
- /**
20
- * Sets the `z-index` of the menu
21
- */
22
- zIndex?: number;
23
- /**
24
- * Adjusts the placement of the menu
25
- */
26
- placement?: GARDEN_PLACEMENT;
27
- /**
28
- * Animates the menu
29
- */
30
- isAnimated?: boolean;
31
- /**
32
- * Applies compact styling
33
- */
34
- isCompact?: boolean;
35
- /**
36
- * Attaches an arrow that points towards the menu trigger
37
- */
38
- hasArrow?: boolean;
39
- /**
40
- * Sets the `max-height` of the menu
41
- */
42
- maxHeight?: string;
43
- /**
44
- * Appends the menu to the element provided
45
- */
46
- appendToNode?: HTMLElement;
47
- }
7
+ import React from 'react';
8
+ import { IMenuProps } from '../../types';
48
9
  /**
49
10
  * @extends HTMLAttributes<HTMLUListElement>
50
11
  */
@@ -4,47 +4,8 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- import React, { HTMLAttributes } from 'react';
8
- import { VALIDATION } from '../../utils/validation';
9
- export interface IMultiselectProps extends HTMLAttributes<HTMLDivElement> {
10
- /** Applies compact styling */
11
- isCompact?: boolean;
12
- /** Removes borders and padding */
13
- isBare?: boolean;
14
- /** Indicates that the element is not interactive */
15
- disabled?: boolean;
16
- /** Applies inset `box-shadow` styling on focus */
17
- focusInset?: boolean;
18
- /** Defines text that appears in the element when no items are selected */
19
- placeholder?: string;
20
- /** Defines the element's validation state */
21
- validation?: VALIDATION;
22
- /** Determines the maximum number of items displayed while collapsed */
23
- maxItems?: number;
24
- /**
25
- * Overrides the "+ N more" text displayed when the total number of items exceeds `maxItems`
26
- *
27
- * @param {number} value The number of hidden items
28
- * @returns {string} a replacement for the "+ N more" text
29
- */
30
- renderShowMore?: (value: number) => string;
31
- /**
32
- * Renders each item element. Designed to be used with [Tag](/components/tags).
33
- *
34
- * @param {Object} options Rendered item options
35
- * @param {any} options.value The item value
36
- * @param {Function} options.removeValue Remove item callback
37
- * @returns {React.ReactElement} the item element
38
- */
39
- renderItem: (options: {
40
- value: any;
41
- removeValue: () => void;
42
- }) => React.ReactElement;
43
- /** Provides DOM access to the underlying input element */
44
- inputRef?: React.Ref<HTMLInputElement>;
45
- /** Defines the icon rendered before the element's content */
46
- start?: any;
47
- }
7
+ import React from 'react';
8
+ import { IMultiselectProps } from '../../types';
48
9
  /**
49
10
  * @extends HTMLAttributes<HTMLDivElement>
50
11
  */
@@ -4,22 +4,8 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- import React, { HTMLAttributes } from 'react';
8
- import { VALIDATION } from '../../utils/validation';
9
- export interface ISelectProps extends HTMLAttributes<HTMLDivElement> {
10
- /** Applies compact styling */
11
- isCompact?: boolean;
12
- /** Removes borders and padding */
13
- isBare?: boolean;
14
- /** Indicates that the element is not interactive */
15
- disabled?: boolean;
16
- /** Applies inset `box-shadow` styling on focus */
17
- focusInset?: boolean;
18
- /** Defines the element's validation state */
19
- validation?: VALIDATION;
20
- /** Defines the icon rendered before the element's content */
21
- start?: any;
22
- }
7
+ import React from 'react';
8
+ import { ISelectProps } from '../../types';
23
9
  /**
24
10
  * @extends HTMLAttributes<HTMLDivElement>
25
11
  */
@@ -4,12 +4,8 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- import { HTMLAttributes } from 'react';
8
7
  import PropTypes from 'prop-types';
9
- export interface ITriggerProps extends HTMLAttributes<HTMLElement> {
10
- /** Passes the ref callback to components with non-standard ref props (i.e. `innerRef`) */
11
- refKey?: string;
12
- }
8
+ import { ITriggerProps } from '../../types';
13
9
  /**
14
10
  * @extends HTMLAttributes<HTMLElement>
15
11
  */
@@ -5,37 +5,27 @@
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
7
  export { Dropdown } from './elements/Dropdown/Dropdown';
8
- export type { IDropdownProps } from './elements/Dropdown/Dropdown';
9
8
  export { Trigger } from './elements/Trigger/Trigger';
10
- export type { ITriggerProps } from './elements/Trigger/Trigger';
11
9
  export { Autocomplete } from './elements/Autocomplete/Autocomplete';
12
- export type { IAutocompleteProps } from './elements/Autocomplete/Autocomplete';
13
10
  export { Combobox } from './elements/Combobox/Combobox';
14
- export type { IComboboxProps } from './elements/Combobox/Combobox';
15
11
  export { Multiselect } from './elements/Multiselect/Multiselect';
16
- export type { IMultiselectProps } from './elements/Multiselect/Multiselect';
17
12
  export { Select } from './elements/Select/Select';
18
- export type { ISelectProps } from './elements/Select/Select';
19
13
  export { Field } from './elements/Fields/Field';
20
14
  export { Hint } from './elements/Fields/Hint';
21
15
  export { Label } from './elements/Fields/Label';
22
- export type { ILabelProps } from './elements/Fields/Label';
23
16
  export { Message } from './elements/Fields/Message';
24
- export type { IMessageProps } from './elements/Fields/Message';
25
17
  export { Menu } from './elements/Menu/Menu';
26
- export type { IMenuProps } from './elements/Menu/Menu';
27
18
  export { Separator } from './elements/Menu/Separator';
28
19
  export { AddItem } from './elements/Menu/Items/AddItem';
29
20
  export { HeaderIcon } from './elements/Menu/Items/HeaderIcon';
30
21
  export { HeaderItem } from './elements/Menu/Items/HeaderItem';
31
- export type { IHeaderItemProps } from './elements/Menu/Items/HeaderItem';
32
22
  export { Item } from './elements/Menu/Items/Item';
33
- export type { IItemProps } from './elements/Menu/Items/Item';
34
23
  export { ItemMeta } from './elements/Menu/Items/ItemMeta';
35
24
  export { MediaBody } from './elements/Menu/Items/MediaBody';
36
25
  export { MediaFigure } from './elements/Menu/Items/MediaFigure';
37
26
  export { MediaItem } from './elements/Menu/Items/MediaItem';
38
27
  export { NextItem } from './elements/Menu/Items/NextItem';
39
28
  export { PreviousItem } from './elements/Menu/Items/PreviousItem';
40
- export type { GARDEN_PLACEMENT, POPPER_PLACEMENT } from './utils/garden-placements';
29
+ export type { IDropdownProps, ITriggerProps, ISelectProps, IAutocompleteProps, IComboboxProps, IMultiselectProps, IMenuProps, IItemProps, IHeaderItemProps, GardenPlacement as GARDEN_PLACEMENT, PopperPlacement as POPPER_PLACEMENT } from './types';
30
+ export type { ILabelProps, IMessageProps } from '@zendeskgarden/react-forms';
41
31
  export { resetIdCounter } from 'downshift';
@@ -4,12 +4,12 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- import { POPPER_PLACEMENT } from '../../utils/garden-placements';
7
+ import { PopperPlacement } from '../../types';
8
8
  interface IStyledMenuProps {
9
9
  isCompact?: boolean;
10
10
  isAnimated?: boolean;
11
11
  hasArrow?: boolean;
12
- placement?: POPPER_PLACEMENT;
12
+ placement?: PopperPlacement;
13
13
  maxHeight?: string;
14
14
  }
15
15
  /**
@@ -4,10 +4,10 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- import { POPPER_PLACEMENT } from '../../utils/garden-placements';
7
+ import { PopperPlacement } from '../../types';
8
8
  interface IStyledMenuWrapperProps {
9
9
  hasArrow?: boolean;
10
- placement?: POPPER_PLACEMENT;
10
+ placement?: PopperPlacement;
11
11
  isHidden?: boolean;
12
12
  zIndex?: number;
13
13
  isAnimated?: boolean;
@@ -7,7 +7,7 @@
7
7
  /// <reference types="react" />
8
8
  export declare const StyledFauxInput: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@zendeskgarden/react-forms").IFauxInputProps & import("react").RefAttributes<HTMLDivElement>> & {
9
9
  EndIcon: {
10
- (props: import("@zendeskgarden/react-forms").IFauxInputEndIconProps): JSX.Element;
10
+ (props: import("@zendeskgarden/react-forms").IFauxInputStartIconProps): JSX.Element;
11
11
  displayName: string;
12
12
  };
13
13
  StartIcon: {
@@ -0,0 +1,146 @@
1
+ /**
2
+ * Copyright Zendesk, Inc.
3
+ *
4
+ * Use of this source code is governed under the Apache License, Version 2.0
5
+ * found at http://www.apache.org/licenses/LICENSE-2.0.
6
+ */
7
+ import { HTMLAttributes, LiHTMLAttributes } from 'react';
8
+ import { ControllerStateAndHelpers, StateChangeOptions } from 'downshift';
9
+ import { Modifiers } from 'popper.js';
10
+ import { IFauxInputProps } from '@zendeskgarden/react-forms';
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
+ 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];
15
+ export interface IDropdownProps {
16
+ /** Opens the dropdown */
17
+ isOpen?: boolean;
18
+ /** Identifies the currently selected item */
19
+ selectedItem?: any;
20
+ /** Identifies the currently selected items */
21
+ selectedItems?: any[];
22
+ /** Highlights an element at a selected index */
23
+ highlightedIndex?: number;
24
+ /** Sets the value of the input element*/
25
+ inputValue?: string;
26
+ /**
27
+ * Handles item selection
28
+ *
29
+ * @param {any|null} selectedItem The selected item
30
+ * @param {Object} stateAndHelpers [Downshift state and helpers](https://github.com/downshift-js/downshift#onselect)
31
+ * */
32
+ onSelect?: (selectedItem: any | null, stateAndHelpers: ControllerStateAndHelpers<any>) => void;
33
+ /**
34
+ * Handles state change
35
+ *
36
+ * @param {Object} options [Downshift internal state changes](https://github.com/downshift-js/downshift#onstatechange)
37
+ * @param {Object} stateAndHelpers [Downshift state and helpers](https://github.com/downshift-js/downshift#onstatechange)
38
+ * */
39
+ onStateChange?: (options: StateChangeOptions<any>, stateAndHelpers: ControllerStateAndHelpers<any>) => void;
40
+ /**
41
+ * Handles input value change
42
+ *
43
+ * @param {string} inputValue Value of the input element
44
+ * @param {Object} stateAndHelpers [Downshift state and helpers](https://github.com/downshift-js/downshift#oninputvaluechange)
45
+ * */
46
+ onInputValueChange?: (inputValue: string, stateAndHelpers: ControllerStateAndHelpers<any>) => void;
47
+ /** Passes customization props to the [Downshift](https://www.downshift-js.com/) component */
48
+ downshiftProps?: Record<string, any>;
49
+ }
50
+ export interface ITriggerProps extends HTMLAttributes<HTMLElement> {
51
+ /** Passes the ref callback to components with non-standard ref props (i.e. `innerRef`) */
52
+ refKey?: string;
53
+ }
54
+ export interface ISelectProps extends Omit<IFauxInputProps, 'isFocused' | 'isHovered' | 'readOnly'> {
55
+ /** Defines the icon rendered before the element's content */
56
+ start?: any;
57
+ }
58
+ export interface IAutocompleteProps extends ISelectProps {
59
+ /** Provides ref access to the underlying input element */
60
+ inputRef?: React.Ref<HTMLInputElement>;
61
+ }
62
+ export interface IComboboxProps extends IAutocompleteProps {
63
+ /** Defines text that appears in the element when no items are selected */
64
+ placeholder?: string;
65
+ /** Defines the icon rendered in the end position */
66
+ end?: any;
67
+ }
68
+ export interface IMultiselectProps extends IAutocompleteProps {
69
+ /** Defines text that appears in the element when no items are selected */
70
+ placeholder?: string;
71
+ /** Determines the maximum number of items displayed while collapsed */
72
+ maxItems?: number;
73
+ /**
74
+ * Overrides the "+ N more" text displayed when the total number of items exceeds `maxItems`
75
+ *
76
+ * @param {number} value The number of hidden items
77
+ * @returns {string} a replacement for the "+ N more" text
78
+ */
79
+ renderShowMore?: (value: number) => string;
80
+ /**
81
+ * Renders each item element. Designed to be used with [Tag](/components/tags).
82
+ *
83
+ * @param {Object} options Rendered item options
84
+ * @param {any} options.value The item value
85
+ * @param {Function} options.removeValue Remove item callback
86
+ * @returns {React.ReactElement} the item element
87
+ */
88
+ renderItem: (options: {
89
+ value: any;
90
+ removeValue: () => void;
91
+ }) => React.ReactElement;
92
+ }
93
+ export interface IMenuProps extends HTMLAttributes<HTMLUListElement> {
94
+ /**
95
+ * Passes configuration options to the [Popper instance](https://popper.js.org/docs/v2/modifiers/)
96
+ */
97
+ popperModifiers?: Modifiers;
98
+ /**
99
+ * Allows the menu to reposition during browser resize events
100
+ */
101
+ eventsEnabled?: boolean;
102
+ /**
103
+ * Sets the `z-index` of the menu
104
+ */
105
+ zIndex?: number;
106
+ /**
107
+ * Adjusts the placement of the menu
108
+ */
109
+ placement?: GardenPlacement;
110
+ /**
111
+ * Animates the menu
112
+ */
113
+ isAnimated?: boolean;
114
+ /**
115
+ * Applies compact styling
116
+ */
117
+ isCompact?: boolean;
118
+ /**
119
+ * Attaches an arrow that points towards the menu trigger
120
+ */
121
+ hasArrow?: boolean;
122
+ /**
123
+ * Sets the `max-height` of the menu
124
+ */
125
+ maxHeight?: string;
126
+ /**
127
+ * Appends the menu to the element provided
128
+ */
129
+ appendToNode?: HTMLElement;
130
+ }
131
+ export interface IItemProps extends LiHTMLAttributes<HTMLLIElement> {
132
+ /** Sets the value that is returned upon selection */
133
+ value?: any;
134
+ /** Indicates that the element is not interactive */
135
+ disabled?: boolean;
136
+ /** Applies danger styling */
137
+ isDanger?: boolean;
138
+ /**
139
+ * @ignore Sets the wrapping component for the item
140
+ */
141
+ component?: any;
142
+ }
143
+ export interface IHeaderItemProps extends LiHTMLAttributes<HTMLLIElement> {
144
+ /** Applies icon styling */
145
+ hasIcon?: boolean;
146
+ }
@@ -4,27 +4,23 @@
4
4
  * Use of this source code is governed under the Apache License, Version 2.0
5
5
  * found at http://www.apache.org/licenses/LICENSE-2.0.
6
6
  */
7
- import { ARROW_POSITION, MENU_POSITION } from '@zendeskgarden/react-theming';
8
- declare type SHARED_PLACEMENT = 'auto' | 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
9
- export declare type GARDEN_PLACEMENT = SHARED_PLACEMENT | 'end' | 'end-top' | 'end-bottom' | 'start' | 'start-top' | 'start-bottom';
10
- export declare type POPPER_PLACEMENT = SHARED_PLACEMENT | 'right' | 'right-start' | 'right-end' | 'left' | 'left-start' | 'left-end';
7
+ import { GardenPlacement, PopperPlacement } from '../types';
11
8
  /**
12
9
  * Convert Garden RTL aware placement to Popper.JS valid placement
13
10
  */
14
- export declare function getPopperPlacement(gardenPlacement: GARDEN_PLACEMENT): POPPER_PLACEMENT;
11
+ export declare function getPopperPlacement(gardenPlacement: GardenPlacement): PopperPlacement;
15
12
  /**
16
13
  * Convert Garden RTL aware placement to RTL equivalent Popper.JS placement
17
14
  * @param {String} gardenPlacement
18
15
  */
19
- export declare function getRtlPopperPlacement(gardenPlacement: GARDEN_PLACEMENT): POPPER_PLACEMENT;
16
+ export declare function getRtlPopperPlacement(gardenPlacement: GardenPlacement): PopperPlacement;
20
17
  /**
21
18
  * Convert Popper.JS placement to corresponding arrow position
22
19
  * @param {String} popperPlacement
23
20
  */
24
- export declare function getArrowPosition(popperPlacement?: POPPER_PLACEMENT): ARROW_POSITION;
21
+ export declare function getArrowPosition(popperPlacement?: PopperPlacement): "top" | "bottom" | "right" | "left" | "top-left" | "top-right" | "right-top" | "right-bottom" | "bottom-left" | "bottom-right" | "left-top" | "left-bottom";
25
22
  /**
26
23
  * Convert Popper.JS placement to corresponding menu position
27
24
  * @param {String} popperPlacement
28
25
  */
29
- export declare function getMenuPosition(popperPlacement?: POPPER_PLACEMENT): MENU_POSITION;
30
- export {};
26
+ export declare function getMenuPosition(popperPlacement?: PopperPlacement): "top" | "bottom" | "right" | "left";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@zendeskgarden/react-dropdowns",
3
- "version": "8.49.2",
3
+ "version": "8.49.3",
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,7 +23,7 @@
23
23
  "dependencies": {
24
24
  "@zendeskgarden/container-selection": "^1.3.8",
25
25
  "@zendeskgarden/container-utilities": "^0.7.0",
26
- "@zendeskgarden/react-forms": "^8.49.2",
26
+ "@zendeskgarden/react-forms": "^8.49.3",
27
27
  "downshift": "^6.0.0",
28
28
  "polished": "^4.0.0",
29
29
  "prop-types": "^15.5.7",
@@ -38,8 +38,8 @@
38
38
  },
39
39
  "devDependencies": {
40
40
  "@types/lodash.debounce": "4.0.6",
41
- "@zendeskgarden/react-theming": "^8.49.2",
42
- "@zendeskgarden/svg-icons": "6.30.2",
41
+ "@zendeskgarden/react-theming": "^8.49.3",
42
+ "@zendeskgarden/svg-icons": "6.31.1",
43
43
  "lodash.debounce": "4.0.8"
44
44
  },
45
45
  "keywords": [
@@ -52,5 +52,5 @@
52
52
  "access": "public"
53
53
  },
54
54
  "zendeskgarden:src": "src/index.ts",
55
- "gitHead": "fd7769285a2f4bc1169c63f4db57a85a6e793027"
55
+ "gitHead": "983322364971c051ca6ce478770edfc3310e4c4b"
56
56
  }
@@ -1,7 +0,0 @@
1
- /**
2
- * Copyright Zendesk, Inc.
3
- *
4
- * Use of this source code is governed under the Apache License, Version 2.0
5
- * found at http://www.apache.org/licenses/LICENSE-2.0.
6
- */
7
- export declare type VALIDATION = 'success' | 'warning' | 'error';