@boomerang-io/carbon-addons-boomerang-react 4.6.21-beta.45 → 4.6.21-beta.47

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.
Files changed (15) hide show
  1. package/dist/cjs/components/AdvantageSideNav/AdvantageSideNav.js +31 -41
  2. package/dist/cjs/components/Creatable/Creatable.js +32 -3
  3. package/dist/cjs/components/DataDrivenInput/DataDrivenInput.js +11 -2
  4. package/dist/cjs/components/DynamicFormik/DynamicFormik.js +11 -1
  5. package/dist/cjs/components/Header/HeaderTeamSwitcher.js +60 -57
  6. package/dist/cjs/constants/DataDrivenInputTypes.js +4 -0
  7. package/dist/esm/components/AdvantageSideNav/AdvantageSideNav.js +31 -41
  8. package/dist/esm/components/Creatable/Creatable.js +34 -5
  9. package/dist/esm/components/DataDrivenInput/DataDrivenInput.js +11 -2
  10. package/dist/esm/components/DynamicFormik/DynamicFormik.js +11 -1
  11. package/dist/esm/components/Header/HeaderTeamSwitcher.js +60 -57
  12. package/dist/esm/constants/DataDrivenInputTypes.js +4 -0
  13. package/dist/types/index.d.ts +2 -1
  14. package/package.json +5 -2
  15. package/scss/components/Creatable/_creatable.scss +31 -1
package/dist/cjs/components/AdvantageSideNav/AdvantageSideNav.js CHANGED
@@ -50,6 +50,10 @@ function AdvantageSideNav(props) {
50
50
  const settingsLink = sideNavUrls?.find((sideNavUrl) => sideNavUrl.key === SideNavUrlKeys.Settings)?.url;
51
51
  const adminNavlink = sideNavUrls?.find((sideNavUrl) => sideNavUrl.key === SideNavUrlKeys.Admin)?.url;
52
52
  const AssistantStudioLink = false;
53
+ const currentUrl = new URL(window.location.href);
54
+ const workspace = currentUrl.searchParams.get("workspace");
55
+ const isDocumentCollectionsActive = currentUrl.pathname.includes("/chat") && workspace === "knowledge";
56
+ const isChatActive = currentUrl.pathname.includes("/chat") && !isDocumentCollectionsActive;
53
57
  // get current selected team
54
58
  let teamSwitcherTeam = null;
55
59
  if (Array.isArray(personalTeams) && personalTeams.length > 0) {
@@ -97,6 +101,22 @@ function AdvantageSideNav(props) {
97
101
  destinationPath: toolsLink,
98
102
  });
99
103
  };
104
+ const handleDocumentCollectionsClick = () => {
105
+ triggerEvent &&
106
+ triggerEvent({
107
+ action: "Clicked on SideNav Document Collections link",
108
+ category: "Sidenav",
109
+ destinationPath: documentCollectionsLink,
110
+ });
111
+ };
112
+ const handleSettingsClick = () => {
113
+ triggerEvent &&
114
+ triggerEvent({
115
+ action: "Clicked on SideNav Settings link",
116
+ category: "Sidenav",
117
+ destinationPath: settingsLink,
118
+ });
119
+ };
100
120
  const handleChatClick = () => {
101
121
  let redirectLink = chatLink
102
122
  ? chatLink
@@ -107,8 +127,7 @@ function AdvantageSideNav(props) {
107
127
  category: "Sidenav",
108
128
  destinationPath: redirectLink,
109
129
  });
110
- // window.open(redirectLink, "_self", "noopener,noreferrer");
111
- navigateInternal(redirectLink);
130
+ window.open(redirectLink, "_self", "noopener,noreferrer");
112
131
  };
113
132
  const handleCreateJoinClick = () => {
114
133
  triggerEvent &&
@@ -138,26 +157,8 @@ function AdvantageSideNav(props) {
138
157
  }
139
158
  setActiveMenu(false);
140
159
  };
141
- const chatSideNavLink = (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-chat-link", className: !enableChatButton ? `${settings.prefix}--bmrg-advantage-sidenav__inactive-link` : "", isActive: windowLocation.href.includes(`${baseEnvUrl}/chat`), disabled: Boolean(!enableChatButton), renderIcon: icons.ChatBot, href: enableChatButton && chatLink, onClick: enableChatButton ? handleChatClick : (e) => e.preventDefault() }, "Chat"));
160
+ const chatSideNavLink = (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-chat-link", className: !enableChatButton ? `${settings.prefix}--bmrg-advantage-sidenav__inactive-link` : "", isActive: isChatActive, disabled: Boolean(!enableChatButton), renderIcon: icons.ChatBot, href: enableChatButton && chatLink, onClick: enableChatButton ? handleChatClick : (e) => e.preventDefault() }, "Chat"));
142
161
  const showSecondDivider = showChatButton || toolsLink || agentAssistantStudioLink || agentAssistantLibraryLink || documentCollectionsLink;
143
- const navigateInternal = (url) => {
144
- console.log("url", url);
145
- const target = new URL(url, window.location.origin);
146
- console.log("target", target.origin);
147
- console.log("window.location.origin", window.location.origin);
148
- if (target.origin === window.location.origin) {
149
- console.log("target.pathname", target.pathname);
150
- const pathname = target.pathname.startsWith("/ica")
151
- ? target.pathname.slice(4) // removes "/ica"
152
- : target.pathname;
153
- console.log("pathname", pathname);
154
- history.push(pathname + target.search + target.hash);
155
- }
156
- else {
157
- console.log("direct url navgation", url);
158
- window.location.href = url;
159
- }
160
- };
161
162
  return (React__default.default.createElement(react.SideNav, { "aria-label": "sidenav-container", className: cx__default.default(`${settings.prefix}--bmrg-advantage-sidenav-container`, className, {
162
163
  "--closed": !isMenuOpen,
163
164
  }), "data-testid": "sidenav-container", isRail: true, expanded: isMenuOpen, onMouseEnter: () => setActiveMenu(true), onMouseLeave: () => {
@@ -198,7 +199,7 @@ function AdvantageSideNav(props) {
198
199
  } }, joinButtontitle)) : null,
199
200
  React__default.default.createElement(react.SideNavDivider, null),
200
201
  showChatButton &&
201
- (showChatTooltip ? (React__default.default.createElement(TooltipHover.default, { className: `${settings.prefix}--bmrg-side-nav__tooltip`, isActive: windowLocation.href.includes(`${baseEnvUrl}/chat`), content: tooltipMessage, direction: "right" },
202
+ (showChatTooltip ? (React__default.default.createElement(TooltipHover.default, { className: `${settings.prefix}--bmrg-side-nav__tooltip`, isActive: isChatActive, content: tooltipMessage, direction: "right" },
202
203
  React__default.default.createElement("span", null, chatSideNavLink))) : (chatSideNavLink)),
203
204
  toolsLink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-tools-link", renderIcon: icons.Api, href: toolsLink, onClick: (e) => {
204
205
  handleToolsClick();
@@ -215,28 +216,17 @@ function AdvantageSideNav(props) {
215
216
  agentAssistantLibraryLink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-agent-assistant-library-link", renderIcon: icons.Folders,
216
217
  //href={agentAssistantLibraryLink}
217
218
  className: `${settings.prefix}--bmrg-advantage-sidenav__inactive-link` , disabled: Boolean(!AssistantStudioLink) }, "Agent & Assistant Library")) : null,
218
- documentCollectionsLink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-document-collections-link", renderIcon: icons.DocumentMultiple_02,
219
- //href={documentCollectionsLink}
220
- className: `${settings.prefix}--bmrg-advantage-sidenav__inactive-link` , disabled: Boolean(!AssistantStudioLink) }, "Document Collections")) : null,
219
+ documentCollectionsLink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-document-collections-link", isActive: isDocumentCollectionsActive, renderIcon: icons.DocumentMultiple_02, href: documentCollectionsLink, onClick: (e) => {
220
+ handleDocumentCollectionsClick();
221
+ } }, "Document Collections")) : null,
221
222
  showSecondDivider ? React__default.default.createElement(react.SideNavDivider, null) : null,
