@qualtrics/plugin-ui-react 1.4.0-alpha.3 → 1.4.0-alpha.5

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 (9) hide show
  1. package/dist/common/field-mapper/field-mapper-key/field-mapper-key.d.ts +2 -2
  2. package/dist/common/field-mapper/field-mapper-row/field-mapper-row.d.ts +1 -3
  3. package/dist/common/field-mapper/field-mapper-value/field-mapper-value.d.ts +4 -3
  4. package/dist/common/field-mapper/field-mapper.d.ts +2 -4
  5. package/dist/main.es.js +24 -18
  6. package/dist/main.es.js.map +1 -0
  7. package/dist/main.js +23 -17
  8. package/dist/main.js.map +1 -0
  9. package/package.json +1 -1
package/dist/main.js CHANGED
@@ -1,4 +1,4 @@
1
- /*! @license @qualtrics/plugin-ui-react 1.4.0-alpha.3
1
+ /*! @license @qualtrics/plugin-ui-react 1.4.0-alpha.4
2
2
  Qualtrics Software License Agreement
3
3
 
4
4
  1. General.
@@ -3333,10 +3333,10 @@ function isString(val) {
3333
3333
  return (typeof val) === 'string';
3334
3334
  }
3335
3335
 
3336
- var css_248z$2 = ".field-mapper-row .field-mapper-row-content {\n display: flex; }\n .field-mapper-row .field-mapper-row-content .field-mapper-key-container {\n flex: 4; }\n .field-mapper-row .field-mapper-row-content .field-mapper-value-container {\n flex: 7; }\n .field-mapper-row .field-mapper-row-content .remove-row-container {\n min-height: 100%;\n padding: 8px 12px;\n border-left: 1px solid #E5E5E5; }\n .field-mapper-row .field-mapper-row-content .remove-row-container.hide-remove-button {\n border: 0; }\n .field-mapper-row .field-mapper-row-content .remove-row-container .empty-remove-button {\n min-width: 36px; }\n";
3336
+ var css_248z$2 = ".field-mapper-row .field-mapper-row-content {\n display: flex;\n align-items: center; }\n .field-mapper-row .field-mapper-row-content .field-mapper-key {\n flex: 4;\n min-width: 33%; }\n .field-mapper-row .field-mapper-row-content .field-mapper-value {\n flex: 7; }\n .field-mapper-row .field-mapper-row-content .remove-row-container {\n min-height: 100%;\n padding: 8px 12px;\n border-left: 1px solid #E5E5E5; }\n .field-mapper-row .field-mapper-row-content .remove-row-container.hide-remove-button {\n border: 0; }\n .field-mapper-row .field-mapper-row-content .remove-row-container .empty-remove-button {\n min-width: 36px; }\n";
3337
3337
  styleInject(css_248z$2);
3338
3338
 
3339
- var css_248z$1 = ".field-mapper-key {\n display: flex;\n align-items: center;\n padding-top: 8px;\n padding-right: 12px;\n padding-bottom: 8px;\n padding-left: 12px;\n height: 100%; }\n .field-mapper-key .required-field-container {\n display: flex; }\n .field-mapper-key .required-field-container .required-field-text {\n min-width: 0;\n font-size: 14px; }\n .field-mapper-key .required-field-container .required-field-symbol {\n margin-top: -2px; }\n";
3339
+ var css_248z$1 = ".field-mapper-key {\n padding-top: 8px;\n padding-right: 12px;\n padding-bottom: 8px;\n padding-left: 12px; }\n .field-mapper-key .field-mapper-key-select-container .field-mapper-key-dropdown {\n width: 100%; }\n .field-mapper-key .field-mapper-key-select-container .field-mapper-key-dropdown-button {\n width: 100%; }\n .field-mapper-key .field-mapper-key-select-container .field-mapper-key-disabled {\n opacity: 1;\n /*\n Styles below are copied \n verbatim from the styles on the <span> element\n in the QDS Dropdwon & DropdownButton components\n */\n /*[BEGIN COPIED STYLES]*/\n line-height: normal;\n padding: 0 4px 0 12px;\n display: inline-flex;\n justify-content: space-between;\n align-items: center;\n background-color: #fafafa;\n color: #32363a;\n border-color: rgba(137, 137, 137, 0.6);\n /*[END COPIED STYLES]*/ }\n .field-mapper-key .field-mapper-key-select-container .field-mapper-key-disabled .field-mapper-key-disabled-text {\n /*[BEGIN COPIED STYLES]*/\n font-size: 14px;\n white-space: nowrap;\n text-overflow: ellipsis;\n min-height: 10px;\n /*[END COPIED STYLES]*/\n opacity: 0.9; }\n .field-mapper-key .field-mapper-key-select-container .field-mapper-key-disabled .field-mapper-key-disabled-icon {\n /*[BEGIN COPIED STYLES]*/\n fill: #515559;\n /*[END COPIED STYLES]*/\n opacity: 0.6; }\n .field-mapper-key .field-mapper-key-select-container .required-field-container {\n display: flex; }\n .field-mapper-key .field-mapper-key-select-container .required-field-container .required-field-text {\n min-width: 0;\n font-size: 14px; }\n .field-mapper-key .field-mapper-key-select-container .required-field-container .required-field-symbol {\n margin-top: -2px; }\n";
3340
3340
  styleInject(css_248z$1);
