@constructor-io/constructorio-ui-autocomplete 1.1.9 → 1.2.0

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.
@@ -1,6 +1,6 @@
1
1
  "use strict";
2
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;
3
+ exports.customStylesDescription = exports.multipleSectionsDescription = exports.openOnFocusDescription = exports.zeroStateSectionsDescription = exports.onSubmitDefault = 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
4
  // Autocomplete key index
5
5
  exports.apiKey = 'key_Gep3oQOu5IMcNh9A';
6
6
  /// //////////////////////////////
@@ -8,7 +8,7 @@ exports.apiKey = 'key_Gep3oQOu5IMcNh9A';
8
8
  /// //////////////////////////////
9
9
  exports.componentDescription = `- import \`CioAutocomplete\` to render in your JSX.
10
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.
11
+ - To use this component, an \`apiKey\` or \`cioJsClient\` are required, and an \`onSubmit\` callback must be passed. All other values are optional.
12
12
  - Use different props to configure the behavior of this component.
13
13
  - The following stories shows how different props affect the component's behavior
14
14
 
@@ -16,7 +16,7 @@ exports.componentDescription = `- import \`CioAutocomplete\` to render in your J
16
16
  `;
17
17
  exports.hookDescription = `- import \`useCioAutocomplete\` and call this custom hook in a functional component.
18
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.
19
+ - To use this hook, an \`apiKey\` or \`cioJsClient\` are required, and an \`onSubmit\` callback must be passed. All other values are optional.
20
20
  - Pass different options to the \`useCioAutocomplete\` hook to configure behavior.
21
21
  - The following stories shows how different options affect the hook's behavior
22
22
 
@@ -48,7 +48,7 @@ const {
48
48
  // Storybook Pages
49
49
  /// //////////////////////////////
50
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
51
+ - to override this, pass an array of sections objects
52
52
  - the order of the objects in the \`sections\` array determines the order of the results
53
53
  - each section object must have an \`identifier\`
54
54
  - each section object can specify a \`type\`
@@ -74,7 +74,7 @@ When no values are passed for the \`sections\` argument, the following defaults
74
74
  exports.userEventsDescription = `- pass callback functions to respond to user events
75
75
  - if provided, the onFocus callback function will be called each time the user focuses on the text input field
76
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
77
+ - the onSubmit callback function will be called each time the user submits the form
78
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
79
 
80
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.`;
@@ -112,6 +112,9 @@ exports.onSubmitDescription = `Pass an \`onSubmit\` callback function to execute
112
112
  - if the user selects a suggested item from the dropdown list:
113
113
  - the \`originalQuery\` field will provide the value of the input field that generated the selected item
114
114
  - an \`item\` object with information about the suggestion that the user selected`;
115
+ // eslint-disable-next-line no-console
116
+ const onSubmitDefault = (submitEvent) => console.dir(submitEvent);
117
+ exports.onSubmitDefault = onSubmitDefault;
115
118
  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
119
  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
