@constructor-io/constructorio-ui-autocomplete 1.1.6 → 1.1.8

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 (100) hide show
  1. package/README.md +17 -3
  2. package/package.json +5 -3
  3. package/lib/.DS_Store +0 -0
  4. package/lib/cjs/components/Autocomplete/Autocomplete.css +0 -110
  5. package/lib/cjs/components/Autocomplete/AutocompleteResults/AutocompleteResults.js +0 -22
  6. package/lib/cjs/components/Autocomplete/AutocompleteResults/AutocompleteResults.js.map +0 -1
  7. package/lib/cjs/components/Autocomplete/CioAutocomplete/CioAutocomplete.js +0 -18
  8. package/lib/cjs/components/Autocomplete/CioAutocomplete/CioAutocomplete.js.map +0 -1
  9. package/lib/cjs/components/Autocomplete/CioAutocompleteProvider.js +0 -15
  10. package/lib/cjs/components/Autocomplete/CioAutocompleteProvider.js.map +0 -1
  11. package/lib/cjs/components/Autocomplete/SearchInput/SearchInput.js +0 -30
  12. package/lib/cjs/components/Autocomplete/SearchInput/SearchInput.js.map +0 -1
  13. package/lib/cjs/components/Autocomplete/SectionItem/SectionItem.js +0 -22
  14. package/lib/cjs/components/Autocomplete/SectionItem/SectionItem.js.map +0 -1
  15. package/lib/cjs/components/Autocomplete/SectionItemsList/SectionItemsList.js +0 -22
  16. package/lib/cjs/components/Autocomplete/SectionItemsList/SectionItemsList.js.map +0 -1
  17. package/lib/cjs/constants.js +0 -163
  18. package/lib/cjs/constants.js.map +0 -1
  19. package/lib/cjs/hooks/useCioAutocomplete.js +0 -107
  20. package/lib/cjs/hooks/useCioAutocomplete.js.map +0 -1
  21. package/lib/cjs/hooks/useCioClient.js +0 -22
  22. package/lib/cjs/hooks/useCioClient.js.map +0 -1
  23. package/lib/cjs/hooks/useDebounce.js +0 -24
  24. package/lib/cjs/hooks/useDebounce.js.map +0 -1
  25. package/lib/cjs/hooks/useDebouncedFetchSections.js +0 -35
  26. package/lib/cjs/hooks/useDebouncedFetchSections.js.map +0 -1
  27. package/lib/cjs/hooks/useDownShift.js +0 -37
  28. package/lib/cjs/hooks/useDownShift.js.map +0 -1
  29. package/lib/cjs/hooks/useFetchRecommendationPod.js +0 -30
  30. package/lib/cjs/hooks/useFetchRecommendationPod.js.map +0 -1
  31. package/lib/cjs/hooks/usePrevious.js +0 -12
  32. package/lib/cjs/hooks/usePrevious.js.map +0 -1
  33. package/lib/cjs/index.js +0 -16
  34. package/lib/cjs/index.js.map +0 -1
  35. package/lib/cjs/stories/Autocomplete/argTypes.js +0 -65
  36. package/lib/cjs/stories/Autocomplete/argTypes.js.map +0 -1
  37. package/lib/cjs/typeGuards.js +0 -10
  38. package/lib/cjs/typeGuards.js.map +0 -1
  39. package/lib/cjs/types.js +0 -3
  40. package/lib/cjs/types.js.map +0 -1
  41. package/lib/cjs/utils.js +0 -72
  42. package/lib/cjs/utils.js.map +0 -1
  43. package/lib/mjs/components/Autocomplete/Autocomplete.css +0 -110
  44. package/lib/mjs/components/Autocomplete/AutocompleteResults/AutocompleteResults.js +0 -21
  45. package/lib/mjs/components/Autocomplete/AutocompleteResults/AutocompleteResults.js.map +0 -1
  46. package/lib/mjs/components/Autocomplete/CioAutocomplete/CioAutocomplete.js +0 -15
  47. package/lib/mjs/components/Autocomplete/CioAutocomplete/CioAutocomplete.js.map +0 -1
  48. package/lib/mjs/components/Autocomplete/CioAutocompleteProvider.js +0 -10
  49. package/lib/mjs/components/Autocomplete/CioAutocompleteProvider.js.map +0 -1
  50. package/lib/mjs/components/Autocomplete/SearchInput/SearchInput.js +0 -27
  51. package/lib/mjs/components/Autocomplete/SearchInput/SearchInput.js.map +0 -1
  52. package/lib/mjs/components/Autocomplete/SectionItem/SectionItem.js +0 -18
  53. package/lib/mjs/components/Autocomplete/SectionItem/SectionItem.js.map +0 -1
  54. package/lib/mjs/components/Autocomplete/SectionItemsList/SectionItemsList.js +0 -15
  55. package/lib/mjs/components/Autocomplete/SectionItemsList/SectionItemsList.js.map +0 -1
  56. package/lib/mjs/constants.js +0 -160
  57. package/lib/mjs/constants.js.map +0 -1
  58. package/lib/mjs/hooks/useCioAutocomplete.js +0 -118
  59. package/lib/mjs/hooks/useCioAutocomplete.js.map +0 -1
  60. package/lib/mjs/hooks/useCioClient.js +0 -20
  61. package/lib/mjs/hooks/useCioClient.js.map +0 -1
  62. package/lib/mjs/hooks/useDebounce.js +0 -22
  63. package/lib/mjs/hooks/useDebounce.js.map +0 -1
  64. package/lib/mjs/hooks/useDebouncedFetchSections.js +0 -41
  65. package/lib/mjs/hooks/useDebouncedFetchSections.js.map +0 -1
  66. package/lib/mjs/hooks/useDownShift.js +0 -33
  67. package/lib/mjs/hooks/useDownShift.js.map +0 -1
  68. package/lib/mjs/hooks/useFetchRecommendationPod.js +0 -27
  69. package/lib/mjs/hooks/useFetchRecommendationPod.js.map +0 -1
  70. package/lib/mjs/hooks/usePrevious.js +0 -10
  71. package/lib/mjs/hooks/usePrevious.js.map +0 -1
  72. package/lib/mjs/index.js +0 -7
  73. package/lib/mjs/index.js.map +0 -1
  74. package/lib/mjs/stories/Autocomplete/argTypes.js +0 -62
  75. package/lib/mjs/stories/Autocomplete/argTypes.js.map +0 -1
  76. package/lib/mjs/typeGuards.js +0 -6
  77. package/lib/mjs/typeGuards.js.map +0 -1
  78. package/lib/mjs/types.js +0 -2
  79. package/lib/mjs/types.js.map +0 -1
  80. package/lib/mjs/utils.js +0 -58
  81. package/lib/mjs/utils.js.map +0 -1
  82. package/lib/types/components/Autocomplete/AutocompleteResults/AutocompleteResults.d.ts +0 -11
  83. package/lib/types/components/Autocomplete/CioAutocomplete/CioAutocomplete.d.ts +0 -3
  84. package/lib/types/components/Autocomplete/CioAutocompleteProvider.d.ts +0 -28
  85. package/lib/types/components/Autocomplete/SearchInput/SearchInput.d.ts +0 -7
  86. package/lib/types/components/Autocomplete/SectionItem/SectionItem.d.ts +0 -10
  87. package/lib/types/components/Autocomplete/SectionItemsList/SectionItemsList.d.ts +0 -12
  88. package/lib/types/constants.d.ts +0 -23
  89. package/lib/types/hooks/useCioAutocomplete.d.ts +0 -29
  90. package/lib/types/hooks/useCioClient.d.ts +0 -15
  91. package/lib/types/hooks/useDebounce.d.ts +0 -2
  92. package/lib/types/hooks/useDebouncedFetchSections.d.ts +0 -4
  93. package/lib/types/hooks/useDownShift.d.ts +0 -16
  94. package/lib/types/hooks/useFetchRecommendationPod.d.ts +0 -4
  95. package/lib/types/hooks/usePrevious.d.ts +0 -2
  96. package/lib/types/index.d.ts +0 -6
  97. package/lib/types/stories/Autocomplete/argTypes.d.ts +0 -62
  98. package/lib/types/typeGuards.d.ts +0 -2
  99. package/lib/types/types.d.ts +0 -131
  100. package/lib/types/utils.d.ts +0 -24
