@inseefr/lunatic 2.5.1-suggesterCustomisationStyle → 2.5.2-beta
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/lib/components/commons/components/combo-box/combo-box-container.js +3 -2
- package/lib/components/commons/components/combo-box/combo-box-content-box.js +2 -7
- package/lib/components/commons/components/combo-box/combo-box-content.js +6 -5
- package/lib/components/commons/components/combo-box/combo-box.js +22 -6
- package/lib/components/commons/components/combo-box/panel/panel-container.js +5 -2
- package/lib/components/commons/components/combo-box/panel/panel-container.spec.js +7 -6
- package/lib/components/commons/components/combo-box/panel/panel.js +2 -2
- package/lib/components/commons/components/combo-box/selection/selection-container.js +2 -2
- package/lib/components/commons/components/combo-box/selection/selection.js +2 -2
- package/lib/components/dropdown/lunatic-dropdown.js +3 -1
- package/lib/components/index.js +7 -0
- package/lib/components/modal/html/modal.js +88 -0
- package/lib/components/modal/html/modal.scss +43 -0
- package/lib/components/modal/index.js +13 -0
- package/lib/components/modal/lunatic-modal.js +38 -0
- package/lib/components/pairwise-links/orchestrator.js +2 -0
- package/lib/components/pairwise-links/pairwise-links.js +1 -1
- package/lib/components/pairwise-links/row.js +2 -0
- package/lib/components/roundabout/lunatic-roundabout.js +0 -7
- package/lib/components/suggester/html/suggester.js +10 -6
- package/lib/src/components/commons/components/combo-box/combo-box-container.d.ts +1 -0
- package/lib/src/components/commons/components/combo-box/combo-box-content-box.d.ts +2 -5
- package/lib/src/components/commons/components/combo-box/combo-box-content.d.ts +2 -2
- package/lib/src/components/commons/components/combo-box/combo-box.d.ts +1 -0
- package/lib/src/components/commons/components/combo-box/combo-box.stories.d.ts +2 -1
- package/lib/src/components/commons/components/combo-box/panel/panel-container.d.ts +2 -2
- package/lib/src/components/commons/components/combo-box/selection/selection-container.d.ts +2 -2
- package/lib/src/components/commons/components/combo-box/selection/selection.d.ts +2 -2
- package/lib/src/components/dropdown/lunatic-dropdown.d.ts +1 -1
- package/lib/src/components/index.d.ts +1 -0
- package/lib/src/components/modal/html/modal.d.ts +14 -0
- package/lib/src/components/modal/index.d.ts +1 -0
- package/lib/src/components/modal/lunatic-modal.d.ts +3 -0
- package/lib/src/components/pairwise-links/row.d.ts +1 -1
- package/lib/src/components/suggester/html/suggester.d.ts +1 -0
- package/lib/src/components/type.d.ts +8 -0
- package/lib/src/use-lunatic/actions.d.ts +4 -0
- package/lib/src/use-lunatic/commons/fill-components/fill-from-state.d.ts +40 -0
- package/lib/src/use-lunatic/reducer/overview/overview-on-init.d.ts +2 -0
- package/lib/src/use-lunatic/type.d.ts +2 -0
- package/lib/src/use-lunatic/use-lunatic.d.ts +22 -0
- package/lib/stories/modal/modal.stories.js +34 -0
- package/lib/stories/modal/source.json +97 -0
- package/lib/stories/questionnaires/simpsons/simpsons.stories.js +33 -36
- package/lib/stories/roundabout/data1.json +25 -0
- package/lib/stories/roundabout/roundabout.stories.js +12 -4
- package/lib/use-lunatic/commons/fill-components/fill-from-state.js +6 -2
- package/lib/use-lunatic/commons/page-navigation.js +2 -2
- package/lib/use-lunatic/commons/page.js +8 -2
- package/lib/use-lunatic/initial-state.js +2 -0
- package/lib/use-lunatic/reducer/commons/auto-explore-loop.js +24 -5
- package/lib/use-lunatic/reducer/reduce-go-next-page.js +11 -4
- package/lib/use-lunatic/reducer/reduce-go-previous-page.js +13 -5
- package/lib/use-lunatic/reducer/reduce-go-to-page.js +7 -6
- package/lib/use-lunatic/reducer/reduce-handle-change/reduce-resizing.js +0 -3
- package/lib/use-lunatic/reducer/reduce-on-init.js +11 -7
- package/lib/use-lunatic/use-lunatic.js +3 -1
- package/package.json +1 -1
- /package/lib/stories/roundabout/{data.json → data2.json} +0 -0
|
@@ -12,13 +12,14 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
|
|
|
12
12
|
function ComboBoxContainer(_ref) {
|
|
13
13
|
var children = _ref.children,
|
|
14
14
|
className = _ref.className,
|
|
15
|
+
classNamePrefix = _ref.classNamePrefix,
|
|
15
16
|
id = _ref.id,
|
|
16
17
|
_ref$classStyle = _ref.classStyle,
|
|
17
18
|
classStyle = _ref$classStyle === void 0 ? 'default-style' : _ref$classStyle,
|
|
18
19
|
errors = _ref.errors;
|
|
19
20
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
20
|
-
id: "".concat(
|
|
21
|
-
className: (0, _classnames["default"])("".concat(
|
|
21
|
+
id: "".concat(classNamePrefix !== null && classNamePrefix !== void 0 ? classNamePrefix : 'lunatic', "-combo-box-container-").concat(id),
|
|
22
|
+
className: (0, _classnames["default"])(className, "".concat(classNamePrefix !== null && classNamePrefix !== void 0 ? classNamePrefix : 'lunatic', "-combo-box-container"), "".concat(classNamePrefix !== null && classNamePrefix !== void 0 ? classNamePrefix : 'lunatic', "-suggester-").concat(classStyle), "lunatic-suggester-default-style", classStyle),
|
|
22
23
|
children: [children, errors && /*#__PURE__*/(0, _jsxRuntime.jsx)(_errors["default"], {
|
|
23
24
|
errors: errors,
|
|
24
25
|
activeId: id
|
|
@@ -12,17 +12,12 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
12
12
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
13
|
function ComboBoxContentBox(_ref) {
|
|
14
14
|
var children = _ref.children,
|
|
15
|
-
|
|
16
|
-
onFocus = _ref.onFocus,
|
|
17
|
-
onKeyDown = _ref.onKeyDown,
|
|
15
|
+
classNamePrefix = _ref.classNamePrefix,
|
|
18
16
|
focused = _ref.focused;
|
|
19
17
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
20
|
-
className: (0, _classnames["default"])("".concat(
|
|
18
|
+
className: (0, _classnames["default"])("".concat(classNamePrefix !== null && classNamePrefix !== void 0 ? classNamePrefix : 'lunatic', "-combo-box"), {
|
|
21
19
|
focused: focused
|
|
22
20
|
}),
|
|
23
|
-
onFocus: onFocus,
|
|
24
|
-
onClick: onFocus,
|
|
25
|
-
onKeyDown: onKeyDown,
|
|
26
21
|
children: children
|
|
27
22
|
});
|
|
28
23
|
}
|
|
@@ -21,7 +21,7 @@ function ComboBoxContent(_ref) {
|
|
|
21
21
|
onFocus = _ref.onFocus,
|
|
22
22
|
onBlur = _ref.onBlur,
|
|
23
23
|
onKeyDown = _ref.onKeyDown,
|
|
24
|
-
|
|
24
|
+
classNamePrefix = _ref.classNamePrefix;
|
|
25
25
|
var ref = (0, _react.useRef)(null);
|
|
26
26
|
var onClick = (0, _react.useCallback)(function (e) {
|
|
27
27
|
var _ref$current;
|
|
@@ -47,15 +47,16 @@ function ComboBoxContent(_ref) {
|
|
|
47
47
|
onKeyDown(key);
|
|
48
48
|
}, [onKeyDown]);
|
|
49
49
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_comboBoxContentBox["default"], {
|
|
50
|
-
|
|
51
|
-
onFocus: onFocus,
|
|
52
|
-
onKeyDown: handleKeyDown,
|
|
50
|
+
classNamePrefix: classNamePrefix,
|
|
53
51
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
54
|
-
className: (0, _classnames["default"])("".concat(
|
|
52
|
+
className: (0, _classnames["default"])("".concat(classNamePrefix !== null && classNamePrefix !== void 0 ? classNamePrefix : 'lunatic', "-combo-box-content"), {
|
|
55
53
|
focused: focused
|
|
56
54
|
}),
|
|
57
55
|
ref: ref,
|
|
58
56
|
tabIndex: 0,
|
|
57
|
+
onFocus: onFocus,
|
|
58
|
+
onClick: onFocus,
|
|
59
|
+
onKeyDown: handleKeyDown,
|
|
59
60
|
children: children
|
|
60
61
|
})
|
|
61
62
|
});
|
|
@@ -32,6 +32,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
|
32
32
|
var EMPTY_SEARCH = '';
|
|
33
33
|
function ComboBox(_ref) {
|
|
34
34
|
var className = _ref.className,
|
|
35
|
+
classNamePrefix = _ref.classNamePrefix,
|
|
35
36
|
_ref$classStyle = _ref.classStyle,
|
|
36
37
|
classStyle = _ref$classStyle === void 0 ? 'default-style' : _ref$classStyle,
|
|
37
38
|
_ref$placeholder = _ref.placeholder,
|
|
@@ -72,12 +73,26 @@ function ComboBox(_ref) {
|
|
|
72
73
|
getOptionValue: getOptionValue
|
|
73
74
|
}));
|
|
74
75
|
}, [options, value, getOptionValue]);
|
|
76
|
+
|
|
77
|
+
// This useEffect ensures that onSelect is called when selectedIndex changes
|
|
78
|
+
(0, _react.useEffect)(function () {
|
|
79
|
+
if (selectedIndex) {
|
|
80
|
+
var option = options[selectedIndex];
|
|
81
|
+
onSelect(getOptionValue(option));
|
|
82
|
+
}
|
|
83
|
+
}, [selectedIndex, options, getOptionValue, onSelect]);
|
|
75
84
|
var onFocus = (0, _react.useCallback)(function () {
|
|
85
|
+
if (disabled) {
|
|
86
|
+
return;
|
|
87
|
+
}
|
|
76
88
|
dispatch(_stateManagement.actions.onFocus());
|
|
77
|
-
}, []);
|
|
89
|
+
}, [disabled]);
|
|
78
90
|
var onBlur = (0, _react.useCallback)(function () {
|
|
91
|
+
if (disabled) {
|
|
92
|
+
return;
|
|
93
|
+
}
|
|
79
94
|
dispatch(_stateManagement.actions.onBlur());
|
|
80
|
-
}, []);
|
|
95
|
+
}, [disabled]);
|
|
81
96
|
var handleSelect = (0, _react.useCallback)(function (index) {
|
|
82
97
|
var indexNumber = parseInt(index, 10);
|
|
83
98
|
var option = options[indexNumber];
|
|
@@ -96,6 +111,7 @@ function ComboBox(_ref) {
|
|
|
96
111
|
dispatch(_stateManagement.actions.onDelete());
|
|
97
112
|
onChange === null || onChange === void 0 ? void 0 : onChange(EMPTY_SEARCH);
|
|
98
113
|
}, [onChange]);
|
|
114
|
+
var showClearButton = !disabled;
|
|
99
115
|
if (messageError) {
|
|
100
116
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
101
117
|
className: "lunatic-combo-box-message-error",
|
|
@@ -105,7 +121,7 @@ function ComboBox(_ref) {
|
|
|
105
121
|
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_comboBoxContainer["default"], {
|
|
106
122
|
id: id,
|
|
107
123
|
classStyle: classStyle,
|
|
108
|
-
|
|
124
|
+
classNamePrefix: classNamePrefix,
|
|
109
125
|
errors: errors,
|
|
110
126
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_label["default"], {
|
|
111
127
|
htmlFor: id,
|
|
@@ -117,7 +133,7 @@ function ComboBox(_ref) {
|
|
|
117
133
|
onFocus: onFocus,
|
|
118
134
|
onBlur: onBlur,
|
|
119
135
|
onKeyDown: onKeyDown,
|
|
120
|
-
|
|
136
|
+
classNamePrefix: classNamePrefix,
|
|
121
137
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_selection.Selection, {
|
|
122
138
|
labelRenderer: labelRenderer,
|
|
123
139
|
placeholder: placeholder,
|
|
@@ -131,7 +147,7 @@ function ComboBox(_ref) {
|
|
|
131
147
|
selectedIndex: selectedIndex,
|
|
132
148
|
options: options,
|
|
133
149
|
onChange: handleChange,
|
|
134
|
-
|
|
150
|
+
classNamePrefix: classNamePrefix
|
|
135
151
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_panel.Panel, {
|
|
136
152
|
optionRenderer: optionRenderer,
|
|
137
153
|
options: options,
|
|
@@ -142,7 +158,7 @@ function ComboBox(_ref) {
|
|
|
142
158
|
search: search,
|
|
143
159
|
onSelect: handleSelect
|
|
144
160
|
})]
|
|
145
|
-
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_clearButton.ClearButton, {
|
|
161
|
+
}), showClearButton && /*#__PURE__*/(0, _jsxRuntime.jsx)(_clearButton.ClearButton, {
|
|
146
162
|
className: (0, _classnames["default"])({
|
|
147
163
|
focused: focused
|
|
148
164
|
}),
|
|
@@ -3,8 +3,9 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports
|
|
6
|
+
exports["default"] = void 0;
|
|
7
7
|
var _classnames = _interopRequireDefault(require("classnames"));
|
|
8
|
+
var _createCustomizableField = _interopRequireDefault(require("../../../create-customizable-field"));
|
|
8
9
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
9
10
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
10
11
|
function PanelContainer(_ref) {
|
|
@@ -22,4 +23,6 @@ function PanelContainer(_ref) {
|
|
|
22
23
|
role: "listbox",
|
|
23
24
|
children: children
|
|
24
25
|
});
|
|
25
|
-
}
|
|
26
|
+
}
|
|
27
|
+
var _default = (0, _createCustomizableField["default"])(PanelContainer, 'ComboboxPanelContainer');
|
|
28
|
+
exports["default"] = _default;
|
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
var _react = require("@testing-library/react");
|
|
4
4
|
var _vitest = require("vitest");
|
|
5
|
-
var _panelContainer = require("./panel-container");
|
|
5
|
+
var _panelContainer = _interopRequireDefault(require("./panel-container"));
|
|
6
6
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
7
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
7
8
|
(0, _vitest.describe)('PanelContainer', function () {
|
|
8
9
|
(0, _vitest.it)('should render children', function () {
|
|
9
|
-
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_panelContainer
|
|
10
|
+
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsxs)(_panelContainer["default"], {
|
|
10
11
|
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
|
|
11
12
|
children: "Item 1"
|
|
12
13
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
|
|
@@ -20,7 +21,7 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
20
21
|
});
|
|
21
22
|
(0, _vitest.it)('should set the id attribute', function () {
|
|
22
23
|
var id = 'test-panel';
|
|
23
|
-
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer
|
|
24
|
+
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer["default"], {
|
|
24
25
|
id: id,
|
|
25
26
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
|
|
26
27
|
children: "Item 1"
|
|
@@ -29,7 +30,7 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
29
30
|
(0, _vitest.expect)(_react.screen.getByRole('listbox')).toHaveAttribute('id', "lunatic-combo-box-panel-".concat(id));
|
|
30
31
|
});
|
|
31
32
|
(0, _vitest.it)('should set the aria-label attribute', function () {
|
|
32
|
-
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer
|
|
33
|
+
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer["default"], {
|
|
33
34
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
|
|
34
35
|
children: "Item 1"
|
|
35
36
|
})
|
|
@@ -37,7 +38,7 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
37
38
|
(0, _vitest.expect)(_react.screen.getByRole('listbox')).toHaveAttribute('aria-label', 'suggestions');
|
|
38
39
|
});
|
|
39
40
|
(0, _vitest.it)('should set the focused class when focused prop is true', function () {
|
|
40
|
-
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer
|
|
41
|
+
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer["default"], {
|
|
41
42
|
focused: true,
|
|
42
43
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
|
|
43
44
|
children: "Item 1"
|
|
@@ -46,7 +47,7 @@ var _jsxRuntime = require("react/jsx-runtime");
|
|
|
46
47
|
(0, _vitest.expect)(_react.screen.getByRole('listbox')).toHaveClass('focused');
|
|
47
48
|
});
|
|
48
49
|
(0, _vitest.it)('should set the expanded class when expanded prop is true', function () {
|
|
49
|
-
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer
|
|
50
|
+
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer["default"], {
|
|
50
51
|
expanded: true,
|
|
51
52
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
|
|
52
53
|
children: "Item 1"
|
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
5
5
|
});
|
|
6
6
|
exports.Panel = Panel;
|
|
7
7
|
var _react = _interopRequireDefault(require("react"));
|
|
8
|
-
var _panelContainer = require("./panel-container");
|
|
8
|
+
var _panelContainer = _interopRequireDefault(require("./panel-container"));
|
|
9
9
|
var _optionContainer = require("./option-container");
|
|
10
10
|
var _comboBoxOption = _interopRequireDefault(require("./combo-box-option"));
|
|
11
11
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
@@ -22,7 +22,7 @@ function Panel(_ref) {
|
|
|
22
22
|
onSelect = _ref.onSelect;
|
|
23
23
|
var visibleOptions = expanded ? options : [];
|
|
24
24
|
var ComboBoxOptionComponent = OptionRender !== null && OptionRender !== void 0 ? OptionRender : _comboBoxOption["default"];
|
|
25
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer
|
|
25
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_panelContainer["default"], {
|
|
26
26
|
expanded: expanded,
|
|
27
27
|
focused: focused,
|
|
28
28
|
id: "".concat(id, "-list"),
|
|
@@ -15,11 +15,11 @@ function SelectionContainer(_ref) {
|
|
|
15
15
|
focused = _ref.focused,
|
|
16
16
|
disabled = _ref.disabled,
|
|
17
17
|
labelId = _ref.labelId,
|
|
18
|
-
|
|
18
|
+
classNamePrefix = _ref.classNamePrefix;
|
|
19
19
|
var comboBoxId = "".concat(id);
|
|
20
20
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
21
21
|
id: comboBoxId,
|
|
22
|
-
className: (0, _classnames["default"])("".concat(
|
|
22
|
+
className: (0, _classnames["default"])("".concat(classNamePrefix !== null && classNamePrefix !== void 0 ? classNamePrefix : 'lunatic', "-combo-box-selection"), {
|
|
23
23
|
focused: focused,
|
|
24
24
|
disabled: disabled
|
|
25
25
|
}),
|
|
@@ -22,7 +22,7 @@ function Selection(_ref) {
|
|
|
22
22
|
editable = _ref.editable,
|
|
23
23
|
labelId = _ref.labelId,
|
|
24
24
|
id = _ref.id,
|
|
25
|
-
|
|
25
|
+
classNamePrefix = _ref.classNamePrefix;
|
|
26
26
|
var onChangeEx = (0, _react.useCallback)(function (e) {
|
|
27
27
|
onChange === null || onChange === void 0 ? void 0 : onChange(e.target.value);
|
|
28
28
|
}, [onChange]);
|
|
@@ -31,7 +31,7 @@ function Selection(_ref) {
|
|
|
31
31
|
labelId: labelId,
|
|
32
32
|
expanded: expanded,
|
|
33
33
|
"aria-owns": "".concat(id, "-list"),
|
|
34
|
-
|
|
34
|
+
classNamePrefix: classNamePrefix,
|
|
35
35
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelOrInput.LabelOrInput, {
|
|
36
36
|
labelRenderer: labelRenderer,
|
|
37
37
|
placeholder: placeholder,
|
|
@@ -8,6 +8,7 @@ var _react = _interopRequireDefault(require("react"));
|
|
|
8
8
|
var _lunaticComponentWithoutLabel = _interopRequireDefault(require("../commons/components/lunatic-component-without-label"));
|
|
9
9
|
var _useOnHandleChange = _interopRequireDefault(require("../commons/use-on-handle-change"));
|
|
10
10
|
var _dropdown = _interopRequireDefault(require("./html/dropdown"));
|
|
11
|
+
var _classnames = _interopRequireDefault(require("classnames"));
|
|
11
12
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
13
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
14
|
function LunaticDropdown(_ref) {
|
|
@@ -16,6 +17,7 @@ function LunaticDropdown(_ref) {
|
|
|
16
17
|
options = _ref.options,
|
|
17
18
|
writable = _ref.writable,
|
|
18
19
|
disabled = _ref.disabled,
|
|
20
|
+
className = _ref.className,
|
|
19
21
|
value = _ref.value,
|
|
20
22
|
response = _ref.response,
|
|
21
23
|
errors = _ref.errors,
|
|
@@ -48,7 +50,7 @@ function LunaticDropdown(_ref) {
|
|
|
48
50
|
options: options,
|
|
49
51
|
onSelect: onChange,
|
|
50
52
|
value: value,
|
|
51
|
-
className: "lunatic-dropdown",
|
|
53
|
+
className: (0, _classnames["default"])(className, "lunatic-dropdown"),
|
|
52
54
|
errors: errors,
|
|
53
55
|
label: label
|
|
54
56
|
})
|
package/lib/components/index.js
CHANGED
|
@@ -33,6 +33,12 @@ Object.defineProperty(exports, "ComponentSet", {
|
|
|
33
33
|
return _componentSet["default"];
|
|
34
34
|
}
|
|
35
35
|
});
|
|
36
|
+
Object.defineProperty(exports, "ConfirmationModal", {
|
|
37
|
+
enumerable: true,
|
|
38
|
+
get: function get() {
|
|
39
|
+
return _modal["default"];
|
|
40
|
+
}
|
|
41
|
+
});
|
|
36
42
|
Object.defineProperty(exports, "Datepicker", {
|
|
37
43
|
enumerable: true,
|
|
38
44
|
get: function get() {
|
|
@@ -205,4 +211,5 @@ var _summary = require("./summary");
|
|
|
205
211
|
var _questionInformation = _interopRequireDefault(require("./questions/question-information"));
|
|
206
212
|
var _questionContext = _interopRequireDefault(require("./questions/question-context"));
|
|
207
213
|
var _questionExplication = _interopRequireDefault(require("./question-explication"));
|
|
214
|
+
var _modal = _interopRequireDefault(require("./modal"));
|
|
208
215
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
var _react = require("react");
|
|
8
|
+
var _commons = require("../../commons");
|
|
9
|
+
var _reactDom = require("react-dom");
|
|
10
|
+
require("./modal.scss");
|
|
11
|
+
var _button = _interopRequireDefault(require("../../button"));
|
|
12
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
13
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
14
|
+
function Modal(props) {
|
|
15
|
+
var id = props.id,
|
|
16
|
+
label = props.label,
|
|
17
|
+
description = props.description,
|
|
18
|
+
goNextPage = props.goNextPage,
|
|
19
|
+
goPreviousPage = props.goPreviousPage;
|
|
20
|
+
var first = (0, _react.useRef)(null);
|
|
21
|
+
var last = (0, _react.useRef)(null);
|
|
22
|
+
(0, _react.useEffect)(function () {
|
|
23
|
+
var _first$current;
|
|
24
|
+
var focusOnInit = first === null || first === void 0 || (_first$current = first.current) === null || _first$current === void 0 ? void 0 : _first$current.lastElementChild;
|
|
25
|
+
focusOnInit.focus();
|
|
26
|
+
}, [first]);
|
|
27
|
+
var onKeyDown = (0, _react.useCallback)(function (e) {
|
|
28
|
+
var _first$current2, _last$current;
|
|
29
|
+
var firstButtonToFocus = first === null || first === void 0 || (_first$current2 = first.current) === null || _first$current2 === void 0 ? void 0 : _first$current2.lastElementChild;
|
|
30
|
+
var lastButtonToFocus = last === null || last === void 0 || (_last$current = last.current) === null || _last$current === void 0 ? void 0 : _last$current.lastElementChild;
|
|
31
|
+
if (e.key === 'Tab') {
|
|
32
|
+
if (e.shiftKey) {
|
|
33
|
+
if (document.activeElement === firstButtonToFocus) {
|
|
34
|
+
lastButtonToFocus.focus();
|
|
35
|
+
e.nativeEvent.preventDefault();
|
|
36
|
+
}
|
|
37
|
+
} else if (document.activeElement === lastButtonToFocus) {
|
|
38
|
+
firstButtonToFocus.focus();
|
|
39
|
+
e.nativeEvent.preventDefault();
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}, [first, last]);
|
|
43
|
+
var handleNextClick = (0, _react.useCallback)(function () {
|
|
44
|
+
goNextPage();
|
|
45
|
+
}, [goNextPage]);
|
|
46
|
+
var handlePreviousClick = (0, _react.useCallback)(function () {
|
|
47
|
+
goPreviousPage();
|
|
48
|
+
}, [goPreviousPage]);
|
|
49
|
+
return /*#__PURE__*/(0, _reactDom.createPortal)( /*#__PURE__*/(0, _jsxRuntime.jsx)("dialog", {
|
|
50
|
+
className: "lunatic-modal",
|
|
51
|
+
open: true,
|
|
52
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
53
|
+
className: "modal-content",
|
|
54
|
+
onKeyDown: onKeyDown,
|
|
55
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
56
|
+
id: id,
|
|
57
|
+
className: "lunatic-modal-container",
|
|
58
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
|
|
59
|
+
className: "close-button",
|
|
60
|
+
ref: first,
|
|
61
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
|
|
62
|
+
onClick: handlePreviousClick,
|
|
63
|
+
children: "fermer x"
|
|
64
|
+
})
|
|
65
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
66
|
+
className: "modal-message",
|
|
67
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
68
|
+
children: label
|
|
69
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
|
|
70
|
+
children: description
|
|
71
|
+
})]
|
|
72
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
|
|
73
|
+
className: "cancel-confirm-buttons",
|
|
74
|
+
ref: last,
|
|
75
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
|
|
76
|
+
onClick: handlePreviousClick,
|
|
77
|
+
children: "Annuler"
|
|
78
|
+
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
|
|
79
|
+
onClick: handleNextClick,
|
|
80
|
+
children: "Je confirme"
|
|
81
|
+
})]
|
|
82
|
+
})]
|
|
83
|
+
})
|
|
84
|
+
})
|
|
85
|
+
}), document.body);
|
|
86
|
+
}
|
|
87
|
+
var _default = (0, _commons.createCustomizableLunaticField)(Modal, 'Modal');
|
|
88
|
+
exports["default"] = _default;
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
.lunatic-modal {
|
|
2
|
+
position: fixed;
|
|
3
|
+
top: 0;
|
|
4
|
+
left: 0;
|
|
5
|
+
width: 100%;
|
|
6
|
+
height: 100%;
|
|
7
|
+
background-color: rgba(50, 50, 50, 0.5);
|
|
8
|
+
z-index: 101;
|
|
9
|
+
|
|
10
|
+
.modal-content {
|
|
11
|
+
background-color: snow;
|
|
12
|
+
height: fit-content;
|
|
13
|
+
width: 50%;
|
|
14
|
+
margin: auto;
|
|
15
|
+
padding: 0.5rem;
|
|
16
|
+
margin-top: 38vh;
|
|
17
|
+
display: flex;
|
|
18
|
+
flex-direction: column;
|
|
19
|
+
border-radius: 8px;
|
|
20
|
+
overflow-wrap: break-word;
|
|
21
|
+
.lunatic-modal-container {
|
|
22
|
+
.close-button {
|
|
23
|
+
color: blue;
|
|
24
|
+
display: flex;
|
|
25
|
+
justify-content: right;
|
|
26
|
+
}
|
|
27
|
+
}
|
|
28
|
+
.body {
|
|
29
|
+
color: black;
|
|
30
|
+
font-size: 16px;
|
|
31
|
+
font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.modal-buttons {
|
|
35
|
+
align-self: end;
|
|
36
|
+
margin: 0 0.2em 0.2em 0;
|
|
37
|
+
:first-child {
|
|
38
|
+
margin-right: 0.5em;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
Object.defineProperty(exports, "default", {
|
|
7
|
+
enumerable: true,
|
|
8
|
+
get: function get() {
|
|
9
|
+
return _lunaticModal["default"];
|
|
10
|
+
}
|
|
11
|
+
});
|
|
12
|
+
var _lunaticModal = _interopRequireDefault(require("./lunatic-modal"));
|
|
13
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports["default"] = void 0;
|
|
7
|
+
var _modal = _interopRequireDefault(require("./html/modal"));
|
|
8
|
+
var _lunaticComponentWithoutLabel = _interopRequireDefault(require("../commons/components/lunatic-component-without-label"));
|
|
9
|
+
var _jsxRuntime = require("react/jsx-runtime");
|
|
10
|
+
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
11
|
+
function empty() {}
|
|
12
|
+
function LunaticModal(props) {
|
|
13
|
+
var id = props.id,
|
|
14
|
+
label = props.label,
|
|
15
|
+
description = props.description,
|
|
16
|
+
goToPage = props.goToPage,
|
|
17
|
+
page = props.page,
|
|
18
|
+
goNextPage = props.goNextPage,
|
|
19
|
+
goPreviousPage = props.goPreviousPage;
|
|
20
|
+
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_lunaticComponentWithoutLabel["default"], {
|
|
21
|
+
id: id,
|
|
22
|
+
label: label,
|
|
23
|
+
handleChange: empty,
|
|
24
|
+
value: undefined,
|
|
25
|
+
description: description,
|
|
26
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_modal["default"], {
|
|
27
|
+
id: id,
|
|
28
|
+
label: label,
|
|
29
|
+
page: page,
|
|
30
|
+
description: description,
|
|
31
|
+
goToPage: goToPage,
|
|
32
|
+
goNextPage: goNextPage,
|
|
33
|
+
goPreviousPage: goPreviousPage
|
|
34
|
+
})
|
|
35
|
+
});
|
|
36
|
+
}
|
|
37
|
+
var _default = LunaticModal;
|
|
38
|
+
exports["default"] = _default;
|
|
@@ -25,6 +25,7 @@ function LinksOrchestrator(props) {
|
|
|
25
25
|
handleChange = props.handleChange,
|
|
26
26
|
features = props.features,
|
|
27
27
|
missing = props.missing,
|
|
28
|
+
className = props.className,
|
|
28
29
|
shortcut = props.shortcut,
|
|
29
30
|
preferences = props.preferences,
|
|
30
31
|
executeExpression = props.executeExpression,
|
|
@@ -60,6 +61,7 @@ function LinksOrchestrator(props) {
|
|
|
60
61
|
/** */,
|
|
61
62
|
features: features,
|
|
62
63
|
shortcut: shortcut,
|
|
64
|
+
className: className,
|
|
63
65
|
preferences: preferences,
|
|
64
66
|
missing: missing,
|
|
65
67
|
errors: errors,
|
|
@@ -4,7 +4,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
6
|
exports["default"] = void 0;
|
|
7
|
-
var _react = _interopRequireDefault(require("react"));
|
|
8
7
|
var _orchestrator = _interopRequireDefault(require("./orchestrator"));
|
|
9
8
|
var _declarations = require("../declarations");
|
|
10
9
|
var _nothingToDisplay = _interopRequireDefault(require("../commons/components/nothing-to-display"));
|
|
@@ -42,6 +41,7 @@ var PairwiseLinks = function PairwiseLinks(_ref) {
|
|
|
42
41
|
handleChange: handleChange,
|
|
43
42
|
nbRows: nbRows,
|
|
44
43
|
value: value,
|
|
44
|
+
className: "pairwise-link",
|
|
45
45
|
management: management,
|
|
46
46
|
missing: missing,
|
|
47
47
|
shortcut: shortcut,
|
|
@@ -26,6 +26,7 @@ function Row(_ref) {
|
|
|
26
26
|
missing = _ref.missing,
|
|
27
27
|
shortcut = _ref.shortcut,
|
|
28
28
|
management = _ref.management,
|
|
29
|
+
className = _ref.className,
|
|
29
30
|
preferences = _ref.preferences,
|
|
30
31
|
executeExpression = _ref.executeExpression,
|
|
31
32
|
linksIterations = _ref.linksIterations,
|
|
@@ -61,6 +62,7 @@ function Row(_ref) {
|
|
|
61
62
|
features: features,
|
|
62
63
|
missing: missing,
|
|
63
64
|
shortcut: shortcut,
|
|
65
|
+
className: className,
|
|
64
66
|
management: management,
|
|
65
67
|
value: value,
|
|
66
68
|
id: idComponent,
|
|
@@ -7,7 +7,6 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
7
7
|
exports["default"] = void 0;
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
9
|
var _roundabout = _interopRequireDefault(require("./roundabout"));
|
|
10
|
-
var _redirect = _interopRequireDefault(require("./redirect"));
|
|
11
10
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
12
11
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
13
12
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -30,12 +29,6 @@ function LunaticRoundabout(_ref) {
|
|
|
30
29
|
nbIterations: iterations
|
|
31
30
|
});
|
|
32
31
|
}, [goToPage, page, iterations]);
|
|
33
|
-
if (iterations === 1) {
|
|
34
|
-
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_redirect["default"], {
|
|
35
|
-
goToIteration: goToIteration,
|
|
36
|
-
iteration: 0
|
|
37
|
-
});
|
|
38
|
-
}
|
|
39
32
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_roundabout["default"], {
|
|
40
33
|
label: label,
|
|
41
34
|
expressions: expressions,
|
|
@@ -24,8 +24,9 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
|
|
|
24
24
|
function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i["return"] && (_r = _i["return"](), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
|
|
25
25
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
26
26
|
function Suggester(_ref) {
|
|
27
|
-
var
|
|
28
|
-
|
|
27
|
+
var className = _ref.className,
|
|
28
|
+
_ref$classNamePrefix = _ref.classNamePrefix,
|
|
29
|
+
classNamePrefix = _ref$classNamePrefix === void 0 ? 'lunatic' : _ref$classNamePrefix,
|
|
29
30
|
_ref$placeholder = _ref.placeholder,
|
|
30
31
|
placeholder = _ref$placeholder === void 0 ? _i18n["default"].PLACEHOLDER : _ref$placeholder,
|
|
31
32
|
_ref$onSelect = _ref.onSelect,
|
|
@@ -57,7 +58,7 @@ function Suggester(_ref) {
|
|
|
57
58
|
while (1) switch (_context.prev = _context.next) {
|
|
58
59
|
case 0:
|
|
59
60
|
if (!(search && typeof searching === 'function')) {
|
|
60
|
-
_context.next =
|
|
61
|
+
_context.next = 10;
|
|
61
62
|
break;
|
|
62
63
|
}
|
|
63
64
|
_context.next = 3;
|
|
@@ -67,13 +68,15 @@ function Suggester(_ref) {
|
|
|
67
68
|
results = _yield$searching.results;
|
|
68
69
|
setOptions(results);
|
|
69
70
|
setSearch(search);
|
|
70
|
-
|
|
71
|
+
// if a user does not select an option in the list, their search term is saved
|
|
72
|
+
onSelect(search);
|
|
73
|
+
_context.next = 13;
|
|
71
74
|
break;
|
|
72
|
-
case
|
|
75
|
+
case 10:
|
|
73
76
|
setOptions([]);
|
|
74
77
|
onSelect(null);
|
|
75
78
|
setSearch('');
|
|
76
|
-
case
|
|
79
|
+
case 13:
|
|
77
80
|
case "end":
|
|
78
81
|
return _context.stop();
|
|
79
82
|
}
|
|
@@ -87,6 +90,7 @@ function Suggester(_ref) {
|
|
|
87
90
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_commons.ComboBox, {
|
|
88
91
|
id: id,
|
|
89
92
|
className: className,
|
|
93
|
+
classNamePrefix: classNamePrefix,
|
|
90
94
|
onChange: handleChange,
|
|
91
95
|
disabled: disabled,
|
|
92
96
|
options: options,
|
|
@@ -1,11 +1,8 @@
|
|
|
1
|
-
import type { KeyboardEvent } from 'react';
|
|
2
1
|
import React, { PropsWithChildren } from 'react';
|
|
3
2
|
type Props = PropsWithChildren<{
|
|
4
3
|
focused?: boolean;
|
|
5
|
-
|
|
6
|
-
onKeyDown: (e: KeyboardEvent<Element>) => void;
|
|
7
|
-
className?: string;
|
|
4
|
+
classNamePrefix?: string;
|
|
8
5
|
}>;
|
|
9
|
-
export declare function ComboBoxContentBox({ children,
|
|
6
|
+
export declare function ComboBoxContentBox({ children, classNamePrefix, focused, }: Props): import("react/jsx-runtime").JSX.Element;
|
|
10
7
|
declare const _default: React.ComponentType<Props>;
|
|
11
8
|
export default _default;
|