222
- catalogNavlink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-catalog-link", isActive: windowLocation.href.includes(`${baseEnvUrl}/catalog`), renderIcon: icons.Catalog, onClick: (e) => {
223
- e.preventDefault();
224
- navigateInternal(catalogNavlink);
225
- } }, "Catalog")) : null,
226
- settingsLink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-settings-link", renderIcon: icons.Settings,
227
- // href={settingsLink}
228
- className: `${settings.prefix}--bmrg-advantage-sidenav__inactive-link` , disabled: Boolean(!AssistantStudioLink),
229
- // onClick={(e: any) => {
230
- // handleSettingsClick();
231
- // }}
223
+ catalogNavlink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-catalog-link", isActive: windowLocation.href.includes(`${baseEnvUrl}/catalog`), href: catalogNavlink, renderIcon: icons.Catalog }, "Catalog")) : null,
224
+ settingsLink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-settings-link", renderIcon: icons.Settings, href: settingsLink, className: `${settings.prefix}--bmrg-advantage-sidenav__inactive-link` ,
225
+ //disabled={Boolean(!AssistantStudioLink)}
232
226
  onClick: (e) => {
233
- e.preventDefault();
234
- navigateInternal(settingsLink);
227
+ handleSettingsClick();
235
228
  } }, "Settings")) : null,
236
- adminNavlink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-admin-link", renderIcon: icons.LicenseThirdParty, onClick: (e) => {
237
- e.preventDefault();
238
- navigateInternal(adminNavlink);
239
- } }, "Admin")) : null),
229
+ adminNavlink ? (React__default.default.createElement(react.SideNavLink, { "data-testid": "sidenav-admin-link", href: adminNavlink, renderIcon: icons.LicenseThirdParty }, "Admin")) : null),
240
230
  children ? (React__default.default.createElement(React__default.default.Fragment, null,
241
231
  React__default.default.createElement(react.SideNavDivider, null),
242
232
  children)) : null)));
package/dist/cjs/components/Creatable/Creatable.js CHANGED
@@ -5,6 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
5
5
  var React = require('react');
6
6
  var react = require('@carbon/react');
7
7
  var icons = require('@carbon/react/icons');
8
+ var core = require('@dnd-kit/core');
9
+ var sortable = require('@dnd-kit/sortable');
10
+ var utilities = require('@dnd-kit/utilities');
8
11
  var cx = require('classnames');
9
12
  var TooltipHover = require('../TooltipHover/TooltipHover.js');
10
13
  var accessibility = require('../../tools/accessibility.js');
@@ -20,7 +23,7 @@ IBM Confidential
20
23
  694970X, 69497O0
21
24
  © Copyright IBM Corp. 2022, 2024
22
25
  */
23
- function CreatableComponent({ buttonClassName = `${settings.prefix}--bmrg-creatable__button`, buttonContent = "Add", buttonProps, createKeyValuePair = false, disabled, id, initialValues: externalInitialValues, invalid, invalidText, helperText, key, keyHelperText, keyLabel, keyLabelText, keyPlaceholder, label, labelText = "", max, nonDeletable = false, onKeyBlur, onValueBlur, onInputBlur, onChange, placeholder, tagProps, tagType = "teal", textInputProps, tooltipClassName = `${settings.prefix}--bmrg-creatable__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, type = "text", valueHelperText, valueLabel, valueLabelText, valuePlaceholder, value: externalValues, values, trimInput = false, removeOnlyFirst = false, }) {
26
+ function CreatableComponent({ buttonClassName = `${settings.prefix}--bmrg-creatable__button`, buttonContent = "Add", buttonProps, createKeyValuePair = false, disabled, id, initialValues: externalInitialValues, invalid, invalidText, helperText, key, keyHelperText, keyLabel, keyLabelText, keyPlaceholder, label, labelText = "", max, nonDeletable = false, onKeyBlur, onValueBlur, onInputBlur, onChange, placeholder, reorderable, tagProps, tagType = "teal", textInputProps, tooltipClassName = `${settings.prefix}--bmrg-creatable__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, type = "text", valueHelperText, valueLabel, valueLabelText, valuePlaceholder, value: externalValues, values, trimInput = false, removeOnlyFirst = false, }) {
24
27
  const [keyValue, setKeyValue] = React.useState("");
25
28
  const [value, setValue] = React.useState("");
26
29
  const [input, setInput] = React.useState("");
@@ -128,6 +131,21 @@ function CreatableComponent({ buttonClassName = `${settings.prefix}--bmrg-creata
128
131
  if (onChange)
129
132
  onChange(items);
130
133
  };
134
+ const sensors = core.useSensors(core.useSensor(core.PointerSensor, {
135
+ activationConstraint: { distance: 5 },
136
+ }));
137
+ function handleDragEnd(event) {
138
+ const { active, over } = event;
139
+ if (over && active.id !== over.id) {
140
+ const oldIndex = tagItems.indexOf(active.id);
141
+ const newIndex = tagItems.indexOf(over.id);
142
+ const reorderedItems = sortable.arrayMove(tagItems, oldIndex, newIndex);
143
+ setCreatedItems(reorderedItems);
144
+ if (onChange) {
145
+ onChange(reorderedItems);
146
+ }
147
+ }
148
+ }
131
149
  return (React__default.default.createElement("div", { key: key, className: `${settings.prefix}--bmrg-creatable` },
132
150
  React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-creatable__input` },
133
151
  createKeyValuePair ? (React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-creatable__key-value-inputs` },
@@ -149,9 +167,20 @@ function CreatableComponent({ buttonClassName = `${settings.prefix}--bmrg-creata
149
167
  React__default.default.createElement(TooltipHover.default, { ...tooltipProps, tooltipText: tooltipContent },
150
168
  React__default.default.createElement(icons.Information, { size: 16, fill: "currentColor" }))))), onBlur: onInputBlur, onChange: onInputChange, placeholder: placeholder, ref: inputRef, type: type, value: input, ...textInputProps })),
151
169
  React__default.default.createElement(react.Button, { className: createButtonClassName, disabled: isAddButtonDisabled, onClick: addValue, iconDescription: "Add", renderIcon: icons.Add, size: "md", type: "button", ...buttonProps }, buttonContent)),