120
  exports.multipleSectionsDescription = `Use as many different \`recommendations\` and \`custom\` sections as you'd like and in whatever order you would like!`;
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DtC,CAAC"}
1
+ {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":";;;AAEA,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;AACvF,sCAAsC;AAC/B,MAAM,eAAe,GAAG,CAAC,WAAoC,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;AAArF,QAAA,eAAe,mBAAsE;AACrF,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"}
package/lib/cjs/utils.js CHANGED
@@ -1,6 +1,7 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
- exports.disableStoryActions = exports.stringify = exports.getStoryParams = exports.sleep = exports.clearConstructorRequests = exports.isTrackingRequestSent = exports.camelToStartCase = exports.getIndexOffset = void 0;
3
+ exports.disableStoryActions = exports.stringifyWithDefaults = exports.defaultArgumentsCode = exports.defaultOnSubmitCode = exports.getStoryParams = exports.sleep = exports.clearConstructorRequests = exports.isTrackingRequestSent = exports.camelToStartCase = exports.getIndexOffset = void 0;
4
+ const tslib_1 = require("tslib");
4
5
  const getIndexOffset = ({ activeSections, sectionIdentifier }) => {
5
6
  let indexOffset = 0;
6
7
  if (sectionIdentifier) {
@@ -62,8 +63,26 @@ ${templateCode}
62
63
  };
63
64
  };
64
65
  exports.getStoryParams = getStoryParams;
65
- const stringify = (obj) => JSON.stringify(obj, null, ' ');
66
- exports.stringify = stringify;
66
+ exports.defaultOnSubmitCode = `"onSubmit": (submitEvent) => console.dir(submitEvent)`;
67
+ const defaultArgumentsCode = (apiKey) => `"apiKey": "${apiKey}",
68
+ ${exports.defaultOnSubmitCode}`;
69
+ exports.defaultArgumentsCode = defaultArgumentsCode;
70
+ const stringifyWithDefaults = (obj) => {
71
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
72
+ const { apiKey, onSubmit } = obj, rest = tslib_1.__rest(obj, ["apiKey", "onSubmit"]);
73
+ let res;
74
+ if (Object.keys(rest).length > 0) {
75
+ res = JSON.stringify(rest, null, ' ');
76
+ }
77
+ else {
78
+ res = `{
79
+ }`;
80
+ }
81
+ res = res.replace('{', `{
82
+ ${(0, exports.defaultArgumentsCode)(apiKey)}`);
83
+ return res;
84
+ };
85
+ exports.stringifyWithDefaults = stringifyWithDefaults;
67
86
  const disableStoryActions = (story) => {
68
87
  // eslint-disable-next-line
69
88
  story.parameters.actions = { argTypesRegex: null };
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":";;;AAOO,MAAM,cAAc,GAAmB,CAAC,EAAE,cAAc,EAAE,iBAAiB,EAAE,EAAE,EAAE;IACtF,IAAI,WAAW,GAAG,CAAC,CAAC;IAEpB,IAAI,iBAAiB,EAAE;QACrB,cAAc,CAAC,IAAI,CAAC,CAAC,MAA4B,EAAE,EAAE;;YACnD,IAAI,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,UAAU,MAAK,iBAAiB;gBAAE,OAAO,IAAI,CAAC,CAAC,oBAAoB;YAC/E,WAAW,IAAI,CAAA,MAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,0CAAE,MAAM,KAAI,CAAC,CAAC;YACzC,OAAO,KAAK,CAAC,CAAC,WAAW;QAC3B,CAAC,CAAC,CAAC;KACJ;IAED,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAZW,QAAA,cAAc,kBAYzB;AAIK,MAAM,gBAAgB,GAAqB,CAAC,eAAe,EAAE,EAAE,CACpE,eAAe;IACb,iCAAiC;KAChC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC;IAC3B,gCAAgC;KAC/B,OAAO,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC;AALlC,QAAA,gBAAgB,oBAKkB;AAE/C,SAAgB,qBAAqB,CAAC,kBAAkB;;IACtD,2BAA2B;IAC3B,MAAM,qBAAqB,GAAG,MAAA,MAAM,CAAC,YAAY,0CAAE,uBAAuB,CAAC;IAE3E,OAAO,CACL,qBAAqB;SACrB,MAAA,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,0CAAE,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,WAAC,OAAA,MAAA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,GAAG,0CAAE,QAAQ,CAAC,kBAAkB,CAAC,CAAA,EAAA,CAAC,CAAA,CACjG,CAAC;AACJ,CAAC;AARD,sDAQC;AAED,SAAgB,wBAAwB;;IACtC,2BAA2B;IAC3B,IAAI,MAAA,MAAM,CAAC,YAAY,0CAAE,uBAAuB,EAAE;QAChD,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC;KAC3D;AACH,CAAC;AALD,4DAKC;AAED,mDAAmD;AACnD,SAAgB,KAAK,CAAC,EAAE;IACtB,2BAA2B;IAC3B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC;AAC3D,CAAC;AAHD,sBAGC;AACD,mFAAmF;AAC5E,MAAM,cAAc,GAAG,CAAC,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE;IACpE,MAAM,IAAI,GAAG;EACb,UAAU;EACV,SAAS;EACT,YAAY;CACb,CAAC;IAEA,OAAO;QACL,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI;gBACJ,QAAQ,EAAE,KAAK;gBACf,MAAM,EAAE,IAAI;gBACZ,IAAI,EAAE,MAAM;aACb;SACF;KACF,CAAC;AACJ,CAAC,CAAC;AAjBW,QAAA,cAAc,kBAiBzB;AAEK,MAAM,SAAS,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AAArD,QAAA,SAAS,aAA4C;AAE3D,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,EAAE;IAC3C,2BAA2B;IAC3B,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;AACrD,CAAC,CAAC;AAHW,QAAA,mBAAmB,uBAG9B"}
1
+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"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"}
@@ -5,7 +5,7 @@ export const apiKey = 'key_Gep3oQOu5IMcNh9A';
5
5
  /// //////////////////////////////
6
6
  export const componentDescription = `- import \`CioAutocomplete\` to render in your JSX.
7
7
  - This component handles state management, data fetching, and rendering logic.
8
- - To use this component, an \`apiKey\` or \`cioJsClient\` are required, all other values are optional.
8
+ - To use this component, an \`apiKey\` or \`cioJsClient\` are required, and an \`onSubmit\` callback must be passed. All other values are optional.
9
9
  - Use different props to configure the behavior of this component.
10
10
  - The following stories shows how different props affect the component's behavior
11
11
 
@@ -13,7 +13,7 @@ export const componentDescription = `- import \`CioAutocomplete\` to render in y
13
13
  `;
14
14
  export const hookDescription = `- import \`useCioAutocomplete\` and call this custom hook in a functional component.
15
15
  - This hook handles state management & data fetching, but leaves rendering logic up to you
16
- - To use this hook, an \`apiKey\` or \`cioJsClient\` are required, all other values are optional.
16
+ - To use this hook, an \`apiKey\` or \`cioJsClient\` are required, and an \`onSubmit\` callback must be passed. All other values are optional.
17
17
  - Pass different options to the \`useCioAutocomplete\` hook to configure behavior.
18
18
  - The following stories shows how different options affect the hook's behavior
19
19
 
@@ -45,7 +45,7 @@ const {
45
45
  // Storybook Pages
46
46
  /// //////////////////////////////
47
47
  export const sectionsDescription = `- by default, typing a query will fetch data for search suggestions and Products
48
- - to override this, pass a an array of sections objects
48
+ - to override this, pass an array of sections objects
49
49
  - the order of the objects in the \`sections\` array determines the order of the results
50
50
  - each section object must have an \`identifier\`
51
51
  - each section object can specify a \`type\`
@@ -71,7 +71,7 @@ When no values are passed for the \`sections\` argument, the following defaults
71
71
  export const userEventsDescription = `- pass callback functions to respond to user events
72
72
  - if provided, the onFocus callback function will be called each time the user focuses on the text input field
73
73
  - if provided, the onChange callback function will be called each time the user changes the value in the text input field
74
- - if provided, the onSubmit callback function will be called each time the user submits the form
74
+ - the onSubmit callback function will be called each time the user submits the form
75
75
  - 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
76
76
 
77
77
  > ⚠️ 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.`;
@@ -109,6 +109,8 @@ export const onSubmitDescription = `Pass an \`onSubmit\` callback function to ex
109
109
  - if the user selects a suggested item from the dropdown list:
110
110
  - the \`originalQuery\` field will provide the value of the input field that generated the selected item
111
111
  - an \`item\` object with information about the suggestion that the user selected`;
112
+ // eslint-disable-next-line no-console
113
+ export const onSubmitDefault = (submitEvent) => console.dir(submitEvent);
112
114
  export const zeroStateSectionsDescription = `Use \`zeroStateSections\` to show suggestions after a user applies focus to the search input field and before they start typing a query`;
113
115
  export 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`;
114
116
  export const multipleSectionsDescription = `Use as many different \`recommendations\` and \`custom\` sections as you'd like and in whatever order you would like!`;
@@ -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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2DtC,CAAC"}
1
+ {"version":3,"file":"constants.js","sourceRoot":"","sources":["../../src/constants.ts"],"names":[],"mappings":"AAEA,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,sCAAsC;AACtC,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,WAAoC,EAAE,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,WAAW,CAAC,CAAC;AAClG,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"}
package/lib/mjs/utils.js CHANGED
@@ -50,7 +50,24 @@ ${templateCode}
50
50
  },
