@boomerang-io/carbon-addons-boomerang-react 4.6.14-beta.11 → 4.6.14-beta.13

package/dist/cjs/components/Creatable/Creatable.js

@@ -5,6 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var react = require('@carbon/react');
 var icons = require('@carbon/react/icons');
+var core = require('@dnd-kit/core');
+var sortable = require('@dnd-kit/sortable');
+var utilities = require('@dnd-kit/utilities');
 var cx = require('classnames');
 var TooltipHover = require('../TooltipHover/TooltipHover.js');
 var accessibility = require('../../tools/accessibility.js');
@@ -20,7 +23,7 @@ IBM Confidential
 694970X, 69497O0
 © Copyright IBM Corp. 2022, 2024
 */
-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, }) {
+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, }) {
     const [keyValue, setKeyValue] = React.useState("");
     const [value, setValue] = React.useState("");
     const [input, setInput] = React.useState("");
@@ -128,6 +131,21 @@ function CreatableComponent({ buttonClassName = `${settings.prefix}--bmrg-creata
         if (onChange)
             onChange(items);
     };
+    const sensors = core.useSensors(core.useSensor(core.PointerSensor, {
+        activationConstraint: { distance: 5 },
+    }));
+    function handleDragEnd(event) {
+        const { active, over } = event;
+        if (over && active.id !== over.id) {
+            const oldIndex = tagItems.indexOf(active.id);
+            const newIndex = tagItems.indexOf(over.id);
+            const reorderedItems = sortable.arrayMove(tagItems, oldIndex, newIndex);
+            setCreatedItems(reorderedItems);
+            if (onChange) {
+                onChange(reorderedItems);
+            }
+        }
+    }
     return (React__default.default.createElement("div", { key: key, className: `${settings.prefix}--bmrg-creatable` },
         React__default.default.createElement("div", { className: `${settings.prefix}--bmrg-creatable__input` },
             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
                         React__default.default.createElement(TooltipHover.default, { ...tooltipProps, tooltipText: tooltipContent },
                             React__default.default.createElement(icons.Information, { size: 16, fill: "currentColor" }))))), onBlur: onInputBlur, onChange: onInputChange, placeholder: placeholder, ref: inputRef, type: type, value: input, ...textInputProps })),
             React__default.default.createElement(react.Button, { className: createButtonClassName, disabled: isAddButtonDisabled, onClick: addValue, iconDescription: "Add", renderIcon: icons.Add, size: "md", type: "button", ...buttonProps }, buttonContent)),
-        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)
+        reorderable ? (React__default.default.createElement(core.DndContext, { sensors: disabled ? [] : sensors, collisionDetection: core.closestCenter, onDragEnd: handleDragEnd },
+            React__default.default.createElement(sortable.SortableContext, { items: tagsToShow, strategy: sortable.verticalListSortingStrategy },
+                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)
                 ? undefined
-                : (e) => accessibility.isAccessibleKeyDownEvent(e) && removeValue(item), filter: !nonDeletable || (nonDeletable && !initialTagItems.includes(item)), ...tagProps }, item))))));
+                : (e) => accessibility.isAccessibleKeyDownEvent(e) && removeValue(item), filter: !nonDeletable || (nonDeletable && !initialTagItems.includes(item)), ...tagProps }, item)))))));
+}
+function ReorderableTag({ disabled, initialTagItems, item, nonDeletable, removeValue, tagProps, tagType, }) {
+    const { attributes, listeners, setNodeRef, transform, transition } = sortable.useSortable({ id: item });
+    const style = {
+        transform: utilities.CSS.Transform.toString(transform),
+        transition,
+    };
+    return (React__default.default.createElement("div", { ref: setNodeRef, ...attributes, ...(!disabled ? listeners : {}), style: style },
+        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 })));
 }
 
 exports.default = CreatableComponent;

package/dist/cjs/components/DataDrivenInput/DataDrivenInput.js

@@ -117,9 +117,18 @@ function DataDrivenInput(props) {
         Component = Creatable$1;
         componentProps = {
             ...allInputProps,
-            createKeyValuePair: type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR || type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE,
+            createKeyValuePair: type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR ||
+                type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE ||
+                type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE ||
+                type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE,
             nonDeletable: type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_NON_DELETABLE ||
-                type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE,
+                type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE ||
+                type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE ||
+                type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE,
+            reorderable: type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE ||
+                type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE ||
+                type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE ||
+                type === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE,
             invalid: invalidInput,
             invalidText: invalidTextMessage,
             placeholder,

package/dist/cjs/components/DynamicFormik/DynamicFormik.js

@@ -134,7 +134,13 @@ async function handleGoverningSelectChange({ formikProps, input, inputs, isInput
         /** Erase value of governed inputs */
         if (inputsGovernedByCurrentOne.length) {
             await inputsGovernedByCurrentOne.forEach(async (input) => {
-                await handleGoverningSelectChange({ formikProps, input, inputs, isInputBeingChanged: false, selectedItem: null });
+                await handleGoverningSelectChange({
+                    formikProps,
+                    input,
+                    inputs,
+                    isInputBeingChanged: false,
+                    selectedItem: null,
+                });
             });
         }
         // 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
         if (inputType === DataDrivenInputTypes.MULTI_SELECT_TYPES.MULTI_SELECT ||
             inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE ||
             inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_NON_DELETABLE ||
+            inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE ||
+            inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE ||
             inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR ||
             inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE ||
+            inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE ||
+            inputType === DataDrivenInputTypes.CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE ||
             inputType === DataDrivenInputTypes.CHECKBOX_TYPES.CHECKBOX) {
             if (useCSVforArrays) {
                 yupValidationArray.push(["yup.string"]);

package/dist/cjs/constants/DataDrivenInputTypes.js

@@ -11,8 +11,12 @@ const CHECKBOX_TYPES = {
 const CREATABLE_TYPES = {
     CREATABLE_SINGLE: "creatable-single",
     CREATABLE_SINGLE_NON_DELETABLE: "creatable-single-non-deletable",
+    CREATABLE_SINGLE_REORDERABLE: "creatable-single-reorderable",
+    CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE: "creatable-single-reorderable-non-deletable",
     CREATABLE_PAIR: "creatable-pair",
     CREATABLE_PAIR_NON_DELETABLE: "creatable-pair-non-deletable",
+    CREATABLE_PAIR_REORDERABLE: "creatable-pair-reorderable",
+    CREATABLE_PAIR_REORDERABLE_NON_DELETABLE: "creatable-pair-reorderable-non-deletable",
 };
 const DATE_TYPES = {
     DATE: "date",

package/dist/esm/components/Creatable/Creatable.js

@@ -1,6 +1,9 @@
 import React, { useState } from 'react';
-import { TextInput, Button, Tag } from '@carbon/react';
-import { Information, Add } from '@carbon/react/icons';
+import { TextInput, Button, Tag, DismissibleTag } from '@carbon/react';
+import { Information, Add, Draggable } from '@carbon/react/icons';
+import { useSensors, useSensor, PointerSensor, DndContext, closestCenter } from '@dnd-kit/core';
+import { SortableContext, verticalListSortingStrategy, useSortable, arrayMove } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
 import cx from 'classnames';
 import TooltipHover from '../TooltipHover/TooltipHover.js';
 import { isAccessibleKeyDownEvent } from '../../tools/accessibility.js';
@@ -11,7 +14,7 @@ IBM Confidential
 694970X, 69497O0
 © Copyright IBM Corp. 2022, 2024
 */
-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, }) {
+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, }) {
     const [keyValue, setKeyValue] = useState("");
     const [value, setValue] = useState("");
     const [input, setInput] = useState("");
@@ -119,6 +122,21 @@ function CreatableComponent({ buttonClassName = `${prefix}--bmrg-creatable__butt
         if (onChange)
             onChange(items);
     };
+    const sensors = useSensors(useSensor(PointerSensor, {
+        activationConstraint: { distance: 5 },
+    }));
+    function handleDragEnd(event) {
+        const { active, over } = event;
+        if (over && active.id !== over.id) {
+            const oldIndex = tagItems.indexOf(active.id);
+            const newIndex = tagItems.indexOf(over.id);
+            const reorderedItems = arrayMove(tagItems, oldIndex, newIndex);
+            setCreatedItems(reorderedItems);
+            if (onChange) {
+                onChange(reorderedItems);
+            }
+        }
+    }
     return (React.createElement("div", { key: key, className: `${prefix}--bmrg-creatable` },
         React.createElement("div", { className: `${prefix}--bmrg-creatable__input` },
             createKeyValuePair ? (React.createElement("div", { className: `${prefix}--bmrg-creatable__key-value-inputs` },
@@ -140,9 +158,20 @@ function CreatableComponent({ buttonClassName = `${prefix}--bmrg-creatable__butt
                         React.createElement(TooltipHover, { ...tooltipProps, tooltipText: tooltipContent },
                             React.createElement(Information, { size: 16, fill: "currentColor" }))))), onBlur: onInputBlur, onChange: onInputChange, placeholder: placeholder, ref: inputRef, type: type, value: input, ...textInputProps })),
             React.createElement(Button, { className: createButtonClassName, disabled: isAddButtonDisabled, onClick: addValue, iconDescription: "Add", renderIcon: Add, size: "md", type: "button", ...buttonProps }, buttonContent)),
-        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)
+        reorderable ? (React.createElement(DndContext, { sensors: disabled ? [] : sensors, collisionDetection: closestCenter, onDragEnd: handleDragEnd },
+            React.createElement(SortableContext, { items: tagsToShow, strategy: verticalListSortingStrategy },
+                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)
                 ? undefined
-                : (e) => isAccessibleKeyDownEvent(e) && removeValue(item), filter: !nonDeletable || (nonDeletable && !initialTagItems.includes(item)), ...tagProps }, item))))));
+                : (e) => isAccessibleKeyDownEvent(e) && removeValue(item), filter: !nonDeletable || (nonDeletable && !initialTagItems.includes(item)), ...tagProps }, item)))))));
+}
+function ReorderableTag({ disabled, initialTagItems, item, nonDeletable, removeValue, tagProps, tagType, }) {
+    const { attributes, listeners, setNodeRef, transform, transition } = useSortable({ id: item });
+    const style = {
+        transform: CSS.Transform.toString(transform),
+        transition,
+    };
+    return (React.createElement("div", { ref: setNodeRef, ...attributes, ...(!disabled ? listeners : {}), style: style },
+        React.createElement(DismissibleTag, { disabled: disabled, type: tagType, onClose: nonDeletable && initialTagItems.includes(item) ? undefined : () => removeValue(item), renderIcon: Draggable, title: "", text: item, ...tagProps })));
 }
 
 export { CreatableComponent as default };

package/dist/esm/components/DataDrivenInput/DataDrivenInput.js

@@ -109,9 +109,18 @@ function DataDrivenInput(props) {
         Component = Creatable;
         componentProps = {
             ...allInputProps,
-            createKeyValuePair: type === CREATABLE_TYPES.CREATABLE_PAIR || type === CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE,
+            createKeyValuePair: type === CREATABLE_TYPES.CREATABLE_PAIR ||
+                type === CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE ||
+                type === CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE ||
+                type === CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE,
             nonDeletable: type === CREATABLE_TYPES.CREATABLE_SINGLE_NON_DELETABLE ||
-                type === CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE,
+                type === CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE ||
+                type === CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE ||
+                type === CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE,
+            reorderable: type === CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE ||
+                type === CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE ||
+                type === CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE ||
+                type === CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE,
             invalid: invalidInput,
             invalidText: invalidTextMessage,
             placeholder,

package/dist/esm/components/DynamicFormik/DynamicFormik.js

@@ -106,7 +106,13 @@ async function handleGoverningSelectChange({ formikProps, input, inputs, isInput
         /** Erase value of governed inputs */
         if (inputsGovernedByCurrentOne.length) {
             await inputsGovernedByCurrentOne.forEach(async (input) => {
-                await handleGoverningSelectChange({ formikProps, input, inputs, isInputBeingChanged: false, selectedItem: null });
+                await handleGoverningSelectChange({
+                    formikProps,
+                    input,
+                    inputs,
+                    isInputBeingChanged: false,
+                    selectedItem: null,
+                });
             });
         }
         // 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
         if (inputType === MULTI_SELECT_TYPES.MULTI_SELECT ||
             inputType === CREATABLE_TYPES.CREATABLE_SINGLE ||
             inputType === CREATABLE_TYPES.CREATABLE_SINGLE_NON_DELETABLE ||
+            inputType === CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE ||
+            inputType === CREATABLE_TYPES.CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE ||
             inputType === CREATABLE_TYPES.CREATABLE_PAIR ||
             inputType === CREATABLE_TYPES.CREATABLE_PAIR_NON_DELETABLE ||
+            inputType === CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE ||
+            inputType === CREATABLE_TYPES.CREATABLE_PAIR_REORDERABLE_NON_DELETABLE ||
             inputType === CHECKBOX_TYPES.CHECKBOX) {
             if (useCSVforArrays) {
                 yupValidationArray.push(["yup.string"]);

package/dist/esm/constants/DataDrivenInputTypes.js

@@ -9,8 +9,12 @@ const CHECKBOX_TYPES = {
 const CREATABLE_TYPES = {
     CREATABLE_SINGLE: "creatable-single",
     CREATABLE_SINGLE_NON_DELETABLE: "creatable-single-non-deletable",
+    CREATABLE_SINGLE_REORDERABLE: "creatable-single-reorderable",
+    CREATABLE_SINGLE_REORDERABLE_NON_DELETABLE: "creatable-single-reorderable-non-deletable",
     CREATABLE_PAIR: "creatable-pair",
     CREATABLE_PAIR_NON_DELETABLE: "creatable-pair-non-deletable",
+    CREATABLE_PAIR_REORDERABLE: "creatable-pair-reorderable",
+    CREATABLE_PAIR_REORDERABLE_NON_DELETABLE: "creatable-pair-reorderable-non-deletable",
 };
 const DATE_TYPES = {
     DATE: "date",

package/dist/types/index.d.ts

@@ -657,6 +657,7 @@ type Props$y = {
     onChange?: (items: string[]) => void;
     placeholder?: string;
     readOnly?: boolean;
+    reorderable?: boolean;
     tagProps?: any;
     tagType?: string;
     textInputProps?: any;
@@ -671,7 +672,7 @@ type Props$y = {
     value?: string | string[];
     values?: string | string[];
 };
-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;
+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;
 
 type OwnDataDrivenInputProps = {
     id?: string;

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@boomerang-io/carbon-addons-boomerang-react",
   "description": "Carbon Addons for Boomerang apps",
-  "version": "4.6.14-beta.11",
+  "version": "4.6.14-beta.13",
   "author": {
     "name": "Tim Bula",
     "email": "timrbula@gmail.com"
   },
   "license": "Apache-2",
-  "repository": { 
+  "repository": {
     "type": "git",
     "url": "git@github.com:boomerang-io/carbon-addons-boomerang-react"
   },
@@ -49,6 +49,9 @@
   "dependencies": {
     "@carbon/ibm-products": "2.57.1",
     "@carbon/react": "1.77.0",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@stomp/stompjs": "6.1.2",
     "@tippyjs/react": "4.2.6",
     "classnames": "2.3.2",

package/scss/components/Creatable/_creatable.scss

@@ -4,7 +4,6 @@ IBM Confidential
 © Copyright IBM Corp. 2022, 2024
 */
 
-
 @use "../../global/config" as *;
 .#{$prefix}--bmrg-creatable {
   position: relative;
@@ -42,6 +41,36 @@ IBM Confidential
   width: 100%;
 }
 
+.#{$prefix}--bmrg-creatable__tags--reorderable {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+
+  .cds--tag {
+    cursor: grab;
+    margin-left: 0;
+    min-width: 100%;
+    width: 100%;
+
+    .cds--tag__custom-icon ~ span {
+      min-width: calc(100% - 1.25rem);
+    }
+
+    .cds--interactive--tag-children {
+      max-inline-size: none !important;
+      width: 100%;
+
+      .cds--popover {
+        display: none;
+      }
+    }
+
+    .cds--tag__label {
+      min-width: calc(100% - 1.5rem);
+    }
+  }
+}
+
 .#{$prefix}--bmrg-creatable__tooltip {
   line-height: 0;
   margin-left: 0.5rem;