152
- React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-creatable__tags` }, tagsToShow.map((item, index) => (React__default.default.createElement(react.Tag, { key: `${item}-${index}`, disabled: disabled, type: tagType, onClick: nonDeletable && initialTagItems.includes(item) ? undefined : () => removeValue(item), onKeyDown: nonDeletable && initialTagItems.includes(item)
170
+ reorderable ? (React__default.default.createElement(core.DndContext, { sensors: disabled ? [] : sensors, collisionDetection: core.closestCenter, onDragEnd: handleDragEnd },
171
+ React__default.default.createElement(sortable.SortableContext, { items: tagsToShow, strategy: sortable.verticalListSortingStrategy },
172
+ React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-creatable__tags--reorderable` }, tagsToShow.map((item, index) => (React__default.default.createElement(ReorderableTag, { key: `${item}-${index}`, disabled: disabled, initialTagItems: initialTagItems, item: item, nonDeletable: nonDeletable, removeValue: removeValue, tagProps: tagProps, tagType: tagType }))))))) : (React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-creatable__tags` }, tagsToShow.map((item, index) => (React__default.default.createElement(react.Tag, { key: `${item}-${index}`, disabled: disabled, type: tagType, onClick: nonDeletable && initialTagItems.includes(item) ? undefined : () => removeValue(item), onKeyDown: nonDeletable && initialTagItems.includes(item)
153
173
  ? undefined
154
- : (e) => accessibility.isAccessibleKeyDownEvent(e) && removeValue(item), filter: !nonDeletable || (nonDeletable && !initialTagItems.includes(item)), ...tagProps }, item))))));
174
+ : (e) => accessibility.isAccessibleKeyDownEvent(e) && removeValue(item), filter: !nonDeletable || (nonDeletable && !initialTagItems.includes(item)), ...tagProps }, item)))))));
175
+ }
176
+ function ReorderableTag({ disabled, initialTagItems, item, nonDeletable, removeValue, tagProps, tagType, }) {
177
+ const { attributes, listeners, setNodeRef, transform, transition } = sortable.useSortable({ id: item });
178
+ const style = {
179
+ transform: utilities.CSS.Transform.toString(transform),
180
+ transition,
181
+ };
182
+ return (React__default.default.createElement("div", { ref: setNodeRef, ...attributes, ...(!disabled ? listeners : {}), style: style },
183
+ React__default.default.createElement(react.DismissibleTag, { disabled: disabled, type: tagType, onClose: nonDeletable && initialTagItems.includes(item) ? undefined : () => removeValue(item), renderIcon: icons.Draggable, title: "", text: item, ...tagProps })));
155
184
  }
156
185
 
157
186
  exports.default = CreatableComponent;
package/dist/cjs/components/DataDrivenInput/DataDrivenInput.js CHANGED
@@ -117,9 +117,18 @@ function DataDrivenInput(props) {
117
117
  Component = Creatable$1;
118
118
  componentProps = {
119
119
  ...allInputProps,
120
- createKeyValuePair: type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR || type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE,
120
+ createKeyValuePair: type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR ||
121
+ type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE ||
122
+ type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE ||
123
+ type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE,
121
124
  nonDeletable: type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_NON_DELETABLE ||
122
- type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE,
125
+ type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE ||
126
+ type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE ||
127
+ type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE,
128
+ reorderable: type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE ||
129
+ type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE ||
130
+ type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE ||
131
+ type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE,
123
132
  invalid: invalidInput,
124
133
  invalidText: invalidTextMessage,
125
134
  placeholder,
package/dist/cjs/components/DynamicFormik/DynamicFormik.js CHANGED
@@ -134,7 +134,13 @@ async function handleGoverningSelectChange({ formikProps, input, inputs, isInput
134
134
  /** Erase value of governed inputs */
135
135
  if (inputsGovernedByCurrentOne.length) {
136
136
  await inputsGovernedByCurrentOne.forEach(async (input) => {
137
- await handleGoverningSelectChange({ formikProps, input, inputs, isInputBeingChanged: false, selectedItem: null });
137
+ await handleGoverningSelectChange({
138
+ formikProps,
139
+ input,
140
+ inputs,
141
+ isInputBeingChanged: false,
142
+ selectedItem: null,
143
+ });
138
144
  });
139
145
  }
140
146
  // only the top governing select should display warnings if changed and reset touched status for governed ones
@@ -226,8 +232,12 @@ function generateYupAst({ inputs, allowCustomPropertySyntax, customPropertySynta
226
232
  if (inputType === DataDrivenInputTypes.MULTI_SELECT_TYPES.MULTI_SELECT ||
227
233
  inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE ||
228
234
  inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_NON_DELETABLE ||
235
+ inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE ||
236
+ inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE ||
229
237
  inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR ||
230
238
  inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE ||
239
+ inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE ||
240
+ inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE ||
231
241
  inputType === DataDrivenInputTypes.CHECKBOX_TYPES.CHECKBOX) {
232
242
  if (useCSVforArrays) {
233
243
  yupValidationArray.push(["yup.string"]);
package/dist/cjs/components/Header/HeaderTeamSwitcher.js CHANGED
@@ -307,67 +307,70 @@ function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamT
307
307
  React__default.default.createElement("span", { className: headerTeamSwitcherCreateTeamButtonTextClassname }, createTeamButtonText),
308
308
  React__default.default.createElement(icons.AddAlt, { className: headerTeamSwitcherCreateTeamButtonIconClassname })))),
309
309
  allTeams.map((team) => {
310
- const isTeamSelected = team.id === selectedTeam?.id;
311
- if (team.type === TeamTypes.TEAM_TYPES.ACCOUNT) {
312
- const isSubmenuOpen = team.id === openAccountSubmenuId;
313
- const projectTeams = team.projectTeams;
314
- const existProjectTeams = Array.isArray(projectTeams) && projectTeams.length > 0;
315
- let selectedProjectTeamIndex = -1;
316
- if (existProjectTeams) {
317
- selectedProjectTeamIndex = projectTeams.findIndex((team) => team.id === selectedTeam?.id);
318
- }
319
- const isProjectTeamSelected = selectedProjectTeamIndex >= 0;
320
- const isMenuSelected = isTeamSelected || isProjectTeamSelected;
321
- if (existProjectTeams && isProjectTeamSelected) {
322
- const [removedTeam] = projectTeams.splice(selectedProjectTeamIndex, 1);
323
- projectTeams.unshift(removedTeam);
310
+ if (Boolean(team?.id)) {
311
+ const isTeamSelected = team.id === selectedTeam?.id;
312
+ if (team.type === TeamTypes.TEAM_TYPES.ACCOUNT) {
313
+ const isSubmenuOpen = team.id === openAccountSubmenuId;
314
+ const projectTeams = team.projectTeams;
315
+ const existProjectTeams = Array.isArray(projectTeams) && projectTeams.length > 0;
316
+ let selectedProjectTeamIndex = -1;
317
+ if (existProjectTeams) {
318
+ selectedProjectTeamIndex = projectTeams.findIndex((team) => team.id === selectedTeam?.id);
319
+ }
320
+ const isProjectTeamSelected = selectedProjectTeamIndex >= 0;
321
+ const isMenuSelected = isTeamSelected || isProjectTeamSelected;
322
+ if (existProjectTeams && isProjectTeamSelected) {
323
+ const [removedTeam] = projectTeams.splice(selectedProjectTeamIndex, 1);
324
+ projectTeams.unshift(removedTeam);
325
+ }
326
+ return (React__default.default.createElement("div", { key: team.id, id: `${team.id}-account-menu` },
327
+ React__default.default.createElement(react.HeaderMenuItem, { "aria-expanded": isSubmenuOpen, "aria-selected": isMenuSelected, className: headerDropdownMenuItemAccountContainerClassname, onClick: (e) => handleOpenAccountSubmenu({ e, id: team.id }),
328
+ // eslint-disable-next-line no-script-url
329
+ href: "javascript:void(0)", "data-testid": "header-team-switcher-menu-account-accordion" },
330
+ React__default.default.createElement("div", { className: headerDropdownMenuItemAccountClassname },
331
+ React__default.default.createElement("div", { className: headerDropdownMenuItemTextIconClassname },
332
+ React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
333
+ isMenuSelected ? (React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null),
334
+ React__default.default.createElement("div", { className: headerDropdownMenuItemAccountIconsClassname },
335
+ React__default.default.createElement(icons.GroupAccount, { className: headerDropdownMenuItemAccountGroupIconClassname }),
336
+ React__default.default.createElement(icons.ChevronDown, { className: headerDropdownMenuItemAccountChevronIconClassname })))),
337
+ React__default.default.createElement("div", { id: `${team.id}-account-submenu`, key: `${team.id}-account-submenu`, "aria-expanded": isSubmenuOpen, className: headerDropdownMenuItemAccountSubmenuClassname },
338
+ React__default.default.createElement(react.HeaderMenuItem, { key: `${team.id}-menu-item`, id: `${team.id}-account-menu-item`, "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
339
+ handleTeamClick({ team, type: "account" });
340
+ }, "data-testid": "header-team-switcher-menu-account-accordion-item",
341
+ // eslint-disable-next-line no-script-url
342
+ href: "javascript:void(0)" },
343
+ React__default.default.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
344
+ React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, "Account Page"),
345
+ isTeamSelected ? (React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null)),
346
+ projectTeams && projectTeams.length > 0
347
+ ? projectTeams.map((team) => {
348
+ const isTeamSelected = team.id === selectedTeam?.id;
349
+ return (React__default.default.createElement("div", { key: team.id, id: `${team.id}-project-menu-item` },
350
+ React__default.default.createElement(react.HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
351
+ handleTeamClick({ team, type: "project" });
352
+ }, "data-testid": "header-team-switcher-menu-account-accordion-item",
353
+ // eslint-disable-next-line no-script-url
354
+ href: "javascript:void(0)" },
355
+ React__default.default.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
356
+ React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
357
+ isTeamSelected ? (React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null))));
358
+ })
359
+ : null)));
324
360
  }
325
- return (React__default.default.createElement("div", { key: team.id, id: `${team.id}-account-menu` },
326
- React__default.default.createElement(react.HeaderMenuItem, { "aria-expanded": isSubmenuOpen, "aria-selected": isMenuSelected, className: headerDropdownMenuItemAccountContainerClassname, onClick: (e) => handleOpenAccountSubmenu({ e, id: team.id }),
327
- // eslint-disable-next-line no-script-url
328
- href: "javascript:void(0)", "data-testid": "header-team-switcher-menu-account-accordion" },
329
- React__default.default.createElement("div", { className: headerDropdownMenuItemAccountClassname },
330
- React__default.default.createElement("div", { className: headerDropdownMenuItemTextIconClassname },
331
- React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
332
- isMenuSelected ? React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null),
333
- React__default.default.createElement("div", { className: headerDropdownMenuItemAccountIconsClassname },
334
- React__default.default.createElement(icons.GroupAccount, { className: headerDropdownMenuItemAccountGroupIconClassname }),
335
- React__default.default.createElement(icons.ChevronDown, { className: headerDropdownMenuItemAccountChevronIconClassname })))),
336
- React__default.default.createElement("div", { id: `${team.id}-account-submenu`, key: `${team.id}-account-submenu`, "aria-expanded": isSubmenuOpen, className: headerDropdownMenuItemAccountSubmenuClassname },
337
- React__default.default.createElement(react.HeaderMenuItem, { key: `${team.id}-menu-item`, id: `${team.id}-account-menu-item`, "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
338
- handleTeamClick({ team, type: "account" });
339
- }, "data-testid": "header-team-switcher-menu-account-accordion-item",
361
+ else {
362
+ return (React__default.default.createElement("div", { key: team.id, id: `${team.id}-${team.type}-menu-item` },
363
+ React__default.default.createElement(react.HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
364
+ handleTeamClick({ team, type: team.type ?? "" });
365
+ }, "data-testid": "header-team-switcher-menu-item",
340
366
  // eslint-disable-next-line no-script-url
341
367
  href: "javascript:void(0)" },
342
- React__default.default.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
343
- React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, "Account Page"),
344
- isTeamSelected ? React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null)),
345
- projectTeams && projectTeams.length > 0
346
- ? projectTeams.map((team) => {
347
- const isTeamSelected = team.id === selectedTeam?.id;
348
- return (React__default.default.createElement("div", { key: team.id, id: `${team.id}-project-menu-item` },
349
- React__default.default.createElement(react.HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
350
- handleTeamClick({ team, type: "project" });
351
- }, "data-testid": "header-team-switcher-menu-account-accordion-item",
352
- // eslint-disable-next-line no-script-url
353
- href: "javascript:void(0)" },
354
- React__default.default.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
355
- React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
356
- isTeamSelected ? (React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null))));
357
- })
358
- : null)));
359
- }
360
- else {
361
- return (React__default.default.createElement("div", { key: team.id, id: `${team.id}-${team.type}-menu-item` },
362
- React__default.default.createElement(react.HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
363
- handleTeamClick({ team, type: team.type ?? "" });
364
- }, "data-testid": "header-team-switcher-menu-item",
365
- // eslint-disable-next-line no-script-url
366
- href: "javascript:void(0)" },
367
- React__default.default.createElement("div", { className: headerDropdownMenuItemClassname },
368
- React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
369
- isTeamSelected ? React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null))));
368
+ React__default.default.createElement("div", { className: headerDropdownMenuItemClassname },
369
+ React__default.default.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
370
+ isTeamSelected ? React__default.default.createElement(icons.CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null))));
371
+ }
370
372
  }
373
+ return null;
371
374
  })))));
372
375
  }
373
376
  return null;
package/dist/cjs/constants/DataDrivenInputTypes.js CHANGED
@@ -11,8 +11,12 @@ const CHECKBOX_TYPES = {
11
11
  const CREATABLE_TYPES = {
12
12
  CREATABLE_SINGLE: "creatable-single",
13
13
  CREATABLE_SINGLE_NON_DELETABLE: "creatable-single-non-deletable",
14
+ CREATABLE_SINGLE_REORDERABLE: "creatable-single-reorderable",
15
+ CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE: "creatable-single-reorderable-non-deletable",
14
16
  CREATABLE_PAIR: "creatable-pair",
15
17
  CREATABLE_PAIR_NON_DELETABLE: "creatable-pair-non-deletable",
18
+ CREATABLE_PAIR_REORDERABLE: "creatable-pair-reorderable",
19
+ CREATABLE_PAIR_REORDERABLE_NON_DELETABLE: "creatable-pair-reorderable-non-deletable",
16
20
  };
17
21
  const DATE_TYPES = {
18
22
  DATE: "date",
package/dist/esm/components/AdvantageSideNav/AdvantageSideNav.js CHANGED
@@ -41,6 +41,10 @@ function AdvantageSideNav(props) {
41
41
  const settingsLink = sideNavUrls?.find((sideNavUrl) => sideNavUrl.key === SideNavUrlKeys.Settings)?.url;
42
42
  const adminNavlink = sideNavUrls?.find((sideNavUrl) => sideNavUrl.key === SideNavUrlKeys.Admin)?.url;
43
43
  const AssistantStudioLink = false;
44
+ const currentUrl = new URL(window.location.href);
45
+ const workspace = currentUrl.searchParams.get("workspace");
46
+ const isDocumentCollectionsActive = currentUrl.pathname.includes("/chat") && workspace === "knowledge";
47
+ const isChatActive = currentUrl.pathname.includes("/chat") && !isDocumentCollectionsActive;
44
48
  // get current selected team
45
49
  let teamSwitcherTeam = null;
46
50
  if (Array.isArray(personalTeams) && personalTeams.length > 0) {
@@ -88,6 +92,22 @@ function AdvantageSideNav(props) {
88
92
  destinationPath: toolsLink,
89
93
  });
90
94
  };
95
+ const handleDocumentCollectionsClick = () => {
96
+ triggerEvent &&
97
+ triggerEvent({
98
+ action: "Clicked on SideNav Document Collections link",
99
+ category: "Sidenav",
100
+ destinationPath: documentCollectionsLink,
101
+ });
102
+ };
103
+ const handleSettingsClick = () => {
104
+ triggerEvent &&
105
+ triggerEvent({
106
+ action: "Clicked on SideNav Settings link",
107
+ category: "Sidenav",
108
+ destinationPath: settingsLink,
109
+ });
110
+ };
91
111
  const handleChatClick = () => {
92
112
  let redirectLink = chatLink
93
113
  ? chatLink
@@ -98,8 +118,7 @@ function AdvantageSideNav(props) {
98
118
  category: "Sidenav",
99
119
  destinationPath: redirectLink,
100
120
  });
101
- // window.open(redirectLink, "_self", "noopener,noreferrer");
102
- navigateInternal(redirectLink);
121
+ window.open(redirectLink, "_self", "noopener,noreferrer");
103
122
  };
104
123
  const handleCreateJoinClick = () => {
105
124
  triggerEvent &&
@@ -129,26 +148,8 @@ function AdvantageSideNav(props) {
129
148
  }
130
149
  setActiveMenu(false);
131
150
  };
132
- const chatSideNavLink = (React.createElement(SideNavLink, { "data-testid": "sidenav-chat-link", className: !enableChatButton ? `${prefix}--bmrg-advantage-sidenav__inactive-link` : "", isActive: windowLocation.href.includes(`${baseEnvUrl}/chat`), disabled: Boolean(!enableChatButton), renderIcon: ChatBot, href: enableChatButton && chatLink, onClick: enableChatButton ? handleChatClick : (e) => e.preventDefault() }, "Chat"));
151
+ const chatSideNavLink = (React.createElement(SideNavLink, { "data-testid": "sidenav-chat-link", className: !enableChatButton ? `${prefix}--bmrg-advantage-sidenav__inactive-link` : "", isActive: isChatActive, disabled: Boolean(!enableChatButton), renderIcon: ChatBot, href: enableChatButton && chatLink, onClick: enableChatButton ? handleChatClick : (e) => e.preventDefault() }, "Chat"));
133
152
  const showSecondDivider = showChatButton || toolsLink || agentAssistantStudioLink || agentAssistantLibraryLink || documentCollectionsLink;
134
- const navigateInternal = (url) => {
135
- console.log("url", url);
136
- const target = new URL(url, window.location.origin);
137
- console.log("target", target.origin);
138
- console.log("window.location.origin", window.location.origin);
139
- if (target.origin === window.location.origin) {
140
- console.log("target.pathname", target.pathname);
141
- const pathname = target.pathname.startsWith("/ica")
142
- ? target.pathname.slice(4) // removes "/ica"
143
- : target.pathname;
144
- console.log("pathname", pathname);
145
- history.push(pathname + target.search + target.hash);
146
- }
147
- else {
148
- console.log("direct url navgation", url);
149
- window.location.href = url;
150
- }
151
- };
152
153
  return (React.createElement(SideNav, { "aria-label": "sidenav-container", className: cx(`${prefix}--bmrg-advantage-sidenav-container`, className, {
153
154
  "--closed": !isMenuOpen,
154
155
  }), "data-testid": "sidenav-container", isRail: true, expanded: isMenuOpen, onMouseEnter: () => setActiveMenu(true), onMouseLeave: () => {
@@ -189,7 +190,7 @@ function AdvantageSideNav(props) {
189
190
  } }, joinButtontitle)) : null,
190
191
  React.createElement(SideNavDivider, null),
191
192
  showChatButton &&
192
- (showChatTooltip ? (React.createElement(TooltipHover, { className: `${prefix}--bmrg-side-nav__tooltip`, isActive: windowLocation.href.includes(`${baseEnvUrl}/chat`), content: tooltipMessage, direction: "right" },
193
+ (showChatTooltip ? (React.createElement(TooltipHover, { className: `${prefix}--bmrg-side-nav__tooltip`, isActive: isChatActive, content: tooltipMessage, direction: "right" },
193
194
  React.createElement("span", null, chatSideNavLink))) : (chatSideNavLink)),
194
195
  toolsLink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-tools-link", renderIcon: Api, href: toolsLink, onClick: (e) => {
195
196
  handleToolsClick();
@@ -206,28 +207,17 @@ function AdvantageSideNav(props) {
206
207
  agentAssistantLibraryLink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-agent-assistant-library-link", renderIcon: Folders,
207
208
  //href={agentAssistantLibraryLink}
208
209
  className: `${prefix}--bmrg-advantage-sidenav__inactive-link` , disabled: Boolean(!AssistantStudioLink) }, "Agent & Assistant Library")) : null,
209
- documentCollectionsLink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-document-collections-link", renderIcon: DocumentMultiple_02,
210
- //href={documentCollectionsLink}
211
- className: `${prefix}--bmrg-advantage-sidenav__inactive-link` , disabled: Boolean(!AssistantStudioLink) }, "Document Collections")) : null,
210
+ documentCollectionsLink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-document-collections-link", isActive: isDocumentCollectionsActive, renderIcon: DocumentMultiple_02, href: documentCollectionsLink, onClick: (e) => {
211
+ handleDocumentCollectionsClick();
212
+ } }, "Document Collections")) : null,
212
213
  showSecondDivider ? React.createElement(SideNavDivider, null) : null,
213
- catalogNavlink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-catalog-link", isActive: windowLocation.href.includes(`${baseEnvUrl}/catalog`), renderIcon: Catalog, onClick: (e) => {
214
- e.preventDefault();
215
- navigateInternal(catalogNavlink);
216
- } }, "Catalog")) : null,
217
- settingsLink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-settings-link", renderIcon: Settings,
218
- // href={settingsLink}
219
- className: `${prefix}--bmrg-advantage-sidenav__inactive-link` , disabled: Boolean(!AssistantStudioLink),
220
- // onClick={(e: any) => {
221
- // handleSettingsClick();
222
- // }}
214
+ catalogNavlink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-catalog-link", isActive: windowLocation.href.includes(`${baseEnvUrl}/catalog`), href: catalogNavlink, renderIcon: Catalog }, "Catalog")) : null,
215
+ settingsLink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-settings-link", renderIcon: Settings, href: settingsLink, className: `${prefix}--bmrg-advantage-sidenav__inactive-link` ,
216
+ //disabled={Boolean(!AssistantStudioLink)}
223
217
  onClick: (e) => {
224
- e.preventDefault();
225
- navigateInternal(settingsLink);
218
+ handleSettingsClick();
226
219
  } }, "Settings")) : null,
227
- adminNavlink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-admin-link", renderIcon: LicenseThirdParty, onClick: (e) => {
228
- e.preventDefault();
229
- navigateInternal(adminNavlink);
230
- } }, "Admin")) : null),
220
+ adminNavlink ? (React.createElement(SideNavLink, { "data-testid": "sidenav-admin-link", href: adminNavlink, renderIcon: LicenseThirdParty }, "Admin")) : null),
231
221
  children ? (React.createElement(React.Fragment, null,
232
222
  React.createElement(SideNavDivider, null),
233
223
  children)) : null)));
package/dist/esm/components/Creatable/Creatable.js CHANGED
@@ -1,6 +1,9 @@
1
1
  import React, { useState } from 'react';
2
- import { TextInput, Button, Tag } from '@carbon/react';
3
- import { Information, Add } from '@carbon/react/icons';
2
+ import { TextInput, Button, Tag, DismissibleTag } from '@carbon/react';
3
+ import { Information, Add, Draggable } from '@carbon/react/icons';
4
+ import { useSensors, useSensor, PointerSensor, DndContext, closestCenter } from '@dnd-kit/core';
5
+ import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable';
6
+ import { CSS } from '@dnd-kit/utilities';
4
7
  import cx from 'classnames';
5
8
  import TooltipHover from '../TooltipHover/TooltipHover.js';
6
9
  import { isAccessibleKeyDownEvent } from '../../tools/accessibility.js';
@@ -11,7 +14,7 @@ IBM Confidential
11
14
  694970X, 69497O0
12
15
  © Copyright IBM Corp. 2022, 2024
13
16
  */
14
- function CreatableComponent({ buttonClassName = `${prefix}--bmrg-creatable__button`, buttonContent = "Add", buttonProps, createKeyValuePair = false, disabled, id, initialValues: externalInitialValues, invalid, invalidText, helperText, key, keyHelperText, keyLabel, keyLabelText, keyPlaceholder, label, labelText = "", max, nonDeletable = false, onKeyBlur, onValueBlur, onInputBlur, onChange, placeholder, tagProps, tagType = "teal", textInputProps, tooltipClassName = `${prefix}--bmrg-creatable__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, type = "text", valueHelperText, valueLabel, valueLabelText, valuePlaceholder, value: externalValues, values, trimInput = false, removeOnlyFirst = false, }) {
17
+ function CreatableComponent({ buttonClassName = `${prefix}--bmrg-creatable__button`, buttonContent = "Add", buttonProps, createKeyValuePair = false, disabled, id, initialValues: externalInitialValues, invalid, invalidText, helperText, key, keyHelperText, keyLabel, keyLabelText, keyPlaceholder, label, labelText = "", max, nonDeletable = false, onKeyBlur, onValueBlur, onInputBlur, onChange, placeholder, reorderable, tagProps, tagType = "teal", textInputProps, tooltipClassName = `${prefix}--bmrg-creatable__tooltip`, tooltipContent, tooltipProps = { direction: "top" }, type = "text", valueHelperText, valueLabel, valueLabelText, valuePlaceholder, value: externalValues, values, trimInput = false, removeOnlyFirst = false, }) {
15
18
  const [keyValue, setKeyValue] = useState("");
16
19
  const [value, setValue] = useState("");
17
20
  const [input, setInput] = useState("");
@@ -119,6 +122,21 @@ function CreatableComponent({ buttonClassName = `${prefix}--bmrg-creatable__butt
119
122
  if (onChange)
120
123
  onChange(items);
121
124
  };
125
+ const sensors = useSensors(useSensor(PointerSensor, {
126
+ activationConstraint: { distance: 5 },
127
+ }));
128
+ function handleDragEnd(event) {
129
+ const { active, over } = event;
130
+ if (over && active.id !== over.id) {
131
+ const oldIndex = tagItems.indexOf(active.id);
132
+ const newIndex = tagItems.indexOf(over.id);
133
+ const reorderedItems = arrayMove(tagItems, oldIndex, newIndex);
134
+ setCreatedItems(reorderedItems);
135
+ if (onChange) {
136
+ onChange(reorderedItems);
137
+ }
138
+ }
139
+ }
122
140
  return (React.createElement("div", { key: key, className: `${prefix}--bmrg-creatable` },
123
141
  React.createElement("div", { className: `${prefix}--bmrg-creatable__input` },
124
142
  createKeyValuePair ? (React.createElement("div", { className: `${prefix}--bmrg-creatable__key-value-inputs` },
@@ -140,9 +158,20 @@ function CreatableComponent({ buttonClassName = `${prefix}--bmrg-creatable__butt
140
158
  React.createElement(TooltipHover, { ...tooltipProps, tooltipText: tooltipContent },
141
159
  React.createElement(Information, { size: 16, fill: "currentColor" }))))), onBlur: onInputBlur, onChange: onInputChange, placeholder: placeholder, ref: inputRef, type: type, value: input, ...textInputProps })),
