@commercetools-frontend/experimental-components 3.1.0 → 3.1.1

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 (5) hide show
  1. package/dist/commercetools-frontend-experimental-components.cjs.dev.js +74 -41
  2. package/dist/commercetools-frontend-experimental-components.cjs.prod.js +74 -41
  3. package/dist/commercetools-frontend-experimental-components.esm.js +75 -42
  4. package/dist/styles.css +11 -3
  5. package/package.json +17 -17
package/dist/commercetools-frontend-experimental-components.cjs.dev.js CHANGED
@@ -68,6 +68,7 @@ var moment$1 = require('moment');
68
68
  var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
69
69
  var classnames = require('classnames');
70
70
  require('react-required-if');
71
+ var designSystem = require('@commercetools-uikit/design-system');
71
72
  var _assertThisInitialized = require('@babel/runtime-corejs3/helpers/assertThisInitialized');
72
73
  var Textarea = require('react-textarea-autosize');
73
74
  var has = require('lodash.has');
@@ -91,7 +92,6 @@ var omitBy = require('lodash.omitby');
91
92
  var _everyInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/every');
92
93
  var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
93
94
  var react$1 = require('@emotion/react');
94
- var designSystem = require('@commercetools-uikit/design-system');
95
95
  var _endsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/ends-with');
96
96
  var reselect = require('reselect');
97
97
  var _Map = require('@babel/runtime-corejs3/core-js-stable/map');
