@elliemae/ds-form 2.1.0-rc.3 → 2.1.0-rc.7

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 (155) hide show
  1. package/cjs/ComboBox/index.js +0 -3
  2. package/cjs/ComboBoxFreeSolo/ComboBoxFreeSolo.js +0 -1
  3. package/cjs/MenuItem/components/MultiMenuItem/MultiMenuItem.js +2 -1
  4. package/cjs/index.js +0 -2
  5. package/esm/ComboBox/index.js +0 -1
  6. package/esm/ComboBoxFreeSolo/ComboBoxFreeSolo.js +0 -1
  7. package/esm/MenuItem/components/MultiMenuItem/MultiMenuItem.js +2 -1
  8. package/esm/index.js +0 -1
  9. package/package.json +23 -207
  10. package/types/ComboBox/index.d.ts +0 -1
  11. package/types/MenuItem/components/SubmenuItem/styled.d.ts +1 -1
  12. package/types/MenuItem/components/styled.d.ts +3 -3
  13. package/types/MenuItem/props.d.ts +1 -0
  14. package/cjs/ComboBox/v3/ComboBox.js +0 -33
  15. package/cjs/ComboBox/v3/ComboBoxCTX.js +0 -55
  16. package/cjs/ComboBox/v3/ComboboxDataTestids.js +0 -17
  17. package/cjs/ComboBox/v3/config/constants.js +0 -14
  18. package/cjs/ComboBox/v3/config/useComboBox.js +0 -122
  19. package/cjs/ComboBox/v3/config/useGetPropsWithDefault.js +0 -11
  20. package/cjs/ComboBox/v3/index.d.js +0 -2
  21. package/cjs/ComboBox/v3/index.js +0 -10
  22. package/cjs/ComboBox/v3/parts/a11y-messages/MultiAllyMessages.js +0 -33
  23. package/cjs/ComboBox/v3/parts/a11y-messages/SingleAllyMessages.js +0 -28
  24. package/cjs/ComboBox/v3/parts/a11y-messages/index.js +0 -11
  25. package/cjs/ComboBox/v3/parts/a11y-messages/styled.js +0 -15
  26. package/cjs/ComboBox/v3/parts/container/Container.js +0 -67
  27. package/cjs/ComboBox/v3/parts/container/index.js +0 -9
  28. package/cjs/ComboBox/v3/parts/container/styled.js +0 -23
  29. package/cjs/ComboBox/v3/parts/controls/Controls.js +0 -71
  30. package/cjs/ComboBox/v3/parts/controls/index.js +0 -9
  31. package/cjs/ComboBox/v3/parts/controls/styled.js +0 -65
  32. package/cjs/ComboBox/v3/parts/controls-input/ControlsInput.js +0 -67
  33. package/cjs/ComboBox/v3/parts/controls-input/styled.js +0 -27
  34. package/cjs/ComboBox/v3/parts/controls-input/useControlsInput.js +0 -77
  35. package/cjs/ComboBox/v3/parts/dropdown-indicator/DropdownIndicator.js +0 -33
  36. package/cjs/ComboBox/v3/parts/dropdown-indicator/index.js +0 -2
  37. package/cjs/ComboBox/v3/parts/dropdown-indicator/styled.js +0 -17
  38. package/cjs/ComboBox/v3/parts/empty-state/index.js +0 -27
  39. package/cjs/ComboBox/v3/parts/empty-state/styled.js +0 -19
  40. package/cjs/ComboBox/v3/parts/header-list/HeaderList.js +0 -113
  41. package/cjs/ComboBox/v3/parts/header-list/index.js +0 -9
  42. package/cjs/ComboBox/v3/parts/header-list/styled.js +0 -58
  43. package/cjs/ComboBox/v3/parts/header-list/useHeaderListHandlers.js +0 -73
  44. package/cjs/ComboBox/v3/parts/menu-list/MenuList.js +0 -81
  45. package/cjs/ComboBox/v3/parts/menu-list/index.js +0 -9
  46. package/cjs/ComboBox/v3/parts/menu-list/styled.js +0 -33
  47. package/cjs/ComboBox/v3/parts/menu-list/useItemRenderer.js +0 -105
  48. package/cjs/ComboBox/v3/parts/menu-list/useMenuList.js +0 -61
  49. package/cjs/ComboBox/v3/parts/multi-selected-values-container/MultiSelectedValuesContainer.js +0 -63
  50. package/cjs/ComboBox/v3/parts/multi-selected-values-container/index.js +0 -9
  51. package/cjs/ComboBox/v3/parts/multi-selected-values-container/styled.js +0 -23
  52. package/cjs/ComboBox/v3/parts/multi-selected-values-container/useGroupPills.js +0 -71
  53. package/cjs/ComboBox/v3/parts/single-selected-value-container/SingleSelectedValueContainer.js +0 -28
  54. package/cjs/ComboBox/v3/parts/single-selected-value-container/index.js +0 -9
  55. package/cjs/ComboBox/v3/parts/single-selected-value-container/styled.js +0 -15
  56. package/cjs/ComboBox/v3/propTypes.js +0 -25
  57. package/cjs/ComboBox/v3/utils/hooks/useKeyboardNavigation.js +0 -152
  58. package/cjs/ComboBox/v3/utils/hooks/useOnElementResize.js +0 -37
  59. package/cjs/ComboBox/v3/utils/listHelper.js +0 -39
  60. package/esm/ComboBox/v3/ComboBox.js +0 -24
  61. package/esm/ComboBox/v3/ComboBoxCTX.js +0 -49
  62. package/esm/ComboBox/v3/ComboboxDataTestids.js +0 -13
  63. package/esm/ComboBox/v3/config/constants.js +0 -10
  64. package/esm/ComboBox/v3/config/useComboBox.js +0 -114
  65. package/esm/ComboBox/v3/config/useGetPropsWithDefault.js +0 -7
  66. package/esm/ComboBox/v3/index.d.js +0 -1
  67. package/esm/ComboBox/v3/index.js +0 -1
  68. package/esm/ComboBox/v3/parts/a11y-messages/MultiAllyMessages.js +0 -25
  69. package/esm/ComboBox/v3/parts/a11y-messages/SingleAllyMessages.js +0 -20
  70. package/esm/ComboBox/v3/parts/a11y-messages/index.js +0 -2
  71. package/esm/ComboBox/v3/parts/a11y-messages/styled.js +0 -7
  72. package/esm/ComboBox/v3/parts/container/Container.js +0 -59
  73. package/esm/ComboBox/v3/parts/container/index.js +0 -1
  74. package/esm/ComboBox/v3/parts/container/styled.js +0 -13
  75. package/esm/ComboBox/v3/parts/controls/Controls.js +0 -63
  76. package/esm/ComboBox/v3/parts/controls/index.js +0 -1
  77. package/esm/ComboBox/v3/parts/controls/styled.js +0 -52
  78. package/esm/ComboBox/v3/parts/controls-input/ControlsInput.js +0 -59
  79. package/esm/ComboBox/v3/parts/controls-input/styled.js +0 -16
  80. package/esm/ComboBox/v3/parts/controls-input/useControlsInput.js +0 -73
  81. package/esm/ComboBox/v3/parts/dropdown-indicator/DropdownIndicator.js +0 -26
  82. package/esm/ComboBox/v3/parts/dropdown-indicator/index.js +0 -1
  83. package/esm/ComboBox/v3/parts/dropdown-indicator/styled.js +0 -8
  84. package/esm/ComboBox/v3/parts/empty-state/index.js +0 -19
  85. package/esm/ComboBox/v3/parts/empty-state/styled.js +0 -10
  86. package/esm/ComboBox/v3/parts/header-list/HeaderList.js +0 -105
  87. package/esm/ComboBox/v3/parts/header-list/index.js +0 -1
  88. package/esm/ComboBox/v3/parts/header-list/styled.js +0 -41
  89. package/esm/ComboBox/v3/parts/header-list/useHeaderListHandlers.js +0 -69
  90. package/esm/ComboBox/v3/parts/menu-list/MenuList.js +0 -73
  91. package/esm/ComboBox/v3/parts/menu-list/index.js +0 -1
  92. package/esm/ComboBox/v3/parts/menu-list/styled.js +0 -23
  93. package/esm/ComboBox/v3/parts/menu-list/useItemRenderer.js +0 -97
  94. package/esm/ComboBox/v3/parts/menu-list/useMenuList.js +0 -57
  95. package/esm/ComboBox/v3/parts/multi-selected-values-container/MultiSelectedValuesContainer.js +0 -54
  96. package/esm/ComboBox/v3/parts/multi-selected-values-container/index.js +0 -1
  97. package/esm/ComboBox/v3/parts/multi-selected-values-container/styled.js +0 -13
  98. package/esm/ComboBox/v3/parts/multi-selected-values-container/useGroupPills.js +0 -67
  99. package/esm/ComboBox/v3/parts/single-selected-value-container/SingleSelectedValueContainer.js +0 -20
  100. package/esm/ComboBox/v3/parts/single-selected-value-container/index.js +0 -1
  101. package/esm/ComboBox/v3/parts/single-selected-value-container/styled.js +0 -7
  102. package/esm/ComboBox/v3/propTypes.js +0 -21
  103. package/esm/ComboBox/v3/utils/hooks/useKeyboardNavigation.js +0 -148
  104. package/esm/ComboBox/v3/utils/hooks/useOnElementResize.js +0 -33
  105. package/esm/ComboBox/v3/utils/listHelper.js +0 -30
  106. package/types/ComboBox/v3/ComboBox.d.ts +0 -62
  107. package/types/ComboBox/v3/ComboBoxCTX.d.ts +0 -6
  108. package/types/ComboBox/v3/ComboboxDataTestids.d.ts +0 -11
  109. package/types/ComboBox/v3/config/constants.d.ts +0 -8
  110. package/types/ComboBox/v3/config/useComboBox.d.ts +0 -2
  111. package/types/ComboBox/v3/config/useGetPropsWithDefault.d.ts +0 -2
  112. package/types/ComboBox/v3/index.d.ts +0 -1
  113. package/types/ComboBox/v3/parts/a11y-messages/MultiAllyMessages.d.ts +0 -3
  114. package/types/ComboBox/v3/parts/a11y-messages/SingleAllyMessages.d.ts +0 -3
  115. package/types/ComboBox/v3/parts/a11y-messages/index.d.ts +0 -2
  116. package/types/ComboBox/v3/parts/a11y-messages/styled.d.ts +0 -1
  117. package/types/ComboBox/v3/parts/container/Container.d.ts +0 -3
  118. package/types/ComboBox/v3/parts/container/index.d.ts +0 -1
  119. package/types/ComboBox/v3/parts/container/styled.d.ts +0 -3
  120. package/types/ComboBox/v3/parts/controls/Controls.d.ts +0 -3
  121. package/types/ComboBox/v3/parts/controls/index.d.ts +0 -1
  122. package/types/ComboBox/v3/parts/controls/styled.d.ts +0 -7
  123. package/types/ComboBox/v3/parts/controls-input/ControlsInput.d.ts +0 -3
  124. package/types/ComboBox/v3/parts/controls-input/styled.d.ts +0 -4
  125. package/types/ComboBox/v3/parts/controls-input/useControlsInput.d.ts +0 -12
  126. package/types/ComboBox/v3/parts/dropdown-indicator/DropdownIndicator.d.ts +0 -3
  127. package/types/ComboBox/v3/parts/dropdown-indicator/index.d.ts +0 -0
  128. package/types/ComboBox/v3/parts/dropdown-indicator/styled.d.ts +0 -1
  129. package/types/ComboBox/v3/parts/empty-state/index.d.ts +0 -3
  130. package/types/ComboBox/v3/parts/empty-state/styled.d.ts +0 -2
  131. package/types/ComboBox/v3/parts/header-list/HeaderList.d.ts +0 -3
  132. package/types/ComboBox/v3/parts/header-list/index.d.ts +0 -1
  133. package/types/ComboBox/v3/parts/header-list/styled.d.ts +0 -7
  134. package/types/ComboBox/v3/parts/header-list/useHeaderListHandlers.d.ts +0 -12
  135. package/types/ComboBox/v3/parts/menu-list/MenuList.d.ts +0 -3
  136. package/types/ComboBox/v3/parts/menu-list/index.d.ts +0 -1
  137. package/types/ComboBox/v3/parts/menu-list/styled.d.ts +0 -10
  138. package/types/ComboBox/v3/parts/menu-list/useItemRenderer.d.ts +0 -2
  139. package/types/ComboBox/v3/parts/menu-list/useMenuList.d.ts +0 -2
  140. package/types/ComboBox/v3/parts/multi-selected-values-container/MultiSelectedValuesContainer.d.ts +0 -3
  141. package/types/ComboBox/v3/parts/multi-selected-values-container/index.d.ts +0 -1
  142. package/types/ComboBox/v3/parts/multi-selected-values-container/styled.d.ts +0 -3
  143. package/types/ComboBox/v3/parts/multi-selected-values-container/useGroupPills.d.ts +0 -2
  144. package/types/ComboBox/v3/parts/single-selected-value-container/SingleSelectedValueContainer.d.ts +0 -3
  145. package/types/ComboBox/v3/parts/single-selected-value-container/index.d.ts +0 -1
  146. package/types/ComboBox/v3/parts/single-selected-value-container/styled.d.ts +0 -1
  147. package/types/ComboBox/v3/propTypes.d.ts +0 -51
  148. package/types/ComboBox/v3/tests/combobox-general.test.d.ts +0 -1
  149. package/types/ComboBox/v3/tests/combobox-multi-select.test.d.ts +0 -1
  150. package/types/ComboBox/v3/tests/combobox-single-select.test.d.ts +0 -1
  151. package/types/ComboBox/v3/tests/combobox-special-keys.test.d.ts +0 -1
  152. package/types/ComboBox/v3/tests/utils.d.ts +0 -22
  153. package/types/ComboBox/v3/utils/hooks/useKeyboardNavigation.d.ts +0 -4
  154. package/types/ComboBox/v3/utils/hooks/useOnElementResize.d.ts +0 -3
  155. package/types/ComboBox/v3/utils/listHelper.d.ts +0 -7