142
160
  React.createElement(Button, { className: createButtonClassName, disabled: isAddButtonDisabled, onClick: addValue, iconDescription: "Add", renderIcon: Add, size: "md", type: "button", ...buttonProps }, buttonContent)),
143
- React.createElement("div", { className: `${prefix}--bmrg-creatable__tags` }, tagsToShow.map((item, index) => (React.createElement(Tag, { key: `${item}-${index}`, disabled: disabled, type: tagType, onClick: nonDeletable && initialTagItems.includes(item) ? undefined : () => removeValue(item), onKeyDown: nonDeletable && initialTagItems.includes(item)
161
+ reorderable ? (React.createElement(DndContext, { sensors: disabled ? [] : sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd },
162
+ React.createElement(SortableContext, { items: tagsToShow, strategy: verticalListSortingStrategy },
163
+ React.createElement("div", { className: `${prefix}--bmrg-creatable__tags--reorderable` }, tagsToShow.map((item, index) => (React.createElement(ReorderableTag, { key: `${item}-${index}`, disabled: disabled, initialTagItems: initialTagItems, item: item, nonDeletable: nonDeletable, removeValue: removeValue, tagProps: tagProps, tagType: tagType }))))))) : (React.createElement("div", { className: `${prefix}--bmrg-creatable__tags` }, tagsToShow.map((item, index) => (React.createElement(Tag, { key: `${item}-${index}`, disabled: disabled, type: tagType, onClick: nonDeletable && initialTagItems.includes(item) ? undefined : () => removeValue(item), onKeyDown: nonDeletable && initialTagItems.includes(item)
144
164
  ? undefined
145
- : (e) => isAccessibleKeyDownEvent(e) && removeValue(item), filter: !nonDeletable || (nonDeletable && !initialTagItems.includes(item)), ...tagProps }, item))))));
165
+ : (e) => isAccessibleKeyDownEvent(e) && removeValue(item), filter: !nonDeletable || (nonDeletable && !initialTagItems.includes(item)), ...tagProps }, item)))))));
166
+ }
167
+ function ReorderableTag({ disabled, initialTagItems, item, nonDeletable, removeValue, tagProps, tagType, }) {
168
+ const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: item });
169
+ const style = {
170
+ transform: CSS.Transform.toString(transform),
171
+ transition,
172
+ };
173
+ return (React.createElement("div", { ref: setNodeRef, ...attributes, ...(!disabled ? listeners : {}), style: style },
174
+ React.createElement(DismissibleTag, { disabled: disabled, type: tagType, onClose: nonDeletable && initialTagItems.includes(item) ? undefined : () => removeValue(item), renderIcon: Draggable, title: "", text: item, ...tagProps })));
146
175
  }