51
51
  };
52
52
  };
53
- export const stringify = (obj) => JSON.stringify(obj, null, ' ');
53
+ export const defaultOnSubmitCode = `"onSubmit": (submitEvent) => console.dir(submitEvent)`;
54
+ export const defaultArgumentsCode = (apiKey) => `"apiKey": "${apiKey}",
55
+ ${defaultOnSubmitCode}`;
56
+ export const stringifyWithDefaults = (obj) => {
57
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
58
+ const { apiKey, onSubmit, ...rest } = obj;
59
+ let res;
60
+ if (Object.keys(rest).length > 0) {
61
+ res = JSON.stringify(rest, null, ' ');
62
+ }
63
+ else {
64
+ res = `{
65
+ }`;
66
+ }
67
+ res = res.replace('{', `{
68
+ ${defaultArgumentsCode(apiKey)}`);
69
+ return res;
70
+ };
54
71
  export const disableStoryActions = (story) => {
55
72
  // eslint-disable-next-line
56
73
  story.parameters.actions = { argTypesRegex: null };
@@ -1 +1 @@
1
- {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"AAOA,MAAM,CAAC,MAAM,cAAc,GAAmB,CAAC,EAAE,cAAc,EAAE,iBAAiB,EAAE,EAAE,EAAE;IACtF,IAAI,WAAW,GAAG,CAAC,CAAC;IAEpB,IAAI,iBAAiB,EAAE;QACrB,cAAc,CAAC,IAAI,CAAC,CAAC,MAA4B,EAAE,EAAE;YACnD,IAAI,MAAM,EAAE,UAAU,KAAK,iBAAiB;gBAAE,OAAO,IAAI,CAAC,CAAC,oBAAoB;YAC/E,WAAW,IAAI,MAAM,EAAE,IAAI,EAAE,MAAM,IAAI,CAAC,CAAC;YACzC,OAAO,KAAK,CAAC,CAAC,WAAW;QAC3B,CAAC,CAAC,CAAC;KACJ;IAED,OAAO,WAAW,CAAC;AACrB,CAAC,CAAC;AAIF,MAAM,CAAC,MAAM,gBAAgB,GAAqB,CAAC,eAAe,EAAE,EAAE,CACpE,eAAe;IACb,iCAAiC;KAChC,OAAO,CAAC,UAAU,EAAE,KAAK,CAAC;IAC3B,gCAAgC;KAC/B,OAAO,CAAC,IAAI,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,GAAG,CAAC,WAAW,EAAE,CAAC,CAAC;AAE/C,MAAM,UAAU,qBAAqB,CAAC,kBAAkB;IACtD,2BAA2B;IAC3B,MAAM,qBAAqB,GAAG,MAAM,CAAC,YAAY,EAAE,uBAAuB,CAAC;IAE3E,OAAO,CACL,qBAAqB;QACrB,IAAI,CAAC,KAAK,CAAC,qBAAqB,CAAC,EAAE,IAAI,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,OAAO,EAAE,GAAG,EAAE,QAAQ,CAAC,kBAAkB,CAAC,CAAC,CACjG,CAAC;AACJ,CAAC;AAED,MAAM,UAAU,wBAAwB;IACtC,2BAA2B;IAC3B,IAAI,MAAM,CAAC,YAAY,EAAE,uBAAuB,EAAE;QAChD,MAAM,CAAC,YAAY,CAAC,UAAU,CAAC,yBAAyB,CAAC,CAAC;KAC3D;AACH,CAAC;AAED,mDAAmD;AACnD,MAAM,UAAU,KAAK,CAAC,EAAE;IACtB,2BAA2B;IAC3B,OAAO,IAAI,OAAO,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,UAAU,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,CAAC;AAC3D,CAAC;AACD,mFAAmF;AACnF,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,SAAS,EAAE,YAAY,EAAE,UAAU,EAAE,EAAE;IACpE,MAAM,IAAI,GAAG;EACb,UAAU;EACV,SAAS;EACT,YAAY;CACb,CAAC;IAEA,OAAO;QACL,IAAI,EAAE;YACJ,MAAM,EAAE;gBACN,IAAI;gBACJ,QAAQ,EAAE,KAAK;gBACf,MAAM,EAAE,IAAI;gBACZ,IAAI,EAAE,MAAM;aACb;SACF;KACF,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,GAAG,EAAE,EAAE,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;AAElE,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,KAAK,EAAE,EAAE;IAC3C,2BAA2B;IAC3B,KAAK,CAAC,UAAU,CAAC,OAAO,GAAG,EAAE,aAAa,EAAE,IAAI,EAAE,CAAC;AACrD,CAAC,CAAC"}
1
+ {"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/utils.ts"],"names":[],"mappings":"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"}
@@ -1,8 +1,9 @@
1
+ import { AutocompleteSubmitEvent } from './types';
1
2
  export declare const apiKey = "key_Gep3oQOu5IMcNh9A";