package/README.md CHANGED
@@ -101,10 +101,24 @@ function YourComponent() {
101
101
 
102
102
  ### Library defaults
103
103
 
104
- This library provides some default styles. These default styles can be used as a foundation to build on top of or just as a reference for you to replace completely. All default styles in this library are scoped within the `.cio-autocomplete` css selector.
104
+ By default, importing react components or hooks from this library does not pull any css into your project.
105
105
 
106
- - If you would like to remove all default styling, simply pass an empty string or your own custom autocomplete container className as the value for the `autocompleteClassName` option
107
- - If you would like to layer your own custom styles on top of the library default styles, you can do so by passing additional className(s) of your choosing `autocompleteClassName='cio-autocomplete custom-autocomplete-container'`
106
+ If you wish to use some starter styles from this library, add an import statement similar to the example import statement below:
107
+
108
+ ```js
109
+ import 'node_modules/@constructor-io/constructorio-ui-autocomplete/lib/mjs/components/Autocomplete/Autocomplete.css';
110
+ ```
111
+
112
+ > Note: the path and syntax in this example may change slightly depending on your module bundling strategy
113
+
114
+ - These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.
115
+ - To opt out of all default styling, do not import the `Autocomplete.css` stylesheet.
116
+ - All starter styles in this library are scoped within the `.cio-autocomplete` css selector.
117
+ - These starter styles are intended to be extended by layering in your own css rules
118
+ - If you like, you can override the container's className like so:
119
+ `autocompleteClassName='custom-autocomplete-container'`
120
+ - If you like, you can pass additional className(s) of your choosing like so:
121
+ `autocompleteClassName='cio-autocomplete custom-autocomplete-container'`
108
122
 
109
123
  ## Local Development
110
124
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@constructor-io/constructorio-ui-autocomplete",
3
- "version": "1.1.6",
3
+ "version": "1.1.8",
4
4
  "description": "Constructor.io Autocomplete UI library for web applications",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/mjs/index.js",
@@ -23,7 +23,7 @@
23
23
  "test-storybook:ci": "start-server-and-test storybook:ci http://localhost:6006 test-storybook",
24
24
  "build-storybook": "storybook build -o 'docs'",
25
25
  "serve-built-storybook": "npx http-server docs",
26
- "version": "npm run compile",
26
+ "version": "npm run build-storybook && git add -u ./docs && git add ./docs/* && npm run compile",
27
27
  "compile": "rm -rf lib && tsc -p tsconfig.json && tsc -p tsconfig-cjs.json && npm run copy-files"
28
28
  },
29
29
  "author": "constructor.io",
@@ -50,10 +50,12 @@
50
50
  "@storybook/addon-essentials": "^7.0.0-beta.15",
51
51
  "@storybook/addon-interactions": "^7.0.0-beta.15",
52
52
  "@storybook/addon-links": "^7.0.0-beta.15",
53
+ "@storybook/addons": "^7.0.0-beta.15",
53
54
  "@storybook/jest": "^0.0.11-next.0",
54
55
  "@storybook/react-webpack5": "7.0.0-beta.15",
55
56
  "@storybook/test-runner": "^0.10.0-next.4",
56
57
  "@storybook/testing-library": "^0.0.14-next.1",
58
+ "@storybook/theming": "^7.0.0-beta.15",
57
59
  "@types/react": "^18.0.20",
58
60
  "@types/react-dom": "^18.0.6",
59
61
  "@typescript-eslint/eslint-plugin": "^5.38.0",
@@ -63,9 +65,9 @@
63
65
  "eslint": "^8.23.1",
64
66
  "eslint-config-airbnb": "^19.0.4",
65
67
  "eslint-config-airbnb-typescript": "^17.0.0",
68
+ "eslint-config-prettier": "^8.5.0",
66
69
  "eslint-plugin-import": "^2.26.0",
67
70
  "eslint-plugin-jsx-a11y": "^6.6.1",
68
- "eslint-config-prettier": "^8.5.0",
69
71
  "eslint-plugin-prettier": "^4.2.1",
70
72
  "eslint-plugin-react": "^7.31.11",
71
73
  "eslint-plugin-react-hooks": "^4.6.0",