147
176
 
148
177
  export { CreatableComponent as default };
package/dist/esm/components/DataDrivenInput/DataDrivenInput.js CHANGED
@@ -109,9 +109,18 @@ function DataDrivenInput(props) {
109
109
  Component = Creatable;
110
110
  componentProps = {
111
111
  ...allInputProps,
112
- createKeyValuePair: type === CREATABLE_TYPES.CREATABLE_PAIR || type === CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE,
112
+ createKeyValuePair: type === CREATABLE_TYPES.CREATABLE_PAIR ||
113
+ type === CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE ||
114
+ type === CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE ||
115
+ type === CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE,
113
116
  nonDeletable: type === CREATABLE_TYPES.CREATABLE_SINGLE_NON_DELETABLE ||
114
- type === CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE,
117
+ type === CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE ||
118
+ type === CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE ||
119
+ type === CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE,
120
+ reorderable: type === CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE ||
121
+ type === CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE ||
122
+ type === CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE ||
123
+ type === CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE,
115
124
  invalid: invalidInput,
116
125
  invalidText: invalidTextMessage,
117
126
  placeholder,
package/dist/esm/components/DynamicFormik/DynamicFormik.js CHANGED
@@ -106,7 +106,13 @@ async function handleGoverningSelectChange({ formikProps, input, inputs, isInput
106
106
  /** Erase value of governed inputs */
107
107
  if (inputsGovernedByCurrentOne.length) {
108
108
  await inputsGovernedByCurrentOne.forEach(async (input) => {
109
- await handleGoverningSelectChange({ formikProps, input, inputs, isInputBeingChanged: false, selectedItem: null });
109
+ await handleGoverningSelectChange({
110
+ formikProps,
111
+ input,
112
+ inputs,
113
+ isInputBeingChanged: false,
114
+ selectedItem: null,
115
+ });
110
116
  });
111
117
  }
112
118
  // only the top governing select should display warnings if changed and reset touched status for governed ones
@@ -198,8 +204,12 @@ function generateYupAst({ inputs, allowCustomPropertySyntax, customPropertySynta
198
204
  if (inputType === MULTI_SELECT_TYPES.MULTI_SELECT ||
199
205
  inputType === CREATABLE_TYPES.CREATABLE_SINGLE ||
200
206
  inputType === CREATABLE_TYPES.CREATABLE_SINGLE_NON_DELETABLE ||
207
+ inputType === CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE ||
208
+ inputType === CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE ||
201
209
  inputType === CREATABLE_TYPES.CREATABLE_PAIR ||
202
210
  inputType === CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE ||
211
+ inputType === CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE ||
212
+ inputType === CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE ||
203
213
  inputType === CHECKBOX_TYPES.CHECKBOX) {
204
214
  if (useCSVforArrays) {
205
215
  yupValidationArray.push(["yup.string"]);
package/dist/esm/components/Header/HeaderTeamSwitcher.js CHANGED
@@ -298,67 +298,70 @@ function HeaderTeamSwitcher({ analyticsHelpers, baseServicesUrl, createJoinTeamT
298
298
  React.createElement("span", { className: headerTeamSwitcherCreateTeamButtonTextClassname }, createTeamButtonText),
299
299
  React.createElement(AddAlt, { className: headerTeamSwitcherCreateTeamButtonIconClassname })))),
300
300
  allTeams.map((team) => {
301
- const isTeamSelected = team.id === selectedTeam?.id;
302
- if (team.type === TEAM_TYPES.ACCOUNT) {
303
- const isSubmenuOpen = team.id === openAccountSubmenuId;
304
- const projectTeams = team.projectTeams;
305
- const existProjectTeams = Array.isArray(projectTeams) && projectTeams.length > 0;
306
- let selectedProjectTeamIndex = -1;
307
- if (existProjectTeams) {
308
- selectedProjectTeamIndex = projectTeams.findIndex((team) => team.id === selectedTeam?.id);
309
- }
310
- const isProjectTeamSelected = selectedProjectTeamIndex >= 0;
311
- const isMenuSelected = isTeamSelected || isProjectTeamSelected;
312
- if (existProjectTeams && isProjectTeamSelected) {
313
- const [removedTeam] = projectTeams.splice(selectedProjectTeamIndex, 1);
314
- projectTeams.unshift(removedTeam);
301
+ if (Boolean(team?.id)) {
302
+ const isTeamSelected = team.id === selectedTeam?.id;
303
+ if (team.type === TEAM_TYPES.ACCOUNT) {
304
+ const isSubmenuOpen = team.id === openAccountSubmenuId;
305
+ const projectTeams = team.projectTeams;
306
+ const existProjectTeams = Array.isArray(projectTeams) && projectTeams.length > 0;
307
+ let selectedProjectTeamIndex = -1;
308
+ if (existProjectTeams) {
309
+ selectedProjectTeamIndex = projectTeams.findIndex((team) => team.id === selectedTeam?.id);
310
+ }
311
+ const isProjectTeamSelected = selectedProjectTeamIndex >= 0;
312
+ const isMenuSelected = isTeamSelected || isProjectTeamSelected;
313
+ if (existProjectTeams && isProjectTeamSelected) {
314
+ const [removedTeam] = projectTeams.splice(selectedProjectTeamIndex, 1);
315
+ projectTeams.unshift(removedTeam);
316
+ }
317
+ return (React.createElement("div", { key: team.id, id: `${team.id}-account-menu` },
318
+ React.createElement(HeaderMenuItem, { "aria-expanded": isSubmenuOpen, "aria-selected": isMenuSelected, className: headerDropdownMenuItemAccountContainerClassname, onClick: (e) => handleOpenAccountSubmenu({ e, id: team.id }),
319
+ // eslint-disable-next-line no-script-url
320
+ href: "javascript:void(0)", "data-testid": "header-team-switcher-menu-account-accordion" },
321
+ React.createElement("div", { className: headerDropdownMenuItemAccountClassname },
322
+ React.createElement("div", { className: headerDropdownMenuItemTextIconClassname },
323
+ React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
324
+ isMenuSelected ? (React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null),
325
+ React.createElement("div", { className: headerDropdownMenuItemAccountIconsClassname },
326
+ React.createElement(GroupAccount, { className: headerDropdownMenuItemAccountGroupIconClassname }),
327
+ React.createElement(ChevronDown, { className: headerDropdownMenuItemAccountChevronIconClassname })))),
328
+ React.createElement("div", { id: `${team.id}-account-submenu`, key: `${team.id}-account-submenu`, "aria-expanded": isSubmenuOpen, className: headerDropdownMenuItemAccountSubmenuClassname },
329
+ React.createElement(HeaderMenuItem, { key: `${team.id}-menu-item`, id: `${team.id}-account-menu-item`, "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
330
+ handleTeamClick({ team, type: "account" });
331
+ }, "data-testid": "header-team-switcher-menu-account-accordion-item",
332
+ // eslint-disable-next-line no-script-url
333
+ href: "javascript:void(0)" },
334
+ React.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
335
+ React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, "Account Page"),
336
+ isTeamSelected ? (React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null)),
337
+ projectTeams && projectTeams.length > 0
338
+ ? projectTeams.map((team) => {
339
+ const isTeamSelected = team.id === selectedTeam?.id;
340
+ return (React.createElement("div", { key: team.id, id: `${team.id}-project-menu-item` },
341
+ React.createElement(HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
342
+ handleTeamClick({ team, type: "project" });
343
+ }, "data-testid": "header-team-switcher-menu-account-accordion-item",
344
+ // eslint-disable-next-line no-script-url
345
+ href: "javascript:void(0)" },
346
+ React.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
347
+ React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
348
+ isTeamSelected ? (React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null))));
349
+ })
350
+ : null)));
315
351
  }
316
- return (React.createElement("div", { key: team.id, id: `${team.id}-account-menu` },
317
- React.createElement(HeaderMenuItem, { "aria-expanded": isSubmenuOpen, "aria-selected": isMenuSelected, className: headerDropdownMenuItemAccountContainerClassname, onClick: (e) => handleOpenAccountSubmenu({ e, id: team.id }),
318
- // eslint-disable-next-line no-script-url
319
- href: "javascript:void(0)", "data-testid": "header-team-switcher-menu-account-accordion" },
320
- React.createElement("div", { className: headerDropdownMenuItemAccountClassname },
321
- React.createElement("div", { className: headerDropdownMenuItemTextIconClassname },
322
- React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
323
- isMenuSelected ? React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null),
324
- React.createElement("div", { className: headerDropdownMenuItemAccountIconsClassname },
325
- React.createElement(GroupAccount, { className: headerDropdownMenuItemAccountGroupIconClassname }),
326
- React.createElement(ChevronDown, { className: headerDropdownMenuItemAccountChevronIconClassname })))),
327
- React.createElement("div", { id: `${team.id}-account-submenu`, key: `${team.id}-account-submenu`, "aria-expanded": isSubmenuOpen, className: headerDropdownMenuItemAccountSubmenuClassname },
328
- React.createElement(HeaderMenuItem, { key: `${team.id}-menu-item`, id: `${team.id}-account-menu-item`, "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
329
- handleTeamClick({ team, type: "account" });
330
- }, "data-testid": "header-team-switcher-menu-account-accordion-item",
352
+ else {
353
+ return (React.createElement("div", { key: team.id, id: `${team.id}-${team.type}-menu-item` },
354
+ React.createElement(HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
355
+ handleTeamClick({ team, type: team.type ?? "" });
356
+ }, "data-testid": "header-team-switcher-menu-item",
331
357
  // eslint-disable-next-line no-script-url
332
358
  href: "javascript:void(0)" },
333
- React.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
334
- React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, "Account Page"),
335
- isTeamSelected ? React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null)),
336
- projectTeams && projectTeams.length > 0
337
- ? projectTeams.map((team) => {
338
- const isTeamSelected = team.id === selectedTeam?.id;
339
- return (React.createElement("div", { key: team.id, id: `${team.id}-project-menu-item` },
340
- React.createElement(HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
341
- handleTeamClick({ team, type: "project" });
342
- }, "data-testid": "header-team-switcher-menu-account-accordion-item",
343
- // eslint-disable-next-line no-script-url
344
- href: "javascript:void(0)" },
345
- React.createElement("div", { className: headerDropdownMenuItemClassname, style: { paddingLeft: "1rem" } },
346
- React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
347
- isTeamSelected ? (React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname })) : null))));
348
- })
349
- : null)));
350
- }
351
- else {
352
- return (React.createElement("div", { key: team.id, id: `${team.id}-${team.type}-menu-item` },
353
- React.createElement(HeaderMenuItem, { "aria-selected": isTeamSelected, className: headerDropdownMenuItemContainerClassname, onClick: () => {
354
- handleTeamClick({ team, type: team.type ?? "" });
355
- }, "data-testid": "header-team-switcher-menu-item",
356
- // eslint-disable-next-line no-script-url
357
- href: "javascript:void(0)" },
358
- React.createElement("div", { className: headerDropdownMenuItemClassname },
359
- React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
360
- isTeamSelected ? React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null))));
359
+ React.createElement("div", { className: headerDropdownMenuItemClassname },
360
+ React.createElement("span", { title: team.nameToDisplay, className: headerDropdownMenuItemTextClassname }, team.nameToDisplay),
361
+ isTeamSelected ? React.createElement(CheckmarkFilled, { className: headerDropdownMenuItemIconClassname }) : null))));
362
+ }
361
363
  }