2
- export declare const componentDescription = "- import `CioAutocomplete` to render in your JSX.\n- This component handles state management, data fetching, and rendering logic.\n- To use this component, an `apiKey` or `cioJsClient` are required, all other values are optional.\n- Use different props to configure the behavior of this component.\n- The following stories shows how different props affect the component's behavior\n\n> 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)\n";
3
- export declare const hookDescription = "- import `useCioAutocomplete` and call this custom hook in a functional component.\n- This hook handles state management & data fetching, but leaves rendering logic up to you\n- To use this hook, an `apiKey` or `cioJsClient` are required, all other values are optional.\n- Pass different options to the `useCioAutocomplete` hook to configure behavior.\n- The following stories shows how different options affect the hook's behavior\n\nCalling the `useCioAutocomplete` hook returns an object with the following keys:\n\n```jsx\nconst {\n // must be used for a hooks integrations\n query: string, // current input field value\n sections: [{...}], // array of sections data to render in menu list,\n getFormProps: () => ({...})), // prop getter for jsx form element\n getLabelProps: () => ({...})), // optional: prop getter for jsx label element\n getInputProps: () => ({...})), // prop getter for jsx input element\n getMenuProps: () => ({...})), // prop getter for jsx element serving as menu container\n getItemProps: () => ({...})), // prop getter for jsx element serving as each result\n isOpen: boolean,\n\n // available for advanced hooks integration use cases\n openMenu: () => void, // open menu\n closeMenu: () => void, // close menu\n setQuery: () => void, // update the current input field value\n cioJsClient, // instance of constructorio-client-javascript\n } = useCioAutocomplete(args);\n```\n\n> 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)\n";
4
- export declare const sectionsDescription = "- by default, typing a query will fetch data for search suggestions and Products\n- to override this, pass a an array of sections objects\n- the order of the objects in the `sections` array determines the order of the results\n- each section object must have an `identifier`\n- each section object can specify a `type`\n- each section object can override the default `numResults` of 8\n\nWhen no values are passed for the `sections` argument, the following defaults are used:\n\n```jsx\n[\n {\n identifier: 'Search Suggestions',\n type: 'autocomplete',\n numResults: 8\n },\n {\n identifier: 'Products',\n type: 'autocomplete',\n numResults: 8\n }\n]\n```\n";
5
- export declare const userEventsDescription = "- pass callback functions to respond to user events\n- if provided, the onFocus callback function will be called each time the user focuses on the text input field\n- if provided, the onChange callback function will be called each time the user changes the value in the text input field\n- if provided, the onSubmit callback function will be called each time the user submits the form\n- 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\n\n> \u26A0\uFE0F NOTE \u26A0\uFE0F 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.";
3
+ export declare const componentDescription = "- import `CioAutocomplete` to render in your JSX.\n- This component handles state management, data fetching, and rendering logic.\n- To use this component, an `apiKey` or `cioJsClient` are required, and an `onSubmit` callback must be passed. All other values are optional.\n- Use different props to configure the behavior of this component.\n- The following stories shows how different props affect the component's behavior\n\n> 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)\n";
4
+ export declare const hookDescription = "- import `useCioAutocomplete` and call this custom hook in a functional component.\n- This hook handles state management & data fetching, but leaves rendering logic up to you\n- To use this hook, an `apiKey` or `cioJsClient` are required, and an `onSubmit` callback must be passed. All other values are optional.\n- Pass different options to the `useCioAutocomplete` hook to configure behavior.\n- The following stories shows how different options affect the hook's behavior\n\nCalling the `useCioAutocomplete` hook returns an object with the following keys:\n\n```jsx\nconst {\n // must be used for a hooks integrations\n query: string, // current input field value\n sections: [{...}], // array of sections data to render in menu list,\n getFormProps: () => ({...})), // prop getter for jsx form element\n getLabelProps: () => ({...})), // optional: prop getter for jsx label element\n getInputProps: () => ({...})), // prop getter for jsx input element\n getMenuProps: () => ({...})), // prop getter for jsx element serving as menu container\n getItemProps: () => ({...})), // prop getter for jsx element serving as each result\n isOpen: boolean,\n\n // available for advanced hooks integration use cases\n openMenu: () => void, // open menu\n closeMenu: () => void, // close menu\n setQuery: () => void, // update the current input field value\n cioJsClient, // instance of constructorio-client-javascript\n } = useCioAutocomplete(args);\n```\n\n> 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)\n";
5
+ export declare const sectionsDescription = "- by default, typing a query will fetch data for search suggestions and Products\n- to override this, pass an array of sections objects\n- the order of the objects in the `sections` array determines the order of the results\n- each section object must have an `identifier`\n- each section object can specify a `type`\n- each section object can override the default `numResults` of 8\n\nWhen no values are passed for the `sections` argument, the following defaults are used:\n\n```jsx\n[\n {\n identifier: 'Search Suggestions',\n type: 'autocomplete',\n numResults: 8\n },\n {\n identifier: 'Products',\n type: 'autocomplete',\n numResults: 8\n }\n]\n```\n";
6
+ export declare const userEventsDescription = "- pass callback functions to respond to user events\n- if provided, the onFocus callback function will be called each time the user focuses on the text input field\n- if provided, the onChange callback function will be called each time the user changes the value in the text input field\n- the onSubmit callback function will be called each time the user submits the form\n- 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\n\n> \u26A0\uFE0F NOTE \u26A0\uFE0F 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.";
6
7
  export declare const zeroStateDescription = "- when the text input field has no text, we call this zero state\n- by default, the autocomplete shows nothing in the menu it's for zero state\n- to show zero state results, pass an array of section objects for `zeroStateSections`\n- when `zeroStateSections` has sections, the menu will open on user focus by default\n- 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\n- the order of the objects in the `zeroStateSections` array determines the order of the results\n- each section object must have an `identifier`\n- each section object can specify a `type`\n- each section object can override the default `numResults` of 8";