package/lib/.DS_Store DELETED
Binary file
@@ -1,110 +0,0 @@
1
- /* Autosuggest Container */
2
- .cio-autocomplete {
3
- position: relative;
4
- height: 2rem;
5
- padding: 20px;
6
- font-family: Arial, Helvetica, sans-serif;
7
- }
8
-
9
- /* Autosuggest Form */
10
- .cio-autocomplete .cio-form {
11
- position: relative;
12
- height: 100%;
13
- width: 24rem;
14
- }
15
-
16
- .cio-autocomplete .cio-input {
17
- width: 100%;
18
- height: 100%;
19
- border: 1px solid gray;
20
- padding: 0 10px;
21
- border-radius: 3px;
22
- font-size: 1rem;
23
- }
24
-
25
- .cio-autocomplete .cio-submit-btn,
26
- .cio-autocomplete .cio-clear-btn {
27
- position: absolute;
28
- top: 1px;
29
- bottom: -1px;
30
- right: -21px;
31
- cursor: pointer;
32
- }
33
-
34
- .cio-autocomplete button:disabled {
35
- cursor: not-allowed;
36
- }
37
-
38
- .cio-autocomplete .cio-submit-btn {
39
- right: -21px;
40
- }
41
-
42
- .cio-autocomplete .cio-clear-btn {
43
- right: 10px;
44
- }
45
-
46
- .cio-autocomplete .cio-icon {
47
- display: flex;
48
- justify-content: center;
49
- }
50
-
51
- /* Autosuggest Results */
52
- .cio-autocomplete .cio-results {
53
- position: absolute;
54
- background-color: white;
55
- gap: 20px;
56
- padding-left: 0px;
57
- list-style: none;
58
- display: flex;
59
- flex-direction: row;
60
- z-index: 1000;
61
- margin-top: 5px;
62
- }
63
-
64
- .cio-autocomplete .cio-sectionName {
65
- margin: 15px 0;
66
- font-size: 1rem;
67
- }
68
-
69
- .cio-autocomplete .cio-section-items {
70
- padding: 0;
71
- }
72
-
73
- .cio-autocomplete .cio-item-SearchSuggestions {
74
- flex-direction: column;
75
- min-width: 160px;
76
- }
77
-
78
- .cio-autocomplete .cio-item {
79
- flex: 1;
80
- display: flex;
81
- flex-direction: column;
82
- cursor: pointer;
83
- list-style: none;
84
- padding: 5px;
85
- border-bottom: 3px solid transparent;
86
- }
87
-
88
- .cio-autocomplete .cio-item[aria-selected='true'] {
89
- background-color: hsl(0, 0%, 90%);
90
- border-radius: 4px;
91
- }
92
-
93
- .cio-autocomplete .Products .cio-item {
94
- display: inline-flex;
95
- align-items: center;
96
- width: 25%;
97
- height: 140px;
98
- padding: 5px 0;
99
- }
100
-
101
- .cio-autocomplete .cio-item p {
102
- margin: 0;
103
- overflow: hidden;
104
- }
105
-
106
- .cio-autocomplete .cio-item img {
107
- width: 100%;
108
- max-width: 100px;
109
- max-height: 100px;
110
- }
@@ -1,22 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const react_1 = require("react");
4
- const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
5
- const SectionItemsList_1 = require("../SectionItemsList/SectionItemsList");
6
- const DefaultRenderResults = ({ sections }) => sections === null || sections === void 0 ? void 0 : sections.map((section) => (react_1.default.createElement(SectionItemsList_1.default, { section: section, key: section.identifier })));
7
- function AutocompleteResults(props) {
8
- const { children = DefaultRenderResults } = props;
9
- const { sections, isOpen, getMenuProps, getItemProps } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
10
- const hasResults = sections && sections.some((section) => { var _a; return (_a = section === null || section === void 0 ? void 0 : section.data) === null || _a === void 0 ? void 0 : _a.length; });
11
- let content;
12
- if (isOpen && hasResults) {
13
- content = typeof children === 'function' ? children({ sections, getItemProps }) : children;
14
- }
15
- else {
16
- content = null;
17
- }
18
- const menuProps = Object.assign({}, getMenuProps());
19
- return react_1.default.createElement("ul", Object.assign({}, menuProps), content);
20
- }
21
- exports.default = AutocompleteResults;
22
- //# sourceMappingURL=AutocompleteResults.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"AutocompleteResults.js","sourceRoot":"","sources":["../../../../../src/components/Autocomplete/AutocompleteResults/AutocompleteResults.tsx"],"names":[],"mappings":";;AAAA,iCAAqD;AAErD,wEAAoE;AACpE,2EAAoE;AAWpE,MAAM,oBAAoB,GAAkB,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAC3D,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,GAAG,CAAC,CAAC,OAA6B,EAAE,EAAE,CAAC,CAC/C,8BAAC,0BAAgB,IAAC,OAAO,EAAE,OAAO,EAAE,GAAG,EAAE,OAAO,CAAC,UAAU,GAAI,CAChE,CAAC,CAAC;AAEL,SAAwB,mBAAmB,CAAC,KAA+B;IACzE,MAAM,EAAE,QAAQ,GAAG,oBAAoB,EAAE,GAAG,KAAK,CAAC;IAClD,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAE,YAAY,EAAE,YAAY,EAAE,GAAG,IAAA,kBAAU,EAAC,gDAAsB,CAAC,CAAC;IAE5F,MAAM,UAAU,GAAG,QAAQ,IAAI,QAAQ,CAAC,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,WAAC,OAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,MAAM,CAAA,EAAA,CAAC,CAAC;IAEjF,IAAI,OAAO,CAAC;IACZ,IAAI,MAAM,IAAI,UAAU,EAAE;QACxB,OAAO,GAAG,OAAO,QAAQ,KAAK,UAAU,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,QAAQ,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;KAC5F;SAAM;QACL,OAAO,GAAG,IAAI,CAAC;KAChB;IAED,MAAM,SAAS,qBACV,YAAY,EAAE,CAClB,CAAC;IAEF,OAAO,sDAAQ,SAAS,GAAG,OAAO,CAAM,CAAC;AAC3C,CAAC;AAlBD,sCAkBC"}
@@ -1,18 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const react_1 = require("react");
4
- const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
5
- const AutocompleteResults_1 = require("../AutocompleteResults/AutocompleteResults");
6
- const SearchInput_1 = require("../SearchInput/SearchInput");
7
- function CioAutocomplete(props) {
8
- const { children } = props;
9
- if (children) {
10
- return react_1.default.createElement(CioAutocompleteProvider_1.default, Object.assign({}, props), children);
11
- }
12
- return (react_1.default.createElement("div", null,
13
- react_1.default.createElement(CioAutocompleteProvider_1.default, Object.assign({}, props),
14
- react_1.default.createElement(SearchInput_1.default, null),
15
- react_1.default.createElement(AutocompleteResults_1.default, null))));
16
- }
17
- exports.default = CioAutocomplete;
18
- //# sourceMappingURL=CioAutocomplete.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CioAutocomplete.js","sourceRoot":"","sources":["../../../../../src/components/Autocomplete/CioAutocomplete/CioAutocomplete.tsx"],"names":[],"mappings":";;AAAA,iCAA0B;AAC1B,wEAAiE;AACjE,oFAA6E;AAC7E,4DAAqD;AAGrD,SAAwB,eAAe,CAAC,KAA2B;IACjE,MAAM,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAE3B,IAAI,QAAQ,EAAE;QACZ,OAAO,8BAAC,iCAAuB,oBAAK,KAAK,GAAG,QAAQ,CAA2B,CAAC;KACjF;IAED,OAAO,CACL;QACE,8BAAC,iCAAuB,oBAAK,KAAK;YAChC,8BAAC,qBAAW,OAAG;YACf,8BAAC,6BAAmB,OAAG,CACC,CACtB,CACP,CAAC;AACJ,CAAC;AAfD,kCAeC"}
@@ -1,15 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.CioAutocompleteContext = void 0;
4
- const tslib_1 = require("tslib");
5
- const react_1 = require("react");
6
- const useCioAutocomplete_1 = require("../../hooks/useCioAutocomplete");
7
- exports.CioAutocompleteContext = (0, react_1.createContext)({});
8
- function CioAutocompleteProvider(props) {
9
- const { children } = props, restProps = tslib_1.__rest(props, ["children"]);
10
- const cioAutocomplete = (0, useCioAutocomplete_1.default)(restProps);
11
- return (react_1.default.createElement(exports.CioAutocompleteContext.Provider, { value: cioAutocomplete },
12
- react_1.default.createElement("div", { className: cioAutocomplete.autocompleteClassName }, children)));
13
- }
14
- exports.default = CioAutocompleteProvider;
15
- //# sourceMappingURL=CioAutocompleteProvider.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"CioAutocompleteProvider.js","sourceRoot":"","sources":["../../../../src/components/Autocomplete/CioAutocompleteProvider.tsx"],"names":[],"mappings":";;;;AAAA,iCAA6C;AAC7C,uEAAgE;AAGnD,QAAA,sBAAsB,GAAG,IAAA,qBAAa,EACjD,EAA2C,CAC5C,CAAC;AAEF,SAAwB,uBAAuB,CAAC,KAA2B;IACzE,MAAM,EAAE,QAAQ,KAAmB,KAAK,EAAnB,SAAS,kBAAK,KAAK,EAAlC,YAA0B,CAAQ,CAAC;IACzC,MAAM,eAAe,GAAG,IAAA,4BAAkB,EAAC,SAAS,CAAC,CAAC;IAEtD,OAAO,CACL,8BAAC,8BAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe;QACrD,uCAAK,SAAS,EAAE,eAAe,CAAC,qBAAqB,IAAG,QAAQ,CAAO,CACvC,CACnC,CAAC;AACJ,CAAC;AATD,0CASC"}
@@ -1,30 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const react_1 = require("react");
4
- const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
5
- function DefaultRenderInput({ getFormProps, getInputProps, getLabelProps, setQuery }) {
6
- const inputProps = getInputProps();
7
- return (react_1.default.createElement("form", Object.assign({}, getFormProps()),
8
- react_1.default.createElement("label", Object.assign({}, getLabelProps(), { htmlFor: 'cio-input' }),
9
- react_1.default.createElement("input", Object.assign({ id: 'cio-input' }, inputProps))),
10
- react_1.default.createElement("button", { className: 'cio-clear-btn', "data-testid": 'cio-clear-btn', hidden: !inputProps.value, onClick: () => {
11
- setQuery('');
12
- if (inputProps.id) {
13
- setTimeout(() => { var _a; return (_a = document.getElementById(inputProps.id)) === null || _a === void 0 ? void 0 : _a.focus(); }, 100);
14
- }
15
- }, type: 'button', "aria-label": 'Clear search field text' },
16
- react_1.default.createElement("div", { className: 'cio-icon' },
17
- react_1.default.createElement("svg", { stroke: 'currentColor', fill: 'currentColor', strokeWidth: '0', viewBox: '0 0 512 512', height: '1em', width: '1em', xmlns: 'http://www.w3.org/2000/svg' },
18
- react_1.default.createElement("path", { d: 'M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z' })))),
19
- react_1.default.createElement("button", { className: 'cio-submit-btn', "data-testid": 'cio-submit-btn', disabled: !inputProps.value, type: 'submit', "aria-label": 'Submit Search' },
20
- react_1.default.createElement("div", { className: 'cio-icon' },
21
- react_1.default.createElement("svg", { stroke: 'currentColor', fill: 'currentColor', strokeWidth: '0', viewBox: '0 0 512 512', height: '1em', width: '1em', xmlns: 'http://www.w3.org/2000/svg' },
22
- react_1.default.createElement("path", { d: 'M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z' }))))));
23
- }
24
- function SearchInput(props) {
25
- const { children = DefaultRenderInput } = props;
26
- const { getFormProps, getInputProps, getLabelProps, setQuery } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
27
- return children({ getFormProps, getInputProps, getLabelProps, setQuery });
28
- }
29
- exports.default = SearchInput;
30
- //# sourceMappingURL=SearchInput.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SearchInput.js","sourceRoot":"","sources":["../../../../../src/components/Autocomplete/SearchInput/SearchInput.tsx"],"names":[],"mappings":";;AAAA,iCAAwD;AAExD,wEAAoE;AAMpE,SAAS,kBAAkB,CAAC,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE;IAClF,MAAM,UAAU,GAAG,aAAa,EAAE,CAAC;IAEnC,OAAO,CACL,wDAAU,YAAY,EAAE;QACtB,yDAAW,aAAa,EAAE,IAAE,OAAO,EAAC,WAAW;YAC7C,uDAAO,EAAE,EAAC,WAAW,IAAK,UAAU,EAAI,CAClC;QACR,0CACE,SAAS,EAAC,eAAe,iBACb,eAAe,EAC3B,MAAM,EAAE,CAAC,UAAU,CAAC,KAAK,EACzB,OAAO,EAAE,GAAG,EAAE;gBACZ,QAAQ,CAAC,EAAE,CAAC,CAAC;gBACb,IAAI,UAAU,CAAC,EAAE,EAAE;oBACjB,UAAU,CAAC,GAAG,EAAE,WAAC,OAAA,MAAA,QAAQ,CAAC,cAAc,CAAC,UAAU,CAAC,EAAE,CAAC,0CAAE,KAAK,EAAE,CAAA,EAAA,EAAE,GAAG,CAAC,CAAC;iBACxE;YACH,CAAC,EACD,IAAI,EAAC,QAAQ,gBACF,yBAAyB;YACpC,uCAAK,SAAS,EAAC,UAAU;gBACvB,uCACE,MAAM,EAAC,cAAc,EACrB,IAAI,EAAC,cAAc,EACnB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,aAAa,EACrB,MAAM,EAAC,KAAK,EACZ,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,4BAA4B;oBAClC,wCAAM,CAAC,EAAC,4HAA4H,GAAG,CACnI,CACF,CACC;QACT,0CACE,SAAS,EAAC,gBAAgB,iBACd,gBAAgB,EAC5B,QAAQ,EAAE,CAAC,UAAU,CAAC,KAAK,EAC3B,IAAI,EAAC,QAAQ,gBACF,eAAe;YAC1B,uCAAK,SAAS,EAAC,UAAU;gBACvB,uCACE,MAAM,EAAC,cAAc,EACrB,IAAI,EAAC,cAAc,EACnB,WAAW,EAAC,GAAG,EACf,OAAO,EAAC,aAAa,EACrB,MAAM,EAAC,KAAK,EACZ,KAAK,EAAC,KAAK,EACX,KAAK,EAAC,4BAA4B;oBAClC,wCAAM,CAAC,EAAC,2VAA2V,GAAG,CAClW,CACF,CACC,CACJ,CACR,CAAC;AACJ,CAAC;AAED,SAAwB,WAAW,CAAC,KAAuB;IACzD,MAAM,EAAE,QAAQ,GAAG,kBAAkB,EAAE,GAAG,KAAK,CAAC;IAChD,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,GAC5D,IAAA,kBAAU,EAAC,gDAAsB,CAAC,CAAC;IAErC,OAAO,QAAQ,CAAC,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,QAAQ,EAAE,CAAC,CAAC;AAC5E,CAAC;AAND,8BAMC"}
@@ -1,22 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const react_1 = require("react");
4
- const CioAutocompleteProvider_1 = require("../CioAutocompleteProvider");
5
- const typeGuards_1 = require("../../../typeGuards");
6
- function SectionItem(props) {
7
- var _a;
8
- const { item, index, sectionIdentifier, children } = props;
9
- const { getItemProps } = (0, react_1.useContext)(CioAutocompleteProvider_1.CioAutocompleteContext);
10
- let defaultChildren;
11
- if ((0, typeGuards_1.isProduct)(item)) {
12
- defaultChildren = (react_1.default.createElement(react_1.default.Fragment, null,
13
- react_1.default.createElement("img", { "data-testid": 'cio-img', src: (_a = item.data) === null || _a === void 0 ? void 0 : _a.image_url, alt: item.value }),
14
- react_1.default.createElement("p", { "data-testid": 'cio-text' }, item.value)));
15
- }
16
- else {
17
- defaultChildren = item.value;
18
- }
19
- return (react_1.default.createElement("li", Object.assign({}, getItemProps({ item, index, sectionIdentifier })), children || defaultChildren));
20
- }
21
- exports.default = SectionItem;
22
- //# sourceMappingURL=SectionItem.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SectionItem.js","sourceRoot":"","sources":["../../../../../src/components/Autocomplete/SectionItem/SectionItem.tsx"],"names":[],"mappings":";;AAAA,iCAAqD;AACrD,wEAAoE;AAEpE,oDAAgD;AAUhD,SAAwB,WAAW,CAAC,KAAuB;;IACzD,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,iBAAiB,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAC3D,MAAM,EAAE,YAAY,EAAE,GAAG,IAAA,kBAAU,EAAC,gDAAsB,CAAC,CAAC;IAE5D,IAAI,eAAe,CAAC;IACpB,IAAI,IAAA,sBAAS,EAAC,IAAI,CAAC,EAAE;QACnB,eAAe,GAAG,CAChB;YACE,sDAAiB,SAAS,EAAC,GAAG,EAAE,MAAA,IAAI,CAAC,IAAI,0CAAE,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,KAAK,GAAI;YACzE,oDAAe,UAAU,IAAE,IAAI,CAAC,KAAK,CAAK,CACzC,CACJ,CAAC;KACH;SAAM;QACL,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC;KAC9B;IAED,OAAO,CACL,sDAAQ,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,iBAAiB,EAAE,CAAC,GAAG,QAAQ,IAAI,eAAe,CAAM,CAC7F,CAAC;AACJ,CAAC;AAnBD,8BAmBC"}
@@ -1,22 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- const react_1 = require("react");
4
- const SectionItem_1 = require("../SectionItem/SectionItem");
5
- const utils_1 = require("../../../utils");
6
- // eslint-disable-next-line func-names
7
- const DefaultRenderSectionItemsList = function ({ section }) {
8
- var _a;
9
- const sectionName = (section === null || section === void 0 ? void 0 : section.displayName) || (section === null || section === void 0 ? void 0 : section.identifier);
10
- return (react_1.default.createElement("li", { className: `${sectionName} cio-section`, role: 'none' },
11
- react_1.default.createElement("h5", { className: 'cio-sectionName', "aria-hidden": true }, (0, utils_1.camelToStartCase)(sectionName)),
12
- react_1.default.createElement("ul", { className: 'cio-section-items', role: 'none' }, (_a = section === null || section === void 0 ? void 0 : section.data) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
13
- var _a;
14
- return (react_1.default.createElement(SectionItem_1.default, { item: item, index: index, sectionIdentifier: section === null || section === void 0 ? void 0 : section.identifier, key: `${section === null || section === void 0 ? void 0 : section.identifier}_${(_a = item === null || item === void 0 ? void 0 : item.data) === null || _a === void 0 ? void 0 : _a.id}` }));
15
- }))));
16
- };
17
- function SectionItemsList(props) {
18
- const { section, children = DefaultRenderSectionItemsList } = props;
19
- return children({ section });
20
- }
21
- exports.default = SectionItemsList;
22
- //# sourceMappingURL=SectionItemsList.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"SectionItemsList.js","sourceRoot":"","sources":["../../../../../src/components/Autocomplete/SectionItemsList/SectionItemsList.tsx"],"names":[],"mappings":";;AAAA,iCAA4C;AAE5C,4DAAqD;AACrD,0CAAkD;AAYlD,sCAAsC;AACtC,MAAM,6BAA6B,GAA2B,UAAU,EAAE,OAAO,EAAE;;IACjF,MAAM,WAAW,GAAG,CAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,WAAW,MAAI,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,CAAA,CAAC;IAEhE,OAAO,CACL,sCAAI,SAAS,EAAE,GAAG,WAAW,cAAc,EAAE,IAAI,EAAC,MAAM;QACtD,sCAAI,SAAS,EAAC,iBAAiB,yBAC5B,IAAA,wBAAgB,EAAC,WAAW,CAAC,CAC3B;QACL,sCAAI,SAAS,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM,IAC1C,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,IAAI,0CAAE,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;YAAC,OAAA,CACnC,8BAAC,qBAAW,IACV,IAAI,EAAE,IAAI,EACV,KAAK,EAAE,KAAK,EACZ,iBAAiB,EAAE,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,EACtC,GAAG,EAAE,GAAG,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,UAAU,IAAI,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,IAAI,0CAAE,EAAE,EAAE,GAC/C,CACH,CAAA;SAAA,CAAC,CACC,CACF,CACN,CAAC;AACJ,CAAC,CAAC;AAEF,SAAwB,gBAAgB,CAAC,KAA4B;IACnE,MAAM,EAAE,OAAO,EAAE,QAAQ,GAAG,6BAA6B,EAAE,GAAG,KAAK,CAAC;IAEpE,OAAO,QAAQ,CAAC,EAAE,OAAO,EAAE,CAAC,CAAC;AAC/B,CAAC;AAJD,mCAIC"}
@@ -1,163 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.customStylesDescription = exports.multipleSectionsDescription = exports.openOnFocusDescription = exports.zeroStateSectionsDescription = exports.onSubmitDescription = exports.onChangeDescription = exports.onFocusDescription = exports.customSectionDescription = exports.recommendationsDescription = exports.sectionOrderDescription = exports.numResultsDescription = exports.contentDescription = exports.productsDescription = exports.searchSuggestionsDescription = exports.placeholderDescription = exports.cioJsClientDescription = exports.apiKeyDescription = exports.zeroStateDescription = exports.userEventsDescription = exports.sectionsDescription = exports.hookDescription = exports.componentDescription = exports.apiKey = void 0;
4
- // Autocomplete key index
5
- exports.apiKey = 'key_Gep3oQOu5IMcNh9A';
6
- /// //////////////////////////////
7
- // Storybook Folder Descriptions
8
- /// //////////////////////////////
9
- exports.componentDescription = `- import \`CioAutocomplete\` to render in your JSX.
10
- - This component handles state management, data fetching, and rendering logic.
11
- - To use this component, an \`apiKey\` or \`cioJsClient\` are required, all other values are optional.
12
- - Use different props to configure the behavior of this component.
13
- - The following stories shows how different props affect the component's behavior
14
-
15
- > Note: when we say \`cioJsClient\`, we are referring to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)
16
- `;
17
- exports.hookDescription = `- import \`useCioAutocomplete\` and call this custom hook in a functional component.
18
- - This hook handles state management & data fetching, but leaves rendering logic up to you
19
- - To use this hook, an \`apiKey\` or \`cioJsClient\` are required, all other values are optional.
20
- - Pass different options to the \`useCioAutocomplete\` hook to configure behavior.
21
- - The following stories shows how different options affect the hook's behavior
22
-
23
- Calling the \`useCioAutocomplete\` hook returns an object with the following keys:
24
-
25
- \`\`\`jsx
26
- const {
27
- // must be used for a hooks integrations
28
- query: string, // current input field value
29
- sections: [{...}], // array of sections data to render in menu list,
30
- getFormProps: () => ({...})), // prop getter for jsx form element
31
- getLabelProps: () => ({...})), // optional: prop getter for jsx label element
32
- getInputProps: () => ({...})), // prop getter for jsx input element
33
- getMenuProps: () => ({...})), // prop getter for jsx element serving as menu container
34
- getItemProps: () => ({...})), // prop getter for jsx element serving as each result
35
- isOpen: boolean,
36
-
37
- // available for advanced hooks integration use cases
38
- openMenu: () => void, // open menu
39
- closeMenu: () => void, // close menu
40
- setQuery: () => void, // update the current input field value
41
- cioJsClient, // instance of constructorio-client-javascript
42
- } = useCioAutocomplete(args);
43
- \`\`\`
44
-
45
- > Note: when we say \`cioJsClient\`, we are referring to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)
46
- `;
47
- /// //////////////////////////////
48
- // Storybook Pages
49
- /// //////////////////////////////
50
- exports.sectionsDescription = `- by default, typing a query will fetch data for search suggestions and Products
51
- - to override this, pass a an array of sections objects
52
- - the order of the objects in the \`sections\` array determines the order of the results
53
- - each section object must have an \`identifier\`
54
- - each section object can specify a \`type\`
55
- - each section object can override the default \`numResults\` of 8
56
-
57
- When no values are passed for the \`sections\` argument, the following defaults are used:
58
-
59
- \`\`\`jsx
60
- [
61
- {
62
- identifier: 'Search Suggestions',
63
- type: 'autocomplete',
64
- numResults: 8
65
- },
66
- {
67
- identifier: 'Products',
68
- type: 'autocomplete',
69
- numResults: 8
70
- }
71
- ]
72
- \`\`\`
73
- `;
74
- exports.userEventsDescription = `- pass callback functions to respond to user events
75
- - if provided, the onFocus callback function will be called each time the user focuses on the text input field
76
- - if provided, the onChange callback function will be called each time the user changes the value in the text input field
77
- - if provided, the onSubmit callback function will be called each time the user submits the form
78
- - the user can submit the form by pressing the enter key in the text input field, clicking a submit button within the form, clicking on a result, or pressing enter while a result is selected
79
-
80
- > ⚠️ NOTE ⚠️ Use the Storybook Canvas Actions tab to explore the behavior of all of these \`OnEvent\` callback functions as you interact with our Default User Events example rendered in the Canvas. In the stories below, Storybook Canvas Actions have been disabled to focus on each of these callback functions in isolation. Each of the example callback functions in the stories below log output to the console tab of the browser's developer tools.`;
81
- exports.zeroStateDescription = `- when the text input field has no text, we call this zero state
82
- - by default, the autocomplete shows nothing in the menu it's for zero state
83
- - to show zero state results, pass an array of section objects for \`zeroStateSections\`
84
- - when \`zeroStateSections\` has sections, the menu will open on user focus by default
85
- - set \`openOnFocus\` to false, to only show \`zeroStateSections\` after user has typed and then cleared the text input, instead of as soon as the user focuses on the text input
86
- - the order of the objects in the \`zeroStateSections\` array determines the order of the results
87
- - each section object must have an \`identifier\`
88
- - each section object can specify a \`type\`
89
- - each section object can override the default \`numResults\` of 8`;
90
- /// //////////////////////////////
91
- // Storybook Stories
92
- /// //////////////////////////////
93
- exports.apiKeyDescription = `Pass an \`apiKey\` to request results from constructor's servers`;
94
- exports.cioJsClientDescription = `If you are already using an instance of the \`ConstructorIOClient\`, you can pass a \`cioJsClient\` instead of an \`apiKey\` to request results from constructor's servers
95
-
96
- > Note: when we say \`cioJsClient\`, we are referring to an instance of the [constructorio-client-javascript](https://www.npmjs.com/package/@constructor-io/constructorio-client-javascript)`;
97
- exports.placeholderDescription = `Pass a \`placeholder\` to override the default input field placeholder text shown to users before they start typing their query`;
98
- exports.searchSuggestionsDescription = `Override default \`sections\` to only suggest search terms`;
99
- exports.productsDescription = `Override default \`sections\` to only suggested products`;
100
- exports.contentDescription = `Override default \`sections\` to only suggest content`;
101
- exports.numResultsDescription = `Override default \`numResults\` to only suggest 2 products per query`;
102
- exports.sectionOrderDescription = `Override default \`numResults\` to suggest products, then terms`;
103
- exports.recommendationsDescription = `Use constructor's recommendations service, with \`"type": "recommendations"\``;
104
- exports.customSectionDescription = `Use a custom section, by managing and passing your own data, with \`"type": "custom"\` and \`"data":[{...}]\``;
105
- exports.onFocusDescription = `Pass an \`onFocus\` callback function to execute some code each time the user applies focus to the text input field`;
106
- exports.onChangeDescription = `Pass an \`onChange\` callback function to execute some code each time the user changes the value of the text input field`;
107
- exports.onSubmitDescription = `Pass an \`onSubmit\` callback function to execute some code after a user submits the search form.
108
-
109
- Your callback function will be invoked with a submit event containing useful metadata about the submit event:
110
- - if the user submits the text input:
111
- - the \`query\` field will provide the value of that input field
112
- - if the user selects a suggested item from the dropdown list:
113
- - the \`originalQuery\` field will provide the value of the input field that generated the selected item
114
- - an \`item\` object with information about the suggestion that the user selected`;
115
- exports.zeroStateSectionsDescription = `Use \`zeroStateSections\` to show suggestions after a user applies focus to the search input field and before they start typing a query`;
116
- exports.openOnFocusDescription = `Use \`openOnFocus: false\` to show suggestions after a user clears their query, but not when they initially apply focus to the search input field`;
117
- exports.multipleSectionsDescription = `Use as many different \`recommendations\` and \`custom\` sections as you'd like and in whatever order you would like!`;
118
- // from .storybook/custom-styles-story.css
119
- exports.customStylesDescription = `
120
- This library provides some default styles. These default styles can be used as a foundation to build on top of or just as a reference for you to replace completely. All default styles in this library are scoped within the \`.cio-autocomplete\` css selector.
121
-
122
- - If you would like to remove all default styling, simply pass an empty string or your own custom autocomplete container className as the value for the \`autocompleteClassName\` prop
123
- - If you would like to layer your own custom styles on top of the library default styles, you can do so by passing additional className(s) of your choosing \`autocompleteClassName='cio-autocomplete custom-autocomplete-container'\`
124
-
125
-
126
- \`\`\`css
127
- .cio-autocomplete.custom-autocomplete-styles form {
128
- height: 44px;
129
- width: 600px;
130
- border-radius: 8px;
131
- background-color: rgb(247, 247, 247);
132
- }
133
-
134
- .cio-autocomplete.custom-autocomplete-styles .cio-input {
135
- font-weight: bold;
136
- }
137
-
138
- .cio-autocomplete.custom-autocomplete-styles .cio-form button {
139
- width: 44px;
140
- }
141
-
142
- .cio-autocomplete.custom-autocomplete-styles .cio-clear-btn {
143
- right: 24px;
144
- }
145
-
146
- .cio-autocomplete.custom-autocomplete-styles .cio-sectionName {
147
- margin: 5px 3px;
148
- }
149
-
150
- .cio-autocomplete.custom-autocomplete-styles .cio-results {
151
- width: 620px;
152
- max-height: 334px;
153
- overflow: hidden;
154
- border-radius: 0px 0px 8px 8px;
155
- color: rgb(51, 51, 51);
156
- }
157
-
158
- .cio-autocomplete.custom-autocomplete-styles .Products p {
159
- padding: 5px 5px 0;
160
- }
161
- \`\`\`
162
- `;
163
- //# sourceMappingURL=constants.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":";;;AAAA,yBAAyB;AACZ,QAAA,MAAM,GAAG,sBAAsB,CAAC;AAE7C,kCAAkC;AAClC,gCAAgC;AAChC,kCAAkC;AAErB,QAAA,oBAAoB,GAAG;;;;;;;CAOnC,CAAC;AAEW,QAAA,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B9B,CAAC;AAEF,kCAAkC;AAClC,kBAAkB;AAClB,kCAAkC;AAErB,QAAA,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;CAuBlC,CAAC;AAEW,QAAA,qBAAqB,GAAG;;;;;;+bAM0Z,CAAC;AAEnb,QAAA,oBAAoB,GAAG;;;;;;;;mEAQ+B,CAAC;AAEpE,kCAAkC;AAClC,oBAAoB;AACpB,kCAAkC;AAErB,QAAA,iBAAiB,GAAG,kEAAkE,CAAC;AACvF,QAAA,sBAAsB,GAAG;;6LAEuJ,CAAC;AACjL,QAAA,sBAAsB,GAAG,iIAAiI,CAAC;AAC3J,QAAA,4BAA4B,GAAG,4DAA4D,CAAC;AAC5F,QAAA,mBAAmB,GAAG,0DAA0D,CAAC;AACjF,QAAA,kBAAkB,GAAG,uDAAuD,CAAC;AAC7E,QAAA,qBAAqB,GAAG,sEAAsE,CAAC;AAC/F,QAAA,uBAAuB,GAAG,iEAAiE,CAAC;AAC5F,QAAA,0BAA0B,GAAG,+EAA+E,CAAC;AAC7G,QAAA,wBAAwB,GAAG,+GAA+G,CAAC;AAC3I,QAAA,kBAAkB,GAAG,qHAAqH,CAAC;AAC3I,QAAA,mBAAmB,GAAG,0HAA0H,CAAC;AACjJ,QAAA,mBAAmB,GAAG;;;;;;;sFAOmD,CAAC;AAC1E,QAAA,4BAA4B,GAAG,yIAAyI,CAAC;AACzK,QAAA,sBAAsB,GAAG,mJAAmJ,CAAC;AAC7K,QAAA,2BAA2B,GAAG,uHAAuH,CAAC;AAEnK,0CAA0C;AAC7B,QAAA,uBAAuB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CtC,CAAC"}
@@ -1,107 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.defaultSections = void 0;
4
- const react_1 = require("react");
5
- const useCioClient_1 = require("./useCioClient");
6
- const useDownShift_1 = require("./useDownShift");
7
- const useDebouncedFetchSections_1 = require("./useDebouncedFetchSections");
8
- const useFetchRecommendationPod_1 = require("./useFetchRecommendationPod");
9
- const usePrevious_1 = require("./usePrevious");
10
- const utils_1 = require("../utils");
11
- exports.defaultSections = [
12
- {
13
- identifier: 'Search Suggestions',
14
- type: 'autocomplete'
15
- },
16
- {
17
- identifier: 'Products',
18
- type: 'autocomplete'
19
- }
20
- ];
21
- const useCioAutocomplete = (options) => {
22
- const defaultPlaceholder = 'What can we help you find today?';
23
- const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, placeholder = defaultPlaceholder, sections = exports.defaultSections, zeroStateSections, autocompleteClassName = 'cio-autocomplete' } = options;
24
- const [query, setQuery] = (0, react_1.useState)('');
25
- const previousQuery = (0, usePrevious_1.default)(query);
26
- const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient });
27
- const zeroStateSectionsActive = !query.length && zeroStateSections;
28
- let activeSections = zeroStateSectionsActive ? zeroStateSections : sections;
29
- if (sections && !Array.isArray(sections)) {
30
- // eslint-disable-next-line
31
- console.error('useCioAutocomplete expects sections to reference an array of section configuration objects');
32
- activeSections = [];
33
- }
34
- if (zeroStateSections && !Array.isArray(zeroStateSections)) {
35
- // eslint-disable-next-line
36
- console.error('useCioAutocomplete expects zeroStateSections to reference an array of section configuration objects');
37
- activeSections = [];
38
- }
39
- const autocompleteSections = activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => config.type === 'autocomplete' || !config.type);
40
- const recommendationsSections = activeSections === null || activeSections === void 0 ? void 0 : activeSections.filter((config) => config.type === 'recommendations');
41
- const autocompleteResults = (0, useDebouncedFetchSections_1.default)(query, cioClient, autocompleteSections);
42
- const recommendationsResults = (0, useFetchRecommendationPod_1.default)(cioClient, recommendationsSections);
43
- const sectionResults = Object.assign(Object.assign({}, autocompleteResults), recommendationsResults);
44
- const activeSectionsWithData = [];
45
- activeSections === null || activeSections === void 0 ? void 0 : activeSections.forEach((config) => {
46
- const { identifier, data: customData } = config;
47
- const data = sectionResults[identifier] || customData;
48
- if (data && data !== undefined) {
49
- activeSectionsWithData.push(Object.assign(Object.assign({}, config), { data }));
50
- }
51
- });
52
- const items = [];
53
- activeSectionsWithData === null || activeSectionsWithData === void 0 ? void 0 : activeSectionsWithData.forEach((config) => {
54
- if (config === null || config === void 0 ? void 0 : config.data) {
55
- items.push(...config.data);
56
- }
57
- });
58
- const downshift = (0, useDownShift_1.default)({ setQuery, onChange, items, onSubmit, cioClient, previousQuery });
59
- const { isOpen, getMenuProps, getLabelProps, openMenu, closeMenu } = downshift;
60
- return {
61
- query,
62
- sections: activeSectionsWithData,
63
- isOpen: isOpen && (items === null || items === void 0 ? void 0 : items.length) > 0,
64
- getMenuProps: () => (Object.assign(Object.assign({}, getMenuProps()), { className: 'cio-results', 'data-testid': 'cio-results' })),
65
- getLabelProps,
66
- openMenu,
67
- closeMenu,
68
- getItemProps: ({ item, index = 0, sectionIdentifier = 'Products' }) => {
69
- const indexOffset = (0, utils_1.getIndexOffset)({
70
- activeSections: activeSectionsWithData,
71
- sectionIdentifier
72
- });
73
- const sectionItemTestId = `cio-item-${sectionIdentifier.replace(' ', '')}`;
74
- return Object.assign(Object.assign({}, downshift.getItemProps({ item, index: index + indexOffset })), { className: `cio-item ${sectionItemTestId}`, 'data-testid': sectionItemTestId });
75
- },
76
- getInputProps: () => (Object.assign(Object.assign({}, downshift.getInputProps()), { value: query, onFocus: () => {
77
- var _a;
78
- if (options.onFocus) {
79
- options.onFocus();
80
- }
81
- if (zeroStateSectionsActive && openOnFocus !== false) {
82
- downshift.openMenu();
83
- }
84
- if (query === null || query === void 0 ? void 0 : query.length) {
85
- downshift.openMenu();
86
- }
87
- (_a = cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker) === null || _a === void 0 ? void 0 : _a.trackInputFocus();
88
- }, className: 'cio-input', 'data-testid': 'cio-input', placeholder })),
89
- getFormProps: () => ({
90
- onSubmit: (event) => {
91
- event.preventDefault();
92
- if (onSubmit) {
93
- onSubmit({ query });
94
- }
95
- cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackSearchSubmit(query, { original_query: query });
96
- return { query };
97
- },
98
- className: 'cio-form',
99
- 'data-testid': 'cio-form'
100
- }),
101
- setQuery,
102
- cioClient,
103
- autocompleteClassName
104
- };
105
- };
106
- exports.default = useCioAutocomplete;
107
- //# sourceMappingURL=useCioAutocomplete.js.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"useCioAutocomplete.js","sourceRoot":"","sources":["../../../src/hooks/useCioAutocomplete.ts"],"names":[],"mappings":";;;AAAA,iCAAiC;AACjC,iDAA+D;AAC/D,iDAA0C;AAC1C,2EAAmE;AAOnE,2EAAoE;AACpE,+CAAwC;AACxC,oCAA0C;AAE7B,QAAA,eAAe,GAA2B;IACrD;QACE,UAAU,EAAE,oBAAoB;QAChC,IAAI,EAAE,cAAc;KACrB;IACD;QACE,UAAU,EAAE,UAAU;QACtB,IAAI,EAAE,cAAc;KACrB;CACF,CAAC;AAIF,MAAM,kBAAkB,GAAG,CAAC,OAAkC,EAAE,EAAE;IAChE,MAAM,kBAAkB,GAAG,kCAAkC,CAAC;IAC9D,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,MAAM,EACN,WAAW,EACX,WAAW,GAAG,kBAAkB,EAChC,QAAQ,GAAG,uBAAe,EAC1B,iBAAiB,EACjB,qBAAqB,GAAG,kBAAkB,EAC3C,GAAG,OAAO,CAAC;IAEZ,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,IAAA,gBAAQ,EAAC,EAAE,CAAC,CAAC;IACvC,MAAM,aAAa,GAAG,IAAA,qBAAW,EAAC,KAAK,CAAC,CAAC;IACzC,MAAM,SAAS,GAAG,IAAA,sBAAY,EAAC,EAAE,MAAM,EAAE,WAAW,EAAqB,CAAC,CAAC;IAE3E,MAAM,uBAAuB,GAAG,CAAC,KAAK,CAAC,MAAM,IAAI,iBAAiB,CAAC;IAEnE,IAAI,cAAc,GAAG,uBAAuB,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,QAAQ,CAAC;IAE5E,IAAI,QAAQ,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE;QACxC,2BAA2B;QAC3B,OAAO,CAAC,KAAK,CACX,4FAA4F,CAC7F,CAAC;QACF,cAAc,GAAG,EAAE,CAAC;KACrB;IAED,IAAI,iBAAiB,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,EAAE;QAC1D,2BAA2B;QAC3B,OAAO,CAAC,KAAK,CACX,qGAAqG,CACtG,CAAC;QACF,cAAc,GAAG,EAAE,CAAC;KACrB;IAED,MAAM,oBAAoB,GAAG,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,MAAM,CACjD,CAAC,MAA4B,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,cAAc,IAAI,CAAC,MAAM,CAAC,IAAI,CACjF,CAAC;IACF,MAAM,uBAAuB,GAAG,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,MAAM,CACpD,CAAC,MAA4B,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,KAAK,iBAAiB,CAC3B,CAAC;IAE3C,MAAM,mBAAmB,GAAG,IAAA,mCAAwB,EAAC,KAAK,EAAE,SAAS,EAAE,oBAAoB,CAAC,CAAC;IAC7F,MAAM,sBAAsB,GAAG,IAAA,mCAAyB,EAAC,SAAS,EAAE,uBAAuB,CAAC,CAAC;IAC7F,MAAM,cAAc,mCAAQ,mBAAmB,GAAK,sBAAsB,CAAE,CAAC;IAE7E,MAAM,sBAAsB,GAA2B,EAAE,CAAC;IAE1D,cAAc,aAAd,cAAc,uBAAd,cAAc,CAAE,OAAO,CAAC,CAAC,MAAM,EAAE,EAAE;QACjC,MAAM,EAAE,UAAU,EAAE,IAAI,EAAE,UAAU,EAAE,GAAG,MAAM,CAAC;QAChD,MAAM,IAAI,GAAG,cAAc,CAAC,UAAU,CAAC,IAAI,UAAU,CAAC;QAEtD,IAAI,IAAI,IAAI,IAAI,KAAK,SAAS,EAAE;YAC9B,sBAAsB,CAAC,IAAI,iCAAM,MAAM,KAAE,IAAI,IAAG,CAAC;SAClD;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,KAAK,GAAW,EAAE,CAAC;IAEzB,sBAAsB,aAAtB,sBAAsB,uBAAtB,sBAAsB,CAAE,OAAO,CAAC,CAAC,MAA4B,EAAE,EAAE;QAC/D,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAE;YAChB,KAAK,CAAC,IAAI,CAAC,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;SAC5B;IACH,CAAC,CAAC,CAAC;IAEH,MAAM,SAAS,GAAG,IAAA,sBAAY,EAAC,EAAE,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAa,EAAE,CAAC,CAAC;IAClG,MAAM,EAAE,MAAM,EAAE,YAAY,EAAE,aAAa,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,SAAS,CAAC;IAE/E,OAAO;QACL,KAAK;QACL,QAAQ,EAAE,sBAAsB;QAChC,MAAM,EAAE,MAAM,IAAI,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,IAAG,CAAC;QACnC,YAAY,EAAE,GAAG,EAAE,CAAC,iCACf,YAAY,EAAE,KACjB,SAAS,EAAE,aAAa,EACxB,aAAa,EAAE,aAAa,IAC5B;QACF,aAAa;QACb,QAAQ;QACR,SAAS;QACT,YAAY,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,GAAG,CAAC,EAAE,iBAAiB,GAAG,UAAU,EAAE,EAAE,EAAE;YACpE,MAAM,WAAW,GAAG,IAAA,sBAAc,EAAC;gBACjC,cAAc,EAAE,sBAAsB;gBACtC,iBAAiB;aAClB,CAAC,CAAC;YACH,MAAM,iBAAiB,GAAG,YAAY,iBAAiB,CAAC,OAAO,CAAC,GAAG,EAAE,EAAE,CAAC,EAAE,CAAC;YAE3E,uCACK,SAAS,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,GAAG,WAAW,EAAE,CAAC,KAC/D,SAAS,EAAE,YAAY,iBAAiB,EAAE,EAC1C,aAAa,EAAE,iBAAiB,IAChC;QACJ,CAAC;QACD,aAAa,EAAE,GAAG,EAAE,CAAC,iCAChB,SAAS,CAAC,aAAa,EAAE,KAC5B,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,GAAG,EAAE;;gBACZ,IAAI,OAAO,CAAC,OAAO,EAAE;oBACnB,OAAO,CAAC,OAAO,EAAE,CAAC;iBACnB;gBACD,IAAI,uBAAuB,IAAI,WAAW,KAAK,KAAK,EAAE;oBACpD,SAAS,CAAC,QAAQ,EAAE,CAAC;iBACtB;gBACD,IAAI,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,MAAM,EAAE;oBACjB,SAAS,CAAC,QAAQ,EAAE,CAAC;iBACtB;gBACD,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,0CAAE,eAAe,EAAE,CAAC;YACxC,CAAC,EACD,SAAS,EAAE,WAAW,EACtB,aAAa,EAAE,WAAW,EAC1B,WAAW,IACX;QACF,YAAY,EAAE,GAAG,EAAE,CAAC,CAAC;YACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,EAAE;gBAClB,KAAK,CAAC,cAAc,EAAE,CAAC;gBACvB,IAAI,QAAQ,EAAE;oBACZ,QAAQ,CAAC,EAAE,KAAK,EAAE,CAAC,CAAC;iBACrB;gBACD,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,CAAC,iBAAiB,CAAC,KAAK,EAAE,EAAE,cAAc,EAAE,KAAK,EAAE,CAAC,CAAC;gBACvE,OAAO,EAAE,KAAK,EAAE,CAAC;YACnB,CAAC;YACD,SAAS,EAAE,UAAU;YACrB,aAAa,EAAE,UAAU;SAC1B,CAAC;QACF,QAAQ;QACR,SAAS;QACT,qBAAqB;KACtB,CAAC;AACJ,CAAC,CAAC;AAEF,kBAAe,kBAAkB,CAAC"}