3341
3341
 
3342
3342
  var FieldMapperKey = React__default["default"].forwardRef(function FieldMapperKey(props, ref) {
@@ -3349,16 +3349,18 @@ var FieldMapperKey = React__default["default"].forwardRef(function FieldMapperKe
3349
3349
  onFieldKeyChange = (typeof props.onChange === 'function')
3350
3350
  ? props.onChange
3351
3351
  : function () { return undefined; };
3352
- return (React__default["default"].createElement("div", { className: "field-mapper-key" + (props.className ? ' ' + props.className : ''), ref: ref }, (React__default["default"].Children.count(props.children) > 0)
3352
+ return (React__default["default"].createElement("div", { className: 'field-mapper-key' + (props.className ? ' ' + props.className : ''), ref: ref }, (React__default["default"].Children.count(props.children) > 0)
3353
3353
  ? props.children
3354
- : (React__default["default"].createElement("div", { className: "field-mapper-key-dropdown" }, fieldMapperKeyDropdownDisabled()
3355
- ? (React__default["default"].createElement(uiReact.Button, { disabled: true }, (_a = props.selectedField) === null || _a === void 0 ? void 0 : _a.label))
3354
+ : (React__default["default"].createElement("div", { className: "field-mapper-key-select-container" }, fieldMapperKeyDropdownDisabled()
3355
+ ? (React__default["default"].createElement(uiReact.Button, { className: "field-mapper-key-disabled", disabled: true, full: true },
3356
+ React__default["default"].createElement("div", { className: "field-mapper-key-disabled-text" }, (_a = props.selectedField) === null || _a === void 0 ? void 0 : _a.label),
3357
+ React__default["default"].createElement(icons.ChevronDownIcon, { className: "field-mapper-key-disabled-icon", size: "medium", "aria-hidden": "true" })))
3356
3358
  : (((_b = props.selectedField) === null || _b === void 0 ? void 0 : _b.required) === true)
3357
3359
  ? (React__default["default"].createElement("div", { className: "required-field-container" },
3358
3360
  React__default["default"].createElement("div", { className: "required-field-text" }, (_c = props.selectedField) === null || _c === void 0 ? void 0 : _c.label),
3359
3361
  React__default["default"].createElement("div", { className: "required-field-symbol" }, "*")))
3360
- : (React__default["default"].createElement(uiReact.Dropdown, { onChange: handleFieldKeyChange },
3361
- React__default["default"].createElement(uiReact.DropdownButton, { label: (_d = props.selectedField) === null || _d === void 0 ? void 0 : _d.label }),
3362
+ : (React__default["default"].createElement(uiReact.Dropdown, { className: "field-mapper-key-dropdown", onChange: handleFieldKeyChange },
3363
+ React__default["default"].createElement(uiReact.DropdownButton, { className: "field-mapper-key-dropdown-button", label: (_d = props.selectedField) === null || _d === void 0 ? void 0 : _d.label }),
3362
3364
  React__default["default"].createElement(uiReact.DropdownList, null, (_e = props.availableFields) === null || _e === void 0 ? void 0 : _e.map(function (fieldItem) {
3363
3365
  return (React__default["default"].createElement(uiReact.DropdownOption, { key: fieldItem.key, label: fieldItem.label, value: fieldItem.value }));
3364
3366
  }))))))));
@@ -3373,25 +3375,26 @@ var FieldMapperKey = React__default["default"].forwardRef(function FieldMapperKe
3373
3375
  onFieldKeyChange(props.selectedField, foundSelectedFieldKey);
3374
3376
  }
3375
3377
  function fieldMapperKeyDropdownDisabled() {
3378
+ var _a;
3376
3379
  var hasAvailableFields;
3377
3380
  hasAvailableFields = (availableFields === null || availableFields === void 0 ? void 0 : availableFields.length) > 0;
3378
- return !hasAvailableFields;
3381
+ return !hasAvailableFields && !((_a = props.selectedField) === null || _a === void 0 ? void 0 : _a.required);
3379
3382
  }
3380
3383
  });
3381
3384
 
3382
- var css_248z = ".field-mapper-value {\n border-left: 1px solid #E5E5E5;\n padding-top: 8px;\n padding-right: 12px;\n padding-bottom: 8px;\n padding-left: 12px;\n height: 100%; }\n";
3385
+ var css_248z = ".field-mapper-value {\n border-left: 1px solid #E5E5E5;\n padding-top: 8px;\n padding-right: 12px;\n padding-bottom: 8px;\n padding-left: 12px; }\n";
3383
3386
  styleInject(css_248z);
3384
3387
 
3385
3388
  var FieldMapperValue = React__default["default"].forwardRef(function FieldMapperValue(props, ref) {
3386
3389
  var _a, _b;
3387
- return (React__default["default"].createElement("div", { className: "field-mapper-value" + (props.className ? ' ' + props.className : ''), ref: ref }, (React__default["default"].Children.count(props.children) > 0)
3390
+ return (React__default["default"].createElement("div", { className: 'field-mapper-value' + (props.className ? ' ' + props.className : ''), ref: ref }, (React__default["default"].Children.count(props.children) > 0)
3388
3391
  ? props.children
3389
3392
  : (React__default["default"].createElement("div", { className: "piped-text-input-value-container" },
3390
- React__default["default"].createElement(PipedTextInput, { items: (_a = props.pipedTextItems) !== null && _a !== void 0 ? _a : [], onChange: (_b = props.onChange) !== null && _b !== void 0 ? _b : (function () { return undefined; }) })))));
3393
+ React__default["default"].createElement(PipedTextInput, { items: (_a = props.pipedTextItems) !== null && _a !== void 0 ? _a : [], onChange: (_b = props.onChange) !== null && _b !== void 0 ? _b : (function () { return undefined; }), value: props.inputValue })))));
3391
3394
  });
3392
3395
 
3393
3396
  var FieldMapperRow = React__default["default"].forwardRef(function FieldMapperRow(props, ref) {
3394
- return (React__default["default"].createElement("div", { className: "field-mapper-row" + (props.className ? ' ' + props.className : ''), ref: ref },
3397
+ return (React__default["default"].createElement("div", { className: 'field-mapper-row' + (props.className ? ' ' + props.className : ''), ref: ref },
3395
3398
  React__default["default"].createElement("div", { className: "field-mapper-row-content" },
3396
3399
  React__default["default"].Children.map(props.children, function (child) {
3397
3400
  return getWrappedKeyValue(child);
@@ -3437,10 +3440,11 @@ var FieldMapperRow = React__default["default"].forwardRef(function FieldMapperRo
3437
3440
  }
3438
3441
  if (React__default["default"].isValidElement(child)
3439
3442
  && (includeAvailableFields
3440
- || includeSelectedField)) {
3443
+ || includeSelectedField
3444
+ || includeOnFieldKeyChange)) {
3441
3445
  child = React__default["default"].cloneElement(child, fieldMapperKeyProps);
3442
3446
  }
3443
- wrappedEl = (React__default["default"].createElement("div", { className: "field-mapper-key-container" }, child));
3447
+ wrappedEl = child;
3444
3448
  break;
3445
3449
  case FieldMapperValue:
3446
3450
  includePipedTextItems = (!Array.isArray(child.props.pipedTextItems)
@@ -3456,10 +3460,11 @@ var FieldMapperRow = React__default["default"].forwardRef(function FieldMapperRo
3456
3460
  };
3457
3461
  }
3458
3462
  if (React__default["default"].isValidElement(child)
3459
- && includePipedTextItems) {
3463
+ && (includePipedTextItems
3464
+ || includeOnFieldValueChange)) {
3460
3465
  child = React__default["default"].cloneElement(child, fieldMapperValueProps);
3461
3466
  }
3462
- wrappedEl = (React__default["default"].createElement("div", { className: "field-mapper-value-container" }, child));
3467
+ wrappedEl = child;
3463
3468
  break;
3464
3469
  default:
3465
3470
  wrappedEl = child;
@@ -3586,3 +3591,4 @@ exports.Popover = Popover;
3586
3591
  exports.SelectItem = SelectItem;
3587
3592
  exports.TaskFields = TaskFields;
3588
3593
  exports.languageCodeAdapter = languageCodeAdapter;
3594
+ //# sourceMappingURL=main.js.map