7
8
  export declare const apiKeyDescription = "Pass an `apiKey` to request results from constructor's servers";
8
9
  export declare const 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\n\n> 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)";
@@ -17,6 +18,7 @@ export declare const customSectionDescription = "Use a custom section, by managi
17
18
  export declare const onFocusDescription = "Pass an `onFocus` callback function to execute some code each time the user applies focus to the text input field";
18
19
  export declare const onChangeDescription = "Pass an `onChange` callback function to execute some code each time the user changes the value of the text input field";
19
20
  export declare const onSubmitDescription = "Pass an `onSubmit` callback function to execute some code after a user submits the search form.\n\n Your callback function will be invoked with a submit event containing useful metadata about the submit event:\n - if the user submits the text input:\n - the `query` field will provide the value of that input field\n - if the user selects a suggested item from the dropdown list:\n - the `originalQuery` field will provide the value of the input field that generated the selected item\n - an `item` object with information about the suggestion that the user selected";
21
+ export declare const onSubmitDefault: (submitEvent: AutocompleteSubmitEvent) => void;
20
22
  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
23
  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
24
  export declare const multipleSectionsDescription = "Use as many different `recommendations` and `custom` sections as you'd like and in whatever order you would like!";
@@ -5,7 +5,7 @@ import { Item, OnSubmit } from '../types';
5
5
  type UseDownShiftOptions = {
6
6
  setQuery: React.Dispatch<React.SetStateAction<string>>;
7
7
  items: Item[];
8
- onSubmit?: OnSubmit;
8
+ onSubmit: OnSubmit;
9
9
  previousQuery?: string;
10
10
  cioClient?: ConstructorIOClient;
11
11
  onChange?: (string: any) => void;
@@ -3,7 +3,7 @@ import { FormEvent, ReactNode } from 'react';
3
3
  import { CioClientConfig } from './hooks/useCioClient';
4
4
  export type CioAutocompleteProps = CioClientConfig & {
5
5
  openOnFocus?: boolean;
6
- onSubmit?: OnSubmit;
6
+ onSubmit: OnSubmit;
7
7
  onFocus?: () => void;
8
8
  onChange?: () => void;
9
9
  placeholder?: string;
@@ -13,7 +13,7 @@ export type CioAutocompleteProps = CioClientConfig & {
13
13
  autocompleteClassName?: string;
14
14
  };
15
15
  export type FormSubmitEvent = FormEvent<HTMLFormElement>;
16
- type AutocompleteSubmitEvent = {
16
+ export type AutocompleteSubmitEvent = {
17
17
  item: Item;
18
18
  originalQuery: string;
19
19
  } | {
@@ -1,4 +1,4 @@
1
- import { SectionConfiguration } from './types';
1
+ import { OnSubmit, SectionConfiguration } from './types';
2
2
  export type GetIndexOffset = (args: {
3
3
  activeSections: SectionConfiguration[];
4
4
  sectionIdentifier: string;
@@ -19,6 +19,11 @@ export declare const getStoryParams: (storyCode: any, templateCode: any, importC
19
19
  };
20
20
  };
21
21
  };
22
- export declare const stringify: (obj: any) => string;
22
+ export declare const defaultOnSubmitCode = "\"onSubmit\": (submitEvent) => console.dir(submitEvent)";
23
+ export declare const defaultArgumentsCode: (apiKey: string) => string;
24
+ export declare const stringifyWithDefaults: (obj: {
25
+ apiKey: string;
26
+ onSubmit: OnSubmit;
27
+ }) => any;
23
28
  export declare const disableStoryActions: (story: any) => void;
24
29
  export {};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@constructor-io/constructorio-ui-autocomplete",
3
- "version": "1.1.9",
3
+ "version": "1.2.0",
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",
@@ -45,17 +45,15 @@
45
45
  "devDependencies": {
46
46
  "@constructor-io/constructorio-client-javascript": "^2.34.1",
47
47
  "@cspell/eslint-plugin": "^6.18.1",
48
- "@storybook/addon-a11y": "^7.0.0-beta.15",
49
- "@storybook/addon-actions": "^7.0.0-beta.15",
50
- "@storybook/addon-essentials": "^7.0.0-beta.15",
51
- "@storybook/addon-interactions": "^7.0.0-beta.15",
52
- "@storybook/addon-links": "^7.0.0-beta.15",
53
- "@storybook/addons": "^7.0.0-beta.15",
48
+ "@storybook/addon-a11y": "^7.0.0-beta.40",
49
+ "@storybook/addon-actions": "^7.0.0-beta.40",
50
+ "@storybook/addon-essentials": "^7.0.0-beta.40",
51
+ "@storybook/addon-interactions": "^7.0.0-beta.40",
52
+ "@storybook/addon-links": "^7.0.0-beta.40",
54
53
  "@storybook/jest": "^0.0.11-next.0",
55
- "@storybook/react-webpack5": "7.0.0-beta.15",
56
- "@storybook/test-runner": "^0.10.0-next.4",
54
+ "@storybook/react-webpack5": "7.0.0-beta.40",
55
+ "@storybook/test-runner": "^0.10.0-next.8",
57
56
  "@storybook/testing-library": "^0.0.14-next.1",
58
- "@storybook/theming": "^7.0.0-beta.15",
59
57
  "@types/react": "^18.0.20",
60
58
  "@types/react-dom": "^18.0.6",
61
59
  "@typescript-eslint/eslint-plugin": "^5.38.0",
@@ -76,7 +74,7 @@
76
74
  "react": "^18.2.0",
77
75
  "react-dom": "^18.2.0",
78
76
  "start-server-and-test": "^1.15.2",
79
- "storybook": "^7.0.0-beta.15",
77
+ "storybook": "^7.0.0-beta.40",
80
78
  "typescript": "^4.8.3",
81
79
  "webpack": "^5.75.0"
82
80
  },