@qualtrics/plugin-ui-react 1.4.0-alpha.3 → 1.4.0-alpha.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/common/field-mapper/field-mapper-key/field-mapper-key.d.ts +2 -2
- package/dist/common/field-mapper/field-mapper-row/field-mapper-row.d.ts +1 -3
- package/dist/common/field-mapper/field-mapper-value/field-mapper-value.d.ts +4 -3
- package/dist/common/field-mapper/field-mapper.d.ts +2 -4
- package/dist/main.es.js +23 -18
- package/dist/main.js +22 -17
- package/package.json +1 -1
|
@@ -8,5 +8,5 @@ export declare type FieldMapperKeyProps = {
|
|
|
8
8
|
availableFields?: FieldMapperItem[];
|
|
9
9
|
onChange?: (prevField: FieldMapperItem, field: FieldMapperItem) => void;
|
|
10
10
|
};
|
|
11
|
-
export declare type FieldMapperKeyRefProps = FieldMapperKeyProps
|
|
12
|
-
export declare const FieldMapperKey: React.ForwardRefExoticComponent<
|
|
11
|
+
export declare type FieldMapperKeyRefProps = FieldMapperKeyProps;
|
|
12
|
+
export declare const FieldMapperKey: React.ForwardRefExoticComponent<FieldMapperKeyProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -13,6 +13,4 @@ export declare type FieldMapperRowProps = {
|
|
|
13
13
|
pipedTextItems?: PipedTextItem[];
|
|
14
14
|
showRemove?: boolean;
|
|
15
15
|
};
|
|
16
|
-
declare
|
|
17
|
-
export declare const FieldMapperRow: React.ForwardRefExoticComponent<Pick<FieldMapperRowRefProps, "className" | "children" | "selectedField" | "onFieldKeyChange" | "onFieldValueChange" | "onFieldRemove" | "availableFields" | "pipedTextItems" | "showRemove" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<HTMLDivElement>>;
|
|
18
|
-
export {};
|
|
16
|
+
export declare const FieldMapperRow: React.ForwardRefExoticComponent<FieldMapperRowProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -4,8 +4,9 @@ import { PipedTextItem } from '../../../lib/models/piped-text';
|
|
|
4
4
|
export declare type FieldMapperValueProps = {
|
|
5
5
|
children?: React.ReactNode;
|
|
6
6
|
className?: string;
|
|
7
|
-
|
|
7
|
+
inputValue?: string;
|
|
8
8
|
pipedTextItems?: PipedTextItem[];
|
|
9
|
+
onChange?: (value: string) => void;
|
|
9
10
|
};
|
|
10
|
-
export declare type FieldMapperValueRefProps = FieldMapperValueProps
|
|
11
|
-
export declare const FieldMapperValue: React.ForwardRefExoticComponent<
|
|
11
|
+
export declare type FieldMapperValueRefProps = FieldMapperValueProps;
|
|
12
|
+
export declare const FieldMapperValue: React.ForwardRefExoticComponent<FieldMapperValueProps & React.RefAttributes<HTMLDivElement>>;
|
|
@@ -3,18 +3,16 @@ import React from 'react';
|
|
|
3
3
|
import { FieldMapperItem } from '../../lib/models/field-mapper-item';
|
|
4
4
|
import { PipedTextItem } from '../../lib/models/piped-text';
|
|
5
5
|
export declare type FieldMapperProps = {
|
|
6
|
-
className: string;
|
|
7
6
|
children: React.ReactNode;
|
|
8
7
|
addFieldLabel: string;
|
|
9
8
|
onFieldAdd: (fieldItem: FieldMapperItem) => void;
|
|
10
9
|
onFieldRemove: (fieldItem: FieldMapperItem) => void;
|
|
11
10
|
onFieldKeyChange: (prevField: FieldMapperItem, field: FieldMapperItem) => void;
|
|
12
11
|
onFieldValueChange: (fieldItem: FieldMapperItem, inputValue: string) => void;
|
|
12
|
+
className?: string;
|
|
13
13
|
fieldKeysHeaderText?: string;
|
|
14
14
|
fieldValuesHeaderText?: string;
|
|
15
15
|
availableFields?: FieldMapperItem[];
|
|
16
16
|
pipedTextItems?: PipedTextItem[];
|
|
17
17
|
};
|
|
18
|
-
declare
|
|
19
|
-
export declare const FieldMapper: React.ForwardRefExoticComponent<Pick<FieldMapperHtmlProps, "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "cite" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "data" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "form" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "label" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "pattern" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "span" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "summary" | "target" | "type" | "useMap" | "value" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<HTMLDivElement>>;
|
|
20
|
-
export {};
|
|
18
|
+
export declare const FieldMapper: React.ForwardRefExoticComponent<FieldMapperProps & React.RefAttributes<HTMLDivElement>>;
|
package/dist/main.es.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! @license @qualtrics/plugin-ui-react 1.4.0-alpha.
|
|
1
|
+
/*! @license @qualtrics/plugin-ui-react 1.4.0-alpha.6
|
|
2
2
|
Qualtrics Software License Agreement
|
|
3
3
|
|
|
4
4
|
1. General.
|
|
@@ -58,7 +58,7 @@ import 'core-js/modules/web.dom-collections.for-each.js';
|
|
|
58
58
|
import React, { Component, useState, useEffect, useRef, useCallback } from 'react';
|
|
59
59
|
import _get from 'lodash.get';
|
|
60
60
|
import { Button, Icon, IconTypes, InputGroup, Input, LoadingSpinner, IconButton, Tooltip, SelectMenu, MenuItem, Label, FormField, InputField, Dropdown, DropdownButton, DropdownList, DropdownOption } from '@qualtrics/ui-react';
|
|
61
|
-
import { ErrorIcon, PipedTextIcon, RemoveItemIcon, SuccessIcon, CheckIcon, AddIcon } from '@qualtrics/ui-react/icons';
|
|
61
|
+
import { ErrorIcon, PipedTextIcon, RemoveItemIcon, SuccessIcon, CheckIcon, ChevronDownIcon, AddIcon } from '@qualtrics/ui-react/icons';
|
|
62
62
|
import 'core-js/modules/es.string.anchor.js';
|
|
63
63
|
import _cloneDeep from 'lodash.clonedeep';
|
|
64
64
|
import 'core-js/modules/es.array.concat.js';
|
|
@@ -3320,10 +3320,10 @@ function isString(val) {
|
|
|
3320
3320
|
return (typeof val) === 'string';
|
|
3321
3321
|
}
|
|
3322
3322
|
|
|
3323
|
-
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
|
|
3323
|
+
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";
|
|
3324
3324
|
styleInject(css_248z$2);
|
|
3325
3325
|
|
|
3326
|
-
var css_248z$1 = ".field-mapper-key {\n
|
|
3326
|
+
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";
|
|
3327
3327
|
styleInject(css_248z$1);
|
|
3328
3328
|
|
|
3329
3329
|
var FieldMapperKey = React.forwardRef(function FieldMapperKey(props, ref) {
|
|
@@ -3336,16 +3336,18 @@ var FieldMapperKey = React.forwardRef(function FieldMapperKey(props, ref) {
|
|
|
3336
3336
|
onFieldKeyChange = (typeof props.onChange === 'function')
|
|
3337
3337
|
? props.onChange
|
|
3338
3338
|
: function () { return undefined; };
|
|
3339
|
-
return (React.createElement("div", { className:
|
|
3339
|
+
return (React.createElement("div", { className: 'field-mapper-key' + (props.className ? ' ' + props.className : ''), ref: ref }, (React.Children.count(props.children) > 0)
|
|
3340
3340
|
? props.children
|
|
3341
|
-
: (React.createElement("div", { className: "field-mapper-key-
|
|
3342
|
-
? (React.createElement(Button, { disabled: true
|
|
3341
|
+
: (React.createElement("div", { className: "field-mapper-key-select-container" }, fieldMapperKeyDropdownDisabled()
|
|
3342
|
+
? (React.createElement(Button, { className: "field-mapper-key-disabled", disabled: true, full: true },
|
|
3343
|
+
React.createElement("div", { className: "field-mapper-key-disabled-text" }, (_a = props.selectedField) === null || _a === void 0 ? void 0 : _a.label),
|
|
3344
|
+
React.createElement(ChevronDownIcon, { className: "field-mapper-key-disabled-icon", size: "medium", "aria-hidden": "true" })))
|
|
3343
3345
|
: (((_b = props.selectedField) === null || _b === void 0 ? void 0 : _b.required) === true)
|
|
3344
3346
|
? (React.createElement("div", { className: "required-field-container" },
|
|
3345
3347
|
React.createElement("div", { className: "required-field-text" }, (_c = props.selectedField) === null || _c === void 0 ? void 0 : _c.label),
|
|
3346
3348
|
React.createElement("div", { className: "required-field-symbol" }, "*")))
|
|
3347
|
-
: (React.createElement(Dropdown, { onChange: handleFieldKeyChange },
|
|
3348
|
-
React.createElement(DropdownButton, { label: (_d = props.selectedField) === null || _d === void 0 ? void 0 : _d.label }),
|
|
3349
|
+
: (React.createElement(Dropdown, { className: "field-mapper-key-dropdown", onChange: handleFieldKeyChange },
|
|
3350
|
+
React.createElement(DropdownButton, { className: "field-mapper-key-dropdown-button", label: (_d = props.selectedField) === null || _d === void 0 ? void 0 : _d.label }),
|
|
3349
3351
|
React.createElement(DropdownList, null, (_e = props.availableFields) === null || _e === void 0 ? void 0 : _e.map(function (fieldItem) {
|
|
3350
3352
|
return (React.createElement(DropdownOption, { key: fieldItem.key, label: fieldItem.label, value: fieldItem.value }));
|
|
3351
3353
|
}))))))));
|
|
@@ -3360,25 +3362,26 @@ var FieldMapperKey = React.forwardRef(function FieldMapperKey(props, ref) {
|
|
|
3360
3362
|
onFieldKeyChange(props.selectedField, foundSelectedFieldKey);
|
|
3361
3363
|
}
|
|
3362
3364
|
function fieldMapperKeyDropdownDisabled() {
|
|
3365
|
+
var _a;
|
|
3363
3366
|
var hasAvailableFields;
|
|
3364
3367
|
hasAvailableFields = (availableFields === null || availableFields === void 0 ? void 0 : availableFields.length) > 0;
|
|
3365
|
-
return !hasAvailableFields;
|
|
3368
|
+
return !hasAvailableFields && !((_a = props.selectedField) === null || _a === void 0 ? void 0 : _a.required);
|
|
3366
3369
|
}
|
|
3367
3370
|
});
|
|
3368
3371
|
|
|
3369
|
-
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
|
|
3372
|
+
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";
|
|
3370
3373
|
styleInject(css_248z);
|
|
3371
3374
|
|
|
3372
3375
|
var FieldMapperValue = React.forwardRef(function FieldMapperValue(props, ref) {
|
|
3373
3376
|
var _a, _b;
|
|
3374
|
-
return (React.createElement("div", { className:
|
|
3377
|
+
return (React.createElement("div", { className: 'field-mapper-value' + (props.className ? ' ' + props.className : ''), ref: ref }, (React.Children.count(props.children) > 0)
|
|
3375
3378
|
? props.children
|
|
3376
3379
|
: (React.createElement("div", { className: "piped-text-input-value-container" },
|
|
3377
|
-
React.createElement(PipedTextInput, { items: (_a = props.pipedTextItems) !== null && _a !== void 0 ? _a : [], onChange: (_b = props.onChange) !== null && _b !== void 0 ? _b : (function () { return undefined; }) })))));
|
|
3380
|
+
React.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 })))));
|
|
3378
3381
|
});
|
|
3379
3382
|
|
|
3380
3383
|
var FieldMapperRow = React.forwardRef(function FieldMapperRow(props, ref) {
|
|
3381
|
-
return (React.createElement("div", { className:
|
|
3384
|
+
return (React.createElement("div", { className: 'field-mapper-row' + (props.className ? ' ' + props.className : ''), ref: ref },
|
|
3382
3385
|
React.createElement("div", { className: "field-mapper-row-content" },
|
|
3383
3386
|
React.Children.map(props.children, function (child) {
|
|
3384
3387
|
return getWrappedKeyValue(child);
|
|
@@ -3424,10 +3427,11 @@ var FieldMapperRow = React.forwardRef(function FieldMapperRow(props, ref) {
|
|
|
3424
3427
|
}
|
|
3425
3428
|
if (React.isValidElement(child)
|
|
3426
3429
|
&& (includeAvailableFields
|
|
3427
|
-
|| includeSelectedField
|
|
3430
|
+
|| includeSelectedField
|
|
3431
|
+
|| includeOnFieldKeyChange)) {
|
|
3428
3432
|
child = React.cloneElement(child, fieldMapperKeyProps);
|
|
3429
3433
|
}
|
|
3430
|
-
wrappedEl =
|
|
3434
|
+
wrappedEl = child;
|
|
3431
3435
|
break;
|
|
3432
3436
|
case FieldMapperValue:
|
|
3433
3437
|
includePipedTextItems = (!Array.isArray(child.props.pipedTextItems)
|
|
@@ -3443,10 +3447,11 @@ var FieldMapperRow = React.forwardRef(function FieldMapperRow(props, ref) {
|
|
|
3443
3447
|
};
|
|
3444
3448
|
}
|
|
3445
3449
|
if (React.isValidElement(child)
|
|
3446
|
-
&& includePipedTextItems
|
|
3450
|
+
&& (includePipedTextItems
|
|
3451
|
+
|| includeOnFieldValueChange)) {
|
|
3447
3452
|
child = React.cloneElement(child, fieldMapperValueProps);
|
|
3448
3453
|
}
|
|
3449
|
-
wrappedEl =
|
|
3454
|
+
wrappedEl = child;
|
|
3450
3455
|
break;
|
|
3451
3456
|
default:
|
|
3452
3457
|
wrappedEl = child;
|
package/dist/main.js
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/*! @license @qualtrics/plugin-ui-react 1.4.0-alpha.
|
|
1
|
+
/*! @license @qualtrics/plugin-ui-react 1.4.0-alpha.6
|
|
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
|
|
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
|
|
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:
|
|
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-
|
|
3355
|
-
? (React__default["default"].createElement(uiReact.Button, { disabled: true
|
|
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
|
|
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:
|
|
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:
|
|
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 =
|
|
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 =
|
|
3467
|
+
wrappedEl = child;
|
|
3463
3468
|
break;
|
|
3464
3469
|
default:
|
|
3465
3470
|
wrappedEl = child;
|