odaptos_design_system 2.0.282 → 2.0.284
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Molecules/Thematic/Thematic.d.ts +3 -2
- package/dist/odaptos_design_system.cjs.development.js +70 -9
- package/dist/odaptos_design_system.cjs.development.js.map +1 -1
- package/dist/odaptos_design_system.cjs.production.min.js +1 -1
- package/dist/odaptos_design_system.cjs.production.min.js.map +1 -1
- package/dist/odaptos_design_system.esm.js +71 -10
- package/dist/odaptos_design_system.esm.js.map +1 -1
- package/package.json +1 -1
- package/src/Molecules/Interviews/Task.modules.scss +46 -30
- package/src/Molecules/Interviews/Task.tsx +62 -11
- package/src/Molecules/Thematic/Thematic.tsx +11 -2
- package/src/Organisms/Textarea/Textarea.tsx +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
/// <reference types="react" />
|
|
2
2
|
export interface ThematicProps {
|
|
3
3
|
thematicId: string;
|
|
4
4
|
name: string;
|
|
@@ -32,5 +32,6 @@ export interface ThematicProps {
|
|
|
32
32
|
isEditThematicHidden?: boolean;
|
|
33
33
|
isDeleteThematicHidden?: boolean;
|
|
34
34
|
id?: string;
|
|
35
|
+
isDisabled?: boolean;
|
|
35
36
|
}
|
|
36
|
-
export declare const Thematic: ({ id, thematicId, name, definition, color, tagsList, otherThematicsList, onClickValidateAddTag, onClickValidateEditTag, onSelectThematicToMoveTag, onClickDeleteTag, onClickEditThematic, onClickDeleteThematic, cmsContent, isAddTagHidden, isEditThematicHidden, isDeleteThematicHidden, }: ThematicProps) =>
|
|
37
|
+
export declare const Thematic: ({ id, thematicId, name, definition, color, tagsList, otherThematicsList, onClickValidateAddTag, onClickValidateEditTag, onSelectThematicToMoveTag, onClickDeleteTag, onClickEditThematic, onClickDeleteThematic, cmsContent, isAddTagHidden, isEditThematicHidden, isDeleteThematicHidden, isDisabled, }: ThematicProps) => JSX.Element;
|
|
@@ -93072,8 +93072,8 @@ const SusExplanation = ({
|
|
|
93072
93072
|
}));
|
|
93073
93073
|
};
|
|
93074
93074
|
|
|
93075
|
-
var css_248z$D = ".Task-modules_scenarioContainer__Sc-3y{align-items:flex-start;background:var(--Color-Neutral-Basics-White,#fff);border:1px solid var(--Color-Neutral-Clear-Shades-200,#e1e1e2);border-radius:.5rem;display:flex;flex-direction:column;gap:.5rem;justify-content:center;padding:.75rem;width:100%}.Task-modules_fullWidthButton__vgFPq{width:100%}.Task-modules_scenarioNumberContainer__f0dGn{align-items:center;display:flex;gap:.5rem;justify-content:flex-start;width:100%}.Task-modules_scenarioNumberContainer__f0dGn p{text-transform:capitalize}.Task-modules_goToPageContainer__6M-mo{align-items:center;flex-direction:row;justify-content:space-between;padding:.25rem .25rem .25rem .5rem}.Task-modules_goToPageContainer__6M-mo,.Task-modules_notesContainer__yBLT7{align-self:stretch;background:var(--Color-Neutral-Background,#f9fafc);border-radius:.5rem;display:flex
|
|
93076
|
-
var styles$D = {"scenarioContainer":"Task-modules_scenarioContainer__Sc-3y","fullWidthButton":"Task-modules_fullWidthButton__vgFPq","scenarioNumberContainer":"Task-modules_scenarioNumberContainer__f0dGn","goToPageContainer":"Task-modules_goToPageContainer__6M-mo","notesContainer":"Task-modules_notesContainer__yBLT7","
|
|
93075
|
+
var css_248z$D = ".Task-modules_scenarioContainer__Sc-3y{align-items:flex-start;background:var(--Color-Neutral-Basics-White,#fff);border:1px solid var(--Color-Neutral-Clear-Shades-200,#e1e1e2);border-radius:.5rem;display:flex;flex-direction:column;gap:.5rem;justify-content:center;padding:.75rem;width:100%}.Task-modules_fullWidthButton__vgFPq{width:100%}.Task-modules_scenarioNumberContainer__f0dGn{align-items:center;display:flex;gap:.5rem;justify-content:flex-start;width:100%}.Task-modules_scenarioNumberContainer__f0dGn p{text-transform:capitalize}.Task-modules_goToPageContainer__6M-mo{align-items:center;flex-direction:row;gap:.5rem;justify-content:space-between;padding:.25rem .25rem .25rem .5rem}.Task-modules_goToPageContainer__6M-mo,.Task-modules_notesContainer__yBLT7{align-self:stretch;background:var(--Color-Neutral-Background,#f9fafc);border-radius:.5rem;display:flex}.Task-modules_notesContainer__yBLT7{align-items:flex-start;flex-direction:column;gap:0;padding:.5rem;transition:gap .5s cubic-bezier(.4,0,.2,1)}.Task-modules_actionBtnsContainer__HysFr{align-items:flex-start;align-self:stretch;display:flex;gap:.5rem;justify-content:flex-end;padding-top:8px}.Task-modules_scenarioContainerTooltip__7djqD{align-items:flex-start;background:var(--Color-Neutral-Basics-White,#fff);border:1px solid var(--Color-Neutral-Dark-Shades-950,#26292e);border-radius:.25rem;box-shadow:0 4px 4px 0 rgba(0,0,0,.25);display:flex;flex-direction:column;gap:.5rem;padding:1rem;width:27.75rem}.Task-modules_done_task__96o0g{align-items:flex-start;background:#f7fcf7;border-radius:.5rem;cursor:not-allowed;display:flex;flex-direction:row;justify-content:center;max-width:100%;padding:0}.Task-modules_done_task__96o0g .Task-modules_header_left__dKFvw{align-items:flex-start;align-self:stretch;border:1px solid var(--Color-Extended-Green-300,#9dd6a3);border-radius:.5rem 0 0 .5rem;border-right:none;display:flex;flex-direction:column;gap:.5rem;padding:.3125rem 0 .3125rem .625rem;width:calc(100% - 2.9rem)}.Task-modules_done_task__96o0g .Task-modules_header_left__dKFvw p{max-width:97%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Task-modules_done_task__96o0g .Task-modules_header_right__FDtFs{align-items:center;background:var(--Color-Extended-Green-100,#e8f5ea);border:1px solid var(--Color-Extended-Green-300,#9dd6a3);border-radius:0 .5rem .5rem 0;display:flex;gap:.5rem;justify-content:center;padding:1.4rem .75rem}.Task-modules_done_task__96o0g .Task-modules_header_right__FDtFs svg{fill:#5cbb65;height:1rem;width:1rem}.Task-modules_not_started_task__f2C-B{align-items:flex-start;background:#fff;border-radius:.5rem;display:flex;flex-direction:row;justify-content:center;max-width:100%;padding:0}.Task-modules_not_started_task__f2C-B .Task-modules_header_left__dKFvw{align-items:flex-start;align-self:stretch;border:1px solid var(--Color-Neutral-Dark-Shades-950,#26292e);border-radius:.5rem 0 0 .5rem;border-right:none;display:flex;flex-direction:column;gap:.5rem;padding:.3125rem 0 .3125rem .625rem;width:calc(100% - 2.9rem)}.Task-modules_not_started_task__f2C-B .Task-modules_header_left__dKFvw p{max-width:97%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.Task-modules_not_started_task__f2C-B .Task-modules_header_right__FDtFs{align-items:center;background:#fff;border:1px solid var(--Color-Neutral-Dark-Shades-950,#26292e);border-radius:0 .5rem .5rem 0;cursor:pointer;display:flex;gap:.5rem;justify-content:center;padding:1.3rem .75rem}.Task-modules_not_started_task__f2C-B .Task-modules_header_right__FDtFs:hover{background:#f0f0f0}.Task-modules_not_started_task__f2C-B .Task-modules_header_right__FDtFs svg{fill:#000;height:1rem;width:1rem}.Task-modules_disabled__JLrwv{cursor:not-allowed;opacity:.5;pointer-events:none}.Task-modules_disabled__JLrwv:hover{background:#fff}.Task-modules_taskContainerDone__1iJ0D{align-items:flex-start;align-self:stretch;background:var(--Color-Neutral-Basics-White,#fff);border:1px solid var(--Color-Neutral-Clear-Shades-200,#e1e1e2);border-radius:.5rem;display:flex;flex-direction:column;gap:.5rem;justify-content:center;min-width:8rem;padding:.75rem}.Task-modules_taskContainerDone__1iJ0D .Task-modules_scenarioNumberContainer__f0dGn{align-items:center;display:flex;gap:.5rem;justify-content:flex-start;width:100%}.Task-modules_taskContainerDone__1iJ0D .Task-modules_scenarioNumberContainer__f0dGn .Task-modules_scenarioNumberContainer_left__2ItSZ{align-items:space-between;display:flex;gap:.5rem;justify-content:flex-start;width:100%}.Task-modules_taskContainerDone__1iJ0D .Task-modules_scenarioNumberContainer__f0dGn p{text-transform:capitalize}.Task-modules_notesContent__tRpJc{overflow:hidden;transition:max-height .5s cubic-bezier(.4,0,.2,1)}.Task-modules_notesContainerHeader__pW4uS{align-items:center;display:flex;flex-direction:row;gap:.5rem;justify-content:space-between;width:100%}.Task-modules_notesContainerHeader__pW4uS>:first-child{flex:1 1 auto;min-width:0}.Task-modules_notesContainerHeader__pW4uS .Task-modules_IconButton__FQzVF,.Task-modules_notesContainerHeader__pW4uS button{flex:0 0 auto}.Task-modules_notesContainer__yBLT7.Task-modules_open__zZ8qf{gap:.5rem}.Task-modules_notesContainer__yBLT7.Task-modules_closed__HQTfX{gap:0}.Task-modules_notesText__-WIMg{opacity:1;transform:translateY(0);transition:opacity .5s cubic-bezier(.4,0,.2,1),transform .5s cubic-bezier(.4,0,.2,1)}.Task-modules_notesText__-WIMg.Task-modules_hidden__U8qgs{opacity:0;pointer-events:none;transform:translateY(-4px)}";
|
|
93076
|
+
var styles$D = {"scenarioContainer":"Task-modules_scenarioContainer__Sc-3y","fullWidthButton":"Task-modules_fullWidthButton__vgFPq","scenarioNumberContainer":"Task-modules_scenarioNumberContainer__f0dGn","goToPageContainer":"Task-modules_goToPageContainer__6M-mo","notesContainer":"Task-modules_notesContainer__yBLT7","actionBtnsContainer":"Task-modules_actionBtnsContainer__HysFr","scenarioContainerTooltip":"Task-modules_scenarioContainerTooltip__7djqD","done_task":"Task-modules_done_task__96o0g","header_left":"Task-modules_header_left__dKFvw","header_right":"Task-modules_header_right__FDtFs","not_started_task":"Task-modules_not_started_task__f2C-B","disabled":"Task-modules_disabled__JLrwv","taskContainerDone":"Task-modules_taskContainerDone__1iJ0D","scenarioNumberContainer_left":"Task-modules_scenarioNumberContainer_left__2ItSZ","notesContent":"Task-modules_notesContent__tRpJc","notesContainerHeader":"Task-modules_notesContainerHeader__pW4uS","IconButton":"Task-modules_IconButton__FQzVF","open":"Task-modules_open__zZ8qf","closed":"Task-modules_closed__HQTfX","notesText":"Task-modules_notesText__-WIMg","hidden":"Task-modules_hidden__U8qgs"};
|
|
93077
93077
|
styleInject(css_248z$D);
|
|
93078
93078
|
|
|
93079
93079
|
const replaceURLs = message => {
|
|
@@ -93097,6 +93097,49 @@ const TaskContent = ({
|
|
|
93097
93097
|
sendTask
|
|
93098
93098
|
}) => {
|
|
93099
93099
|
const [openNotes, setOpenNotes] = React.useState(true);
|
|
93100
|
+
// Ref to the notes content element
|
|
93101
|
+
const contentRef = React.useRef(null);
|
|
93102
|
+
// Store the measured height for smooth transition
|
|
93103
|
+
const [contentHeight, setContentHeight] = React.useState(0);
|
|
93104
|
+
// Measure content height whenever notes change
|
|
93105
|
+
React.useLayoutEffect(() => {
|
|
93106
|
+
if (contentRef.current) {
|
|
93107
|
+
setContentHeight(contentRef.current.scrollHeight);
|
|
93108
|
+
}
|
|
93109
|
+
}, [task.notes]);
|
|
93110
|
+
// Keep track of content height on resize or DOM changes
|
|
93111
|
+
React.useEffect(() => {
|
|
93112
|
+
const el = contentRef.current;
|
|
93113
|
+
if (!el) return;
|
|
93114
|
+
let cleanup;
|
|
93115
|
+
// Use ResizeObserver if available
|
|
93116
|
+
if (typeof window !== 'undefined' && window.ResizeObserver) {
|
|
93117
|
+
const ro = new window.ResizeObserver(() => {
|
|
93118
|
+
setContentHeight(el.scrollHeight);
|
|
93119
|
+
});
|
|
93120
|
+
ro.observe(el);
|
|
93121
|
+
cleanup = () => ro.disconnect();
|
|
93122
|
+
} else {
|
|
93123
|
+
// Fallback: listen for window resize + DOM mutations
|
|
93124
|
+
const onResize = () => setContentHeight(el.scrollHeight);
|
|
93125
|
+
window.addEventListener('resize', onResize);
|
|
93126
|
+
const mo = new MutationObserver(() => {
|
|
93127
|
+
setContentHeight(el.scrollHeight);
|
|
93128
|
+
});
|
|
93129
|
+
mo.observe(el, {
|
|
93130
|
+
childList: true,
|
|
93131
|
+
subtree: true,
|
|
93132
|
+
characterData: true
|
|
93133
|
+
});
|
|
93134
|
+
cleanup = () => {
|
|
93135
|
+
window.removeEventListener('resize', onResize);
|
|
93136
|
+
mo.disconnect();
|
|
93137
|
+
};
|
|
93138
|
+
}
|
|
93139
|
+
return () => {
|
|
93140
|
+
if (cleanup) cleanup();
|
|
93141
|
+
};
|
|
93142
|
+
}, []);
|
|
93100
93143
|
return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
|
|
93101
93144
|
className: styles$D.scenarioNumberContainer
|
|
93102
93145
|
}, /*#__PURE__*/React__default.createElement(Tag, {
|
|
@@ -93117,7 +93160,7 @@ const TaskContent = ({
|
|
|
93117
93160
|
weight: "semi-bold",
|
|
93118
93161
|
className: styles$D.title
|
|
93119
93162
|
}), task.notes && isInterviewer && !isNonModerated && /*#__PURE__*/React__default.createElement("div", {
|
|
93120
|
-
className: `${styles$D.notesContainer} ${
|
|
93163
|
+
className: `${styles$D.notesContainer} ${openNotes ? styles$D.open : styles$D.closed}`
|
|
93121
93164
|
}, /*#__PURE__*/React__default.createElement("div", {
|
|
93122
93165
|
className: styles$D.notesContainerHeader
|
|
93123
93166
|
}, /*#__PURE__*/React__default.createElement(Text, {
|
|
@@ -93133,12 +93176,22 @@ const TaskContent = ({
|
|
|
93133
93176
|
}),
|
|
93134
93177
|
size: "xxs",
|
|
93135
93178
|
variant: "tertiary",
|
|
93136
|
-
onClick: () => setOpenNotes(prev => !prev)
|
|
93137
|
-
|
|
93179
|
+
onClick: () => setOpenNotes(prev => !prev),
|
|
93180
|
+
"aria-expanded": openNotes,
|
|
93181
|
+
"aria-controls": `notes-content-${task._id}`
|
|
93182
|
+
})), /*#__PURE__*/React__default.createElement("div", {
|
|
93183
|
+
ref: contentRef,
|
|
93184
|
+
id: `notes-content-${task._id}`,
|
|
93185
|
+
className: styles$D.notesContent,
|
|
93186
|
+
style: {
|
|
93187
|
+
maxHeight: openNotes ? contentHeight : 0
|
|
93188
|
+
},
|
|
93189
|
+
"aria-hidden": !openNotes
|
|
93190
|
+
}, /*#__PURE__*/React__default.createElement(Text, {
|
|
93138
93191
|
text: task.notes,
|
|
93139
93192
|
size: "sm",
|
|
93140
93193
|
className: `${styles$D.notesText} ${!openNotes ? styles$D.hidden : ''}`
|
|
93141
|
-
})), !isObserver && task.url && /*#__PURE__*/React__default.createElement("div", {
|
|
93194
|
+
}))), !isObserver && task.url && /*#__PURE__*/React__default.createElement("div", {
|
|
93142
93195
|
className: styles$D.goToPageContainer
|
|
93143
93196
|
}, /*#__PURE__*/React__default.createElement(Text, {
|
|
93144
93197
|
text: contentFunc('startingWebsiteText'),
|
|
@@ -94417,7 +94470,8 @@ const Thematic = ({
|
|
|
94417
94470
|
cmsContent,
|
|
94418
94471
|
isAddTagHidden = false,
|
|
94419
94472
|
isEditThematicHidden = false,
|
|
94420
|
-
isDeleteThematicHidden = false
|
|
94473
|
+
isDeleteThematicHidden = false,
|
|
94474
|
+
isDisabled = false
|
|
94421
94475
|
}) => {
|
|
94422
94476
|
const [areActionsVisible, setAreActionsVisible] = React.useState(false);
|
|
94423
94477
|
const [newTagName, setNewTagName] = React.useState('');
|
|
@@ -94580,6 +94634,7 @@ const Thematic = ({
|
|
|
94580
94634
|
}),
|
|
94581
94635
|
size: "xs",
|
|
94582
94636
|
variant: "tertiary",
|
|
94637
|
+
disabled: isDisabled,
|
|
94583
94638
|
onClick: handleOnClickAddTag
|
|
94584
94639
|
}), !isEditThematicHidden && /*#__PURE__*/React__default.createElement(IconButton, {
|
|
94585
94640
|
icon: /*#__PURE__*/React__default.createElement(EditIcon, {
|
|
@@ -94588,6 +94643,7 @@ const Thematic = ({
|
|
|
94588
94643
|
}),
|
|
94589
94644
|
size: "xs",
|
|
94590
94645
|
variant: "tertiary",
|
|
94646
|
+
disabled: isDisabled,
|
|
94591
94647
|
onClick: handleOnClickEditThematic
|
|
94592
94648
|
}), !isDeleteThematicHidden && /*#__PURE__*/React__default.createElement(IconButton, {
|
|
94593
94649
|
icon: /*#__PURE__*/React__default.createElement(BinIcon, {
|
|
@@ -94596,13 +94652,18 @@ const Thematic = ({
|
|
|
94596
94652
|
}),
|
|
94597
94653
|
size: "xs",
|
|
94598
94654
|
variant: "tertiary",
|
|
94655
|
+
disabled: isDisabled,
|
|
94599
94656
|
onClick: handleOnClickDeleteThematic
|
|
94600
94657
|
}))), tagsList.length > 0 && /*#__PURE__*/React__default.createElement("div", {
|
|
94601
94658
|
className: styles$N.tagsContainer
|
|
94602
94659
|
}, tagsList.map((tag, idx) => /*#__PURE__*/React__default.createElement("div", {
|
|
94603
94660
|
key: `${tag}-${idx}`,
|
|
94604
94661
|
className: styles$N.tag,
|
|
94605
|
-
onClick: e =>
|
|
94662
|
+
onClick: e => {
|
|
94663
|
+
if (!isDisabled) {
|
|
94664
|
+
handleOnClickTag(e, tag);
|
|
94665
|
+
}
|
|
94666
|
+
}
|
|
94606
94667
|
}, /*#__PURE__*/React__default.createElement(Tooltip, {
|
|
94607
94668
|
tooltipDescription: tag.definition,
|
|
94608
94669
|
placement: "top",
|
|
@@ -97646,7 +97707,7 @@ const Textarea = ({
|
|
|
97646
97707
|
};
|
|
97647
97708
|
React.useEffect(() => {
|
|
97648
97709
|
setCharCount(String(value).length);
|
|
97649
|
-
}, []);
|
|
97710
|
+
}, [value]);
|
|
97650
97711
|
return /*#__PURE__*/React__default.createElement("div", {
|
|
97651
97712
|
className: styles$15.text_area_container
|
|
97652
97713
|
}, /*#__PURE__*/React__default.createElement(TextInput, {
|