364
+ return null;
362
365
  })))));
363
366
  }
364
367
  return null;
package/dist/esm/constants/DataDrivenInputTypes.js CHANGED
@@ -9,8 +9,12 @@ const CHECKBOX_TYPES = {
9
9
  const CREATABLE_TYPES = {
10
10
  CREATABLE_SINGLE: "creatable-single",
11
11
  CREATABLE_SINGLE_NON_DELETABLE: "creatable-single-non-deletable",
12
+ CREATABLE_SINGLE_REORDERABLE: "creatable-single-reorderable",
13
+ CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE: "creatable-single-reorderable-non-deletable",
12
14
  CREATABLE_PAIR: "creatable-pair",
13
15
  CREATABLE_PAIR_NON_DELETABLE: "creatable-pair-non-deletable",
16
+ CREATABLE_PAIR_REORDERABLE: "creatable-pair-reorderable",
17
+ CREATABLE_PAIR_REORDERABLE_NON_DELETABLE: "creatable-pair-reorderable-non-deletable",
14
18
  };
15
19
  const DATE_TYPES = {
16
20
  DATE: "date",
package/dist/types/index.d.ts CHANGED
@@ -658,6 +658,7 @@ type Props$y = {
658
658
  onChange?: (items: string[]) => void;
659
659
  placeholder?: string;
660
660
  readOnly?: boolean;
661
+ reorderable?: boolean;
661
662
  tagProps?: any;
662
663
  tagType?: string;
663
664
  textInputProps?: any;
@@ -672,7 +673,7 @@ type Props$y = {
672
673
  value?: string | string[];
673
674
  values?: string | string[];
674
675
  };
675
- declare function CreatableComponent({ buttonClassName, buttonContent, buttonProps, createKeyValuePair, disabled, id, initialValues: externalInitialValues, invalid, invalidText, helperText, key, keyHelperText, keyLabel, keyLabelText, keyPlaceholder, label, labelText, max, nonDeletable, onKeyBlur, onValueBlur, onInputBlur, onChange, placeholder, tagProps, tagType, textInputProps, tooltipClassName, tooltipContent, tooltipProps, type, valueHelperText, valueLabel, valueLabelText, valuePlaceholder, value: externalValues, values, trimInput, removeOnlyFirst, }: Props$y): React.JSX.Element;
676
+ declare function CreatableComponent({ buttonClassName, buttonContent, buttonProps, createKeyValuePair, disabled, id, initialValues: externalInitialValues, invalid, invalidText, helperText, key, keyHelperText, keyLabel, keyLabelText, keyPlaceholder, label, labelText, max, nonDeletable, onKeyBlur, onValueBlur, onInputBlur, onChange, placeholder, reorderable, tagProps, tagType, textInputProps, tooltipClassName, tooltipContent, tooltipProps, type, valueHelperText, valueLabel, valueLabelText, valuePlaceholder, value: externalValues, values, trimInput, removeOnlyFirst, }: Props$y): React.JSX.Element;
676
677
 
677
678
  type OwnDataDrivenInputProps = {
678
679
  id?: string;
package/package.json CHANGED
@@ -1,13 +1,13 @@
1
1
  {
2
2
  "name": "@boomerang-io/carbon-addons-boomerang-react",
3
3
  "description": "Carbon Addons for Boomerang apps",
4
- "version": "4.6.21-beta.45",
4
+ "version": "4.6.21-beta.47",
5
5
  "author": {
6
6
  "name": "Tim Bula",
7
7
  "email": "timrbula@gmail.com"
8
8
  },
9
9
  "license": "Apache-2",
10
- "repository": {
10
+ "repository": {
11
11
  "type": "git",
12
12
  "url": "git@github.com:boomerang-io/carbon-addons-boomerang-react"
13
13
  },
@@ -49,6 +49,9 @@
49
49
  "dependencies": {
50
50
  "@carbon/ibm-products": "2.57.1",
51
51
  "@carbon/react": "1.77.0",
52
+ "@dnd-kit/core": "^6.3.1",
53
+ "@dnd-kit/sortable": "^10.0.0",
54
+ "@dnd-kit/utilities": "^3.2.2",
52
55
  "@stomp/stompjs": "6.1.2",
53
56
  "@tippyjs/react": "4.2.6",
54
57
  "classnames": "2.3.2",
package/scss/components/Creatable/_creatable.scss CHANGED
@@ -4,7 +4,6 @@ IBM Confidential
4
4
  © Copyright IBM Corp. 2022, 2024
5
5
  */
6
6
 
7
-
8
7
  @use "../../global/config" as *;
9
8
  .#{$prefix}--bmrg-creatable {
10
9
  position: relative;
@@ -42,6 +41,37 @@ IBM Confidential
42
41
  width: 100%;
43
42
  }
44
43
 
44
+ .#{$prefix}--bmrg-creatable__tags--reorderable {
45
+ display: flex;
46
+ flex-direction: column;
47
+ margin-top: 0.5rem;
48
+ width: 100%;
49
+
50
+ .cds--tag {
51
+ cursor: grab;
52
+ margin-left: 0;
53
+ min-width: 100%;
54
+ width: 100%;
55
+
56
+ .cds--tag__custom-icon ~ span {
57
+ min-width: calc(100% - 1.25rem);
58
+ }
59
+
60
+ .cds--interactive--tag-children {
61
+ max-inline-size: none !important;
62
+ width: 100%;
63
+
64
+ .cds--popover {
65
+ display: none;
66
+ }
67
+ }
68
+
69
+ .cds--tag__label {
70
+ min-width: calc(100% - 1.5rem);
71
+ }
72
+ }
73
+ }
74
+
45
75
  .#{$prefix}--bmrg-creatable__tooltip {
46
76
  line-height: 0;
47
77
  margin-left: 0.5rem;