survey-react-ui 3.0.2 → 3.0.4

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/index.html CHANGED
@@ -13,6 +13,9 @@
13
13
  <script src="./node_modules/survey-core/themes/index.js"></script>
14
14
  <link rel="stylesheet" href="./node_modules/survey-core/survey-core.css" />
15
15
  <script src="./build/survey-react-ui.js"></script>
16
+ <!-- survey-core embeds no @font-face rule; the page supplies Open Sans itself.
17
+ Pinned to the files the reference screenshots were taken with - see fonts.css. -->
18
+ <link rel="stylesheet" href="./fonts.css" />
16
19
  </head>
17
20
 
18
21
  <body spellcheck="false">
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "survey-react-ui",
3
- "version": "3.0.2",
3
+ "version": "3.0.4",
4
4
  "license": "MIT",
5
5
  "author": "DevSoft Baltic OU <info@devsoftbaltic.com>",
6
6
  "homepage": "https://surveyjs.io/",
@@ -60,7 +60,7 @@
60
60
  }
61
61
  },
62
62
  "peerDependencies": {
63
- "survey-core": "3.0.2",
63
+ "survey-core": "3.0.4",
64
64
  "react": "^16.5.0 || ^17.0.1 || ^18.1.0 || ^19.0.0",
65
65
  "react-dom": "^16.5.0 || ^17.0.1 || ^18.1.0 || ^19.0.0"
66
66
  }
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * surveyjs - Survey JavaScript library v3.0.2
2
+ * surveyjs - Survey JavaScript library v3.0.4
3
3
  * Copyright (c) 2015-2026 Devsoft Baltic OÜ - http://surveyjs.io/
4
4
  * License: MIT (http://www.opensource.org/licenses/mit-license.php)
5
5
  */
@@ -397,6 +397,36 @@
397
397
  }
398
398
  }
399
399
 
400
+ function attachKey2click(element, viewModel, options = { processEsc: true, disableTabStop: false }) {
401
+ let props = {};
402
+ if ((!!viewModel && viewModel.disableTabStop) || (!!options && options.disableTabStop)) {
403
+ props = { tabIndex: -1 };
404
+ }
405
+ else {
406
+ options = { ...options };
407
+ props = {
408
+ tabIndex: 0,
409
+ onKeyUp: (evt) => {
410
+ evt.preventDefault();
411
+ evt.stopPropagation();
412
+ surveyCore.doKey2ClickUp(evt, options);
413
+ },
414
+ onKeyDown: (evt) => surveyCore.doKey2ClickDown(evt, options),
415
+ onBlur: (evt) => surveyCore.doKey2ClickBlur(evt),
416
+ };
417
+ }
418
+ props["onPointerUp"] = (evt) => {
419
+ if (evt.pointerType === "pen") {
420
+ evt.preventDefault();
421
+ evt.stopPropagation();
422
+ const element = evt.target;
423
+ if (element === null || element === void 0 ? void 0 : element.click)
424
+ element.click();
425
+ }
426
+ };
427
+ return React__namespace.cloneElement(element, props);
428
+ }
429
+
400
430
  class SvgIcon extends React__namespace.Component {
401
431
  constructor(props) {
402
432
  super(props);
@@ -595,174 +625,6 @@
595
625
  return React__namespace.createElement(SurveyActionBarItem, props);
596
626
  });
597
627
 