@@ -1,114 +0,0 @@
1
- import _defineProperty from '@babel/runtime/helpers/esm/defineProperty';
2
- import 'core-js/modules/web.dom-collections.iterator.js';
3
- import 'core-js/modules/esnext.async-iterator.for-each.js';
4
- import 'core-js/modules/esnext.iterator.constructor.js';
5
- import 'core-js/modules/esnext.iterator.for-each.js';
6
- import 'core-js/modules/esnext.async-iterator.find.js';
7
- import 'core-js/modules/esnext.iterator.find.js';
8
- import 'core-js/modules/esnext.async-iterator.filter.js';
9
- import 'core-js/modules/esnext.iterator.filter.js';
10
- import { useState, useRef, useCallback, useMemo } from 'react';
11
- import { useVirtual } from 'react-virtual';
12
- import { useGetComboBoxWithDefaultsProps } from './useGetPropsWithDefault.js';
13
-
14
- function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
15
-
16
- function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
17
- const useComboBox = props => {
18
- const [showPopover, setShowPopover] = useState(false);
19
- const [referenceElement, setReferenceElement] = useState(null);
20
- const [showSelectedValue, setShowSelectedValue] = useState(false);
21
- const [showSelectedOptions, setShowSelectedOptions] = useState(false);
22
- const [hasFocus, setHasFocus] = useState(false);
23
- const [focusOptionIdx, setCurrentOption] = useState('');
24
- const inputRef = useRef(null);
25
- const listRef = useRef(null);
26
- const wrapperListRef = useRef(null);
27
- const selectedOptionsRef = useRef(null);
28
- const controlsWrapperRef = useRef(null);
29
- const pillGroupRef = useRef(null);
30
- const propsWithDefaults = useGetComboBoxWithDefaultsProps(props);
31
- const {
32
- options,
33
- selectedValues
34
- } = propsWithDefaults; // ---------------------------------------------------------------------------
35
- // Menu Options with/out selected filter
36
- // ---------------------------------------------------------------------------
37
-
38
- const selectedValuesWithSections = useCallback(() => {
39
- var _items2;
40
-
41
- const multiSelectedValue = selectedValues;
42
- const items = [];
43
- options.forEach(option => {
44
- const isSelectedValue = multiSelectedValue.find(item => item.dsId === option.dsId);
45
-
46
- if (isSelectedValue) {
47
- items.push(option);
48
- }
49
-
50
- if (option.type === 'section') {
51
- var _items;
52
-
53
- if (((_items = items[items.length - 1]) === null || _items === void 0 ? void 0 : _items.type) === 'section') {
54
- items[items.length - 1] = option;
55
- } else {
56
- items.push(option);
57
- }
58
- }
59
- });
60
-
61
- if (((_items2 = items[items.length - 1]) === null || _items2 === void 0 ? void 0 : _items2.type) === 'section') {
62
- items.pop();
63
- }
64
-
65
- return items;
66
- }, [options, selectedValues]);
67
- const correctOptions = useMemo(() => showSelectedOptions && Array.isArray(selectedValues) && selectedValues.length > 0 ? selectedValuesWithSections() : options, [options, selectedValuesWithSections, selectedValues, showSelectedOptions]); // ===========================================================================
68
- // Virtualization setup
69
- // ===========================================================================
70
-
71
- const virtualListHelpers = useVirtual({
72
- size: correctOptions.length,
73
- parentRef: listRef,
74
- overscan: 15,
75
- paddingStart: 0
76
- }); // ===========================================================================
77
- // Scroll into view function
78
- // ===========================================================================
79
-
80
- const scrollOptionIntoView = useCallback(function (dsId) {
81
- let opts = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {
82
- align: 'center'
83
- };
84
- virtualListHelpers.scrollToIndex(correctOptions.findIndex(opt => opt.dsId === dsId), opts);
85
- }, [correctOptions, virtualListHelpers]);
86
- const ctx = useMemo(() => ({
87
- props: _objectSpread(_objectSpread({}, propsWithDefaults), {}, {
88
- options: correctOptions
89
- }),
90
- virtualListHelpers,
91
- showPopover,
92
- referenceElement,
93
- inputRef,
94
- showSelectedValue,
95
- listRef,
96
- focusOptionIdx,
97
- selectedOptionsRef,
98
- controlsWrapperRef,
99
- hasFocus,
100
- pillGroupRef,
101
- showSelectedOptions,
102
- wrapperListRef,
103
- setShowSelectedOptions,
104
- setHasFocus,
105
- setCurrentOption,
106
- scrollOptionIntoView,
107
- setShowSelectedValue,
108
- setReferenceElement,
109
- setShowPopover
110
- }), [scrollOptionIntoView, correctOptions, propsWithDefaults, virtualListHelpers, focusOptionIdx, showSelectedValue, wrapperListRef, showSelectedOptions, showPopover, pillGroupRef, referenceElement, inputRef, selectedOptionsRef, controlsWrapperRef, hasFocus, listRef]);
111
- return ctx;
112
- };
113
-
114
- export { useComboBox };
@@ -1,7 +0,0 @@
1
- import { useMemoMergePropsWithDefault } from '@elliemae/ds-props-helpers';
2
- import { defaultProps } from '../ComboBoxCTX.js';
3
-
4
- // we have to merge the "default" nested default values with what the user gives us...
5
- const useGetComboBoxWithDefaultsProps = props => useMemoMergePropsWithDefault(props, defaultProps);
6
-
7
- export { useGetComboBoxWithDefaultsProps };
@@ -1 +0,0 @@
1
-
@@ -1 +0,0 @@
1
- export { DSComboBox, DSComboBoxWithSchema } from './ComboBox.js';
@@ -1,25 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import 'core-js/modules/esnext.async-iterator.map.js';
3
- import 'core-js/modules/esnext.iterator.map.js';
4
- import { useContext } from 'react';
5
- import { ComboBoxContext } from '../../ComboBoxCTX.js';
6
- import { getSelectableOptions } from '../../utils/listHelper.js';
7
- import { StyledA11ySelectedValues } from './styled.js';
8
-
9
- const MultiAllyMessages = () => {
10
- const {
11
- props: {
12
- options,
13
- selectedValues
14
- }
15
- } = useContext(ComboBoxContext);
16
- const selectableOptions = getSelectableOptions(options);
17
- const multipleSelectedValues = selectedValues;
18
- return /*#__PURE__*/_jsx(StyledA11ySelectedValues, {
19
- "aria-live": "polite",
20
- "aria-atomic": "false",
21
- "aria-relevant": "additions text"
22
- }, void 0, "Options selected: ".concat(multipleSelectedValues.map(item => item.label).join(', '), ". ").concat(multipleSelectedValues.length, " of ").concat(selectableOptions.length));
23
- };
24
-
25
- export { MultiAllyMessages };
@@ -1,20 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import { useContext } from 'react';
3
- import { ComboBoxContext } from '../../ComboBoxCTX.js';
4
- import { StyledA11ySelectedValues } from './styled.js';
5
-
6
- const SingleAllyMessages = () => {
7
- const {
8
- props: {
9
- selectedValues
10
- }
11
- } = useContext(ComboBoxContext);
12
- const singleSelectedValue = selectedValues;
13
- return /*#__PURE__*/_jsx(StyledA11ySelectedValues, {
14
- "aria-live": "polite",
15
- "aria-atomic": "false",
16
- "aria-relevant": "additions text"
17
- }, void 0, "Option selected: ".concat(singleSelectedValue.label, "."));
18
- };
19
-
20
- export { SingleAllyMessages };
@@ -1,2 +0,0 @@
1
- export { MultiAllyMessages } from './MultiAllyMessages.js';
2
- export { SingleAllyMessages } from './SingleAllyMessages.js';
@@ -1,7 +0,0 @@
1
- import styled from 'styled-components';
2
-
3
- const StyledA11ySelectedValues = /*#__PURE__*/styled.span.withConfig({
4
- componentId: "sc-4xp40i-0"
5
- })(["width:1px;height:1px;position:absolute;clip:rect(1px,1px,1px,1px);"]);
6
-
7
- export { StyledA11ySelectedValues };
@@ -1,59 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import { useContext, useCallback } from 'react';
3
- import { DSPopperJS } from '@elliemae/ds-popperjs';
4
- import { ComboBoxContext } from '../../ComboBoxCTX.js';
5
- import { StyledPopperWrapper, StyledContainerInline, StyledContainerWithPopper } from './styled.js';
6
- import { Controls } from '../controls/Controls.js';
7
- import { MenuList } from '../menu-list/MenuList.js';
8
- import { jsxs, Fragment } from 'react/jsx-runtime';
9
-
10
- var _Controls, _MenuList, _MenuList2;
11
-
12
- const Container = () => {
13
- const {
14
- props: {
15
- inline,
16
- startPlacementPreference,
17
- placementOrderPreference
18
- },
19
- showPopover,
20
- inputRef,
21
- setReferenceElement,
22
- setShowPopover,
23
- referenceElement
24
- } = useContext(ComboBoxContext);
25
- const handleCloseMenu = useCallback(() => {
26
- setShowPopover(false);
27
- if (inputRef.current) inputRef.current.blur();
28
- }, [inputRef, setShowPopover]);
29
- const handleMouseDown = useCallback(e => {
30
- e.preventDefault();
31
- }, []);
32
- const handleOnClickContainer = useCallback(() => {
33
- setShowPopover(!showPopover);
34
- }, [setShowPopover, showPopover]);
35
- const StyledContainer = inline ? StyledContainerInline : StyledContainerWithPopper;
36
- return /*#__PURE__*/jsxs(Fragment, {
37
- children: [/*#__PURE__*/jsxs(StyledContainer, {
38
- ref: setReferenceElement,
39
- onClick: handleOnClickContainer,
40
- children: [_Controls || (_Controls = /*#__PURE__*/_jsx(Controls, {})), inline ? _MenuList || (_MenuList = /*#__PURE__*/_jsx(MenuList, {})) : null]
41
- }), !inline ? /*#__PURE__*/_jsx(DSPopperJS, {
42
- customOffset: [0, 5],
43
- closeContextMenu: handleCloseMenu,
44
- referenceElement: referenceElement,
45
- showPopover: showPopover,
46
- startPlacementPreference: startPlacementPreference,
47
- placementOrderPreference: placementOrderPreference,
48
- withoutPortal: true,
49
- withoutArrow: true,
50
- withoutAnimation: true,
51
- zIndex: 10
52
- }, void 0, /*#__PURE__*/_jsx(StyledPopperWrapper, {
53
- tabIndex: -1,
54
- onMouseDown: handleMouseDown
55
- }, void 0, _MenuList2 || (_MenuList2 = /*#__PURE__*/_jsx(MenuList, {})))) : null]
56
- });
57
- };
58
-
59
- export { Container };
@@ -1 +0,0 @@
1
- export { Container } from './Container.js';
@@ -1,13 +0,0 @@
1
- import styled from 'styled-components';
2
-
3
- const StyledContainerWithPopper = /*#__PURE__*/styled.div.withConfig({
4
- componentId: "sc-17wftik-0"
5
- })(["width:100%;height:28px;position:relative;"]);
6
- const StyledContainerInline = /*#__PURE__*/styled.div.withConfig({
7
- componentId: "sc-17wftik-1"
8
- })(["width:100%;position:relative;"]);
9
- const StyledPopperWrapper = /*#__PURE__*/styled.div.withConfig({
10
- componentId: "sc-17wftik-2"
11
- })(["background:#fff;overflow:auto;position:relative;"]);
12
-
13
- export { StyledContainerInline, StyledContainerWithPopper, StyledPopperWrapper };
@@ -1,63 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import { useContext, useCallback } from 'react';
3
- import DropdownIndicator from '../dropdown-indicator/DropdownIndicator.js';
4
- import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
5
- import { ComboBoxContext } from '../../ComboBoxCTX.js';
6
- import { StyledControlsWrapper, StyledSelection, StyledHeaderActionsWrapper, StyleHeaderActionsSeparator } from './styled.js';
7
- import { MultiSelectedValuesContainer } from '../multi-selected-values-container/MultiSelectedValuesContainer.js';
8
- import { ControlsInput } from '../controls-input/ControlsInput.js';
9
- import { SingleSelectedValueContainer } from '../single-selected-value-container/SingleSelectedValueContainer.js';
10
- import { jsxs, jsx } from 'react/jsx-runtime';
11
-
12
- var _MultiSelectedValuesC, _SingleSelectedValueC, _ControlsInput, _StyledHeaderActionsW;
13
-
14
- const Controls = () => {
15
- const {
16
- props: {
17
- inline,
18
- inputMinWidth,
19
- hasError,
20
- selectedValues
21
- },
22
- inputRef,
23
- selectedOptionsRef,
24
- setShowPopover,
25
- showPopover,
26
- hasFocus,
27
- controlsWrapperRef
28
- } = useContext(ComboBoxContext);
29
- const handleOnClick = useCallback(() => {
30
- if (hasFocus && showPopover && !inline) {
31
- inputRef.current.blur();
32
- } else if (hasFocus) {
33
- setShowPopover(true);
34
- } else {
35
- inputRef.current.focus();
36
- }
37
- }, [hasFocus, setShowPopover, showPopover, inputRef, inline]);
38
-
39
- const handleOnMouseDown = e => {
40
- if (hasFocus || inline) {
41
- e.preventDefault();
42
- }
43
- };
44
-
45
- const cols = !inline ? ['minmax(0px,max-content)', 'minmax(20px, auto)', '29px'] : ['minmax(0px, auto)'];
46
- return /*#__PURE__*/jsxs(StyledControlsWrapper, {
47
- ref: controlsWrapperRef,
48
- cols: cols,
49
- minWidth: inputMinWidth,
50
- hasError: hasError,
51
- hasFocus: hasFocus,
52
- inline: inline,
53
- onClick: handleOnClick,
54
- onMouseDown: handleOnMouseDown,
55
- children: [!inline && /*#__PURE__*/jsx(StyledSelection, {
56
- ref: selectedOptionsRef,
57
- "data-testid": ComboboxDataTestid.SELECTED_VALUES,
58
- children: Array.isArray(selectedValues) ? _MultiSelectedValuesC || (_MultiSelectedValuesC = /*#__PURE__*/_jsx(MultiSelectedValuesContainer, {})) : _SingleSelectedValueC || (_SingleSelectedValueC = /*#__PURE__*/_jsx(SingleSelectedValueContainer, {}))
59
- }), _ControlsInput || (_ControlsInput = /*#__PURE__*/_jsx(ControlsInput, {})), !inline && (_StyledHeaderActionsW || (_StyledHeaderActionsW = /*#__PURE__*/_jsx(StyledHeaderActionsWrapper, {}, void 0, /*#__PURE__*/_jsx(StyleHeaderActionsSeparator, {}), /*#__PURE__*/_jsx(DropdownIndicator, {}))))]
60
- });
61
- };
62
-
63
- export { Controls };
@@ -1 +0,0 @@
1
- export { Controls } from './Controls.js';
@@ -1,52 +0,0 @@
1
- import _taggedTemplateLiteral from '@babel/runtime/helpers/esm/taggedTemplateLiteral';
2
- import styled from 'styled-components';
3
- import { css } from '@elliemae/ds-system';
4
- import { Grid } from '@elliemae/ds-grid';
5
-
6
- var _templateObject, _templateObject2;
7
- const normalBorder = css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n border: 1px solid\n ", ";\n"])), props => {
8
- if (props.hasError) {
9
- return props.theme.colors.danger[900];
10
- }
11
-
12
- return props.theme.colors.neutral[400];
13
- });
14
- const focusBorder = css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n border: 2px solid ", ";\n"])), _ref => {
15
- let {
16
- theme
17
- } = _ref;
18
- return theme.colors.brand[700];
19
- });
20
- const StyledControlsWrapper = /*#__PURE__*/styled(Grid).withConfig({
21
- componentId: "sc-64uci7-0"
22
- })(["background:transparent;position:relative;border-radius:2px;min-width:", ";align-items:center;align-content:center;height:28px;padding-left:8px;margin:", ";&::after{display:block;content:' ';position:absolute;top:0;left:0;right:0;bottom:0;border-radius:2px;", " pointer-events:none;z-index:7;}"], _ref2 => {
23
- let {
24
- minWidth,
25
- inline
26
- } = _ref2;
27
- return inline ? '' : "".concat(minWidth, "px");
28
- }, _ref3 => {
29
- let {
30
- inline
31
- } = _ref3;
32
- return inline ? '10px 16px' : 'none';
33
- }, _ref4 => {
34
- let {
35
- hasFocus
36
- } = _ref4;
37
- return hasFocus ? focusBorder : normalBorder;
38
- });
39
- const StyledSelection = /*#__PURE__*/styled.div.withConfig({
40
- componentId: "sc-64uci7-1"
41
- })(["font-size:13px;margin-right:3px;line-height:13px;display:flex;"]);
42
- const StyledHeaderActionsWrapper = /*#__PURE__*/styled.div.withConfig({
43
- componentId: "sc-64uci7-2"
44
- })(["align-items:center;align-self:stretch;display:flex;box-sizing:border-box;height:28px;.em-ds-button--text:focus::after{border:none;}"]);
45
- const StyleDropdownIndicator = /*#__PURE__*/styled.div.withConfig({
46
- componentId: "sc-64uci7-3"
47
- })([""]);
48
- const StyleHeaderActionsSeparator = /*#__PURE__*/styled.span.withConfig({
49
- componentId: "sc-64uci7-4"
50
- })(["align-self:stretch;margin:4px 0px;width:1px;background-color:", ";"], props => props.theme.colors.neutral['500']);
51
-
52
- export { StyleDropdownIndicator, StyleHeaderActionsSeparator, StyledControlsWrapper, StyledHeaderActionsWrapper, StyledSelection };
@@ -1,59 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import { useContext } from 'react';
3
- import { SimpleTruncatedTooltipText } from '@elliemae/ds-truncated-tooltip-text';
4
- import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
5
- import { StyledInputWrapper, StyledInputWidthReference, StyledInputPlaceHolder, StyledInput } from './styled.js';
6
- import { useKeyboardNavigation } from '../../utils/hooks/useKeyboardNavigation.js';
7
- import { useControlsInput } from './useControlsInput.js';
8
- import { ComboBoxContext } from '../../ComboBoxCTX.js';
9
- import { jsx } from 'react/jsx-runtime';
10
-
11
- const ControlsInput = () => {
12
- const {
13
- props: {
14
- autoFocus
15
- },
16
- showPopover,
17
- focusOptionIdx,
18
- inputRef
19
- } = useContext(ComboBoxContext);
20
- const {
21
- onInputKeyDown
22
- } = useKeyboardNavigation();
23
- const {
24
- spanReference,
25
- width,
26
- spanReferenceText,
27
- showPlaceholder,
28
- handleOnBlur,
29
- handleOnChange,
30
- handleOnFocus
31
- } = useControlsInput();
32
- return /*#__PURE__*/_jsx(StyledInputWrapper, {}, void 0, /*#__PURE__*/jsx(StyledInputWidthReference, {
33
- ref: spanReference,
34
- children: spanReferenceText
35
- }), /*#__PURE__*/_jsx(StyledInputPlaceHolder, {}, void 0, /*#__PURE__*/_jsx(SimpleTruncatedTooltipText, {
36
- value: showPlaceholder
37
- })), /*#__PURE__*/jsx(StyledInput, {
38
- "data-testid": ComboboxDataTestid.INPUT,
39
- autoFocus: autoFocus,
40
- "aria-labelledby": "combo-label",
41
- "aria-controls": "combo-listbox",
42
- "aria-owns": "combo-listbox",
43
- "aria-activedescendant": focusOptionIdx,
44
- "aria-expanded": showPopover,
45
- "aria-haspopup": "listbox",
46
- role: "combobox",
47
- style: {
48
- width
49
- },
50
- ref: inputRef,
51
- type: "text",
52
- onKeyDown: onInputKeyDown,
53
- onChange: handleOnChange,
54
- onBlur: handleOnBlur,
55
- onFocus: handleOnFocus
56
- }));
57
- };
58
-
59
- export { ControlsInput };
@@ -1,16 +0,0 @@
1
- import styled from 'styled-components';
2
-
3
- const StyledInput = /*#__PURE__*/styled.input.withConfig({
4
- componentId: "sc-1ue5xik-0"
5
- })(["font-size:13px;line-height:13px;border:none;padding:0;outline:none;color:", ";&:focus{outline:none;}"], props => props.theme.colors.neutral[700]);
6
- const StyledInputPlaceHolder = /*#__PURE__*/styled.div.withConfig({
7
- componentId: "sc-1ue5xik-1"
8
- })(["font-style:italic;color:", ";position:absolute;display:flex;align-items:center;width:100%;user-select:none;height:28px;"], props => props.theme.colors.neutral[500]);
9
- const StyledInputWidthReference = /*#__PURE__*/styled.span.withConfig({
10
- componentId: "sc-1ue5xik-2"
11
- })(["visibility:hidden;position:absolute;top:-9999px;"]);
12
- const StyledInputWrapper = /*#__PURE__*/styled.div.withConfig({
13
- componentId: "sc-1ue5xik-3"
14
- })(["position:relative;flex:1;margin-right:5px;display:flex;align-items:center;"]);
15
-
16
- export { StyledInput, StyledInputPlaceHolder, StyledInputWidthReference, StyledInputWrapper };
@@ -1,73 +0,0 @@
1
- import 'core-js/modules/web.dom-collections.iterator.js';
2
- import 'core-js/modules/es.string.replace.js';
3
- import { useContext, useState, useRef, useEffect, useCallback, useMemo } from 'react';
4
- import { ComboBoxContext } from '../../ComboBoxCTX.js';
5
- import { isSelectedValueEmpty } from '../../utils/listHelper.js';
6
-
7
- const useControlsInput = () => {
8
- var _inputRef$current, _inputRef$current2, _inputRef$current3;
9
-
10
- const {
11
- props: {
12
- selectedValues,
13
- placeholder,
14
- onFilter
15
- },
16
- setShowPopover,
17
- setCurrentOption,
18
- inputRef,
19
- wrapperListRef,
20
- setHasFocus,
21
- setShowSelectedValue,
22
- setShowSelectedOptions
23
- } = useContext(ComboBoxContext);
24
- const [width, setWidth] = useState(1);
25
- const spanReference = useRef(null);
26
- useEffect(() => {
27
- var _spanReference$curren;
28
-
29
- setWidth(((_spanReference$curren = spanReference.current) === null || _spanReference$curren === void 0 ? void 0 : _spanReference$curren.offsetWidth) || 1);
30
- }, [(_inputRef$current = inputRef.current) === null || _inputRef$current === void 0 ? void 0 : _inputRef$current.value]);
31
- useEffect(() => {
32
- setShowSelectedValue(true);
33
- }, [selectedValues, setShowSelectedValue]); // When writting open popover
34
- // and refresh selected values and update filter outside value.
35
-
36
- const handleOnChange = useCallback(e => {
37
- setShowSelectedOptions(false);
38
- if (e.currentTarget.value) setShowSelectedValue(false);
39
- setShowPopover(true);
40
- onFilter(e.currentTarget.value);
41
- }, [onFilter, setShowPopover, setShowSelectedOptions, setShowSelectedValue]);
42
- const handleOnBlur = useCallback(() => {
43
- setHasFocus(false);
44
- setTimeout(() => {
45
- var _wrapperListRef$curre;
46
-
47
- if (!(wrapperListRef !== null && wrapperListRef !== void 0 && (_wrapperListRef$curre = wrapperListRef.current) !== null && _wrapperListRef$curre !== void 0 && _wrapperListRef$curre.contains(document.activeElement))) {
48
- setShowPopover(false);
49
- }
50
-
51
- setCurrentOption('');
52
- setShowSelectedValue(true);
53
- onFilter('');
54
- if (inputRef.current) inputRef.current.value = '';
55
- });
56
- }, [setHasFocus, setCurrentOption, wrapperListRef, onFilter, inputRef, setShowPopover, setShowSelectedValue]);
57
- const handleOnFocus = useCallback(() => {
58
- setHasFocus(true);
59
- }, [setHasFocus]);
60
- const showPlaceholder = !((_inputRef$current2 = inputRef.current) !== null && _inputRef$current2 !== void 0 && _inputRef$current2.value) && isSelectedValueEmpty(selectedValues) ? placeholder : null;
61
- const spanReferenceText = (_inputRef$current3 = inputRef.current) === null || _inputRef$current3 === void 0 ? void 0 : _inputRef$current3.value.replace(/\s/g, '\u00a0');
62
- return useMemo(() => ({
63
- handleOnFocus,
64
- handleOnBlur,
65
- handleOnChange,
66
- showPlaceholder,
67
- spanReferenceText,
68
- width,
69
- spanReference
70
- }), [handleOnFocus, handleOnBlur, handleOnChange, spanReferenceText, showPlaceholder, width, spanReference]);
71
- };
72
-
73
- export { useControlsInput };
@@ -1,26 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import { useContext } from 'react';
3
- import ChevronSmallDown from '@elliemae/ds-icons/ChevronSmallDown';
4
- import { ComboBoxContext } from '../../ComboBoxCTX.js';
5
- import { StyledDropDownButton } from './styled.js';
6
- import { ComboboxDataTestid } from '../../ComboboxDataTestids.js';
7
-
8
- var _ChevronSmallDown;
9
-
10
- const DropdownIndicator = () => {
11
- const {
12
- showPopover
13
- } = useContext(ComboBoxContext);
14
- return /*#__PURE__*/_jsx(StyledDropDownButton, {
15
- "data-testid": ComboboxDataTestid.DROPDOWN,
16
- "aria-controls": "combo-listbox",
17
- "aria-labelledby": "combo-label",
18
- "aria-expanded": showPopover,
19
- "aria-haspopup": "listbox",
20
- buttonType: "text",
21
- icon: _ChevronSmallDown || (_ChevronSmallDown = /*#__PURE__*/_jsx(ChevronSmallDown, {})),
22
- tabIndex: -1
23
- });
24
- };
25
-
26
- export { DropdownIndicator as default };
@@ -1,8 +0,0 @@
1
- import styled from 'styled-components';
2
- import DSButton from '@elliemae/ds-button';
3
-
4
- const StyledDropDownButton = /*#__PURE__*/styled(DSButton).withConfig({
5
- componentId: "sc-1ijoe1w-0"
6
- })(["box-sizing:border-box;width:100;& svg{fill:", ";}"], props => props.theme.colors.brand['700']);
7
-
8
- export { StyledDropDownButton };
@@ -1,19 +0,0 @@
1
- import _jsx from '@babel/runtime/helpers/esm/jsx';
2
- import { useContext } from 'react';
3
- import { ComboBoxContext } from '../../ComboBoxCTX.js';
4
- import { StyledNoResultsWrapper, StyledNoResults } from './styled.js';
5
-
6
- var _StyledNoResults, _StyledNoResults2;
7
-
8
- const EmptyState = () => {
9
- const {
10
- props: {
11
- onCreate
12
- }
13
- } = useContext(ComboBoxContext);
14
- return /*#__PURE__*/_jsx(StyledNoResultsWrapper, {
15
- id: "id-no-results"
16
- }, void 0, onCreate ? _StyledNoResults || (_StyledNoResults = /*#__PURE__*/_jsx(StyledNoResults, {}, void 0, "No items match your search, click RETURN at any point to add your unique entry to the field")) : _StyledNoResults2 || (_StyledNoResults2 = /*#__PURE__*/_jsx(StyledNoResults, {}, void 0, "No matches found.")));
17
- };
18
-
19
- export { EmptyState };
@@ -1,10 +0,0 @@
1
- import styled from 'styled-components';
2
-
3
- const StyledNoResultsWrapper = /*#__PURE__*/styled.div.withConfig({
4
- componentId: "sc-o4fon6-0"
5
- })(["padding:16px;"]);
6
- const StyledNoResults = /*#__PURE__*/styled.span.withConfig({
7
- componentId: "sc-o4fon6-1"
8
- })([""]);
9
-
10
- export { StyledNoResults, StyledNoResultsWrapper };