@@ -3193,8 +3193,9 @@ var trackingEvents$4 = {
3193
3193
 
3194
3194
  function ownKeys$1b(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
3195
3195
  function _objectSpread$1b(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$1b(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$1b(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
3196
- var GetChannelsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetChannelsQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "channels" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }, { kind: "Argument", name: { kind: "Name", value: "sort" }, value: { kind: "ListValue", values: [{ kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, { kind: "StringValue", value: "key", block: false }] } }, { kind: "Argument", name: { kind: "Name", value: "limit" }, value: { kind: "IntValue", value: "60" } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }] } }] } }], loc: { start: 0, end: 385, source: { body: "query GetChannelsQuery($where: String, $sortByNamePath: String!) {\n channels(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n id\n key\n nameAllLocales {\n locale\n value\n }\n }\n }\n}\n\nquery GetChannelQuery($id: String) {\n channel(id: $id) {\n id\n key\n nameAllLocales {\n locale\n value\n }\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
3197
- var GetChannelQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetChannelQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "channel" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "id" }, value: { kind: "Variable", name: { kind: "Name", value: "id" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 385, source: { body: "query GetChannelsQuery($where: String, $sortByNamePath: String!) {\n channels(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n id\n key\n nameAllLocales {\n locale\n value\n }\n }\n }\n}\n\nquery GetChannelQuery($id: String) {\n channel(id: $id) {\n id\n key\n nameAllLocales {\n locale\n value\n }\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
3196
+ var GetChannelsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetChannelsQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "channels" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }, { kind: "Argument", name: { kind: "Name", value: "sort" }, value: { kind: "ListValue", values: [{ kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, { kind: "StringValue", value: "key", block: false }] } }, { kind: "Argument", name: { kind: "Name", value: "limit" }, value: { kind: "IntValue", value: "60" } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "PickerInputChannel" }, directives: [] }] } }] } }] } }, { kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputChannel" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "Channel" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }], loc: { start: 0, end: 392, source: { body: "fragment PickerInputChannel on Channel {\n id\n key\n nameAllLocales {\n locale\n value\n }\n}\n\nquery GetChannelsQuery($where: String, $sortByNamePath: String!) {\n channels(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n ...PickerInputChannel\n }\n }\n}\n\nquery GetChannelQuery($id: String) {\n channel(id: $id) {\n ...PickerInputChannel\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
3197
+ var GetChannelQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetChannelQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "channel" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "id" }, value: { kind: "Variable", name: { kind: "Name", value: "id" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "PickerInputChannel" }, directives: [] }] } }] } }, { kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputChannel" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "Channel" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }], loc: { start: 0, end: 392, source: { body: "fragment PickerInputChannel on Channel {\n id\n key\n nameAllLocales {\n locale\n value\n }\n}\n\nquery GetChannelsQuery($where: String, $sortByNamePath: String!) {\n channels(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n ...PickerInputChannel\n }\n }\n}\n\nquery GetChannelQuery($id: String) {\n channel(id: $id) {\n ...PickerInputChannel\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
3198
+ var PickerInputChannel = { kind: "Document", definitions: [{ kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputChannel" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "Channel" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }], loc: { start: 0, end: 392, source: { body: "fragment PickerInputChannel on Channel {\n id\n key\n nameAllLocales {\n locale\n value\n }\n}\n\nquery GetChannelsQuery($where: String, $sortByNamePath: String!) {\n channels(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n ...PickerInputChannel\n }\n }\n}\n\nquery GetChannelQuery($id: String) {\n channel(id: $id) {\n ...PickerInputChannel\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
3198
3199
  var getTrackingEvent$4 = function getTrackingEvent(inputValue, selectedValue) {
3199
3200
  var id = selectedValue.value,
3200
3201
  key = selectedValue.key,
@@ -3255,10 +3256,13 @@ var ChannelPickerInput = function ChannelPickerInput(_ref) {
3255
3256
  var currentOption = useCurrentOption({
3256
3257
  query: GetChannelQuery,
3257
3258
  id: value,
3258
- convertQueryResultToOption: function convertQueryResultToOption(_ref2) {
3259
+ queryDataToItem: function queryDataToItem(_ref2) {
3259
3260
  var channel = _ref2.channel;
3260
- return convertChannelToOption(channel);
3261
- }
3261
+ return channel;
3262
+ },
3263
+ itemToOption: convertChannelToOption,
3264
+ typename: 'Channel',
3265
+ fragment: PickerInputChannel
3262
3266
  });
3263
3267
  var handleLoadOptions = React.useCallback(function (inputValue) {
3264
3268
  return loadOptions(inputValue).then(function (_ref3) {
@@ -3291,7 +3295,7 @@ var ChannelPickerInput = function ChannelPickerInput(_ref) {
3291
3295
  var tooltipTitle = (_currentOption$data$l = currentOption === null || currentOption === void 0 ? void 0 : (_currentOption$data = currentOption.data) === null || _currentOption$data === void 0 ? void 0 : _currentOption$data.label) !== null && _currentOption$data$l !== void 0 ? _currentOption$data$l : '';
3292
3296
  return jsxRuntime.jsx(uiKit.Constraints.Horizontal, {
3293
3297
  max: "scale",
3294
- children: currentOption.loading ? jsxRuntime.jsx(CenteredLoadingSpinner, {}) : jsxRuntime.jsxs(uiKit.Spacings.Stack, {
3298
+ children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
3295
3299
  scale: "xs",
3296
3300
  children: [jsxRuntime.jsx(CustomFieldTooltip, {
3297
3301
  title: tooltipTitle,
@@ -3303,7 +3307,7 @@ var ChannelPickerInput = function ChannelPickerInput(_ref) {
3303
3307
  defaultOptions: true,
3304
3308
  showOptionGroupDivider: true,
3305
3309
  isClearable: isClearable,
3306
- isReadOnly: isReadOnly,
3310
+ isReadOnly: isReadOnly || currentOption.loading,
3307
3311
  isDisabled: isDisabled,
3308
3312
  components: {
3309
3313
  Option: Option$2
@@ -3705,7 +3709,7 @@ var SearchInput = /*#__PURE__*/function (_Component) {
3705
3709
  onMouseOver: this.props.handleMouseOver,
3706
3710
  onMouseOut: this.props.handleMouseOut,
3707
3711
  children: jsxRuntime.jsx(uiKit.SearchIcon, {
3708
- color: this.props.iconColor || this.props.isMouseOver && !this.props.disabled ? 'primary' : this.props.enableDisabledStyle ? 'neutral60' : 'solid',
3712
+ color: this.props.iconColor || this.props.isMouseOver && !this.props.disabled ? 'primary' : this.props.themedValue(this.props.enableDisabledStyle ? 'neutral60' : 'solid', 'neutral60'),
3709
3713
  size: "big"
3710
3714
  })
3711
3715
  })]
@@ -3737,7 +3741,7 @@ SearchInput.defaultProps = {
3737
3741
  return null;
3738
3742
  }
3739
3743
  };
3740
- var SearchInput$1 = flowRight__default["default"](keepDisplayName(SearchInput), withMouseOverState, reactIntl.injectIntl)(SearchInput);
3744
+ var SearchInput$1 = flowRight__default["default"](keepDisplayName(SearchInput), withMouseOverState, reactIntl.injectIntl, designSystem.withThemeContext)(SearchInput);
3741
3745
 
3742
3746
  var FetchIndicesExist$1 = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchIndicesExist" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "indicesExist" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "products" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "searchableIndexExists" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "newInProgress" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "productTypes" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "searchableIndexExists" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "newInProgress" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 191, source: { body: "query FetchIndicesExist {\n indicesExist {\n products {\n searchableIndexExists\n newInProgress\n }\n productTypes {\n searchableIndexExists\n newInProgress\n }\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
3743
3747
  var useExecuteGraphQLRequest = function useExecuteGraphQLRequest() {
@@ -4033,22 +4037,44 @@ var useLoadOptions = function useLoadOptions(_ref) {
4033
4037
  };
4034
4038
 
4035
4039
  function useCurrentOption(_ref) {
4040
+ var _context;
4036
4041
  var id = _ref.id,
4042
+ typename = _ref.typename,
4037
4043
  query = _ref.query,
4038
- convertQueryResultToOption = _ref.convertQueryResultToOption;
4039
- var item = hooks.useQuery(query, {
4040
- context: {
4041
- target: constants.GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM
4042
- },
4043
- variables: {
4044
- id: id
4045
- },
4046
- skip: !id
4047
- });
4044
+ fragment = _ref.fragment,
4045
+ queryDataToItem = _ref.queryDataToItem,
4046
+ itemToOption = _ref.itemToOption;
4047
+ var apolloClient = client.useApolloClient();
4048
+
4049
+ // load from cache when possible to speed up initial render
4050
+ var canReadFromCache = id && typename && fragment;
4051
+ var cacheItem = canReadFromCache ? apolloClient.readFragment({
4052
+ id: _concatInstanceProperty__default["default"](_context = "".concat(typename, ":")).call(_context, id),
4053
+ fragment: fragment
4054
+ }) : undefined;
4055
+
4056
+ // load with the query as a fallback
4057
+ var _useQuery = client.useQuery(query, {
4058
+ context: {
4059
+ target: constants.GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM
4060
+ },
4061
+ variables: {
4062
+ id: id
4063
+ },
4064
+ skip: !id || cacheItem
4065
+ }),
4066
+ queryLoading = _useQuery.loading,
4067
+ queryData = _useQuery.data,
4068
+ queryError = _useQuery.error;
4069
+ var queryItem = queryData && queryDataToItem(queryData);
4070
+ var item = queryItem !== null && queryItem !== void 0 ? queryItem : cacheItem;
4071
+ var loading = item ? false : queryLoading;
4072
+ var error = item ? undefined : queryError;
4073
+ var data = item && itemToOption(item);
4048
4074
  return {
4049
- loading: item.loading,
4050
- data: item.data && convertQueryResultToOption(item.data),
4051
- error: item.error
4075
+ loading: loading,
4076
+ data: data,
4077
+ error: error
4052
4078
  };
4053
4079
  }
4054
4080
 
@@ -4127,10 +4153,11 @@ var ProductTypePickerInput = function ProductTypePickerInput(_ref) {
4127
4153
  var currentOption = useCurrentOption({
4128
4154
  query: GetProductTypeQuery,
4129
4155
  id: value,
4130
- convertQueryResultToOption: function convertQueryResultToOption(_ref2) {
4156
+ queryDataToItem: function queryDataToItem(_ref2) {
4131
4157
  var productType = _ref2.productType;
4132
- return convertProductTypeToOption(productType);
4133
- }
4158
+ return productType;
4159
+ },
4160
+ itemToOption: convertProductTypeToOption
4134
4161
  });
4135
4162
  var handleLoadOptions = React.useCallback(function (inputValue) {
4136
4163
  return loadProductTypes(inputValue).then(function (_ref3) {
@@ -4286,10 +4313,11 @@ var StatePickerInput = function StatePickerInput(_ref) {
4286
4313
  var currentOption = useCurrentOption({
4287
4314
  query: GetStateQuery,
4288
4315
  id: value,
4289
- convertQueryResultToOption: function convertQueryResultToOption(_ref2) {
4316
+ queryDataToItem: function queryDataToItem(_ref2) {
4290
4317
  var state = _ref2.state;
4291
- return convertStateToOption(state);
4292
- }
4318
+ return state;
4319
+ },
4320
+ itemToOption: convertStateToOption
4293
4321
  });
4294
4322
  var handleLoadOptions = React.useCallback(function (inputValue) {
4295
4323
  return loadOptions(inputValue).then(function (_ref3) {
@@ -6652,10 +6680,11 @@ var ProductPickerInput = function ProductPickerInput(_ref) {
6652
6680
  var currentOption = useCurrentOption({
6653
6681
  query: GetProductQuery,
6654
6682
  id: value,
6655
- convertQueryResultToOption: function convertQueryResultToOption(_ref2) {
6683
+ queryDataToItem: function queryDataToItem(_ref2) {
6656
6684
  var product = _ref2.product;
6657
- return convertProductToOption(product);
6658
- }
6685
+ return product;
6686
+ },
6687
+ itemToOption: convertProductToOption
6659
6688
  });
6660
6689
  var handleLoadOptions = React.useCallback(function (inputValue) {
6661
6690
  return loadOptions(inputValue).then(function (_ref3) {
@@ -7190,7 +7219,7 @@ function CustomInputSet(props) {
7190
7219
  // type is selected.
7191
7220
  var type = getType(props.fieldDefinition);
7192
7221
  var typeName = type.name.toLowerCase();
7193
- var areButtonsTopAligned = _includesInstanceProperty__default["default"](_context5 = [CUSTOM_FIELD_TYPES.lenum, CUSTOM_FIELD_TYPES.localizedenum, CUSTOM_FIELD_TYPES.localizedstring, CUSTOM_FIELD_TYPES.string, CUSTOM_FIELD_TYPES.ltext, CUSTOM_FIELD_TYPES.reference]).call(_context5, typeName);
7222
+ var areButtonsTopAligned = _includesInstanceProperty__default["default"](_context5 = [CUSTOM_FIELD_TYPES.lenum, CUSTOM_FIELD_TYPES.localizedenum, CUSTOM_FIELD_TYPES.localizedstring, CUSTOM_FIELD_TYPES.string, CUSTOM_FIELD_TYPES.text, CUSTOM_FIELD_TYPES.ltext, CUSTOM_FIELD_TYPES.reference]).call(_context5, typeName);
7194
7223
  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
7195
7224
  children: [jsxRuntime.jsx(uiKit.AccessibleHidden, {
7196
7225
  children: jsxRuntime.jsx("label", {
@@ -8718,8 +8747,9 @@ var trackingEvents = {
8718
8747
  }
8719
8748
  };
8720
8749
 
8721
- var GetCustomerGroupsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetCustomerGroupsQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "customerGroups" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }, { kind: "Argument", name: { kind: "Name", value: "sort" }, value: { kind: "ListValue", values: [{ kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, { kind: "StringValue", value: "key", block: false }] } }, { kind: "Argument", name: { kind: "Name", value: "limit" }, value: { kind: "IntValue", value: "60" } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 317, source: { body: "query GetCustomerGroupsQuery($where: String, $sortByNamePath: String!) {\n customerGroups(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n id\n key\n name\n }\n }\n}\n\nquery GetCustomerGroupQuery($id: String) {\n customerGroup(id: $id) {\n id\n key\n name\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
8722
- var GetCustomerGroupQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetCustomerGroupQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "customerGroup" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "id" }, value: { kind: "Variable", name: { kind: "Name", value: "id" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }] } }], loc: { start: 0, end: 317, source: { body: "query GetCustomerGroupsQuery($where: String, $sortByNamePath: String!) {\n customerGroups(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n id\n key\n name\n }\n }\n}\n\nquery GetCustomerGroupQuery($id: String) {\n customerGroup(id: $id) {\n id\n key\n name\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
8750
+ var GetCustomerGroupsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetCustomerGroupsQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "customerGroups" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }, { kind: "Argument", name: { kind: "Name", value: "sort" }, value: { kind: "ListValue", values: [{ kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, { kind: "StringValue", value: "key", block: false }] } }, { kind: "Argument", name: { kind: "Name", value: "limit" }, value: { kind: "IntValue", value: "60" } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "PickerInputCustomerGroups" }, directives: [] }] } }] } }] } }, { kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputCustomerGroups" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "CustomerGroup" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }], loc: { start: 0, end: 406, source: { body: "fragment PickerInputCustomerGroups on CustomerGroup {\n id\n key\n name\n}\n\nquery GetCustomerGroupsQuery($where: String, $sortByNamePath: String!) {\n customerGroups(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n ...PickerInputCustomerGroups\n }\n }\n}\n\nquery GetCustomerGroupQuery($id: String) {\n customerGroup(id: $id) {\n ...PickerInputCustomerGroups\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
8751
+ var GetCustomerGroupQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetCustomerGroupQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "customerGroup" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "id" }, value: { kind: "Variable", name: { kind: "Name", value: "id" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "PickerInputCustomerGroups" }, directives: [] }] } }] } }, { kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputCustomerGroups" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "CustomerGroup" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }], loc: { start: 0, end: 406, source: { body: "fragment PickerInputCustomerGroups on CustomerGroup {\n id\n key\n name\n}\n\nquery GetCustomerGroupsQuery($where: String, $sortByNamePath: String!) {\n customerGroups(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n ...PickerInputCustomerGroups\n }\n }\n}\n\nquery GetCustomerGroupQuery($id: String) {\n customerGroup(id: $id) {\n ...PickerInputCustomerGroups\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
8752
+ var PickerInputCustomerGroups = { kind: "Document", definitions: [{ kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputCustomerGroups" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "CustomerGroup" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }], loc: { start: 0, end: 406, source: { body: "fragment PickerInputCustomerGroups on CustomerGroup {\n id\n key\n name\n}\n\nquery GetCustomerGroupsQuery($where: String, $sortByNamePath: String!) {\n customerGroups(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n ...PickerInputCustomerGroups\n }\n }\n}\n\nquery GetCustomerGroupQuery($id: String) {\n customerGroup(id: $id) {\n ...PickerInputCustomerGroups\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
8723
8753
  var getTrackingEvent = function getTrackingEvent(inputValue, selectedValue) {
8724
8754
  var id = selectedValue.value,
8725
8755
  key = selectedValue.key,
@@ -8779,10 +8809,13 @@ var CustomerGroupPickerInput = function CustomerGroupPickerInput(_ref) {
8779
8809
  var currentOption = useCurrentOption({
8780
8810
  query: GetCustomerGroupQuery,
8781
8811
  id: value,
8782
- convertQueryResultToOption: function convertQueryResultToOption(_ref2) {
8812
+ queryDataToItem: function queryDataToItem(_ref2) {
8783
8813
  var customerGroup = _ref2.customerGroup;
8784
- return convertCustomerGroupToOption(customerGroup);
8785
- }
8814
+ return customerGroup;
8815
+ },
8816
+ itemToOption: convertCustomerGroupToOption,
8817
+ typename: 'CustomerGroup',
8818
+ fragment: PickerInputCustomerGroups
8786
8819
  });
8787
8820
  var handleLoadOptions = React.useCallback(function (inputValue) {
8788
8821
  return loadOptions(inputValue).then(function (_ref3) {
@@ -8815,7 +8848,7 @@ var CustomerGroupPickerInput = function CustomerGroupPickerInput(_ref) {
8815
8848
  var tooltipTitle = (_currentOption$data$l = currentOption === null || currentOption === void 0 ? void 0 : (_currentOption$data = currentOption.data) === null || _currentOption$data === void 0 ? void 0 : _currentOption$data.label) !== null && _currentOption$data$l !== void 0 ? _currentOption$data$l : '';
8816
8849
  return jsxRuntime.jsx(uiKit.Constraints.Horizontal, {
8817
8850
  max: "scale",
8818
- children: currentOption.loading ? jsxRuntime.jsx(CenteredLoadingSpinner, {}) : jsxRuntime.jsxs(uiKit.Spacings.Stack, {
8851
+ children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
8819
8852
  scale: "xs",
8820
8853
  children: [jsxRuntime.jsx(CustomFieldTooltip, {
8821
8854
  title: tooltipTitle,
@@ -8827,7 +8860,7 @@ var CustomerGroupPickerInput = function CustomerGroupPickerInput(_ref) {
8827
8860
  defaultOptions: true,
8828
8861
  showOptionGroupDivider: true,
8829
8862
  isClearable: isClearable,
8830
- isReadOnly: isReadOnly,
8863
+ isReadOnly: isReadOnly || currentOption.loading,
8831
8864
  isDisabled: isDisabled,
8832
8865
  components: {
8833
8866
  Option: Option$2
@@ -12798,7 +12831,7 @@ var StoreSelectField = function StoreSelectField(props) {
12798
12831
  hintIcon: props.hintIcon,
12799
12832
  htmlFor: props.id,
12800
12833
  hasRequiredIndicator: props.isRequired,
12801
- isBold: props.isBold
12834
+ isBold: true
12802
12835
  }), jsxRuntime.jsx(StoreSelectInput, _objectSpread$a(_objectSpread$a({
12803
12836
  projectKey: props.projectKey,
12804
12837
  id: props.id,
package/dist/commercetools-frontend-experimental-components.cjs.prod.js CHANGED
@@ -68,6 +68,7 @@ var moment$1 = require('moment');
68
68
  var _startsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/starts-with');
69
69
  var classnames = require('classnames');
70
70
  require('react-required-if');
71
+ var designSystem = require('@commercetools-uikit/design-system');
71
72
  var _assertThisInitialized = require('@babel/runtime-corejs3/helpers/assertThisInitialized');
72
73
  var Textarea = require('react-textarea-autosize');
73
74
  var has = require('lodash.has');
@@ -91,7 +92,6 @@ var omitBy = require('lodash.omitby');
91
92
  var _everyInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/every');
92
93
  var _trimInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/trim');
93
94
  var react$1 = require('@emotion/react');
94
- var designSystem = require('@commercetools-uikit/design-system');
95
95
  var _endsWithInstanceProperty = require('@babel/runtime-corejs3/core-js-stable/instance/ends-with');
96
96
  var reselect = require('reselect');
97
97
  var _Map = require('@babel/runtime-corejs3/core-js-stable/map');
@@ -3192,8 +3192,9 @@ var trackingEvents$4 = {
3192
3192
 
3193
3193
  function ownKeys$1b(object, enumerableOnly) { var keys = _Object$keys__default["default"](object); if (_Object$getOwnPropertySymbols__default["default"]) { var symbols = _Object$getOwnPropertySymbols__default["default"](object); enumerableOnly && (symbols = _filterInstanceProperty__default["default"](symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor__default["default"](object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
3194
3194
  function _objectSpread$1b(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty__default["default"](_context3 = ownKeys$1b(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors__default["default"] ? _Object$defineProperties__default["default"](target, _Object$getOwnPropertyDescriptors__default["default"](source)) : _forEachInstanceProperty__default["default"](_context4 = ownKeys$1b(Object(source))).call(_context4, function (key) { _Object$defineProperty__default["default"](target, key, _Object$getOwnPropertyDescriptor__default["default"](source, key)); }); } return target; }
3195
- var GetChannelsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetChannelsQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "channels" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }, { kind: "Argument", name: { kind: "Name", value: "sort" }, value: { kind: "ListValue", values: [{ kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, { kind: "StringValue", value: "key", block: false }] } }, { kind: "Argument", name: { kind: "Name", value: "limit" }, value: { kind: "IntValue", value: "60" } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }] } }] } }], loc: { start: 0, end: 385, source: { body: "query GetChannelsQuery($where: String, $sortByNamePath: String!) {\n channels(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n id\n key\n nameAllLocales {\n locale\n value\n }\n }\n }\n}\n\nquery GetChannelQuery($id: String) {\n channel(id: $id) {\n id\n key\n nameAllLocales {\n locale\n value\n }\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
3196
- var GetChannelQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetChannelQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "channel" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "id" }, value: { kind: "Variable", name: { kind: "Name", value: "id" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 385, source: { body: "query GetChannelsQuery($where: String, $sortByNamePath: String!) {\n channels(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n id\n key\n nameAllLocales {\n locale\n value\n }\n }\n }\n}\n\nquery GetChannelQuery($id: String) {\n channel(id: $id) {\n id\n key\n nameAllLocales {\n locale\n value\n }\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
3195
+ var GetChannelsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetChannelsQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "channels" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }, { kind: "Argument", name: { kind: "Name", value: "sort" }, value: { kind: "ListValue", values: [{ kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, { kind: "StringValue", value: "key", block: false }] } }, { kind: "Argument", name: { kind: "Name", value: "limit" }, value: { kind: "IntValue", value: "60" } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "PickerInputChannel" }, directives: [] }] } }] } }] } }, { kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputChannel" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "Channel" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }], loc: { start: 0, end: 392, source: { body: "fragment PickerInputChannel on Channel {\n id\n key\n nameAllLocales {\n locale\n value\n }\n}\n\nquery GetChannelsQuery($where: String, $sortByNamePath: String!) {\n channels(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n ...PickerInputChannel\n }\n }\n}\n\nquery GetChannelQuery($id: String) {\n channel(id: $id) {\n ...PickerInputChannel\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
3196
+ var GetChannelQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetChannelQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "channel" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "id" }, value: { kind: "Variable", name: { kind: "Name", value: "id" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "PickerInputChannel" }, directives: [] }] } }] } }, { kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputChannel" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "Channel" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }], loc: { start: 0, end: 392, source: { body: "fragment PickerInputChannel on Channel {\n id\n key\n nameAllLocales {\n locale\n value\n }\n}\n\nquery GetChannelsQuery($where: String, $sortByNamePath: String!) {\n channels(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n ...PickerInputChannel\n }\n }\n}\n\nquery GetChannelQuery($id: String) {\n channel(id: $id) {\n ...PickerInputChannel\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
3197
+ var PickerInputChannel = { kind: "Document", definitions: [{ kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputChannel" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "Channel" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }], loc: { start: 0, end: 392, source: { body: "fragment PickerInputChannel on Channel {\n id\n key\n nameAllLocales {\n locale\n value\n }\n}\n\nquery GetChannelsQuery($where: String, $sortByNamePath: String!) {\n channels(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n ...PickerInputChannel\n }\n }\n}\n\nquery GetChannelQuery($id: String) {\n channel(id: $id) {\n ...PickerInputChannel\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
3197
3198
  var getTrackingEvent$4 = function getTrackingEvent(inputValue, selectedValue) {
3198
3199
  var id = selectedValue.value,
3199
3200
  key = selectedValue.key,
@@ -3254,10 +3255,13 @@ var ChannelPickerInput = function ChannelPickerInput(_ref) {
3254
3255
  var currentOption = useCurrentOption({
3255
3256
  query: GetChannelQuery,
3256
3257
  id: value,
3257
- convertQueryResultToOption: function convertQueryResultToOption(_ref2) {
3258
+ queryDataToItem: function queryDataToItem(_ref2) {
3258
3259
  var channel = _ref2.channel;
3259
- return convertChannelToOption(channel);
3260
- }
3260
+ return channel;
3261
+ },
3262
+ itemToOption: convertChannelToOption,
3263
+ typename: 'Channel',
3264
+ fragment: PickerInputChannel
3261
3265
  });
3262
3266
  var handleLoadOptions = React.useCallback(function (inputValue) {
3263
3267
  return loadOptions(inputValue).then(function (_ref3) {
@@ -3290,7 +3294,7 @@ var ChannelPickerInput = function ChannelPickerInput(_ref) {
3290
3294
  var tooltipTitle = (_currentOption$data$l = currentOption === null || currentOption === void 0 ? void 0 : (_currentOption$data = currentOption.data) === null || _currentOption$data === void 0 ? void 0 : _currentOption$data.label) !== null && _currentOption$data$l !== void 0 ? _currentOption$data$l : '';
3291
3295
  return jsxRuntime.jsx(uiKit.Constraints.Horizontal, {
3292
3296
  max: "scale",
3293
- children: currentOption.loading ? jsxRuntime.jsx(CenteredLoadingSpinner, {}) : jsxRuntime.jsxs(uiKit.Spacings.Stack, {
3297
+ children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
3294
3298
  scale: "xs",
3295
3299
  children: [jsxRuntime.jsx(CustomFieldTooltip, {
3296
3300
  title: tooltipTitle,
@@ -3302,7 +3306,7 @@ var ChannelPickerInput = function ChannelPickerInput(_ref) {
3302
3306
  defaultOptions: true,
3303
3307
  showOptionGroupDivider: true,
3304
3308
  isClearable: isClearable,
3305
- isReadOnly: isReadOnly,
3309
+ isReadOnly: isReadOnly || currentOption.loading,
3306
3310
  isDisabled: isDisabled,
3307
3311
  components: {
3308
3312
  Option: Option$2
@@ -3704,7 +3708,7 @@ var SearchInput = /*#__PURE__*/function (_Component) {
3704
3708
  onMouseOver: this.props.handleMouseOver,
3705
3709
  onMouseOut: this.props.handleMouseOut,
3706
3710
  children: jsxRuntime.jsx(uiKit.SearchIcon, {
3707
- color: this.props.iconColor || this.props.isMouseOver && !this.props.disabled ? 'primary' : this.props.enableDisabledStyle ? 'neutral60' : 'solid',
3711
+ color: this.props.iconColor || this.props.isMouseOver && !this.props.disabled ? 'primary' : this.props.themedValue(this.props.enableDisabledStyle ? 'neutral60' : 'solid', 'neutral60'),
3708
3712
  size: "big"
3709
3713
  })
3710
3714
  })]
@@ -3736,7 +3740,7 @@ SearchInput.defaultProps = {
3736
3740
  return null;
3737
3741
  }
3738
3742
  };
3739
- var SearchInput$1 = flowRight__default["default"](keepDisplayName(SearchInput), withMouseOverState, reactIntl.injectIntl)(SearchInput);
3743
+ var SearchInput$1 = flowRight__default["default"](keepDisplayName(SearchInput), withMouseOverState, reactIntl.injectIntl, designSystem.withThemeContext)(SearchInput);
3740
3744
 
3741
3745
  var FetchIndicesExist$1 = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchIndicesExist" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "indicesExist" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "products" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "searchableIndexExists" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "newInProgress" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "productTypes" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "searchableIndexExists" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "newInProgress" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 191, source: { body: "query FetchIndicesExist {\n indicesExist {\n products {\n searchableIndexExists\n newInProgress\n }\n productTypes {\n searchableIndexExists\n newInProgress\n }\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
3742
3746
  var useExecuteGraphQLRequest = function useExecuteGraphQLRequest() {
@@ -4032,22 +4036,44 @@ var useLoadOptions = function useLoadOptions(_ref) {
4032
4036
  };
4033
4037
 
4034
4038
  function useCurrentOption(_ref) {
4039
+ var _context;
4035
4040
  var id = _ref.id,
4041
+ typename = _ref.typename,
4036
4042
  query = _ref.query,
4037
- convertQueryResultToOption = _ref.convertQueryResultToOption;
4038
- var item = hooks.useQuery(query, {
4039
- context: {
4040
- target: constants.GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM
4041
- },
4042
- variables: {
4043
- id: id
4044
- },
4045
- skip: !id
4046
- });
4043
+ fragment = _ref.fragment,
4044
+ queryDataToItem = _ref.queryDataToItem,
4045
+ itemToOption = _ref.itemToOption;
4046
+ var apolloClient = client.useApolloClient();
4047
+
4048
+ // load from cache when possible to speed up initial render
4049
+ var canReadFromCache = id && typename && fragment;
4050
+ var cacheItem = canReadFromCache ? apolloClient.readFragment({
4051
+ id: _concatInstanceProperty__default["default"](_context = "".concat(typename, ":")).call(_context, id),
4052
+ fragment: fragment
4053
+ }) : undefined;
4054
+
4055
+ // load with the query as a fallback
4056
+ var _useQuery = client.useQuery(query, {
4057
+ context: {
4058
+ target: constants.GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM
4059
+ },
4060
+ variables: {
4061
+ id: id
4062
+ },
4063
+ skip: !id || cacheItem
4064
+ }),
4065
+ queryLoading = _useQuery.loading,
4066
+ queryData = _useQuery.data,
4067
+ queryError = _useQuery.error;
4068
+ var queryItem = queryData && queryDataToItem(queryData);
4069
+ var item = queryItem !== null && queryItem !== void 0 ? queryItem : cacheItem;
4070
+ var loading = item ? false : queryLoading;
4071
+ var error = item ? undefined : queryError;
4072
+ var data = item && itemToOption(item);
4047
4073
  return {
4048
- loading: item.loading,
4049
- data: item.data && convertQueryResultToOption(item.data),
4050
- error: item.error
4074
+ loading: loading,
4075
+ data: data,
4076
+ error: error
4051
4077
  };
4052
4078
  }
4053
4079
 
@@ -4126,10 +4152,11 @@ var ProductTypePickerInput = function ProductTypePickerInput(_ref) {
4126
4152
  var currentOption = useCurrentOption({
4127
4153
  query: GetProductTypeQuery,
4128
4154
  id: value,
4129
- convertQueryResultToOption: function convertQueryResultToOption(_ref2) {
4155
+ queryDataToItem: function queryDataToItem(_ref2) {
4130
4156
  var productType = _ref2.productType;
4131
- return convertProductTypeToOption(productType);
4132
- }
4157
+ return productType;
4158
+ },
4159
+ itemToOption: convertProductTypeToOption
4133
4160
  });
4134
4161
  var handleLoadOptions = React.useCallback(function (inputValue) {
4135
4162
  return loadProductTypes(inputValue).then(function (_ref3) {
@@ -4285,10 +4312,11 @@ var StatePickerInput = function StatePickerInput(_ref) {
4285
4312
  var currentOption = useCurrentOption({
4286
4313
  query: GetStateQuery,
4287
4314
  id: value,
4288
- convertQueryResultToOption: function convertQueryResultToOption(_ref2) {
4315
+ queryDataToItem: function queryDataToItem(_ref2) {
4289
4316
  var state = _ref2.state;
4290
- return convertStateToOption(state);
4291
- }
4317
+ return state;
4318
+ },
4319
+ itemToOption: convertStateToOption
4292
4320
  });
4293
4321
  var handleLoadOptions = React.useCallback(function (inputValue) {
4294
4322
  return loadOptions(inputValue).then(function (_ref3) {
@@ -6651,10 +6679,11 @@ var ProductPickerInput = function ProductPickerInput(_ref) {
6651
6679
  var currentOption = useCurrentOption({
6652
6680
  query: GetProductQuery,
6653
6681
  id: value,
6654
- convertQueryResultToOption: function convertQueryResultToOption(_ref2) {
6682
+ queryDataToItem: function queryDataToItem(_ref2) {
6655
6683
  var product = _ref2.product;
6656
- return convertProductToOption(product);
6657
- }
6684
+ return product;
6685
+ },
6686
+ itemToOption: convertProductToOption
6658
6687
  });
6659
6688
  var handleLoadOptions = React.useCallback(function (inputValue) {
6660
6689
  return loadOptions(inputValue).then(function (_ref3) {
@@ -7189,7 +7218,7 @@ function CustomInputSet(props) {
7189
7218
  // type is selected.
7190
7219
  var type = getType(props.fieldDefinition);
7191
7220
  var typeName = type.name.toLowerCase();
7192
- var areButtonsTopAligned = _includesInstanceProperty__default["default"](_context5 = [CUSTOM_FIELD_TYPES.lenum, CUSTOM_FIELD_TYPES.localizedenum, CUSTOM_FIELD_TYPES.localizedstring, CUSTOM_FIELD_TYPES.string, CUSTOM_FIELD_TYPES.ltext, CUSTOM_FIELD_TYPES.reference]).call(_context5, typeName);
7221
+ var areButtonsTopAligned = _includesInstanceProperty__default["default"](_context5 = [CUSTOM_FIELD_TYPES.lenum, CUSTOM_FIELD_TYPES.localizedenum, CUSTOM_FIELD_TYPES.localizedstring, CUSTOM_FIELD_TYPES.string, CUSTOM_FIELD_TYPES.text, CUSTOM_FIELD_TYPES.ltext, CUSTOM_FIELD_TYPES.reference]).call(_context5, typeName);
7193
7222
  return jsxRuntime.jsxs(jsxRuntime.Fragment, {
7194
7223
  children: [jsxRuntime.jsx(uiKit.AccessibleHidden, {
7195
7224
  children: jsxRuntime.jsx("label", {
@@ -8717,8 +8746,9 @@ var trackingEvents = {
8717
8746
  }
8718
8747
  };
8719
8748
 
8720
- var GetCustomerGroupsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetCustomerGroupsQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "customerGroups" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }, { kind: "Argument", name: { kind: "Name", value: "sort" }, value: { kind: "ListValue", values: [{ kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, { kind: "StringValue", value: "key", block: false }] } }, { kind: "Argument", name: { kind: "Name", value: "limit" }, value: { kind: "IntValue", value: "60" } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 317, source: { body: "query GetCustomerGroupsQuery($where: String, $sortByNamePath: String!) {\n customerGroups(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n id\n key\n name\n }\n }\n}\n\nquery GetCustomerGroupQuery($id: String) {\n customerGroup(id: $id) {\n id\n key\n name\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
8721
- var GetCustomerGroupQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetCustomerGroupQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "customerGroup" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "id" }, value: { kind: "Variable", name: { kind: "Name", value: "id" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }] } }], loc: { start: 0, end: 317, source: { body: "query GetCustomerGroupsQuery($where: String, $sortByNamePath: String!) {\n customerGroups(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n id\n key\n name\n }\n }\n}\n\nquery GetCustomerGroupQuery($id: String) {\n customerGroup(id: $id) {\n id\n key\n name\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
8749
+ var GetCustomerGroupsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetCustomerGroupsQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "customerGroups" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }, { kind: "Argument", name: { kind: "Name", value: "sort" }, value: { kind: "ListValue", values: [{ kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, { kind: "StringValue", value: "key", block: false }] } }, { kind: "Argument", name: { kind: "Name", value: "limit" }, value: { kind: "IntValue", value: "60" } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "PickerInputCustomerGroups" }, directives: [] }] } }] } }] } }, { kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputCustomerGroups" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "CustomerGroup" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }], loc: { start: 0, end: 406, source: { body: "fragment PickerInputCustomerGroups on CustomerGroup {\n id\n key\n name\n}\n\nquery GetCustomerGroupsQuery($where: String, $sortByNamePath: String!) {\n customerGroups(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n ...PickerInputCustomerGroups\n }\n }\n}\n\nquery GetCustomerGroupQuery($id: String) {\n customerGroup(id: $id) {\n ...PickerInputCustomerGroups\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
8750
+ var GetCustomerGroupQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetCustomerGroupQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "customerGroup" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "id" }, value: { kind: "Variable", name: { kind: "Name", value: "id" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "PickerInputCustomerGroups" }, directives: [] }] } }] } }, { kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputCustomerGroups" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "CustomerGroup" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }], loc: { start: 0, end: 406, source: { body: "fragment PickerInputCustomerGroups on CustomerGroup {\n id\n key\n name\n}\n\nquery GetCustomerGroupsQuery($where: String, $sortByNamePath: String!) {\n customerGroups(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n ...PickerInputCustomerGroups\n }\n }\n}\n\nquery GetCustomerGroupQuery($id: String) {\n customerGroup(id: $id) {\n ...PickerInputCustomerGroups\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
8751
+ var PickerInputCustomerGroups = { kind: "Document", definitions: [{ kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputCustomerGroups" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "CustomerGroup" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }], loc: { start: 0, end: 406, source: { body: "fragment PickerInputCustomerGroups on CustomerGroup {\n id\n key\n name\n}\n\nquery GetCustomerGroupsQuery($where: String, $sortByNamePath: String!) {\n customerGroups(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n ...PickerInputCustomerGroups\n }\n }\n}\n\nquery GetCustomerGroupQuery($id: String) {\n customerGroup(id: $id) {\n ...PickerInputCustomerGroups\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
8722
8752
  var getTrackingEvent = function getTrackingEvent(inputValue, selectedValue) {
8723
8753
  var id = selectedValue.value,
8724
8754
  key = selectedValue.key,
@@ -8778,10 +8808,13 @@ var CustomerGroupPickerInput = function CustomerGroupPickerInput(_ref) {
8778
8808
  var currentOption = useCurrentOption({
8779
8809
  query: GetCustomerGroupQuery,
8780
8810
  id: value,
8781
- convertQueryResultToOption: function convertQueryResultToOption(_ref2) {
8811
+ queryDataToItem: function queryDataToItem(_ref2) {
8782
8812
  var customerGroup = _ref2.customerGroup;
8783
- return convertCustomerGroupToOption(customerGroup);
8784
- }
8813
+ return customerGroup;
8814
+ },
8815
+ itemToOption: convertCustomerGroupToOption,
8816
+ typename: 'CustomerGroup',
8817
+ fragment: PickerInputCustomerGroups
8785
8818
  });
8786
8819
  var handleLoadOptions = React.useCallback(function (inputValue) {
8787
8820
  return loadOptions(inputValue).then(function (_ref3) {
@@ -8814,7 +8847,7 @@ var CustomerGroupPickerInput = function CustomerGroupPickerInput(_ref) {
8814
8847
  var tooltipTitle = (_currentOption$data$l = currentOption === null || currentOption === void 0 ? void 0 : (_currentOption$data = currentOption.data) === null || _currentOption$data === void 0 ? void 0 : _currentOption$data.label) !== null && _currentOption$data$l !== void 0 ? _currentOption$data$l : '';
8815
8848
  return jsxRuntime.jsx(uiKit.Constraints.Horizontal, {
8816
8849
  max: "scale",
8817
- children: currentOption.loading ? jsxRuntime.jsx(CenteredLoadingSpinner, {}) : jsxRuntime.jsxs(uiKit.Spacings.Stack, {
8850
+ children: jsxRuntime.jsxs(uiKit.Spacings.Stack, {
8818
8851
  scale: "xs",
8819
8852
  children: [jsxRuntime.jsx(CustomFieldTooltip, {
8820
8853
  title: tooltipTitle,
@@ -8826,7 +8859,7 @@ var CustomerGroupPickerInput = function CustomerGroupPickerInput(_ref) {
8826
8859
  defaultOptions: true,
8827
8860
  showOptionGroupDivider: true,
8828
8861
  isClearable: isClearable,
8829
- isReadOnly: isReadOnly,
8862
+ isReadOnly: isReadOnly || currentOption.loading,
8830
8863
  isDisabled: isDisabled,
8831
8864
  components: {
8832
8865
  Option: Option$2
@@ -12797,7 +12830,7 @@ var StoreSelectField = function StoreSelectField(props) {
12797
12830
  hintIcon: props.hintIcon,
12798
12831
  htmlFor: props.id,
12799
12832
  hasRequiredIndicator: props.isRequired,
12800
- isBold: props.isBold
12833
+ isBold: true
12801
12834
  }), jsxRuntime.jsx(StoreSelectInput, _objectSpread$a(_objectSpread$a({
12802
12835
  projectKey: props.projectKey,
12803
12836
  id: props.id,
package/dist/commercetools-frontend-experimental-components.esm.js CHANGED
@@ -64,6 +64,7 @@ import moment$1 from 'moment';
64
64
  import _startsWithInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/starts-with';
65
65
  import classnames from 'classnames';
66
66
  import 'react-required-if';
67
+ import { withThemeContext, useTheme } from '@commercetools-uikit/design-system';
67
68
  import _assertThisInitialized from '@babel/runtime-corejs3/helpers/esm/assertThisInitialized';
68
69
  import Textarea from 'react-textarea-autosize';
69
70
  import has from 'lodash.has';
@@ -72,7 +73,7 @@ import _asyncToGenerator from '@babel/runtime-corejs3/helpers/esm/asyncToGenerat
72
73
  import _regeneratorRuntime from '@babel/runtime-corejs3/regenerator';
73
74
  import _reverseInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/reverse';
74
75
  import { useAsyncDispatch, actions } from '@commercetools-frontend/sdk';
75
- import { useApolloClient as useApolloClient$1 } from '@apollo/client';
76
+ import { useApolloClient as useApolloClient$1, useQuery as useQuery$2 } from '@apollo/client';
76
77
  import _objectWithoutProperties from '@babel/runtime-corejs3/helpers/esm/objectWithoutProperties';
77
78
  import _Array$isArray from '@babel/runtime-corejs3/core-js-stable/array/is-array';
78
79
  import _Object$entries from '@babel/runtime-corejs3/core-js-stable/object/entries';
@@ -87,7 +88,6 @@ import omitBy from 'lodash.omitby';
87
88
  import _everyInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/every';
88
89
  import _trimInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/trim';
89
90
  import { css } from '@emotion/react';
90
- import { useTheme } from '@commercetools-uikit/design-system';
91
91
  import _endsWithInstanceProperty from '@babel/runtime-corejs3/core-js-stable/instance/ends-with';
92
92
  import { defaultMemoize } from 'reselect';
93
93
  import _Map from '@babel/runtime-corejs3/core-js-stable/map';
@@ -3108,8 +3108,9 @@ var trackingEvents$4 = {
3108
3108
 
3109
3109
  function ownKeys$1b(object, enumerableOnly) { var keys = _Object$keys(object); if (_Object$getOwnPropertySymbols) { var symbols = _Object$getOwnPropertySymbols(object); enumerableOnly && (symbols = _filterInstanceProperty(symbols).call(symbols, function (sym) { return _Object$getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
3110
3110
  function _objectSpread$1b(target) { for (var i = 1; i < arguments.length; i++) { var _context3, _context4; var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? _forEachInstanceProperty(_context3 = ownKeys$1b(Object(source), !0)).call(_context3, function (key) { _defineProperty(target, key, source[key]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(target, _Object$getOwnPropertyDescriptors(source)) : _forEachInstanceProperty(_context4 = ownKeys$1b(Object(source))).call(_context4, function (key) { _Object$defineProperty(target, key, _Object$getOwnPropertyDescriptor(source, key)); }); } return target; }
3111
- var GetChannelsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetChannelsQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "channels" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }, { kind: "Argument", name: { kind: "Name", value: "sort" }, value: { kind: "ListValue", values: [{ kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, { kind: "StringValue", value: "key", block: false }] } }, { kind: "Argument", name: { kind: "Name", value: "limit" }, value: { kind: "IntValue", value: "60" } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }] } }] } }], loc: { start: 0, end: 385, source: { body: "query GetChannelsQuery($where: String, $sortByNamePath: String!) {\n channels(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n id\n key\n nameAllLocales {\n locale\n value\n }\n }\n }\n}\n\nquery GetChannelQuery($id: String) {\n channel(id: $id) {\n id\n key\n nameAllLocales {\n locale\n value\n }\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
3112
- var GetChannelQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetChannelQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "channel" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "id" }, value: { kind: "Variable", name: { kind: "Name", value: "id" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 385, source: { body: "query GetChannelsQuery($where: String, $sortByNamePath: String!) {\n channels(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n id\n key\n nameAllLocales {\n locale\n value\n }\n }\n }\n}\n\nquery GetChannelQuery($id: String) {\n channel(id: $id) {\n id\n key\n nameAllLocales {\n locale\n value\n }\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
3111
+ var GetChannelsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetChannelsQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "channels" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }, { kind: "Argument", name: { kind: "Name", value: "sort" }, value: { kind: "ListValue", values: [{ kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, { kind: "StringValue", value: "key", block: false }] } }, { kind: "Argument", name: { kind: "Name", value: "limit" }, value: { kind: "IntValue", value: "60" } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "PickerInputChannel" }, directives: [] }] } }] } }] } }, { kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputChannel" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "Channel" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }], loc: { start: 0, end: 392, source: { body: "fragment PickerInputChannel on Channel {\n id\n key\n nameAllLocales {\n locale\n value\n }\n}\n\nquery GetChannelsQuery($where: String, $sortByNamePath: String!) {\n channels(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n ...PickerInputChannel\n }\n }\n}\n\nquery GetChannelQuery($id: String) {\n channel(id: $id) {\n ...PickerInputChannel\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
3112
+ var GetChannelQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetChannelQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "channel" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "id" }, value: { kind: "Variable", name: { kind: "Name", value: "id" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "PickerInputChannel" }, directives: [] }] } }] } }, { kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputChannel" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "Channel" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }], loc: { start: 0, end: 392, source: { body: "fragment PickerInputChannel on Channel {\n id\n key\n nameAllLocales {\n locale\n value\n }\n}\n\nquery GetChannelsQuery($where: String, $sortByNamePath: String!) {\n channels(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n ...PickerInputChannel\n }\n }\n}\n\nquery GetChannelQuery($id: String) {\n channel(id: $id) {\n ...PickerInputChannel\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
3113
+ var PickerInputChannel = { kind: "Document", definitions: [{ kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputChannel" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "Channel" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "nameAllLocales" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "locale" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "value" }, arguments: [], directives: [] }] } }] } }], loc: { start: 0, end: 392, source: { body: "fragment PickerInputChannel on Channel {\n id\n key\n nameAllLocales {\n locale\n value\n }\n}\n\nquery GetChannelsQuery($where: String, $sortByNamePath: String!) {\n channels(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n ...PickerInputChannel\n }\n }\n}\n\nquery GetChannelQuery($id: String) {\n channel(id: $id) {\n ...PickerInputChannel\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
3113
3114
  var getTrackingEvent$4 = function getTrackingEvent(inputValue, selectedValue) {
3114
3115
  var id = selectedValue.value,
3115
3116
  key = selectedValue.key,
@@ -3170,10 +3171,13 @@ var ChannelPickerInput = function ChannelPickerInput(_ref) {
3170
3171
  var currentOption = useCurrentOption({
3171
3172
  query: GetChannelQuery,
3172
3173
  id: value,
3173
- convertQueryResultToOption: function convertQueryResultToOption(_ref2) {
3174
+ queryDataToItem: function queryDataToItem(_ref2) {
3174
3175
  var channel = _ref2.channel;
3175
- return convertChannelToOption(channel);
3176
- }
3176
+ return channel;
3177
+ },
3178
+ itemToOption: convertChannelToOption,
3179
+ typename: 'Channel',
3180
+ fragment: PickerInputChannel
3177
3181
  });
3178
3182
  var handleLoadOptions = useCallback(function (inputValue) {
3179
3183
  return loadOptions(inputValue).then(function (_ref3) {
@@ -3206,7 +3210,7 @@ var ChannelPickerInput = function ChannelPickerInput(_ref) {
3206
3210
  var tooltipTitle = (_currentOption$data$l = currentOption === null || currentOption === void 0 ? void 0 : (_currentOption$data = currentOption.data) === null || _currentOption$data === void 0 ? void 0 : _currentOption$data.label) !== null && _currentOption$data$l !== void 0 ? _currentOption$data$l : '';
3207
3211
  return jsx(Constraints.Horizontal, {
3208
3212
  max: "scale",
3209
- children: currentOption.loading ? jsx(CenteredLoadingSpinner, {}) : jsxs(Spacings.Stack, {
3213
+ children: jsxs(Spacings.Stack, {
3210
3214
  scale: "xs",
3211
3215
  children: [jsx(CustomFieldTooltip, {
3212
3216
  title: tooltipTitle,
@@ -3218,7 +3222,7 @@ var ChannelPickerInput = function ChannelPickerInput(_ref) {
3218
3222
  defaultOptions: true,
3219
3223
  showOptionGroupDivider: true,
3220
3224
  isClearable: isClearable,
3221
- isReadOnly: isReadOnly,
3225
+ isReadOnly: isReadOnly || currentOption.loading,
3222
3226
  isDisabled: isDisabled,
3223
3227
  components: {
3224
3228
  Option: Option$2
@@ -3620,7 +3624,7 @@ var SearchInput = /*#__PURE__*/function (_Component) {
3620
3624
  onMouseOver: this.props.handleMouseOver,
3621
3625
  onMouseOut: this.props.handleMouseOut,
3622
3626
  children: jsx(SearchIcon, {
3623
- color: this.props.iconColor || this.props.isMouseOver && !this.props.disabled ? 'primary' : this.props.enableDisabledStyle ? 'neutral60' : 'solid',
3627
+ color: this.props.iconColor || this.props.isMouseOver && !this.props.disabled ? 'primary' : this.props.themedValue(this.props.enableDisabledStyle ? 'neutral60' : 'solid', 'neutral60'),
3624
3628
  size: "big"
3625
3629
  })
3626
3630
  })]
@@ -3652,7 +3656,7 @@ SearchInput.defaultProps = {
3652
3656
  return null;
3653
3657
  }
3654
3658
  };
3655
- var SearchInput$1 = flowRight(keepDisplayName(SearchInput), withMouseOverState, injectIntl)(SearchInput);
3659
+ var SearchInput$1 = flowRight(keepDisplayName(SearchInput), withMouseOverState, injectIntl, withThemeContext)(SearchInput);
3656
3660
 
3657
3661
  var FetchIndicesExist$1 = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "FetchIndicesExist" }, variableDefinitions: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "indicesExist" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "products" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "searchableIndexExists" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "newInProgress" }, arguments: [], directives: [] }] } }, { kind: "Field", name: { kind: "Name", value: "productTypes" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "searchableIndexExists" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "newInProgress" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 191, source: { body: "query FetchIndicesExist {\n indicesExist {\n products {\n searchableIndexExists\n newInProgress\n }\n productTypes {\n searchableIndexExists\n newInProgress\n }\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
3658
3662
  var useExecuteGraphQLRequest = function useExecuteGraphQLRequest() {
@@ -3948,22 +3952,44 @@ var useLoadOptions = function useLoadOptions(_ref) {
3948
3952
  };
3949
3953
 
3950
3954
  function useCurrentOption(_ref) {
3955
+ var _context;
3951
3956
  var id = _ref.id,
3957
+ typename = _ref.typename,
3952
3958
  query = _ref.query,
3953
- convertQueryResultToOption = _ref.convertQueryResultToOption;
3954
- var item = useQuery$1(query, {
3955
- context: {
3956
- target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM
3957
- },
3958
- variables: {
3959
- id: id
3960
- },
3961
- skip: !id
3962
- });
3959
+ fragment = _ref.fragment,
3960
+ queryDataToItem = _ref.queryDataToItem,
3961
+ itemToOption = _ref.itemToOption;
3962
+ var apolloClient = useApolloClient$1();
3963
+
3964
+ // load from cache when possible to speed up initial render
3965
+ var canReadFromCache = id && typename && fragment;
3966
+ var cacheItem = canReadFromCache ? apolloClient.readFragment({
3967
+ id: _concatInstanceProperty(_context = "".concat(typename, ":")).call(_context, id),
3968
+ fragment: fragment
3969
+ }) : undefined;
3970
+
3971
+ // load with the query as a fallback
3972
+ var _useQuery = useQuery$2(query, {
3973
+ context: {
3974
+ target: GRAPHQL_TARGETS.COMMERCETOOLS_PLATFORM
3975
+ },
3976
+ variables: {
3977
+ id: id
3978
+ },
3979
+ skip: !id || cacheItem
3980
+ }),
3981
+ queryLoading = _useQuery.loading,
3982
+ queryData = _useQuery.data,
3983
+ queryError = _useQuery.error;
3984
+ var queryItem = queryData && queryDataToItem(queryData);
3985
+ var item = queryItem !== null && queryItem !== void 0 ? queryItem : cacheItem;
3986
+ var loading = item ? false : queryLoading;
3987
+ var error = item ? undefined : queryError;
3988
+ var data = item && itemToOption(item);
3963
3989
  return {
3964
- loading: item.loading,
3965
- data: item.data && convertQueryResultToOption(item.data),
3966
- error: item.error
3990
+ loading: loading,
3991
+ data: data,
3992
+ error: error
3967
3993
  };
3968
3994
  }
3969
3995
 
@@ -4042,10 +4068,11 @@ var ProductTypePickerInput = function ProductTypePickerInput(_ref) {
4042
4068
  var currentOption = useCurrentOption({
4043
4069
  query: GetProductTypeQuery,
4044
4070
  id: value,
4045
- convertQueryResultToOption: function convertQueryResultToOption(_ref2) {
4071
+ queryDataToItem: function queryDataToItem(_ref2) {
4046
4072
  var productType = _ref2.productType;
4047
- return convertProductTypeToOption(productType);
4048
- }
4073
+ return productType;
4074
+ },
4075
+ itemToOption: convertProductTypeToOption
4049
4076
  });
4050
4077
  var handleLoadOptions = useCallback(function (inputValue) {
4051
4078
  return loadProductTypes(inputValue).then(function (_ref3) {
@@ -4201,10 +4228,11 @@ var StatePickerInput = function StatePickerInput(_ref) {
4201
4228
  var currentOption = useCurrentOption({
4202
4229
  query: GetStateQuery,
4203
4230
  id: value,
4204
- convertQueryResultToOption: function convertQueryResultToOption(_ref2) {
4231
+ queryDataToItem: function queryDataToItem(_ref2) {
4205
4232
  var state = _ref2.state;
4206
- return convertStateToOption(state);
4207
- }
4233
+ return state;
4234
+ },
4235
+ itemToOption: convertStateToOption
4208
4236
  });
4209
4237
  var handleLoadOptions = useCallback(function (inputValue) {
4210
4238
  return loadOptions(inputValue).then(function (_ref3) {
@@ -6567,10 +6595,11 @@ var ProductPickerInput = function ProductPickerInput(_ref) {
6567
6595
  var currentOption = useCurrentOption({
6568
6596
  query: GetProductQuery,
6569
6597
  id: value,
6570
- convertQueryResultToOption: function convertQueryResultToOption(_ref2) {
6598
+ queryDataToItem: function queryDataToItem(_ref2) {
6571
6599
  var product = _ref2.product;
6572
- return convertProductToOption(product);
6573
- }
6600
+ return product;
6601
+ },
6602
+ itemToOption: convertProductToOption
6574
6603
  });
6575
6604
  var handleLoadOptions = useCallback(function (inputValue) {
6576
6605
  return loadOptions(inputValue).then(function (_ref3) {
@@ -7105,7 +7134,7 @@ function CustomInputSet(props) {
7105
7134
  // type is selected.
7106
7135
  var type = getType(props.fieldDefinition);
7107
7136
  var typeName = type.name.toLowerCase();
7108
- var areButtonsTopAligned = _includesInstanceProperty(_context5 = [CUSTOM_FIELD_TYPES.lenum, CUSTOM_FIELD_TYPES.localizedenum, CUSTOM_FIELD_TYPES.localizedstring, CUSTOM_FIELD_TYPES.string, CUSTOM_FIELD_TYPES.ltext, CUSTOM_FIELD_TYPES.reference]).call(_context5, typeName);
7137
+ var areButtonsTopAligned = _includesInstanceProperty(_context5 = [CUSTOM_FIELD_TYPES.lenum, CUSTOM_FIELD_TYPES.localizedenum, CUSTOM_FIELD_TYPES.localizedstring, CUSTOM_FIELD_TYPES.string, CUSTOM_FIELD_TYPES.text, CUSTOM_FIELD_TYPES.ltext, CUSTOM_FIELD_TYPES.reference]).call(_context5, typeName);
7109
7138
  return jsxs(Fragment, {
7110
7139
  children: [jsx(AccessibleHidden, {
7111
7140
  children: jsx("label", {
@@ -8633,8 +8662,9 @@ var trackingEvents = {
8633
8662
  }
8634
8663
  };
8635
8664
 
8636
- var GetCustomerGroupsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetCustomerGroupsQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "customerGroups" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }, { kind: "Argument", name: { kind: "Name", value: "sort" }, value: { kind: "ListValue", values: [{ kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, { kind: "StringValue", value: "key", block: false }] } }, { kind: "Argument", name: { kind: "Name", value: "limit" }, value: { kind: "IntValue", value: "60" } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }] } }] } }], loc: { start: 0, end: 317, source: { body: "query GetCustomerGroupsQuery($where: String, $sortByNamePath: String!) {\n customerGroups(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n id\n key\n name\n }\n }\n}\n\nquery GetCustomerGroupQuery($id: String) {\n customerGroup(id: $id) {\n id\n key\n name\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
8637
- var GetCustomerGroupQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetCustomerGroupQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "customerGroup" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "id" }, value: { kind: "Variable", name: { kind: "Name", value: "id" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }] } }], loc: { start: 0, end: 317, source: { body: "query GetCustomerGroupsQuery($where: String, $sortByNamePath: String!) {\n customerGroups(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n id\n key\n name\n }\n }\n}\n\nquery GetCustomerGroupQuery($id: String) {\n customerGroup(id: $id) {\n id\n key\n name\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
8665
+ var GetCustomerGroupsQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetCustomerGroupsQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "where" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }, { kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, type: { kind: "NonNullType", type: { kind: "NamedType", name: { kind: "Name", value: "String" } } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "customerGroups" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "where" }, value: { kind: "Variable", name: { kind: "Name", value: "where" } } }, { kind: "Argument", name: { kind: "Name", value: "sort" }, value: { kind: "ListValue", values: [{ kind: "Variable", name: { kind: "Name", value: "sortByNamePath" } }, { kind: "StringValue", value: "key", block: false }] } }, { kind: "Argument", name: { kind: "Name", value: "limit" }, value: { kind: "IntValue", value: "60" } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "total" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "results" }, arguments: [], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "PickerInputCustomerGroups" }, directives: [] }] } }] } }] } }, { kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputCustomerGroups" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "CustomerGroup" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }], loc: { start: 0, end: 406, source: { body: "fragment PickerInputCustomerGroups on CustomerGroup {\n id\n key\n name\n}\n\nquery GetCustomerGroupsQuery($where: String, $sortByNamePath: String!) {\n customerGroups(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n ...PickerInputCustomerGroups\n }\n }\n}\n\nquery GetCustomerGroupQuery($id: String) {\n customerGroup(id: $id) {\n ...PickerInputCustomerGroups\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
8666
+ var GetCustomerGroupQuery = { kind: "Document", definitions: [{ kind: "OperationDefinition", operation: "query", name: { kind: "Name", value: "GetCustomerGroupQuery" }, variableDefinitions: [{ kind: "VariableDefinition", variable: { kind: "Variable", name: { kind: "Name", value: "id" } }, type: { kind: "NamedType", name: { kind: "Name", value: "String" } }, directives: [] }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "customerGroup" }, arguments: [{ kind: "Argument", name: { kind: "Name", value: "id" }, value: { kind: "Variable", name: { kind: "Name", value: "id" } } }], directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "FragmentSpread", name: { kind: "Name", value: "PickerInputCustomerGroups" }, directives: [] }] } }] } }, { kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputCustomerGroups" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "CustomerGroup" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }], loc: { start: 0, end: 406, source: { body: "fragment PickerInputCustomerGroups on CustomerGroup {\n id\n key\n name\n}\n\nquery GetCustomerGroupsQuery($where: String, $sortByNamePath: String!) {\n customerGroups(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n ...PickerInputCustomerGroups\n }\n }\n}\n\nquery GetCustomerGroupQuery($id: String) {\n customerGroup(id: $id) {\n ...PickerInputCustomerGroups\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
8667
+ var PickerInputCustomerGroups = { kind: "Document", definitions: [{ kind: "FragmentDefinition", name: { kind: "Name", value: "PickerInputCustomerGroups" }, typeCondition: { kind: "NamedType", name: { kind: "Name", value: "CustomerGroup" } }, directives: [], selectionSet: { kind: "SelectionSet", selections: [{ kind: "Field", name: { kind: "Name", value: "id" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "key" }, arguments: [], directives: [] }, { kind: "Field", name: { kind: "Name", value: "name" }, arguments: [], directives: [] }] } }], loc: { start: 0, end: 406, source: { body: "fragment PickerInputCustomerGroups on CustomerGroup {\n id\n key\n name\n}\n\nquery GetCustomerGroupsQuery($where: String, $sortByNamePath: String!) {\n customerGroups(where: $where, sort: [$sortByNamePath, \"key\"], limit: 60) {\n total\n results {\n ...PickerInputCustomerGroups\n }\n }\n}\n\nquery GetCustomerGroupQuery($id: String) {\n customerGroup(id: $id) {\n ...PickerInputCustomerGroups\n }\n}\n", name: "GraphQL request", locationOffset: { line: 1, column: 1 } } } };
8638
8668
  var getTrackingEvent = function getTrackingEvent(inputValue, selectedValue) {
8639
8669
  var id = selectedValue.value,
8640
8670
  key = selectedValue.key,
@@ -8694,10 +8724,13 @@ var CustomerGroupPickerInput = function CustomerGroupPickerInput(_ref) {
8694
8724
  var currentOption = useCurrentOption({
8695
8725
  query: GetCustomerGroupQuery,
8696
8726
  id: value,
8697
- convertQueryResultToOption: function convertQueryResultToOption(_ref2) {
8727
+ queryDataToItem: function queryDataToItem(_ref2) {
8698
8728
  var customerGroup = _ref2.customerGroup;
8699
- return convertCustomerGroupToOption(customerGroup);
8700
- }
8729
+ return customerGroup;
8730
+ },
8731
+ itemToOption: convertCustomerGroupToOption,
8732
+ typename: 'CustomerGroup',
8733
+ fragment: PickerInputCustomerGroups
8701
8734
  });
8702
8735
  var handleLoadOptions = useCallback(function (inputValue) {
8703
8736
  return loadOptions(inputValue).then(function (_ref3) {
@@ -8730,7 +8763,7 @@ var CustomerGroupPickerInput = function CustomerGroupPickerInput(_ref) {
8730
8763
  var tooltipTitle = (_currentOption$data$l = currentOption === null || currentOption === void 0 ? void 0 : (_currentOption$data = currentOption.data) === null || _currentOption$data === void 0 ? void 0 : _currentOption$data.label) !== null && _currentOption$data$l !== void 0 ? _currentOption$data$l : '';
8731
8764
  return jsx(Constraints.Horizontal, {
8732
8765
  max: "scale",
8733
- children: currentOption.loading ? jsx(CenteredLoadingSpinner, {}) : jsxs(Spacings.Stack, {
8766
+ children: jsxs(Spacings.Stack, {
8734
8767
  scale: "xs",
8735
8768
  children: [jsx(CustomFieldTooltip, {
8736
8769
  title: tooltipTitle,
@@ -8742,7 +8775,7 @@ var CustomerGroupPickerInput = function CustomerGroupPickerInput(_ref) {
8742
8775
  defaultOptions: true,
8743
8776
  showOptionGroupDivider: true,
8744
8777
  isClearable: isClearable,
8745
- isReadOnly: isReadOnly,
8778
+ isReadOnly: isReadOnly || currentOption.loading,
8746
8779
  isDisabled: isDisabled,
8747
8780
  components: {
8748
8781
  Option: Option$2
@@ -12713,7 +12746,7 @@ var StoreSelectField = function StoreSelectField(props) {
12713
12746
  hintIcon: props.hintIcon,
12714
12747
  htmlFor: props.id,
12715
12748
  hasRequiredIndicator: props.isRequired,
12716
- isBold: props.isBold
12749
+ isBold: true
12717
12750
  }), jsx(StoreSelectInput, _objectSpread$a(_objectSpread$a({
12718
12751
  projectKey: props.projectKey,
12719
12752
  id: props.id,
package/dist/styles.css CHANGED
@@ -18,15 +18,21 @@
18
18
  :where(html[data-theme='default']) .search-input-module__input-container___mJnyZ {
19
19
  height: var(--spacing-xl);
20
20
  }
21
- :where(html[data-theme='test']) .search-input-module__input-container___mJnyZ {
22
- height: auto;
23
- }
24
21
 
25
22
  :where(html[data-theme='default']) .search-input-module__input-container___mJnyZ {
26
23
  border-color: var(--color-neutral-60);
27
24
  }
25
+
28
26
  :where(html[data-theme='test']) .search-input-module__input-container___mJnyZ {
29
27
  border-color: var(--border-color-for-input);
28
+ height: var(--height-for-input);
29
+ }
30
+
31
+ :where(html[data-theme='test']) .search-input-module__input-container___mJnyZ > input::placeholder {
32
+ font-weight: var(--font-weight-400);
33
+ font-size: var(--font-size-for-input);
34
+ font-family: var(--font-family);
35
+ color: var(--color-neutral-60);
30
36
  }
31
37
 
32
38
  .search-input-module__input-container___mJnyZ > input {
@@ -64,6 +70,7 @@
64
70
  :where(html[data-theme='default']) .search-input-module__search-icon-container___cbHQY {
65
71
  top: 5px;
66
72
  }
73
+
67
74
  :where(html[data-theme='test']) .search-input-module__search-icon-container___cbHQY {
68
75
  top: 8px;
69
76
  }
@@ -140,6 +147,7 @@
140
147
  position: relative;
141
148
  display: flex;
142
149
  z-index: 3;
150
+ max-width: var(--constraint-15);
143
151
  }
144
152
 
145
153
  .selectable-field-search-input-module__search-mode-menu___Od6Le {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@commercetools-frontend/experimental-components",
3
- "version": "3.1.0",
3
+ "version": "3.1.1",
4
4
  "description": "",
5
5
  "main": "dist/commercetools-frontend-experimental-components.cjs.js",
6
6
  "module": "dist/commercetools-frontend-experimental-components.esm.js",
@@ -12,18 +12,18 @@
12
12
  "dependencies": {
13
13
  "@babel/runtime": "^7.21.0",
14
14
  "@babel/runtime-corejs3": "^7.21.0",
15
- "@commercetools-frontend/actions-global": "21.23.8",
16
- "@commercetools-frontend/application-components": "21.23.8",
17
- "@commercetools-frontend/application-shell": "21.23.8",
18
- "@commercetools-frontend/application-shell-connectors": "21.23.8",
19
- "@commercetools-frontend/constants": "21.23.8",
20
- "@commercetools-frontend/l10n": "21.23.8",
21
- "@commercetools-frontend/sdk": "21.23.8",
22
- "@commercetools-frontend/sentry": "21.23.8",
23
- "@commercetools-frontend/ui-kit": "15.13.1",
24
- "@commercetools-uikit/design-system": "15.13.1",
25
- "@commercetools-uikit/select-utils": "15.13.1",
26
- "@commercetools-uikit/utils": "15.13.1",
15
+ "@commercetools-frontend/actions-global": "21.23.10",
16
+ "@commercetools-frontend/application-components": "21.23.10",
17
+ "@commercetools-frontend/application-shell": "21.23.10",
18
+ "@commercetools-frontend/application-shell-connectors": "21.23.10",
19
+ "@commercetools-frontend/constants": "21.23.10",
20
+ "@commercetools-frontend/l10n": "21.23.10",
21
+ "@commercetools-frontend/sdk": "21.23.10",
22
+ "@commercetools-frontend/sentry": "21.23.10",
23
+ "@commercetools-frontend/ui-kit": "15.13.2",
24
+ "@commercetools-uikit/design-system": "15.13.2",
25
+ "@commercetools-uikit/select-utils": "15.13.2",
26
+ "@commercetools-uikit/utils": "15.13.2",
27
27
  "@emotion/react": "11.10.6",
28
28
  "classnames": "2.3.2",
29
29
  "cleave.js": "1.5.10",
@@ -71,12 +71,12 @@
71
71
  "uuid": "8.3.2"
72
72
  },
73
73
  "devDependencies": {
74
- "@apollo/client": "3.7.9",
74
+ "@apollo/client": "3.7.10",
75
75
  "@commercetools-local/test-data": "workspace:*",
76
76
  "@commercetools-local/test-utils": "workspace:*",
77
- "@commercetools-test-data/channel": "4.10.0",
78
- "@commercetools-test-data/commons": "4.10.0",
79
- "@commercetools-test-data/core": "4.10.0",
77
+ "@commercetools-test-data/channel": "4.11.1",
78
+ "@commercetools-test-data/commons": "4.11.1",
79
+ "@commercetools-test-data/core": "4.11.1",
80
80
  "@testing-library/react": "12.1.5",
81
81
  "@testing-library/react-hooks": "8.0.1",
82
82
  "enzyme": "3.11.0",