598
- class Popup extends SurveyElementBase {
599
- constructor(props) {
600
- super(props);
601
- this.containerRef = React__namespace.createRef();
602
- this.createModel();
603
- }
604
- get model() {
605
- return this.props.model;
606
- }
607
- getStateElement() {
608
- return this.model;
609
- }
610
- createModel() {
611
- this.popup = surveyCore.createPopupViewModel(this.props.model);
612
- }
613
- setTargetElement() {
614
- const container = this.containerRef.current;
615
- this.popup.setComponentElement(container);
616
- }
617
- componentDidMount() {
618
- super.componentDidMount();
619
- this.setTargetElement();
620
- }
621
- componentDidUpdate(prevProps, prevState) {
622
- super.componentDidUpdate(prevProps, prevState);
623
- this.setTargetElement();
624
- }
625
- componentWillUnmount() {
626
- super.componentWillUnmount();
627
- this.popup.resetComponentElement();
628
- }
629
- shouldComponentUpdate(nextProps, nextState) {
630
- var _a;
631
- if (!super.shouldComponentUpdate(nextProps, nextState))
632
- return false;
633
- const isNeedUpdate = nextProps.model !== this.popup.model;
634
- if (isNeedUpdate) {
635
- (_a = this.popup) === null || _a === void 0 ? void 0 : _a.dispose();
636
- this.createModel();
637
- }
638
- return isNeedUpdate;
639
- }
640
- render() {
641
- this.popup.model = this.model;
642
- let popupContainer;
643
- if (this.model.isModal) {
644
- popupContainer = React__namespace.createElement(PopupContainer, { model: this.popup });
645
- }
646
- else {
647
- popupContainer = React__namespace.createElement(PopupDropdownContainer, { model: this.popup });
648
- }
649
- return React__namespace.createElement("div", { ref: this.containerRef }, popupContainer);
650
- }
651
- }
652
- ReactElementFactory.Instance.registerElement("sv-popup", (props) => {
653
- return React__namespace.createElement(Popup, props);
654
- });
655
- class PopupContainer extends SurveyElementBase {
656
- constructor(props) {
657
- super(props);
658
- this.handleKeydown = (event) => {
659
- this.model.onKeyDown(event);
660
- };
661
- this.clickInside = (ev) => {
662
- ev.stopPropagation();
663
- };
664
- }
665
- get model() {
666
- return this.props.model;
667
- }
668
- getStateElement() {
669
- return this.model;
670
- }
671
- componentDidUpdate(prevProps, prevState) {
672
- super.componentDidUpdate(prevProps, prevState);
673
- if (!this.model.isPositionSet && this.model.isVisible) {
674
- this.model.updateOnShowing();
675
- }
676
- }
677
- renderContainer(popupBaseViewModel) {
678
- const headerPopup = popupBaseViewModel.showHeader ? this.renderHeaderPopup(popupBaseViewModel) : null;
679
- const headerContent = !!popupBaseViewModel.title ? this.renderHeaderContent() : null;
680
- const content = this.renderContent();
681
- const footerContent = popupBaseViewModel.showFooter ? this.renderFooter(this.model) : null;
682
- return (React__namespace.createElement("div", { className: "sv-popup__container", style: {
683
- left: popupBaseViewModel.left,
684
- top: popupBaseViewModel.top,
685
- height: popupBaseViewModel.height,
686
- width: popupBaseViewModel.width,
687
- minWidth: popupBaseViewModel.minWidth,
688
- }, onClick: (ev) => {
689
- this.clickInside(ev);
690
- } },
691
- headerPopup,
692
- React__namespace.createElement("div", { className: "sv-popup__body-content" },
693
- headerContent,
694
- React__namespace.createElement("div", { className: "sv-popup__scrolling-content" }, content),
695
- footerContent)));
696
- }
697
- renderHeaderContent() {
698
- return React__namespace.createElement("div", { className: "sv-popup__body-header" }, this.model.title);
699
- }
700
- renderContent() {
701
- const contentComponent = ReactElementFactory.Instance.createElement(this.model.contentComponentName, this.model.contentComponentData);
702
- return React__namespace.createElement("div", { className: "sv-popup__content" }, contentComponent);
703
- }
704
- renderHeaderPopup(popupModel) {
705
- return popupModel.showCloseButton ? React__namespace.createElement("button", { tabIndex: -1, className: "sv-popup__close-button sd-action sd-action--icon", onClick: () => this.model.clickClose() },
706
- React__namespace.createElement(SvgIcon, { className: "sv-popup__close-button-icon", iconName: "icon-close-24x24", size: "auto" })) : null;
707
- }
708
- renderFooter(popuModel) {
709
- return (React__namespace.createElement("div", { className: "sv-popup__body-footer" },
710
- React__namespace.createElement(SurveyActionBar, { model: popuModel.footerToolbar })));
711
- }
712
- render() {
713
- const container = this.renderContainer(this.model);
714
- const className = new surveyCore.CssClassBuilder()
715
- .append("sv-popup")
716
- .append(this.model.styleClass)
717
- .toString();
718
- const style = { display: this.model.isVisible ? "" : "none", };
719
- return (React__namespace.createElement("div", { tabIndex: -1, className: className, style: style, onClick: (e) => {
720
- this.model.clickOutside(e);
721
- }, onBlur: (e) => {
722
- this.model.blur(e);
723
- }, onKeyDown: this.handleKeydown }, container));
724
- }
725
- componentDidMount() {
726
- super.componentDidMount();
727
- if (this.model.isVisible) {
728
- this.model.updateOnShowing();
729
- }
730
- }
731
- }
732
- class PopupDropdownContainer extends PopupContainer {
733
- renderHeaderPopup(popupModel) {
734
- const popupDropdownModel = popupModel;
735
- if (!popupDropdownModel || !popupDropdownModel.showHeader)
736
- return null;
737
- return (React__namespace.createElement("span", { style: {
738
- left: popupDropdownModel.pointerTarget.left,
739
- top: popupDropdownModel.pointerTarget.top,
740
- }, className: "sv-popup__pointer" }));
741
- }
742
- }
743
-
744
- class SurveyActionBarItemDropdown extends SurveyActionBarItem {
745
- constructor(props) {
746
- super(props);
747
- }
748
- renderInnerButton() {
749
- const button = super.renderInnerButton();
750
- return (React__namespace.createElement(React__namespace.Fragment, null,
751
- button,
752
- React__namespace.createElement(Popup, { model: this.item.popupModel })));
753
- }
754
- componentDidMount() {
755
- this.viewModel = new surveyCore.ActionDropdownViewModel(this.item);
756
- }
757
- componentWillUnmount() {
758
- super.componentWillUnmount();
759
- this.viewModel.dispose();
760
- }
761
- }
762
- ReactElementFactory.Instance.registerElement("sv-action-bar-item-dropdown", (props) => {
763
- return React__namespace.createElement(SurveyActionBarItemDropdown, props);
764
- });
765
-
766
628
  class SurveyActionBar extends SurveyElementBase {
767
629
  constructor(props) {
768
630
  super(props);
@@ -1079,6 +941,152 @@
1079
941
  }
1080
942
  }
