@kelvininc/react-ui-components
Version:
Kelvin UI Components for React applications
837 lines (799 loc) • 106 kB
JavaScript
'use strict';
var uiComponents = require('@kelvininc/ui-components');
var tslib = require('tslib');
var React = require('react');
var ReactDOM = require('react-dom');
var loader = require('@kelvininc/ui-components/loader');
var core = require('@rjsf/core');
var utils = require('@rjsf/utils');
var classNames = require('classnames');
var cloneDeep = require('lodash/cloneDeep.js');
var isEmpty = require('lodash/isEmpty.js');
var isEqualWith = require('lodash/isEqualWith.js');
var throttle = require('lodash/throttle.js');
var get = require('lodash/get.js');
var isNil = require('lodash/isNil.js');
var isString = require('lodash/isString.js');
var isArray = require('lodash/isArray.js');
var merge = require('lodash/merge.js');
var isBoolean = require('lodash/isBoolean.js');
var validatorAjv8 = require('@rjsf/validator-ajv8');
var Editor = require('@monaco-editor/react');
const dashToPascalCase = (str) => str
.toLowerCase()
.split('-')
.map((segment) => segment.charAt(0).toUpperCase() + segment.slice(1))
.join('');
const camelToDashCase = (str) => str.replace(/([A-Z])/g, (m) => `-${m[0].toLowerCase()}`);
const attachProps = (node, newProps, oldProps = {}) => {
if (node instanceof Element) {
const className = getClassName(node.classList, newProps, oldProps);
if (className !== '') {
node.className = className;
}
Object.keys(newProps).forEach((name) => {
if (name === 'children' ||
name === 'style' ||
name === 'ref' ||
name === 'class' ||
name === 'className' ||
name === 'forwardedRef') {
return;
}
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
const eventName = name.substring(2);
const eventNameLc = eventName[0].toLowerCase() + eventName.substring(1);
if (!isCoveredByReact(eventNameLc)) {
syncEvent(node, eventNameLc, newProps[name]);
}
}
else {
node[name] = newProps[name];
const propType = typeof newProps[name];
if (propType === 'string') {
node.setAttribute(camelToDashCase(name), newProps[name]);
}
}
});
}
};
const getClassName = (classList, newProps, oldProps) => {
const newClassProp = newProps.className || newProps.class;
const oldClassProp = oldProps.className || oldProps.class;
const currentClasses = arrayToMap(classList);
const incomingPropClasses = arrayToMap(newClassProp ? newClassProp.split(' ') : []);
const oldPropClasses = arrayToMap(oldClassProp ? oldClassProp.split(' ') : []);
const finalClassNames = [];
currentClasses.forEach((currentClass) => {
if (incomingPropClasses.has(currentClass)) {
finalClassNames.push(currentClass);
incomingPropClasses.delete(currentClass);
}
else if (!oldPropClasses.has(currentClass)) {
finalClassNames.push(currentClass);
}
});
incomingPropClasses.forEach((s) => finalClassNames.push(s));
return finalClassNames.join(' ');
};
const transformReactEventName = (eventNameSuffix) => {
switch (eventNameSuffix) {
case 'doubleclick':
return 'dblclick';
}
return eventNameSuffix;
};
const isCoveredByReact = (eventNameSuffix) => {
if (typeof document === 'undefined') {
return true;
}
else {
const eventName = 'on' + transformReactEventName(eventNameSuffix);
let isSupported = eventName in document;
if (!isSupported) {
const element = document.createElement('div');
element.setAttribute(eventName, 'return;');
isSupported = typeof element[eventName] === 'function';
}
return isSupported;
}
};
const syncEvent = (node, eventName, newEventHandler) => {
const eventStore = node.__events || (node.__events = {});
const oldEventHandler = eventStore[eventName];
if (oldEventHandler) {
node.removeEventListener(eventName, oldEventHandler);
}
node.addEventListener(eventName, (eventStore[eventName] = function handler(e) {
if (newEventHandler) {
newEventHandler.call(this, e);
}
}));
};
const arrayToMap = (arr) => {
const map = new Map();
arr.forEach((s) => map.set(s, s));
return map;
};
const setRef = (ref, value) => {
if (typeof ref === 'function') {
ref(value);
}
else if (ref != null) {
ref.current = value;
}
};
const mergeRefs = (...refs) => {
return (value) => {
refs.forEach((ref) => {
setRef(ref, value);
});
};
};
const createForwardRef = (ReactComponent, displayName) => {
const forwardRef = (props, ref) => {
return React.createElement(ReactComponent, Object.assign({}, props, { forwardedRef: ref }));
};
forwardRef.displayName = displayName;
return React.forwardRef(forwardRef);
};
const createReactComponent = (tagName, ReactComponentContext, manipulatePropsFunction, defineCustomElement) => {
const displayName = dashToPascalCase(tagName);
const ReactComponent = class extends React.Component {
constructor(props) {
super(props);
this.setComponentElRef = (element) => {
this.componentEl = element;
};
}
componentDidMount() {
this.componentDidUpdate(this.props);
}
componentDidUpdate(prevProps) {
attachProps(this.componentEl, this.props, prevProps);
}
render() {
const _a = this.props, { children, forwardedRef, style, className, ref } = _a, cProps = tslib.__rest(_a, ["children", "forwardedRef", "style", "className", "ref"]);
let propsToPass = Object.keys(cProps).reduce((acc, name) => {
const value = cProps[name];
if (name.indexOf('on') === 0 && name[2] === name[2].toUpperCase()) {
const eventName = name.substring(2).toLowerCase();
if (typeof document !== 'undefined' && isCoveredByReact(eventName)) {
acc[name] = value;
}
}
else {
const type = typeof value;
if (type === 'string' || type === 'boolean' || type === 'number') {
acc[camelToDashCase(name)] = value;
}
}
return acc;
}, {});
const newProps = Object.assign(Object.assign({}, propsToPass), { ref: mergeRefs(forwardedRef, this.setComponentElRef), style });
return React.createElement(tagName, newProps, children);
}
static get displayName() {
return displayName;
}
};
return createForwardRef(ReactComponent, displayName);
};
loader.defineCustomElements();
const KvAbsoluteTimePicker = createReactComponent('kv-absolute-time-picker');
const KvAbsoluteTimePickerDropdown = createReactComponent('kv-absolute-time-picker-dropdown');
const KvAbsoluteTimePickerDropdownInput = createReactComponent('kv-absolute-time-picker-dropdown-input');
const KvActionButton = createReactComponent('kv-action-button');
const KvActionButtonIcon = createReactComponent('kv-action-button-icon');
const KvActionButtonSplit = createReactComponent('kv-action-button-split');
const KvActionButtonText = createReactComponent('kv-action-button-text');
const KvAgree = createReactComponent('kv-agree');
const KvAlert = createReactComponent('kv-alert');
const KvBadge = createReactComponent('kv-badge');
const KvBoxBuild = createReactComponent('kv-box-build');
const KvBreadcrumb = createReactComponent('kv-breadcrumb');
const KvBreadcrumbItem = createReactComponent('kv-breadcrumb-item');
const KvBreadcrumbList = createReactComponent('kv-breadcrumb-list');
const KvCalendar = createReactComponent('kv-calendar');
const KvCalendarDay = createReactComponent('kv-calendar-day');
const KvCheckbox = createReactComponent('kv-checkbox');
const KvColorCircle = createReactComponent('kv-color-circle');
const KvCopyToClipboard = createReactComponent('kv-copy-to-clipboard');
const KvDateTimeInput = createReactComponent('kv-date-time-input');
const KvDescriptionList = createReactComponent('kv-description-list');
const KvDirtyDot = createReactComponent('kv-dirty-dot');
const KvDisagree = createReactComponent('kv-disagree');
const KvDropdown = createReactComponent('kv-dropdown');
const KvDropdownBase = createReactComponent('kv-dropdown-base');
const KvErrorState = createReactComponent('kv-error-state');
const KvErrorState404 = createReactComponent('kv-error-state-404');
const KvEsAssetPlaceholder = createReactComponent('kv-es-asset-placeholder');
const KvEsCheckbox = createReactComponent('kv-es-checkbox');
const KvEsComponentPlaceholder = createReactComponent('kv-es-component-placeholder');
const KvEsError404 = createReactComponent('kv-es-error-404');
const KvEsError503 = createReactComponent('kv-es-error-503');
const KvEsKelvinLogotype = createReactComponent('kv-es-kelvin-logotype');
const KvEsLock = createReactComponent('kv-es-lock');
const KvEsMetadata = createReactComponent('kv-es-metadata');
const KvEsPartPlaceholder = createReactComponent('kv-es-part-placeholder');
const KvEsSectionCell = createReactComponent('kv-es-section-cell');
const KvEsSectionSomethingwentwrong = createReactComponent('kv-es-section-somethingwentwrong');
const KvEsSectionThresholds = createReactComponent('kv-es-section-thresholds');
const KvEsSensorPlaceholder = createReactComponent('kv-es-sensor-placeholder');
const KvEsSlowy = createReactComponent('kv-es-slowy');
const KvEsSomethingwentwrong = createReactComponent('kv-es-somethingwentwrong');
const KvEsTableBuild = createReactComponent('kv-es-table-build');
const KvEsTableEmpty = createReactComponent('kv-es-table-empty');
const KvEsTableSearch = createReactComponent('kv-es-table-search');
const KvFeedbackForm = createReactComponent('kv-feedback-form');
const KvFormHelpText = createReactComponent('kv-form-help-text');
const KvFormLabel = createReactComponent('kv-form-label');
const KvIcon = createReactComponent('kv-icon');
const KvIllustration = createReactComponent('kv-illustration');
const KvIllustrationMessage = createReactComponent('kv-illustration-message');
const KvImpact = createReactComponent('kv-impact');
const KvImport = createReactComponent('kv-import');
const KvInfoLabel = createReactComponent('kv-info-label');
const KvInlineEditableField = createReactComponent('kv-inline-editable-field');
const KvInputWrapper = createReactComponent('kv-input-wrapper');
const KvLink = createReactComponent('kv-link');
const KvLoader = createReactComponent('kv-loader');
const KvModal = createReactComponent('kv-modal');
const KvMultiSelectDropdown = createReactComponent('kv-multi-select-dropdown');
const KvNoContentHere = createReactComponent('kv-no-content-here');
const KvNoDataAvailable = createReactComponent('kv-no-data-available');
const KvNoMatchingResults = createReactComponent('kv-no-matching-results');
const KvNoResultsFoundDark = createReactComponent('kv-no-results-found-dark');
const KvNoResultsFoundLight = createReactComponent('kv-no-results-found-light');
const KvPartyDance = createReactComponent('kv-party-dance');
const KvPortal = createReactComponent('kv-portal');
const KvRadio = createReactComponent('kv-radio');
const KvRadioList = createReactComponent('kv-radio-list');
const KvRadioListItem = createReactComponent('kv-radio-list-item');
const KvRange = createReactComponent('kv-range');
const KvRelativeTimePicker = createReactComponent('kv-relative-time-picker');
const KvSearch = createReactComponent('kv-search');
const KvSelect = createReactComponent('kv-select');
const KvSelectCreateOption = createReactComponent('kv-select-create-option');
const KvSelectMultiOptions = createReactComponent('kv-select-multi-options');
const KvSelectOption = createReactComponent('kv-select-option');
const KvSelectShortcutsLabel = createReactComponent('kv-select-shortcuts-label');
const KvSingleSelectDropdown = createReactComponent('kv-single-select-dropdown');
const KvSoftAgree = createReactComponent('kv-soft-agree');
const KvStateIndicator = createReactComponent('kv-state-indicator');
const KvStepBar = createReactComponent('kv-step-bar');
const KvStepIndicator = createReactComponent('kv-step-indicator');
const KvStepProgressBar = createReactComponent('kv-step-progress-bar');
const KvSummaryCard = createReactComponent('kv-summary-card');
const KvSwitchButton = createReactComponent('kv-switch-button');
const KvTabItem = createReactComponent('kv-tab-item');
const KvTabNavigation = createReactComponent('kv-tab-navigation');
const KvTableBuild = createReactComponent('kv-table-build');
const KvTag = createReactComponent('kv-tag');
const KvTagAlarm = createReactComponent('kv-tag-alarm');
const KvTagLetter = createReactComponent('kv-tag-letter');
const KvTagStatus = createReactComponent('kv-tag-status');
const KvTakeActions = createReactComponent('kv-take-actions');
const KvTextArea = createReactComponent('kv-text-area');
const KvTextField = createReactComponent('kv-text-field');
const KvTimePicker = createReactComponent('kv-time-picker');
const KvTimePickerSelectOption = createReactComponent('kv-time-picker-select-option');
const KvToaster = createReactComponent('kv-toaster');
const KvToggleButton = createReactComponent('kv-toggle-button');
const KvToggleButtonGroup = createReactComponent('kv-toggle-button-group');
const KvToggleSwitch = createReactComponent('kv-toggle-switch');
const KvToggleTip = createReactComponent('kv-toggle-tip');
const KvTooltip = createReactComponent('kv-tooltip');
const KvTooltipText = createReactComponent('kv-tooltip-text');
const KvTree = createReactComponent('kv-tree');
const KvTreeDropdown = createReactComponent('kv-tree-dropdown');
const KvTreeItem = createReactComponent('kv-tree-item');
const KvVirtualizedList = createReactComponent('kv-virtualized-list');
const KvWizard = createReactComponent('kv-wizard');
const KvWizardFooter = createReactComponent('kv-wizard-footer');
const KvWizardHeader = createReactComponent('kv-wizard-header');
const DEFAULT_ROOT_ID = 'toasters-root';
const TOASTER_TTL_MS = 5000;
const TOASTER_CONFIG = {
header: '',
type: uiComponents.EToasterType.Info,
ttl: TOASTER_TTL_MS
};
function useToaster(initialConfig = TOASTER_CONFIG, initialState = false) {
const [config, setConfig] = React.useState(initialConfig);
const [isOpen, setOpen] = React.useState(initialState);
const openToaster = React.useCallback((newConfig) => {
setOpen(true);
setConfig(Object.assign(Object.assign({}, initialConfig), newConfig));
}, [initialConfig]);
const closeToaster = React.useCallback(() => {
setOpen(false);
setConfig(initialConfig);
}, [initialConfig]);
return {
isOpen,
openToaster,
closeToaster,
config
};
}
function ToasterContainer(_a) {
var { rootId = DEFAULT_ROOT_ID, isOpen, children } = _a, otherProps = tslib.__rest(_a, ["rootId", "isOpen", "children"]);
if (!isOpen) {
return null;
}
return ReactDOM.createPortal(React.createElement(KvToaster, Object.assign({}, otherProps), children), document.getElementById(rootId));
}
function getScrollTop(element) {
if (element) {
const { scrollTop } = element;
return scrollTop;
}
return 0;
}
function getScrollBottom(element) {
if (element) {
const { scrollHeight, offsetHeight, scrollTop } = element;
return scrollHeight - offsetHeight - scrollTop;
}
return 0;
}
function getScrollLeft(element) {
if (element) {
const { scrollLeft } = element;
return scrollLeft;
}
return 0;
}
function getScrollRight(element) {
if (element) {
const { scrollWidth, offsetWidth, scrollLeft } = element;
return scrollWidth - offsetWidth - scrollLeft;
}
return 0;
}
const useScroll = (elementRef, throttleTime = 0) => {
const [scrollTop, setScrollTop] = React.useState(getScrollTop(elementRef));
const [scrollBottom, setScrollBottom] = React.useState(getScrollBottom(elementRef));
const [scrollLeft, setScrollLeft] = React.useState(getScrollLeft(elementRef));
const [scrollRight, setScrollRight] = React.useState(getScrollRight(elementRef));
const throttledUpdatePosition = React.useMemo(() => throttle(() => {
setScrollTop(getScrollTop(elementRef));
setScrollBottom(getScrollBottom(elementRef));
setScrollLeft(getScrollLeft(elementRef));
setScrollRight(getScrollRight(elementRef));
}, throttleTime), [elementRef, throttleTime]);
React.useEffect(() => {
if (!elementRef)
return;
elementRef.addEventListener('scroll', throttledUpdatePosition);
return () => {
elementRef.removeEventListener('scroll', throttledUpdatePosition);
};
}, [elementRef, throttledUpdatePosition]);
return { scrollTop, scrollBottom, scrollLeft, scrollRight };
};
const FONT_NOT_FOUND_ERROR = `Font was not found, make sure the font you're trying to use is correctly imported in your project`;
const useFontsApi = ({ fontFamily, fontSize }) => {
const fontName = React.useMemo(() => `${fontSize}px ${fontFamily}`, [fontFamily, fontSize]);
const [isFontLoaded, setFontLoaded] = React.useState(() => document.fonts.check(fontName));
const checkFont = React.useCallback(() => document.fonts.check(fontName), [fontName]);
const loadFont = React.useCallback(() => {
if (isFontLoaded)
return;
document.fonts
.load(fontName)
.then(() => setFontLoaded(true))
.catch(() => {
setFontLoaded(false);
throw new Error(FONT_NOT_FOUND_ERROR);
});
}, [fontName]);
return { isFontLoaded, checkFont, loadFont };
};
const SCROLL_OFFSET = 12;
const DEFAULT_VALUE_HELPER_PREFIX = 'Default value is: ';
const useFieldTemplateElement = (formRef) => {
var _a, _b;
const [fieldTemplate, setFieldTemplate] = React.useState(undefined);
React.useEffect(() => {
var _a, _b;
if ((_b = (_a = formRef === null || formRef === void 0 ? void 0 : formRef.current) === null || _a === void 0 ? void 0 : _a.formElement) === null || _b === void 0 ? void 0 : _b.current) {
setFieldTemplate(formRef.current.formElement.current.querySelector('[class^="FieldTemplate"]'));
return;
}
setFieldTemplate(undefined);
}, [(_b = (_a = formRef === null || formRef === void 0 ? void 0 : formRef.current) === null || _a === void 0 ? void 0 : _a.formElement) === null || _b === void 0 ? void 0 : _b.current]);
return fieldTemplate;
};
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z$g = "/** HEADINGS **/\n/** LABELS **/\n/** SPANS **/\n/** PARAGRAPHS **/\n/** CODE/CONSOLE **/\n@property --rotation {\n syntax: \"<angle>\";\n initial-value: 0deg;\n inherits: false;\n}\n@keyframes SchemaForm-module_rotate-border__5DVPQ {\n to {\n --rotation: 360deg;\n }\n}\n.SchemaForm-module_FormContainer__UsnRm {\n /**\n * @prop --schema-form-x-padding: horizontal form padding\n * @prop --schema-form-y-padding: vertical form padding\n * @prop --schema-form-max-width: max field width\n * @prop --schema-form-fields-x-gap: horizontal gap between fields\n * @prop --schema-form-fields-y-gap: vertical gap between fields\n */\n --schema-form-x-padding: 0px;\n --schema-form-y-padding: 0px;\n --schema-form-max-width: 100%;\n --schema-form-fields-x-gap: var(--kv-spacing-5x, 20px);\n --schema-form-fields-y-gap: var(--kv-spacing-5x, 20px);\n width: 100%;\n height: 100%;\n display: flex;\n flex-direction: column;\n position: relative;\n padding: var(--schema-form-y-padding) 0;\n box-sizing: border-box;\n}\n.SchemaForm-module_FormContainer__UsnRm form {\n width: 100%;\n display: flex;\n flex: 1;\n min-height: 0;\n flex-direction: column;\n justify-content: space-between;\n}\n.SchemaForm-module_FormContainer__UsnRm form > div[class^=FieldTemplate] {\n height: 100%;\n overflow-y: auto;\n overflow-x: hidden;\n box-sizing: border-box;\n padding: 0 var(--schema-form-x-padding);\n}\n.SchemaForm-module_FormContainer__UsnRm .SchemaForm-module_FormFooter__1Rety {\n display: flex;\n justify-content: space-between;\n align-items: end;\n padding: var(--kv-spacing-4x, 16px) var(--schema-form-x-padding) 0 var(--schema-form-x-padding);\n}\n.SchemaForm-module_FormContainer__UsnRm .SchemaForm-module_FormFooter__1Rety.SchemaForm-module_Scrolling__w2HzD {\n border-top: 1px solid var(--kv-neutral-6, #3f3f3f);\n}\n.SchemaForm-module_FormContainer__UsnRm .SchemaForm-module_FormFooter__1Rety .SchemaForm-module_LeftFooter__Rh5He,\n.SchemaForm-module_FormContainer__UsnRm .SchemaForm-module_FormFooter__1Rety .SchemaForm-module_RightFooter__vRi-w {\n display: flex;\n gap: var(--kv-spacing-3x, 12px);\n}\n\nbody[mode=light] .SchemaForm-module_FormContainer__UsnRm form::-webkit-scrollbar {\n width: 15px;\n height: 15px;\n}\nbody[mode=light] .SchemaForm-module_FormContainer__UsnRm form::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background-color: var(--kv-neutral-3, #ddd);\n border: 4px solid transparent;\n background-clip: content-box;\n}\nbody[mode=light] .SchemaForm-module_FormContainer__UsnRm form::-webkit-scrollbar-corner {\n background-color: transparent;\n}\nbody[mode=light] .SchemaForm-module_FormFooter__1Rety.SchemaForm-module_Scrolling__w2HzD {\n border-color: var(--kv-neutral-3, #ddd);\n}\nbody[mode=night] .SchemaForm-module_FormContainer__UsnRm form::-webkit-scrollbar {\n width: 15px;\n height: 15px;\n}\nbody[mode=night] .SchemaForm-module_FormContainer__UsnRm form::-webkit-scrollbar-thumb {\n border-radius: 10px;\n background-color: var(--kv-neutral-6, #3f3f3f);\n border: 4px solid transparent;\n background-clip: content-box;\n}\nbody[mode=night] .SchemaForm-module_FormContainer__UsnRm form::-webkit-scrollbar-corner {\n background-color: transparent;\n}\nbody[mode=night] .SchemaForm-module_FormFooter__1Rety.SchemaForm-module_Scrolling__w2HzD {\n border-color: var(--kv-neutral-6, #3f3f3f);\n}";
var styles$g = {"FormContainer":"SchemaForm-module_FormContainer__UsnRm","FormFooter":"SchemaForm-module_FormFooter__1Rety","Scrolling":"SchemaForm-module_Scrolling__w2HzD","LeftFooter":"SchemaForm-module_LeftFooter__Rh5He","RightFooter":"SchemaForm-module_RightFooter__vRi-w","rotate-border":"SchemaForm-module_rotate-border__5DVPQ"};
styleInject(css_248z$g);
var css_248z$f = "/** HEADINGS **/\n/** LABELS **/\n/** SPANS **/\n/** PARAGRAPHS **/\n/** CODE/CONSOLE **/\n@property --rotation {\n syntax: \"<angle>\";\n initial-value: 0deg;\n inherits: false;\n}\n@keyframes RadioWidget-module_rotate-border__cK8vo {\n to {\n --rotation: 360deg;\n }\n}\n.RadioWidget-module_RadioListContainer__mHQZ- {\n display: flex;\n flex-direction: column;\n column-gap: var(--kv-spacing-5x, 20px);\n flex-wrap: wrap;\n margin-left: var(--kv-spacing, 4px);\n}\n.RadioWidget-module_RadioListContainer__mHQZ-.RadioWidget-module_Inline__euy9F {\n flex-direction: row;\n column-gap: var(--kv-spacing-2x, 8px);\n}\n.RadioWidget-module_RadioListContainer__mHQZ- .RadioWidget-module_RadioOption__3dNR- {\n flex: 1;\n background-color: var(--kv-neutral-7, #2a2a2a);\n border-radius: 4px;\n padding: 0 var(--kv-spacing-4x, 16px);\n cursor: pointer;\n}\n.RadioWidget-module_RadioListContainer__mHQZ- .RadioWidget-module_RadioOption__3dNR-.RadioWidget-module_Checked__ruAyD {\n border: 1px solid var(--kv-neutral-0, #fff);\n}\n.RadioWidget-module_RadioListContainer__mHQZ- .RadioWidget-module_RadioOption__3dNR-.RadioWidget-module_Disabled__uElsE {\n pointer-events: none;\n}\n.RadioWidget-module_RadioListContainer__mHQZ- .RadioWidget-module_RadioOption__3dNR-.RadioWidget-module_Disabled__uElsE.RadioWidget-module_Checked__ruAyD {\n border-color: var(--kv-neutral-6, #3f3f3f);\n}";
var styles$f = {"RadioListContainer":"RadioWidget-module_RadioListContainer__mHQZ-","Inline":"RadioWidget-module_Inline__euy9F","RadioOption":"RadioWidget-module_RadioOption__3dNR-","Checked":"RadioWidget-module_Checked__ruAyD","Disabled":"RadioWidget-module_Disabled__uElsE","rotate-border":"RadioWidget-module_rotate-border__cK8vo"};
styleInject(css_248z$f);
const RadioWidget = ({ options, value, disabled, readonly, formContext, onChange }) => {
const { enumOptions, enumDisabled, inline } = options;
const inlineMemo = React.useMemo(() => Boolean(inline), [inline]);
const { allowClearInputs } = formContext;
return (React.createElement("div", { className: classNames(styles$f.RadioListContainer, { [styles$f.Inline]: inlineMemo }) }, Array.isArray(enumOptions) &&
enumOptions.map((option, i) => {
const itemDisabled = Array.isArray(enumDisabled) && enumDisabled.indexOf(option.value) !== -1;
const checked = option.value == value;
const isDisabled = disabled || itemDisabled || readonly;
return (React.createElement("div", { key: i, className: classNames(styles$f.RadioOption, { [styles$f.Checked]: checked, [styles$f.Disabled]: isDisabled }), onClick: _ => onChange(allowClearInputs && checked ? undefined : option.value) },
React.createElement(KvRadio, { id: option.label, label: option.label, disabled: isDisabled, checked: checked })));
})));
};
var css_248z$e = ".SelectWidget-module_InputContainer__JBINY {\n display: flex;\n flex-direction: column;\n}\n.SelectWidget-module_InputContainer__JBINY kv-multi-select-dropdown kv-dropdown kv-text-field,\n.SelectWidget-module_InputContainer__JBINY kv-single-select-dropdown kv-dropdown kv-text-field {\n --input-width: auto;\n --input-min-width: auto;\n --input-max-width: auto;\n}";
var styles$e = {"InputContainer":"SelectWidget-module_InputContainer__JBINY"};
styleInject(css_248z$e);
const numericTypes = ['number', 'integer'];
const processValue = (schema, value) => {
const { type, items } = schema;
const itemsType = get(items, 'type');
if (value === '' || isNil(value)) {
return undefined;
}
else if (type === 'array' && items && isString(itemsType) && numericTypes.includes(itemsType)) {
return value.map(utils.asNumber);
}
else if (type === 'boolean') {
return value === true || value === 'true';
}
else if (type === 'number') {
return utils.asNumber(value);
}
if (schema.enum) {
if (schema.enum.every((x) => utils.guessType(x) === 'number')) {
return utils.asNumber(value);
}
else if (schema.enum.every((x) => utils.guessType(x) === 'boolean')) {
return value === 'true';
}
}
return value;
};
const getSelectedOptions = (selectedOptionsMap) => Object.keys(selectedOptionsMap);
const buildSelectedOptions = (selectedOptions) => selectedOptions.reduce((accumulator, selectOptionKey) => {
accumulator[selectOptionKey] = true;
return accumulator;
}, {});
const buildDropdownOptions = (options, disabledOptions, multiSubOptions) => {
if (!isEmpty(multiSubOptions)) {
return multiSubOptions;
}
return Array.isArray(options)
? options.reduce((acc, { label, value, schema }) => {
const description = schema === null || schema === void 0 ? void 0 : schema.description;
const disabled = Array.isArray(disabledOptions) && disabledOptions.indexOf(value) != -1;
acc[value] = { value, label, description, disabled };
return acc;
}, {})
: {};
};
const searchDropdownOptions = (term, options) => {
const lowerCaseTerm = term.toLowerCase();
return Object.keys(options).reduce((accumulator, key) => {
const option = options[key];
const lowerCaseLabel = option.label.toLowerCase();
if (lowerCaseLabel.includes(lowerCaseTerm)) {
accumulator[key] = option;
}
return accumulator;
}, {});
};
const DEFAULT_MINIMUM_SEARCHABLE_OPTIONS = 15;
const DEFAULT_DROPDOWN_CONFIG = {
zIndex: 9004,
maxHeight: '400px',
minHeight: 'auto',
maxWidth: 'auto',
minWidth: 'max-content'
};
const SelectWidget = ({ schema, id, options, disabled, readonly, value, multiple, onChange, placeholder, rawErrors = [], uiSchema = {}, formContext }) => {
const { enumOptions, enumDisabled, placeholder: optionsPlaceholder } = options;
const { displayValue, searchable, selectionClearable, minHeight, maxHeight, minWidth, maxWidth, icon, minSearchOptions, badge, valuePrefix: displayPrefix, zIndex: optionZIndex, componentSize: optionComponentSize, multiSubOptions } = uiSchema;
const { componentSize = uiComponents.EComponentSize.Large, dropdownConfig = DEFAULT_DROPDOWN_CONFIG, allowClearInputs } = formContext;
const [searchTerm, setSearchTerm] = React.useState(null);
const defaultDropdownOptions = React.useMemo(() => buildDropdownOptions(enumOptions, enumDisabled, multiSubOptions), [enumOptions, enumDisabled, multiSubOptions]);
const filteredOptions = React.useMemo(() => {
if (searchTerm !== null && searchTerm.length > 0) {
return searchDropdownOptions(searchTerm, defaultDropdownOptions);
}
return defaultDropdownOptions;
}, [searchTerm, defaultDropdownOptions]);
const emptyValue = React.useMemo(() => (multiple ? [] : undefined), [multiple]);
const processedValue = processValue(schema, value);
const onSearchChange = React.useCallback(({ detail: searchedLabel }) => setSearchTerm(searchedLabel), []);
const onChangeOptionSelected = React.useCallback(({ detail: selectedOption }) => {
onChangeValue(selectedOption);
}, []);
const onChangeOptionsSelected = React.useCallback(({ detail: selectedOptionsMap }) => {
const selectedOptions = getSelectedOptions(selectedOptionsMap);
onChangeValue(selectedOptions);
}, []);
const onChangeValue = React.useCallback((newValue) => {
const processedValue = processValue(schema, newValue);
onChange(processedValue);
}, []);
const hasErrors = React.useMemo(() => !isEmpty(rawErrors), [rawErrors]);
const props = {
id,
placeholder: placeholder ? placeholder : optionsPlaceholder,
inputSize: !isEmpty(optionComponentSize) ? optionComponentSize : componentSize,
disabled: disabled || readonly,
errorState: hasErrors ? uiComponents.EValidationState.Invalid : uiComponents.EValidationState.Valid,
displayValue: typeof processedValue === 'undefined' ? emptyValue : displayValue === null || displayValue === void 0 ? void 0 : displayValue(processedValue, defaultDropdownOptions),
displayPrefix,
options: defaultDropdownOptions,
filteredOptions,
onSearchChange,
searchable,
zIndex: optionZIndex !== null && optionZIndex !== void 0 ? optionZIndex : dropdownConfig.zIndex,
minHeight: minHeight !== null && minHeight !== void 0 ? minHeight : dropdownConfig.minHeight,
maxHeight: maxHeight !== null && maxHeight !== void 0 ? maxHeight : dropdownConfig.maxHeight,
minWidth: minWidth !== null && minWidth !== void 0 ? minWidth : dropdownConfig.minWidth,
maxWidth: maxWidth !== null && maxWidth !== void 0 ? maxWidth : dropdownConfig.maxWidth,
icon: icon !== null && icon !== void 0 ? icon : dropdownConfig.icon,
badge,
selectionClearable: allowClearInputs !== null && allowClearInputs !== void 0 ? allowClearInputs : selectionClearable,
minSearchOptions: minSearchOptions !== null && minSearchOptions !== void 0 ? minSearchOptions : DEFAULT_MINIMUM_SEARCHABLE_OPTIONS
};
return (React.createElement("div", { className: styles$e.InputContainer },
!multiple && React.createElement(KvSingleSelectDropdown, Object.assign({ selectedOption: processedValue, onOptionSelected: onChangeOptionSelected }, props)),
multiple && React.createElement(KvMultiSelectDropdown, Object.assign({ selectedOptions: buildSelectedOptions(processedValue), onOptionsSelected: onChangeOptionsSelected }, props))));
};
const ALL_BUTTON_VALUE = 'all';
const buildToggleButtons = (options, enumDisabled, { multiple, allButton, readonly }) => options.reduce((acc, { label, value }) => [
...acc,
{
label,
value,
disabled: enumDisabled.includes(value) || readonly
}
], multiple && allButton
? [
{
label: 'All',
value: ALL_BUTTON_VALUE
}
]
: []);
const buildSelectedToggleButtons = (selectedOptions, allOptions, { multiple, allButton }) => {
const allButtonsSelected = selectedOptions.length === allOptions.length;
if (multiple && allButton && allButtonsSelected) {
return { [ALL_BUTTON_VALUE]: true };
}
return selectedOptions.reduce((acc, selectOption) => {
acc[selectOption] = true;
return acc;
}, {});
};
const buildDisabledToggleButtons = (buttons) => {
const disabledButtons = buttons.reduce((acc, button) => {
var _a;
acc[button.value] = (_a = button.disabled) !== null && _a !== void 0 ? _a : false;
return acc;
}, {});
disabledButtons[ALL_BUTTON_VALUE] = Object.values(disabledButtons).some(value => value);
return disabledButtons;
};
const toggleSelectedOptions = (selectedOptionValue, selectedOptions, allOptions, { multiple, allButton, minItems, maxItems, required }) => {
if (!multiple) {
if (selectedOptions.includes(selectedOptionValue)) {
return [];
}
return [selectedOptionValue];
}
const allButtonsSelected = selectedOptions.length === allOptions.length;
if (allButton) {
if (selectedOptionValue === ALL_BUTTON_VALUE) {
if (allButtonsSelected) {
if (required || minItems > 0) {
return allOptions.slice(0, minItems).map(({ value }) => value);
}
return [];
}
return allOptions.map(({ value }) => value);
}
if (allButtonsSelected)
return [selectedOptionValue];
if (selectedOptions.includes(selectedOptionValue) && selectedOptions.length === minItems) {
return allOptions.map(({ value }) => value);
}
}
if (selectedOptions.includes(selectedOptionValue)) {
if (selectedOptions.length === minItems) {
return selectedOptions;
}
return selectedOptions.filter(value => value !== selectedOptionValue);
}
if (selectedOptions.length === maxItems) {
return selectedOptions;
}
return [...selectedOptions, selectedOptionValue];
};
const getComponentSize = (size) => {
return Object.values(uiComponents.EComponentSize).includes(size) ? size : uiComponents.EComponentSize.Small;
};
const CheckboxesWidget = ({ schema, options, disabled, value, required, readonly, onChange }) => {
const { enumOptions, enumDisabled, allButton, componentSize, withRadio } = options;
const { maxItems, minItems } = schema;
const selectedOptions = React.useMemo(() => (Array.isArray(value) ? value : []), [value]);
const allOptions = React.useMemo(() => (Array.isArray(enumOptions) ? enumOptions : []), [enumOptions]);
const disabledOptions = React.useMemo(() => (Array.isArray(enumDisabled) ? enumDisabled : []), [enumDisabled]);
const minimumItems = React.useMemo(() => minItems !== null && minItems !== void 0 ? minItems : 0, [minItems]);
const maximumItems = React.useMemo(() => maxItems !== null && maxItems !== void 0 ? maxItems : allOptions.length, [maxItems, allOptions.length]);
const multiple = React.useMemo(() => minimumItems > 0 || maximumItems > 1, [minItems, maxItems]);
const config = React.useMemo(() => ({
multiple,
allButton: allButton === true,
minItems: minimumItems,
maxItems: maximumItems,
required,
readonly
}), [multiple, allButton, minItems, maxItems, required, readonly]);
const buttons = React.useMemo(() => buildToggleButtons(allOptions, disabledOptions, config), [allOptions, disabledOptions, config]);
const selectedButtons = React.useMemo(() => buildSelectedToggleButtons(selectedOptions, allOptions, config), [selectedOptions, allOptions, config]);
const disabledButtons = React.useMemo(() => buildDisabledToggleButtons(buttons), [buttons]);
const onCheckedChange = React.useCallback(({ detail: selectedOptionValue }) => {
const newValue = toggleSelectedOptions(selectedOptionValue, selectedOptions, allOptions, config);
onChange(isEmpty(newValue) ? undefined : newValue);
}, [selectedOptions, allOptions, config]);
return (React.createElement(KvToggleButtonGroup, { buttons: buttons, disabled: disabled, size: getComponentSize(componentSize), withRadio: withRadio === true, disabledButtons: disabledButtons, selectedButtons: selectedButtons, onCheckedChange: onCheckedChange }));
};
const getMatchingOption = (value, options) => {
return value && (options === null || options === void 0 ? void 0 : options.find(opt => opt.value === value));
};
var css_248z$d = "/** HEADINGS **/\n/** LABELS **/\n/** SPANS **/\n/** PARAGRAPHS **/\n/** CODE/CONSOLE **/\n@property --rotation {\n syntax: \"<angle>\";\n initial-value: 0deg;\n inherits: false;\n}\n@keyframes ReadOnlyValueWidget-module_rotate-border__XdF1C {\n to {\n --rotation: 360deg;\n }\n}\n.ReadOnlyValueWidget-module_ValueLabel__wMxmG {\n font-family: var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");\n font-size: 20px;\n font-weight: 600;\n font-stretch: normal;\n font-style: normal;\n line-height: 30px;\n letter-spacing: normal;\n text-transform: none;\n}\n\nbody[mode=light] .ReadOnlyValueWidget-module_ValueLabel__wMxmG {\n color: var(--kv-neutral-6, #3f3f3f);\n}\nbody[mode=night] .ReadOnlyValueWidget-module_ValueLabel__wMxmG {\n color: var(--kv-neutral-2, #e5e5e5);\n}";
var styles$d = {"ValueLabel":"ReadOnlyValueWidget-module_ValueLabel__wMxmG","rotate-border":"ReadOnlyValueWidget-module_rotate-border__XdF1C"};
styleInject(css_248z$d);
const ReadOnlyValueWidget = ({ value, options }) => {
const { enumOptions } = options;
const selectedOption = getMatchingOption(value, enumOptions);
return React.createElement(React.Fragment, null, value && React.createElement("span", { className: styles$d.ValueLabel }, get(selectedOption, 'label', value)));
};
function EmailWidget(props) {
const { options, registry } = props;
const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
return React.createElement(BaseInputTemplate, Object.assign({}, props, { type: uiComponents.EInputFieldType.Email }));
}
function DateTimeWidget(props) {
const { options, registry } = props;
const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
const value = utils.utcToLocal(props.value);
const onChange = React.useCallback((value) => props.onChange(utils.localToUTC(value)), [props.onChange]);
return React.createElement(BaseInputTemplate, Object.assign({}, props, { value: value, onChange: onChange, type: uiComponents.EInputFieldType.DateTime }));
}
function DateWidget(props) {
const { options, registry } = props;
const BaseInputTemplate = utils.getTemplate('BaseInputTemplate', registry, options);
return React.createElement(BaseInputTemplate, Object.assign({}, props, { type: uiComponents.EInputFieldType.Date }));
}
const TextareaWidget = ({ uiSchema = {}, value, placeholder, onChange }) => {
const { maxCharLength, iconName } = uiSchema;
const onTextChange = React.useCallback(({ detail: textValue }) => {
onChange(textValue);
}, [onChange]);
return React.createElement(KvTextArea, { maxCharLength: maxCharLength, icon: iconName, text: value, placeholder: placeholder, onTextChange: onTextChange });
};
var css_248z$c = "/** HEADINGS **/\n/** LABELS **/\n/** SPANS **/\n/** PARAGRAPHS **/\n/** CODE/CONSOLE **/\n@property --rotation {\n syntax: \"<angle>\";\n initial-value: 0deg;\n inherits: false;\n}\n@keyframes FileWidget-module_rotate-border__g-k4m {\n to {\n --rotation: 360deg;\n }\n}\n.FileWidget-module_FileWidgetContainer__wWGel {\n display: flex;\n justify-content: space-between;\n gap: var(--kv-spacing-3x, 12px);\n align-items: center;\n}\n.FileWidget-module_FileWidgetContainer__wWGel .FileWidget-module_FilesInfo__2rGtb {\n flex: 1;\n min-width: 0;\n}\n.FileWidget-module_FileWidgetContainer__wWGel .FileWidget-module_ActionsContainer__IAMy- {\n display: flex;\n gap: var(--kv-spacing-2x, 8px);\n align-items: center;\n}\n.FileWidget-module_FileWidgetContainer__wWGel .FileWidget-module_FileInfoContainer__44Y1r {\n width: 100%;\n display: flex;\n flex-direction: column;\n gap: var(--kv-spacing-3x, 12px);\n}\n.FileWidget-module_FileWidgetContainer__wWGel .FileWidget-module_FileInfoContainer__44Y1r .FileWidget-module_FileInfo__vszr1 {\n display: flex;\n border-radius: var(--kv-spacing, 4px);\n background-color: var(--kv-neutral-7, #2a2a2a);\n padding: var(--kv-spacing-3x, 12px);\n gap: var(--kv-spacing-2x, 8px);\n justify-content: space-between;\n}\n.FileWidget-module_FileWidgetContainer__wWGel .FileWidget-module_FileInfoContainer__44Y1r .FileWidget-module_FileInfo__vszr1 .FileWidget-module_LeftContent__zH0Gx {\n display: flex;\n flex: 1;\n min-width: 0;\n gap: var(--kv-spacing-2x, 8px);\n}\n.FileWidget-module_FileWidgetContainer__wWGel .FileWidget-module_FileInfoContainer__44Y1r .FileWidget-module_FileInfo__vszr1 kv-icon {\n --icon-color: var(--kv-neutral-5, #707070);\n --icon-height: 40px;\n --icon-width: 40px;\n}\n.FileWidget-module_FileWidgetContainer__wWGel .FileWidget-module_FileInfoContainer__44Y1r .FileWidget-module_FileInfo__vszr1 .FileWidget-module_FileDetails__j4V0G {\n display: flex;\n flex-direction: column;\n flex: 1;\n min-width: 0;\n}\n.FileWidget-module_FileWidgetContainer__wWGel .FileWidget-module_FileInfoContainer__44Y1r .FileWidget-module_FileInfo__vszr1 .FileWidget-module_FileDetails__j4V0G .FileWidget-module_Label__YlSXB {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-family: var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");\n font-size: 12px;\n font-weight: 600;\n font-stretch: normal;\n font-style: normal;\n line-height: 18px;\n letter-spacing: normal;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n color: var(--kv-neutral-2, #e5e5e5);\n}\n.FileWidget-module_FileWidgetContainer__wWGel .FileWidget-module_FileInfoContainer__44Y1r .FileWidget-module_FileInfo__vszr1 .FileWidget-module_FileDetails__j4V0G .FileWidget-module_FileName__-hv3b {\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n font-family: var(--kv-primary-font, \"proxima-nova\", sans-serif, \"Arial\");\n font-size: 14px;\n font-weight: 600;\n font-stretch: normal;\n font-style: normal;\n line-height: 21px;\n letter-spacing: normal;\n text-transform: none;\n color: var(--kv-neutral-5, #707070);\n}\n.FileWidget-module_FileWidgetContainer__wWGel .FileWidget-module_FileInfoContainer__44Y1r .FileWidget-module_FileInfo__vszr1.FileWidget-module_HasValue__AbQpb kv-icon {\n --icon-color: var(--kv-neutral-2, #e5e5e5);\n}\n.FileWidget-module_FileWidgetContainer__wWGel .FileWidget-module_FileInfoContainer__44Y1r .FileWidget-module_FileInfo__vszr1.FileWidget-module_HasValue__AbQpb .FileWidget-module_FileDetails__j4V0G .FileWidget-module_FileName__-hv3b {\n color: var(--kv-neutral-4, #bebebe);\n}\n.FileWidget-module_FileWidgetContainer__wWGel .FileWidget-module_FileInfoContainer__44Y1r .FileWidget-module_FileInfo__vszr1.FileWidget-module_HasError__xpFPb {\n border: 1px solid var(--kv-error, #e11900);\n}";
var styles$c = {"FileWidgetContainer":"FileWidget-module_FileWidgetContainer__wWGel","FilesInfo":"FileWidget-module_FilesInfo__2rGtb","ActionsContainer":"FileWidget-module_ActionsContainer__IAMy-","FileInfoContainer":"FileWidget-module_FileInfoContainer__44Y1r","FileInfo":"FileWidget-module_FileInfo__vszr1","LeftContent":"FileWidget-module_LeftContent__zH0Gx","FileDetails":"FileWidget-module_FileDetails__j4V0G","Label":"FileWidget-module_Label__YlSXB","FileName":"FileWidget-module_FileName__-hv3b","HasValue":"FileWidget-module_HasValue__AbQpb","HasError":"FileWidget-module_HasError__xpFPb","rotate-border":"FileWidget-module_rotate-border__g-k4m"};
styleInject(css_248z$c);
const addNameToDataURL = (dataURL, name) => {
if (dataURL === null) {
return null;
}
return dataURL.replace(';base64', `;name=${encodeURIComponent(name)};base64`);
};
const processFile = (file) => {
const { name, size, type } = file;
return new Promise((resolve, reject) => {
const reader = new window.FileReader();
reader.onerror = reject;
reader.onload = event => {
var _a;
if (typeof ((_a = event.target) === null || _a === void 0 ? void 0 : _a.result) === 'string') {
resolve({
dataURL: addNameToDataURL(event.target.result, name),
name,
size,
type
});
}
else {
resolve({
dataURL: null,
name,
size,
type
});
}
};
reader.readAsDataURL(file);
});
};
const processFiles = (files) => {
return Promise.all(Array.from(files).map(processFile));
};
const extractFileInfo = (data) => {
const dataURLs = Array.isArray(data) ? data : [data];
return dataURLs
.filter(dataURL => dataURL)
.map(dataURL => {
const { blob, name } = utils.dataURItoBlob(dataURL);
return {
dataURL,
name: name,
size: blob.size,
type: blob.type
};
});
};
function FileActions({ fileInfo, onDelete, preview = false }) {
const { dataURL, name } = fileInfo;
if (!dataURL) {
return null;
}
return (React.createElement("div", { className: styles$c.ActionsContainer },
preview && (React.createElement("a", { href: dataURL, download: `${name}`, target: "_blank", rel: "noreferrer" },
React.createElement(KvActionButtonIcon, { icon: uiComponents.EIconName.Download, type: uiComponents.EActionButtonType.Tertiary, size: uiComponents.EComponentSize.Small }))),
React.createElement(KvActionButtonIcon, { icon: uiComponents.EIconName.Delete, type: uiComponents.EActionButtonType.Tertiary, size: uiComponents.EComponentSize.Small, onClickButton: () => onDelete(name) })));
}
function FilesInfo({ displayLabel, filesInfo = [], preview = false, hasError = false, onDelete }) {
return (React.createElement("div", { className: styles$c.FileInfoContainer },
filesInfo.map((fileInfo, key) => {
const { name } = fileInfo;
return (React.createElement("div", { className: classNames(styles$c.FileInfo, styles$c.HasValue, { [styles$c.HasError]: hasError }), key: key },
React.createElement("div", { className: styles$c.LeftContent },
React.createElement(KvIcon, { name: uiComponents.EIconName.File }),
React.createElement("div", { className: styles$c.FileDetails },
React.createElement("span", { className: styles$c.Label }, displayLabel),
React.createElement("span", { className: styles$c.FileName }, name))),
React.createElement(FileActions, { fileInfo: fileInfo, preview: preview, onDelete: onDelete })));
}),
isEmpty(filesInfo) && (React.createElement("div", { className: classNames(styles$c.FileInfo, { [styles$c.HasError]: hasError }) },
React.createElement("div", { className: styles$c.LeftContent },
React.createElement(KvIcon, { name: uiComponents.EIconName.File }),
React.createElement("div", { className: styles$c.FileDetails },
React.createElement("span", { className: styles$c.Label }, displayLabel),
React.createElement("span", { className: styles$c.FileName }, "Empty")))))));
}
function FileWidget(props) {
const { disabled, readonly, required, multiple, onChange, value, options, uiSchema, schema, label, name, rawErrors = [] } = props;
const [filesInfo, setFilesInfo] = React.useState(extractFileInfo(value));
const displayedLabel = React.useMemo(() => get(uiSchema, ['ui:title']) || schema.title || label, [uiSchema, schema.title, label]);
const removeFile = React.useCallback((filename) => {
const newValue = filesInfo.filter(fileInfo => fileInfo.name !== filename);
setFilesInfo(newValue);
if (multiple) {
onChange(newValue.map(fileInfo => fileInfo.dataURL));
}
else {
onChange(newValue[0]);
}
}, [filesInfo, setFilesInfo, onChange]);
const handleChange = React