@constructor-io/constructorio-ui-autocomplete 1.1.6 → 1.1.9
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/README.md +17 -3
- package/lib/cjs/constants.js +19 -3
- package/lib/cjs/constants.js.map +1 -1
- package/lib/cjs/hooks/useCioAutocomplete.js +7 -7
- package/lib/cjs/hooks/useCioAutocomplete.js.map +1 -1
- package/lib/cjs/hooks/useCioClient.js +1 -1
- package/lib/cjs/hooks/useDebouncedFetchSections.js +1 -1
- package/lib/cjs/hooks/useDownShift.js +4 -4
- package/lib/cjs/hooks/useDownShift.js.map +1 -1
- package/lib/cjs/stories/Autocomplete/argTypes.js +21 -21
- package/lib/cjs/utils.js +3 -3
- package/lib/mjs/components/Autocomplete/AutocompleteResults/AutocompleteResults.js +1 -1
- package/lib/mjs/constants.js +19 -3
- package/lib/mjs/constants.js.map +1 -1
- package/lib/mjs/hooks/useCioAutocomplete.js +10 -10
- package/lib/mjs/hooks/useCioAutocomplete.js.map +1 -1
- package/lib/mjs/hooks/useCioClient.js +1 -1
- package/lib/mjs/hooks/useDebouncedFetchSections.js +3 -3
- package/lib/mjs/hooks/useDownShift.js +4 -4
- package/lib/mjs/hooks/useDownShift.js.map +1 -1
- package/lib/mjs/hooks/useFetchRecommendationPod.js +1 -1
- package/lib/mjs/stories/Autocomplete/argTypes.js +21 -21
- package/lib/mjs/utils.js +3 -3
- package/lib/types/constants.d.ts +1 -1
- package/package.json +5 -3
- package/lib/.DS_Store +0 -0
package/README.md
CHANGED
|
@@ -101,10 +101,24 @@ function YourComponent() {
|
|
|
101
101
|
|
|
102
102
|
### Library defaults
|
|
103
103
|
|
|
104
|
-
|
|
104
|
+
By default, importing react components or hooks from this library does not pull any css into your project.
|
|
105
105
|
|
|
106
|
-
|
|
107
|
-
|
|
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/lib/cjs/constants.js
CHANGED
|
@@ -117,13 +117,29 @@ exports.openOnFocusDescription = `Use \`openOnFocus: false\` to show suggestions
|
|
|
117
117
|
exports.multipleSectionsDescription = `Use as many different \`recommendations\` and \`custom\` sections as you'd like and in whatever order you would like!`;
|
|
118
118
|
// from .storybook/custom-styles-story.css
|
|
119
119
|
exports.customStylesDescription = `
|
|
120
|
-
|
|
120
|
+
By default, importing react components or hooks from this library does not pull any css into your project.
|
|
121
121
|
|
|
122
|
-
|
|
123
|
-
|
|
122
|
+
If you wish to use some starter styles from this library, add an import statement similar to the example import statement below:
|
|
123
|
+
|
|
124
|
+
\`
|
|
125
|
+
import 'node_modules/@constructor-io/constructorio-ui-autocomplete/lib/mjs/components/Autocomplete/Autocomplete.css';
|
|
126
|
+
\`
|
|
127
|
+
|
|
128
|
+
<i></i>
|
|
129
|
+
|
|
130
|
+
- To opt out of all default styling, do not import the \`Autocomplete.css\` stylesheet.
|
|
131
|
+
- The path and syntax in the example above may change depending on your module bundling strategy
|
|
132
|
+
- These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.
|
|
133
|
+
- All starter styles in this library are scoped within the \`.cio-autocomplete\` css selector.
|
|
134
|
+
- These starter styles are intended to be extended by layering in your own css rules
|
|
135
|
+
- If you like, you can override the container's className like so:
|
|
136
|
+
\`autocompleteClassName='custom-autocomplete-container'\`
|
|
137
|
+
- If you like, you can pass additional className(s) of your choosing like so:
|
|
138
|
+
\`autocompleteClassName='cio-autocomplete custom-autocomplete-container'\`
|
|
124
139
|
|
|
125
140
|
|
|
126
141
|
\`\`\`css
|
|
142
|
+
/* Custom Style Sheet */
|
|
127
143
|
.cio-autocomplete.custom-autocomplete-styles form {
|
|
128
144
|
height: 44px;
|
|
129
145
|
width: 600px;
|
package/lib/cjs/constants.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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
|
|
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DtC,CAAC"}
|
|
@@ -11,16 +11,16 @@ const utils_1 = require("../utils");
|
|
|
11
11
|
exports.defaultSections = [
|
|
12
12
|
{
|
|
13
13
|
identifier: 'Search Suggestions',
|
|
14
|
-
type: 'autocomplete'
|
|
14
|
+
type: 'autocomplete',
|
|
15
15
|
},
|
|
16
16
|
{
|
|
17
17
|
identifier: 'Products',
|
|
18
|
-
type: 'autocomplete'
|
|
19
|
-
}
|
|
18
|
+
type: 'autocomplete',
|
|
19
|
+
},
|
|
20
20
|
];
|
|
21
21
|
const useCioAutocomplete = (options) => {
|
|
22
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;
|
|
23
|
+
const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, placeholder = defaultPlaceholder, sections = exports.defaultSections, zeroStateSections, autocompleteClassName = 'cio-autocomplete', } = options;
|
|
24
24
|
const [query, setQuery] = (0, react_1.useState)('');
|
|
25
25
|
const previousQuery = (0, usePrevious_1.default)(query);
|
|
26
26
|
const cioClient = (0, useCioClient_1.default)({ apiKey, cioJsClient });
|
|
@@ -68,7 +68,7 @@ const useCioAutocomplete = (options) => {
|
|
|
68
68
|
getItemProps: ({ item, index = 0, sectionIdentifier = 'Products' }) => {
|
|
69
69
|
const indexOffset = (0, utils_1.getIndexOffset)({
|
|
70
70
|
activeSections: activeSectionsWithData,
|
|
71
|
-
sectionIdentifier
|
|
71
|
+
sectionIdentifier,
|
|
72
72
|
});
|
|
73
73
|
const sectionItemTestId = `cio-item-${sectionIdentifier.replace(' ', '')}`;
|
|
74
74
|
return Object.assign(Object.assign({}, downshift.getItemProps({ item, index: index + indexOffset })), { className: `cio-item ${sectionItemTestId}`, 'data-testid': sectionItemTestId });
|
|
@@ -96,11 +96,11 @@ const useCioAutocomplete = (options) => {
|
|
|
96
96
|
return { query };
|
|
97
97
|
},
|
|
98
98
|
className: 'cio-form',
|
|
99
|
-
'data-testid': 'cio-form'
|
|
99
|
+
'data-testid': 'cio-form',
|
|
100
100
|
}),
|
|
101
101
|
setQuery,
|
|
102
102
|
cioClient,
|
|
103
|
-
autocompleteClassName
|
|
103
|
+
autocompleteClassName,
|
|
104
104
|
};
|
|
105
105
|
};
|
|
106
106
|
exports.default = useCioAutocomplete;
|
|
@@ -1 +1 @@
|
|
|
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,
|
|
1
|
+
{"version":3,"file":"useCioAutocomplete.js","sourceRoot":"","sources":["../../../src/hooks/useCioAutocomplete.ts"],"names":[],"mappings":"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"}
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
const react_1 = require("react");
|
|
4
4
|
const useDebounce_1 = require("./useDebounce");
|
|
5
5
|
const autocompleteParameters = {
|
|
6
|
-
resultsPerSection: {}
|
|
6
|
+
resultsPerSection: {},
|
|
7
7
|
// numResults: 8,
|
|
8
8
|
// hiddenFields: [],
|
|
9
9
|
// filters: {},
|
|
@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
3
3
|
const tslib_1 = require("tslib");
|
|
4
4
|
const downshift_1 = require("downshift");
|
|
5
5
|
let idCounter = 0;
|
|
6
|
-
const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = '', onChange }) => (0, downshift_1.useCombobox)({
|
|
6
|
+
const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = '', onChange, }) => (0, downshift_1.useCombobox)({
|
|
7
7
|
id: `cio-autocomplete-${idCounter++}`,
|
|
8
8
|
items,
|
|
9
9
|
itemToString: (item) => (item === null || item === void 0 ? void 0 : item.value) || '',
|
|
@@ -22,16 +22,16 @@ const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = ''
|
|
|
22
22
|
onSubmit({ item: selectedItem, originalQuery: previousQuery });
|
|
23
23
|
if (!((_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.data) === null || _a === void 0 ? void 0 : _a.url)) {
|
|
24
24
|
cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackSearchSubmit(selectedItem.value, {
|
|
25
|
-
original_query: previousQuery
|
|
25
|
+
original_query: previousQuery,
|
|
26
26
|
});
|
|
27
27
|
}
|
|
28
28
|
cioClient === null || cioClient === void 0 ? void 0 : cioClient.tracker.trackAutocompleteSelect(selectedItem.value, {
|
|
29
29
|
original_query: previousQuery,
|
|
30
|
-
section: selectedItem.section
|
|
30
|
+
section: selectedItem.section,
|
|
31
31
|
});
|
|
32
32
|
}
|
|
33
33
|
}
|
|
34
|
-
}
|
|
34
|
+
},
|
|
35
35
|
});
|
|
36
36
|
exports.default = useDownShift;
|
|
37
37
|
//# sourceMappingURL=useDownShift.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDownShift.js","sourceRoot":"","sources":["../../../src/hooks/useDownShift.ts"],"names":[],"mappings":";;;AAAA,yCAAgE;AAIhE,IAAI,SAAS,GAAG,CAAC,CAAC;AAelB,MAAM,YAAY,GAAiB,CAAC,EAClC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,EAAE,EAClB,QAAQ,
|
|
1
|
+
{"version":3,"file":"useDownShift.js","sourceRoot":"","sources":["../../../src/hooks/useDownShift.ts"],"names":[],"mappings":";;;AAAA,yCAAgE;AAIhE,IAAI,SAAS,GAAG,CAAC,CAAC;AAelB,MAAM,YAAY,GAAiB,CAAC,EAClC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,EAAE,EAClB,QAAQ,GACT,EAAE,EAAE,CACH,IAAA,uBAAW,EAAC;IACV,EAAE,EAAE,oBAAoB,SAAS,EAAE,EAAE;IACrC,KAAK;IACL,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,CAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,KAAI,EAAE;IACzC,kBAAkB,EAAE,CAAO,EAAE,UAAU,GAAG,EAAE,EAAE,EAAE,EAAE;QAChD,QAAQ,CAAC,UAAU,CAAC,CAAC;QACrB,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,UAAU,CAAC,CAAC;SACtB;IACH,CAAC,CAAA;IACD,oBAAoB,CAAC,EAAE,YAAY,EAAE;;QACnC,IAAI,YAAY,EAAE;YAChB,QAAQ,CAAC,YAAY,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;YACnC,IAAI,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,KAAK,EAAE;gBACvB,IAAI,QAAQ;oBAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC,CAAC;gBAC7E,IAAI,CAAC,CAAA,MAAA,YAAY,aAAZ,YAAY,uBAAZ,YAAY,CAAE,IAAI,0CAAE,GAAG,CAAA,EAAE;oBAC5B,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,CAAC,iBAAiB,CAAC,YAAY,CAAC,KAAK,EAAE;wBACvD,cAAc,EAAE,aAAa;qBAC9B,CAAC,CAAC;iBACJ;gBACD,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,CAAC,uBAAuB,CAAC,YAAY,CAAC,KAAK,EAAE;oBAC7D,cAAc,EAAE,aAAa;oBAC7B,OAAO,EAAE,YAAY,CAAC,OAAO;iBAC9B,CAAC,CAAC;aACJ;SACF;IACH,CAAC;CACF,CAAC,CAAC;AAEL,kBAAe,YAAY,CAAC"}
|
|
@@ -7,59 +7,59 @@ exports.argTypes = {
|
|
|
7
7
|
description: 'Search input placeholder',
|
|
8
8
|
table: {
|
|
9
9
|
type: {
|
|
10
|
-
summary: 'string'
|
|
11
|
-
}
|
|
10
|
+
summary: 'string',
|
|
11
|
+
},
|
|
12
12
|
},
|
|
13
13
|
control: {
|
|
14
|
-
type: 'text'
|
|
15
|
-
}
|
|
14
|
+
type: 'text',
|
|
15
|
+
},
|
|
16
16
|
},
|
|
17
17
|
apiKey: {
|
|
18
18
|
type: { name: 'string' },
|
|
19
19
|
description: 'Your constructor API key',
|
|
20
20
|
table: {
|
|
21
21
|
type: {
|
|
22
|
-
summary: 'string'
|
|
23
|
-
}
|
|
22
|
+
summary: 'string',
|
|
23
|
+
},
|
|
24
24
|
},
|
|
25
25
|
control: {
|
|
26
|
-
type: 'text'
|
|
27
|
-
}
|
|
26
|
+
type: 'text',
|
|
27
|
+
},
|
|
28
28
|
},
|
|
29
29
|
onSubmit: {
|
|
30
30
|
type: {
|
|
31
|
-
name: 'function'
|
|
31
|
+
name: 'function',
|
|
32
32
|
},
|
|
33
33
|
description: `On search submit callback function`,
|
|
34
34
|
table: {
|
|
35
35
|
type: {
|
|
36
|
-
summary: 'Function'
|
|
37
|
-
}
|
|
36
|
+
summary: 'Function',
|
|
37
|
+
},
|
|
38
38
|
},
|
|
39
|
-
control: null
|
|
39
|
+
control: null,
|
|
40
40
|
},
|
|
41
41
|
onFocus: {
|
|
42
42
|
type: {
|
|
43
|
-
name: 'function'
|
|
43
|
+
name: 'function',
|
|
44
44
|
},
|
|
45
45
|
description: `On focus callback function`,
|
|
46
46
|
table: {
|
|
47
47
|
type: {
|
|
48
|
-
summary: 'Function'
|
|
49
|
-
}
|
|
48
|
+
summary: 'Function',
|
|
49
|
+
},
|
|
50
50
|
},
|
|
51
|
-
control: null
|
|
51
|
+
control: null,
|
|
52
52
|
},
|
|
53
53
|
openOnFocus: {
|
|
54
54
|
description: 'Open results on focus',
|
|
55
55
|
table: {
|
|
56
56
|
type: {
|
|
57
|
-
summary: 'boolean'
|
|
58
|
-
}
|
|
57
|
+
summary: 'boolean',
|
|
58
|
+
},
|
|
59
59
|
},
|
|
60
60
|
control: {
|
|
61
|
-
type: 'boolean'
|
|
62
|
-
}
|
|
63
|
-
}
|
|
61
|
+
type: 'boolean',
|
|
62
|
+
},
|
|
63
|
+
},
|
|
64
64
|
};
|
|
65
65
|
//# sourceMappingURL=argTypes.js.map
|
package/lib/cjs/utils.js
CHANGED
package/lib/mjs/constants.js
CHANGED
|
@@ -114,13 +114,29 @@ export const openOnFocusDescription = `Use \`openOnFocus: false\` to show sugges
|
|
|
114
114
|
export const multipleSectionsDescription = `Use as many different \`recommendations\` and \`custom\` sections as you'd like and in whatever order you would like!`;
|
|
115
115
|
// from .storybook/custom-styles-story.css
|
|
116
116
|
export const customStylesDescription = `
|
|
117
|
-
|
|
117
|
+
By default, importing react components or hooks from this library does not pull any css into your project.
|
|
118
118
|
|
|
119
|
-
|
|
120
|
-
|
|
119
|
+
If you wish to use some starter styles from this library, add an import statement similar to the example import statement below:
|
|
120
|
+
|
|
121
|
+
\`
|
|
122
|
+
import 'node_modules/@constructor-io/constructorio-ui-autocomplete/lib/mjs/components/Autocomplete/Autocomplete.css';
|
|
123
|
+
\`
|
|
124
|
+
|
|
125
|
+
<i></i>
|
|
126
|
+
|
|
127
|
+
- To opt out of all default styling, do not import the \`Autocomplete.css\` stylesheet.
|
|
128
|
+
- The path and syntax in the example above may change depending on your module bundling strategy
|
|
129
|
+
- These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.
|
|
130
|
+
- All starter styles in this library are scoped within the \`.cio-autocomplete\` css selector.
|
|
131
|
+
- These starter styles are intended to be extended by layering in your own css rules
|
|
132
|
+
- If you like, you can override the container's className like so:
|
|
133
|
+
\`autocompleteClassName='custom-autocomplete-container'\`
|
|
134
|
+
- If you like, you can pass additional className(s) of your choosing like so:
|
|
135
|
+
\`autocompleteClassName='cio-autocomplete custom-autocomplete-container'\`
|
|
121
136
|
|
|
122
137
|
|
|
123
138
|
\`\`\`css
|
|
139
|
+
/* Custom Style Sheet */
|
|
124
140
|
.cio-autocomplete.custom-autocomplete-styles form {
|
|
125
141
|
height: 44px;
|
|
126
142
|
width: 600px;
|
package/lib/mjs/constants.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,MAAM,CAAC,MAAM,MAAM,GAAG,sBAAsB,CAAC;AAE7C,kCAAkC;AAClC,gCAAgC;AAChC,kCAAkC;AAElC,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;CAOnC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B9B,CAAC;AAEF,kCAAkC;AAClC,kBAAkB;AAClB,kCAAkC;AAElC,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;CAuBlC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG;;;;;;+bAM0Z,CAAC;AAEhc,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;mEAQ+B,CAAC;AAEpE,kCAAkC;AAClC,oBAAoB;AACpB,kCAAkC;AAElC,MAAM,CAAC,MAAM,iBAAiB,GAAG,kEAAkE,CAAC;AACpG,MAAM,CAAC,MAAM,sBAAsB,GAAG;;6LAEuJ,CAAC;AAC9L,MAAM,CAAC,MAAM,sBAAsB,GAAG,iIAAiI,CAAC;AACxK,MAAM,CAAC,MAAM,4BAA4B,GAAG,4DAA4D,CAAC;AACzG,MAAM,CAAC,MAAM,mBAAmB,GAAG,0DAA0D,CAAC;AAC9F,MAAM,CAAC,MAAM,kBAAkB,GAAG,uDAAuD,CAAC;AAC1F,MAAM,CAAC,MAAM,qBAAqB,GAAG,sEAAsE,CAAC;AAC5G,MAAM,CAAC,MAAM,uBAAuB,GAAG,iEAAiE,CAAC;AACzG,MAAM,CAAC,MAAM,0BAA0B,GAAG,+EAA+E,CAAC;AAC1H,MAAM,CAAC,MAAM,wBAAwB,GAAG,+GAA+G,CAAC;AACxJ,MAAM,CAAC,MAAM,kBAAkB,GAAG,qHAAqH,CAAC;AACxJ,MAAM,CAAC,MAAM,mBAAmB,GAAG,0HAA0H,CAAC;AAC9J,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;sFAOmD,CAAC;AACvF,MAAM,CAAC,MAAM,4BAA4B,GAAG,yIAAyI,CAAC;AACtL,MAAM,CAAC,MAAM,sBAAsB,GAAG,mJAAmJ,CAAC;AAC1L,MAAM,CAAC,MAAM,2BAA2B,GAAG,uHAAuH,CAAC;AAEnK,0CAA0C;AAC1C,MAAM,CAAC,MAAM,uBAAuB,GAAG
|
|
1
|
+
{"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAAA,yBAAyB;AACzB,MAAM,CAAC,MAAM,MAAM,GAAG,sBAAsB,CAAC;AAE7C,kCAAkC;AAClC,gCAAgC;AAChC,kCAAkC;AAElC,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;CAOnC,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6B9B,CAAC;AAEF,kCAAkC;AAClC,kBAAkB;AAClB,kCAAkC;AAElC,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;;;;;;;;;;;;;;;;;CAuBlC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG;;;;;;+bAM0Z,CAAC;AAEhc,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;mEAQ+B,CAAC;AAEpE,kCAAkC;AAClC,oBAAoB;AACpB,kCAAkC;AAElC,MAAM,CAAC,MAAM,iBAAiB,GAAG,kEAAkE,CAAC;AACpG,MAAM,CAAC,MAAM,sBAAsB,GAAG;;6LAEuJ,CAAC;AAC9L,MAAM,CAAC,MAAM,sBAAsB,GAAG,iIAAiI,CAAC;AACxK,MAAM,CAAC,MAAM,4BAA4B,GAAG,4DAA4D,CAAC;AACzG,MAAM,CAAC,MAAM,mBAAmB,GAAG,0DAA0D,CAAC;AAC9F,MAAM,CAAC,MAAM,kBAAkB,GAAG,uDAAuD,CAAC;AAC1F,MAAM,CAAC,MAAM,qBAAqB,GAAG,sEAAsE,CAAC;AAC5G,MAAM,CAAC,MAAM,uBAAuB,GAAG,iEAAiE,CAAC;AACzG,MAAM,CAAC,MAAM,0BAA0B,GAAG,+EAA+E,CAAC;AAC1H,MAAM,CAAC,MAAM,wBAAwB,GAAG,+GAA+G,CAAC;AACxJ,MAAM,CAAC,MAAM,kBAAkB,GAAG,qHAAqH,CAAC;AACxJ,MAAM,CAAC,MAAM,mBAAmB,GAAG,0HAA0H,CAAC;AAC9J,MAAM,CAAC,MAAM,mBAAmB,GAAG;;;;;;;sFAOmD,CAAC;AACvF,MAAM,CAAC,MAAM,4BAA4B,GAAG,yIAAyI,CAAC;AACtL,MAAM,CAAC,MAAM,sBAAsB,GAAG,mJAAmJ,CAAC;AAC1L,MAAM,CAAC,MAAM,2BAA2B,GAAG,uHAAuH,CAAC;AAEnK,0CAA0C;AAC1C,MAAM,CAAC,MAAM,uBAAuB,GAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DtC,CAAC"}
|
|
@@ -8,16 +8,16 @@ import { getIndexOffset } from '../utils';
|
|
|
8
8
|
export const defaultSections = [
|
|
9
9
|
{
|
|
10
10
|
identifier: 'Search Suggestions',
|
|
11
|
-
type: 'autocomplete'
|
|
11
|
+
type: 'autocomplete',
|
|
12
12
|
},
|
|
13
13
|
{
|
|
14
14
|
identifier: 'Products',
|
|
15
|
-
type: 'autocomplete'
|
|
16
|
-
}
|
|
15
|
+
type: 'autocomplete',
|
|
16
|
+
},
|
|
17
17
|
];
|
|
18
18
|
const useCioAutocomplete = (options) => {
|
|
19
19
|
const defaultPlaceholder = 'What can we help you find today?';
|
|
20
|
-
const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, placeholder = defaultPlaceholder, sections = defaultSections, zeroStateSections, autocompleteClassName = 'cio-autocomplete' } = options;
|
|
20
|
+
const { onSubmit, onChange, openOnFocus, apiKey, cioJsClient, placeholder = defaultPlaceholder, sections = defaultSections, zeroStateSections, autocompleteClassName = 'cio-autocomplete', } = options;
|
|
21
21
|
const [query, setQuery] = useState('');
|
|
22
22
|
const previousQuery = usePrevious(query);
|
|
23
23
|
const cioClient = useCioClient({ apiKey, cioJsClient });
|
|
@@ -61,7 +61,7 @@ const useCioAutocomplete = (options) => {
|
|
|
61
61
|
getMenuProps: () => ({
|
|
62
62
|
...getMenuProps(),
|
|
63
63
|
className: 'cio-results',
|
|
64
|
-
'data-testid': 'cio-results'
|
|
64
|
+
'data-testid': 'cio-results',
|
|
65
65
|
}),
|
|
66
66
|
getLabelProps,
|
|
67
67
|
openMenu,
|
|
@@ -69,13 +69,13 @@ const useCioAutocomplete = (options) => {
|
|
|
69
69
|
getItemProps: ({ item, index = 0, sectionIdentifier = 'Products' }) => {
|
|
70
70
|
const indexOffset = getIndexOffset({
|
|
71
71
|
activeSections: activeSectionsWithData,
|
|
72
|
-
sectionIdentifier
|
|
72
|
+
sectionIdentifier,
|
|
73
73
|
});
|
|
74
74
|
const sectionItemTestId = `cio-item-${sectionIdentifier.replace(' ', '')}`;
|
|
75
75
|
return {
|
|
76
76
|
...downshift.getItemProps({ item, index: index + indexOffset }),
|
|
77
77
|
className: `cio-item ${sectionItemTestId}`,
|
|
78
|
-
'data-testid': sectionItemTestId
|
|
78
|
+
'data-testid': sectionItemTestId,
|
|
79
79
|
};
|
|
80
80
|
},
|
|
81
81
|
getInputProps: () => ({
|
|
@@ -95,7 +95,7 @@ const useCioAutocomplete = (options) => {
|
|
|
95
95
|
},
|
|
96
96
|
className: 'cio-input',
|
|
97
97
|
'data-testid': 'cio-input',
|
|
98
|
-
placeholder
|
|
98
|
+
placeholder,
|
|
99
99
|
}),
|
|
100
100
|
getFormProps: () => ({
|
|
101
101
|
onSubmit: (event) => {
|
|
@@ -107,11 +107,11 @@ const useCioAutocomplete = (options) => {
|
|
|
107
107
|
return { query };
|
|
108
108
|
},
|
|
109
109
|
className: 'cio-form',
|
|
110
|
-
'data-testid': 'cio-form'
|
|
110
|
+
'data-testid': 'cio-form',
|
|
111
111
|
}),
|
|
112
112
|
setQuery,
|
|
113
113
|
cioClient,
|
|
114
|
-
autocompleteClassName
|
|
114
|
+
autocompleteClassName,
|
|
115
115
|
};
|
|
116
116
|
};
|
|
117
117
|
export default useCioAutocomplete;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useCioAutocomplete.js","sourceRoot":"","sources":["../../../src/hooks/useCioAutocomplete.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,YAAiC,MAAM,gBAAgB,CAAC;AAC/D,OAAO,YAAY,MAAM,gBAAgB,CAAC;AAC1C,OAAO,wBAAwB,MAAM,6BAA6B,CAAC;AAOnE,OAAO,yBAAyB,MAAM,6BAA6B,CAAC;AACpE,OAAO,WAAW,MAAM,eAAe,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAE1C,MAAM,CAAC,MAAM,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,eAAe,EAC1B,iBAAiB,EACjB,qBAAqB,GAAG,kBAAkB,
|
|
1
|
+
{"version":3,"file":"useCioAutocomplete.js","sourceRoot":"","sources":["../../../src/hooks/useCioAutocomplete.ts"],"names":[],"mappings":"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"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { useEffect, useState } from 'react';
|
|
2
2
|
import useDebounce from './useDebounce';
|
|
3
3
|
const autocompleteParameters = {
|
|
4
|
-
resultsPerSection: {}
|
|
4
|
+
resultsPerSection: {},
|
|
5
5
|
// numResults: 8,
|
|
6
6
|
// hiddenFields: [],
|
|
7
7
|
// filters: {},
|
|
@@ -13,7 +13,7 @@ const useDebouncedFetchSection = (query, cioClient, autocompleteSections) => {
|
|
|
13
13
|
if (autocompleteSections) {
|
|
14
14
|
autocompleteParameters.resultsPerSection = autocompleteSections.reduce((acc, sectionConfig) => ({
|
|
15
15
|
...acc,
|
|
16
|
-
[sectionConfig.identifier]: sectionConfig?.numResults || 8
|
|
16
|
+
[sectionConfig.identifier]: sectionConfig?.numResults || 8,
|
|
17
17
|
}), {});
|
|
18
18
|
}
|
|
19
19
|
useEffect(() => {
|
|
@@ -25,7 +25,7 @@ const useDebouncedFetchSection = (query, cioClient, autocompleteSections) => {
|
|
|
25
25
|
Object.keys(response.sections).forEach((section) => {
|
|
26
26
|
newSectionsData[section] = response.sections[section].map((item) => ({
|
|
27
27
|
...item,
|
|
28
|
-
section
|
|
28
|
+
section,
|
|
29
29
|
}));
|
|
30
30
|
});
|
|
31
31
|
setSectionsData(newSectionsData);
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { useCombobox } from 'downshift';
|
|
2
2
|
let idCounter = 0;
|
|
3
|
-
const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = '', onChange }) => useCombobox({
|
|
3
|
+
const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = '', onChange, }) => useCombobox({
|
|
4
4
|
id: `cio-autocomplete-${idCounter++}`,
|
|
5
5
|
items,
|
|
6
6
|
itemToString: (item) => item?.value || '',
|
|
@@ -18,16 +18,16 @@ const useDownShift = ({ setQuery, items, onSubmit, cioClient, previousQuery = ''
|
|
|
18
18
|
onSubmit({ item: selectedItem, originalQuery: previousQuery });
|
|
19
19
|
if (!selectedItem?.data?.url) {
|
|
20
20
|
cioClient?.tracker.trackSearchSubmit(selectedItem.value, {
|
|
21
|
-
original_query: previousQuery
|
|
21
|
+
original_query: previousQuery,
|
|
22
22
|
});
|
|
23
23
|
}
|
|
24
24
|
cioClient?.tracker.trackAutocompleteSelect(selectedItem.value, {
|
|
25
25
|
original_query: previousQuery,
|
|
26
|
-
section: selectedItem.section
|
|
26
|
+
section: selectedItem.section,
|
|
27
27
|
});
|
|
28
28
|
}
|
|
29
29
|
}
|
|
30
|
-
}
|
|
30
|
+
},
|
|
31
31
|
});
|
|
32
32
|
export default useDownShift;
|
|
33
33
|
//# sourceMappingURL=useDownShift.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"useDownShift.js","sourceRoot":"","sources":["../../../src/hooks/useDownShift.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA0B,MAAM,WAAW,CAAC;AAIhE,IAAI,SAAS,GAAG,CAAC,CAAC;AAelB,MAAM,YAAY,GAAiB,CAAC,EAClC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,EAAE,EAClB,QAAQ,
|
|
1
|
+
{"version":3,"file":"useDownShift.js","sourceRoot":"","sources":["../../../src/hooks/useDownShift.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAA0B,MAAM,WAAW,CAAC;AAIhE,IAAI,SAAS,GAAG,CAAC,CAAC;AAelB,MAAM,YAAY,GAAiB,CAAC,EAClC,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,SAAS,EACT,aAAa,GAAG,EAAE,EAClB,QAAQ,GACT,EAAE,EAAE,CACH,WAAW,CAAC;IACV,EAAE,EAAE,oBAAoB,SAAS,EAAE,EAAE;IACrC,KAAK;IACL,YAAY,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EAAE,KAAK,IAAI,EAAE;IACzC,kBAAkB,EAAE,KAAK,EAAE,EAAE,UAAU,GAAG,EAAE,EAAE,EAAE,EAAE;QAChD,QAAQ,CAAC,UAAU,CAAC,CAAC;QACrB,IAAI,QAAQ,EAAE;YACZ,QAAQ,CAAC,UAAU,CAAC,CAAC;SACtB;IACH,CAAC;IACD,oBAAoB,CAAC,EAAE,YAAY,EAAE;QACnC,IAAI,YAAY,EAAE;YAChB,QAAQ,CAAC,YAAY,CAAC,KAAK,IAAI,EAAE,CAAC,CAAC;YACnC,IAAI,YAAY,EAAE,KAAK,EAAE;gBACvB,IAAI,QAAQ;oBAAE,QAAQ,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,aAAa,EAAE,aAAa,EAAE,CAAC,CAAC;gBAC7E,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,GAAG,EAAE;oBAC5B,SAAS,EAAE,OAAO,CAAC,iBAAiB,CAAC,YAAY,CAAC,KAAK,EAAE;wBACvD,cAAc,EAAE,aAAa;qBAC9B,CAAC,CAAC;iBACJ;gBACD,SAAS,EAAE,OAAO,CAAC,uBAAuB,CAAC,YAAY,CAAC,KAAK,EAAE;oBAC7D,cAAc,EAAE,aAAa;oBAC7B,OAAO,EAAE,YAAY,CAAC,OAAO;iBAC9B,CAAC,CAAC;aACJ;SACF;IACH,CAAC;CACF,CAAC,CAAC;AAEL,eAAe,YAAY,CAAC"}
|
|
@@ -4,59 +4,59 @@ export const argTypes = {
|
|
|
4
4
|
description: 'Search input placeholder',
|
|
5
5
|
table: {
|
|
6
6
|
type: {
|
|
7
|
-
summary: 'string'
|
|
8
|
-
}
|
|
7
|
+
summary: 'string',
|
|
8
|
+
},
|
|
9
9
|
},
|
|
10
10
|
control: {
|
|
11
|
-
type: 'text'
|
|
12
|
-
}
|
|
11
|
+
type: 'text',
|
|
12
|
+
},
|
|
13
13
|
},
|
|
14
14
|
apiKey: {
|
|
15
15
|
type: { name: 'string' },
|
|
16
16
|
description: 'Your constructor API key',
|
|
17
17
|
table: {
|
|
18
18
|
type: {
|
|
19
|
-
summary: 'string'
|
|
20
|
-
}
|
|
19
|
+
summary: 'string',
|
|
20
|
+
},
|
|
21
21
|
},
|
|
22
22
|
control: {
|
|
23
|
-
type: 'text'
|
|
24
|
-
}
|
|
23
|
+
type: 'text',
|
|
24
|
+
},
|
|
25
25
|
},
|
|
26
26
|
onSubmit: {
|
|
27
27
|
type: {
|
|
28
|
-
name: 'function'
|
|
28
|
+
name: 'function',
|
|
29
29
|
},
|
|
30
30
|
description: `On search submit callback function`,
|
|
31
31
|
table: {
|
|
32
32
|
type: {
|
|
33
|
-
summary: 'Function'
|
|
34
|
-
}
|
|
33
|
+
summary: 'Function',
|
|
34
|
+
},
|
|
35
35
|
},
|
|
36
|
-
control: null
|
|
36
|
+
control: null,
|
|
37
37
|
},
|
|
38
38
|
onFocus: {
|
|
39
39
|
type: {
|
|
40
|
-
name: 'function'
|
|
40
|
+
name: 'function',
|
|
41
41
|
},
|
|
42
42
|
description: `On focus callback function`,
|
|
43
43
|
table: {
|
|
44
44
|
type: {
|
|
45
|
-
summary: 'Function'
|
|
46
|
-
}
|
|
45
|
+
summary: 'Function',
|
|
46
|
+
},
|
|
47
47
|
},
|
|
48
|
-
control: null
|
|
48
|
+
control: null,
|
|
49
49
|
},
|
|
50
50
|
openOnFocus: {
|
|
51
51
|
description: 'Open results on focus',
|
|
52
52
|
table: {
|
|
53
53
|
type: {
|
|
54
|
-
summary: 'boolean'
|
|
55
|
-
}
|
|
54
|
+
summary: 'boolean',
|
|
55
|
+
},
|
|
56
56
|
},
|
|
57
57
|
control: {
|
|
58
|
-
type: 'boolean'
|
|
59
|
-
}
|
|
60
|
-
}
|
|
58
|
+
type: 'boolean',
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
61
|
};
|
|
62
62
|
//# sourceMappingURL=argTypes.js.map
|
package/lib/mjs/utils.js
CHANGED
package/lib/types/constants.d.ts
CHANGED
|
@@ -20,4 +20,4 @@ export declare const onSubmitDescription = "Pass an `onSubmit` callback function
|
|
|
20
20
|
export declare const zeroStateSectionsDescription = "Use `zeroStateSections` to show suggestions after a user applies focus to the search input field and before they start typing a query";
|
|
21
21
|
export declare const 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";
|
|
22
22
|
export declare const multipleSectionsDescription = "Use as many different `recommendations` and `custom` sections as you'd like and in whatever order you would like!";
|
|
23
|
-
export declare const customStylesDescription = "\
|
|
23
|
+
export declare const customStylesDescription = "\nBy default, importing react components or hooks from this library does not pull any css into your project.\n\nIf you wish to use some starter styles from this library, add an import statement similar to the example import statement below:\n\n`\nimport 'node_modules/@constructor-io/constructorio-ui-autocomplete/lib/mjs/components/Autocomplete/Autocomplete.css';\n`\n\n<i></i>\n\n- To opt out of all default styling, do not import the `Autocomplete.css` stylesheet.\n- The path and syntax in the example above may change depending on your module bundling strategy\n- These starter styles can be used as a foundation to build on top of, or just as a reference for you to replace completely.\n- All starter styles in this library are scoped within the `.cio-autocomplete` css selector.\n- These starter styles are intended to be extended by layering in your own css rules\n- If you like, you can override the container's className like so:\n`autocompleteClassName='custom-autocomplete-container'`\n- If you like, you can pass additional className(s) of your choosing like so:\n`autocompleteClassName='cio-autocomplete custom-autocomplete-container'`\n\n\n```css\n/* Custom Style Sheet */\n.cio-autocomplete.custom-autocomplete-styles form {\n height: 44px;\n width: 600px;\n border-radius: 8px;\n background-color: rgb(247, 247, 247);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-input {\n font-weight: bold;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-form button {\n width: 44px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-clear-btn {\n right: 24px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-sectionName {\n margin: 5px 3px;\n}\n\n.cio-autocomplete.custom-autocomplete-styles .cio-results {\n width: 620px;\n max-height: 334px;\n overflow: hidden;\n border-radius: 0px 0px 8px 8px;\n color: rgb(51, 51, 51);\n}\n\n.cio-autocomplete.custom-autocomplete-styles .Products p {\n padding: 5px 5px 0;\n}\n```\n";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@constructor-io/constructorio-ui-autocomplete",
|
|
3
|
-
"version": "1.1.
|
|
3
|
+
"version": "1.1.9",
|
|
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
|