1081
943
 
944
+ class Popup extends SurveyElementBase {
945
+ constructor(props) {
946
+ super(props);
947
+ this.containerRef = React__namespace.createRef();
948
+ this.createModel();
949
+ }
950
+ get model() {
951
+ return this.props.model;
952
+ }
953
+ getStateElement() {
954
+ return this.model;
955
+ }
956
+ createModel() {
957
+ this.popup = surveyCore.createPopupViewModel(this.props.model);
958
+ }
959
+ setTargetElement() {
960
+ const container = this.containerRef.current;
961
+ this.popup.setComponentElement(container);
962
+ }
963
+ componentDidMount() {
964
+ super.componentDidMount();
965
+ this.setTargetElement();
966
+ }
967
+ componentDidUpdate(prevProps, prevState) {
968
+ super.componentDidUpdate(prevProps, prevState);
969
+ this.setTargetElement();
970
+ }
971
+ componentWillUnmount() {
972
+ super.componentWillUnmount();
973
+ this.popup.resetComponentElement();
974
+ }
975
+ shouldComponentUpdate(nextProps, nextState) {
976
+ var _a;
977
+ if (!super.shouldComponentUpdate(nextProps, nextState))
978
+ return false;
979
+ const isNeedUpdate = nextProps.model !== this.popup.model;
980
+ if (isNeedUpdate) {
981
+ (_a = this.popup) === null || _a === void 0 ? void 0 : _a.dispose();
982
+ this.createModel();
983
+ }
984
+ return isNeedUpdate;
985
+ }
986
+ render() {
987
+ this.popup.model = this.model;
988
+ let popupContainer;
989
+ if (this.model.isModal) {
990
+ popupContainer = React__namespace.createElement(PopupContainer, { model: this.popup });
991
+ }
992
+ else {
993
+ popupContainer = React__namespace.createElement(PopupDropdownContainer, { model: this.popup });
994
+ }
995
+ return React__namespace.createElement("div", { ref: this.containerRef }, popupContainer);
996
+ }
997
+ }
998
+ ReactElementFactory.Instance.registerElement("sv-popup", (props) => {
999
+ return React__namespace.createElement(Popup, props);
1000
+ });
1001
+ class PopupContainer extends SurveyElementBase {
1002
+ constructor(props) {
1003
+ super(props);
1004
+ this.handleKeydown = (event) => {
1005
+ this.model.onKeyDown(event);
1006
+ };
1007
+ this.clickInside = (ev) => {
1008
+ ev.stopPropagation();
1009
+ };
1010
+ }
1011
+ get model() {
1012
+ return this.props.model;
1013
+ }
1014
+ getStateElement() {
1015
+ return this.model;
1016
+ }
1017
+ componentDidUpdate(prevProps, prevState) {
1018
+ super.componentDidUpdate(prevProps, prevState);
1019
+ if (!this.model.isPositionSet && this.model.isVisible) {
1020
+ this.model.updateOnShowing();
1021
+ }
1022
+ }
1023
+ renderContainer(popupBaseViewModel) {
1024
+ const headerPopup = popupBaseViewModel.showHeader ? this.renderHeaderPopup(popupBaseViewModel) : null;
1025
+ const headerContent = !!popupBaseViewModel.title ? this.renderHeaderContent() : null;
1026
+ const content = this.renderContent();
1027
+ const footerContent = popupBaseViewModel.showFooter ? this.renderFooter(this.model) : null;
1028
+ return (React__namespace.createElement("div", { className: "sv-popup__container", style: {
1029
+ left: popupBaseViewModel.left,
1030
+ top: popupBaseViewModel.top,
1031
+ height: popupBaseViewModel.height,
1032
+ width: popupBaseViewModel.width,
1033
+ minWidth: popupBaseViewModel.minWidth,
1034
+ }, onClick: (ev) => {
1035
+ this.clickInside(ev);
1036
+ } },
1037
+ headerPopup,
1038
+ React__namespace.createElement("div", { className: "sv-popup__body-content" },
1039
+ headerContent,
1040
+ React__namespace.createElement("div", { className: "sv-popup__scrolling-content" }, content),
1041
+ footerContent)));
1042
+ }
1043
+ renderHeaderContent() {
1044
+ return React__namespace.createElement("div", { className: "sv-popup__body-header" }, this.model.title);
1045
+ }
1046
+ renderContent() {
1047
+ const contentComponent = ReactElementFactory.Instance.createElement(this.model.contentComponentName, this.model.contentComponentData);
1048
+ return React__namespace.createElement("div", { className: "sv-popup__content" }, contentComponent);
1049
+ }
1050
+ renderHeaderPopup(popupModel) {
1051
+ return popupModel.showCloseButton ? React__namespace.createElement("button", { tabIndex: -1, className: "sv-popup__close-button sd-action sd-action--icon", onClick: () => this.model.clickClose() },
1052
+ React__namespace.createElement(SvgIcon, { className: "sv-popup__close-button-icon", iconName: "icon-close-24x24", size: "auto" })) : null;
1053
+ }
1054
+ renderFooter(popuModel) {
1055
+ return (React__namespace.createElement("div", { className: "sv-popup__body-footer" },
1056
+ React__namespace.createElement(SurveyActionBar, { model: popuModel.footerToolbar })));
1057
+ }
1058
+ render() {
1059
+ const container = this.renderContainer(this.model);
1060
+ const className = new surveyCore.CssClassBuilder()
1061
+ .append("sv-popup")
1062
+ .append(this.model.styleClass)
1063
+ .toString();
1064
+ const style = { display: this.model.isVisible ? "" : "none", };
1065
+ return (React__namespace.createElement("div", { tabIndex: -1, className: className, style: style, onClick: (e) => {
1066
+ this.model.clickOutside(e);
1067
+ }, onBlur: (e) => {
1068
+ this.model.blur(e);
1069
+ }, onKeyDown: this.handleKeydown }, container));
1070
+ }
1071
+ componentDidMount() {
1072
+ super.componentDidMount();
1073
+ if (this.model.isVisible) {
1074
+ this.model.updateOnShowing();
1075
+ }
1076
+ }
1077
+ }
1078
+ class PopupDropdownContainer extends PopupContainer {
1079
+ renderHeaderPopup(popupModel) {
1080
+ const popupDropdownModel = popupModel;
1081
+ if (!popupDropdownModel || !popupDropdownModel.showHeader)
1082
+ return null;
1083
+ return (React__namespace.createElement("span", { style: {
1084
+ left: popupDropdownModel.pointerTarget.left,
1085
+ top: popupDropdownModel.pointerTarget.top,
1086
+ }, className: "sv-popup__pointer" }));
1087
+ }
1088
+ }
1089
+
1082
1090
  class PopupModal extends SurveyElementBase {
1083
1091
  createPopupModalManager() {
1084
1092
  const modalManager = new surveyCore.PopupModalManager();
@@ -1149,7 +1157,7 @@
1149
1157
 
1150
1158
  var removefile = "<svg viewBox=\"0 0 16 16\"><path d=\"M8,2C4.7,2,2,4.7,2,8s2.7,6,6,6s6-2.7,6-6S11.3,2,8,2z M11,10l-1,1L8,9l-2,2l-1-1l2-2L5,6l1-1l2,2l2-2l1,1L9,8 L11,10z\"/></svg>";
1151
1159
 
1152
- var timercircle = "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"0 0 160 160\"><circle cx=\"80\" cy=\"80\" r=\"70\" style=\"stroke:var(--sd-timer-stroke-background-color);stroke-width:var(--sd-timer-stroke-background-width)\" stroke-dasharray=\"none\" stroke-dashoffset=\"none\"/><circle cx=\"80\" cy=\"80\" r=\"70\"/></svg>";
1160
+ var timercircle = "<svg xmlns=\"http://www.w3.org/2000/svg\" version=\"1.1\" viewBox=\"0 0 160 160\"><circle cx=\"80\" cy=\"80\" r=\"70\" class=\"sd-timer__stroke-background\" stroke-dasharray=\"none\" stroke-dashoffset=\"none\"/><circle cx=\"80\" cy=\"80\" r=\"70\"/></svg>";
1153
1161
 
1154
1162
  var add_24x24 = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M15.75 12C15.75 12.41 15.41 12.75 15 12.75H12.75V15C12.75 15.41 12.41 15.75 12 15.75C11.59 15.75 11.25 15.41 11.25 15V12.75H9C8.59 12.75 8.25 12.41 8.25 12C8.25 11.59 8.59 11.25 9 11.25H11.25V9C11.25 8.59 11.59 8.25 12 8.25C12.41 8.25 12.75 8.59 12.75 9V11.25H15C15.41 11.25 15.75 11.59 15.75 12ZM21.75 12C21.75 17.38 17.38 21.75 12 21.75C6.62 21.75 2.25 17.38 2.25 12C2.25 6.62 6.62 2.25 12 2.25C17.38 2.25 21.75 6.62 21.75 12ZM20.25 12C20.25 7.45 16.55 3.75 12 3.75C7.45 3.75 3.75 7.45 3.75 12C3.75 16.55 7.45 20.25 12 20.25C16.55 20.25 20.25 16.55 20.25 12Z\"/></svg>";
1155
1163
 
@@ -1454,11 +1462,6 @@
1454
1462
  const rootCss = this.survey.getRootCss();
1455
1463
  const cssClasses = this.rootNodeClassName ? this.rootNodeClassName + " " + rootCss : rootCss;
1456
1464
  return (React__namespace.createElement("div", { id: this.rootNodeId, ref: this.rootRef, className: cssClasses, style: this.survey.themeVariables, lang: this.survey.locale || "en", dir: this.survey.localeDir },
1457
- this.survey.generateStylesheet ?
1458
- React__namespace.createElement(React__namespace.Fragment, null,
1459
- React__namespace.createElement("style", null, this.survey.themeStyle),
1460
- React__namespace.createElement("style", null, this.survey.resetVariablesStyle))
1461
- : null,
1462
1465
  React__namespace.createElement(Scroll, { disabled: this.survey.rootScrollDisabled },
1463
1466
  this.survey.needRenderIcons ? React__namespace.createElement(SvgBundleComponent, null) : null,
1464
1467
  React__namespace.createElement(PopupModal, null),
@@ -1623,35 +1626,6 @@
1623
1626
  ReactElementFactory.Instance.registerElement("survey", (props) => {
1624
1627
  return React__namespace.createElement(Survey, props);
1625
1628
  });
1626
- function attachKey2click(element, viewModel, options = { processEsc: true, disableTabStop: false }) {
1627
- let props = {};
1628
- if ((!!viewModel && viewModel.disableTabStop) || (!!options && options.disableTabStop)) {
1629
- props = { tabIndex: -1 };
1630
- }
1631
- else {
1632
- options = { ...options };
1633
- props = {
1634
- tabIndex: 0,
1635
- onKeyUp: (evt) => {
1636
- evt.preventDefault();
1637
- evt.stopPropagation();
1638
- surveyCore.doKey2ClickUp(evt, options);
1639
- },
1640
- onKeyDown: (evt) => surveyCore.doKey2ClickDown(evt, options),
1641
- onBlur: (evt) => surveyCore.doKey2ClickBlur(evt),
1642
- };
1643
- }
1644
- props["onPointerUp"] = (evt) => {
1645
- if (evt.pointerType === "pen") {
1646
- evt.preventDefault();
1647
- evt.stopPropagation();
1648
- const element = evt.target;
1649
- if (element === null || element === void 0 ? void 0 : element.click)
1650
- element.click();
1651
- }
1652
- };
1653
- return React__namespace.cloneElement(element, props);
1654
- }
1655
1629
 
1656
1630
  class SurveyNavigationBase extends SurveyElementBase {
1657
1631
  constructor(props) {
@@ -5911,6 +5885,28 @@
5911
5885
  return React__namespace.createElement(ListItemGroup, props);
5912
5886
  });
5913
5887
 
5888
+ class SurveyActionBarItemDropdown extends SurveyActionBarItem {
5889
+ constructor(props) {
5890
+ super(props);
5891
+ }
5892
+ renderInnerButton() {
5893
+ const button = super.renderInnerButton();
5894
+ return (React__namespace.createElement(React__namespace.Fragment, null,
5895
+ button,
5896
+ React__namespace.createElement(Popup, { model: this.item.popupModel })));
5897
+ }
5898
+ componentDidMount() {
5899
+ this.viewModel = new surveyCore.ActionDropdownViewModel(this.item);
5900
+ }
5901
+ componentWillUnmount() {
5902
+ super.componentWillUnmount();
5903
+ this.viewModel.dispose();
5904
+ }
5905
+ }
5906
+ ReactElementFactory.Instance.registerElement("sv-action-bar-item-dropdown", (props) => {
5907
+ return React__namespace.createElement(SurveyActionBarItemDropdown, props);
5908
+ });
5909
+
5914
5910
  class LogoImage extends React__namespace.Component {
5915
5911
  constructor(props) {
5916
5912
  super(props);
@@ -6157,7 +6153,7 @@
6157
6153
  return React__namespace.createElement(SurveyLocStringEditor, props);
6158
6154
  });
6159
6155
 
6160
- surveyCore.checkLibraryVersion(`${"3.0.2"}`, "survey-react-ui");
6156
+ surveyCore.checkLibraryVersion(`${"3.0.4"}`, "survey-react-ui");
6161
6157
 
6162
6158
  Object.defineProperty(exports, "Model", {
6163
6159
  enumerable: true,
@@ -6212,6 +6208,8 @@
6212
6208
  exports.SliderLabelItem = SliderLabelItem;
6213
6209
  exports.Survey = Survey;
6214
6210
  exports.SurveyActionBar = SurveyActionBar;
6211
+ exports.SurveyActionBarItemDropdown = SurveyActionBarItemDropdown;
6212
+ exports.SurveyActionBarSeparator = SurveyActionBarSeparator;
6215
6213
  exports.SurveyElementBase = SurveyElementBase;
6216
6214
  exports.SurveyElementErrors = SurveyElementErrors;
6217
6215
  exports.SurveyFileChooseButton = SurveyFileChooseButton;