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

package/dist/esm/node_modules/.pnpm/@dnd-kit_utilities@3.2.2_react@16.14.0/node_modules/@dnd-kit/utilities/dist/utilities.esm.js

@@ -0,0 +1,128 @@
+import { useMemo, useLayoutEffect, useEffect } from 'react';
+
+function useCombinedRefs() {
+  for (var _len = arguments.length, refs = new Array(_len), _key = 0; _key < _len; _key++) {
+    refs[_key] = arguments[_key];
+  }
+
+  return useMemo(() => node => {
+    refs.forEach(ref => ref(node));
+  }, // eslint-disable-next-line react-hooks/exhaustive-deps
+  refs);
+}
+
+// https://github.com/facebook/react/blob/master/packages/shared/ExecutionEnvironment.js
+const canUseDOM = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined';
+
+function isWindow(element) {
+  const elementString = Object.prototype.toString.call(element);
+  return elementString === '[object Window]' || // In Electron context the Window object serializes to [object global]
+  elementString === '[object global]';
+}
+
+function isNode(node) {
+  return 'nodeType' in node;
+}
+
+function getWindow(target) {
+  var _target$ownerDocument, _target$ownerDocument2;
+
+  if (!target) {
+    return window;
+  }
+
+  if (isWindow(target)) {
+    return target;
+  }
+
+  if (!isNode(target)) {
+    return window;
+  }
+
+  return (_target$ownerDocument = (_target$ownerDocument2 = target.ownerDocument) == null ? void 0 : _target$ownerDocument2.defaultView) != null ? _target$ownerDocument : window;
+}
+
+/**
+ * A hook that resolves to useEffect on the server and useLayoutEffect on the client
+ * @param callback {function} Callback function that is invoked when the dependencies of the hook change
+ */
+
+const useIsomorphicLayoutEffect = canUseDOM ? useLayoutEffect : useEffect;
+
+let ids = {};
+function useUniqueId(prefix, value) {
+  return useMemo(() => {
+    if (value) {
+      return value;
+    }
+
+    const id = ids[prefix] == null ? 0 : ids[prefix] + 1;
+    ids[prefix] = id;
+    return prefix + "-" + id;
+  }, [prefix, value]);
+}
+
+function isKeyboardEvent(event) {
+  if (!event) {
+    return false;
+  }
+
+  const {
+    KeyboardEvent
+  } = getWindow(event.target);
+  return KeyboardEvent && event instanceof KeyboardEvent;
+}
+
+const CSS = /*#__PURE__*/Object.freeze({
+  Translate: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+
+      const {
+        x,
+        y
+      } = transform;
+      return "translate3d(" + (x ? Math.round(x) : 0) + "px, " + (y ? Math.round(y) : 0) + "px, 0)";
+    }
+
+  },
+  Scale: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+
+      const {
+        scaleX,
+        scaleY
+      } = transform;
+      return "scaleX(" + scaleX + ") scaleY(" + scaleY + ")";
+    }
+
+  },
+  Transform: {
+    toString(transform) {
+      if (!transform) {
+        return;
+      }
+
+      return [CSS.Translate.toString(transform), CSS.Scale.toString(transform)].join(' ');
+    }
+
+  },
+  Transition: {
+    toString(_ref) {
+      let {
+        property,
+        duration,
+        easing
+      } = _ref;
+      return property + " " + duration + "ms " + easing;
+    }
+
+  }
+});
+
+export { CSS, canUseDOM, getWindow, isKeyboardEvent, isNode, isWindow, useCombinedRefs, useIsomorphicLayoutEffect, useUniqueId };

package/dist/esm/{components → src/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 '../../../node_modules/.pnpm/@dnd-kit_sortable@8.0.0_@dnd-kit_core@6.3.1_react-dom@16.14.0_react@16.14.0__react@16.14.0__react@16.14.0/node_modules/@dnd-kit/sortable/dist/sortable.esm.js';
+import { CSS } from '../../../node_modules/.pnpm/@dnd-kit_utilities@3.2.2_react@16.14.0/node_modules/@dnd-kit/utilities/dist/utilities.esm.js';
 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 → src/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 → src/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 → src/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.12",
   "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,7 @@
   "dependencies": {
     "@carbon/ibm-products": "2.57.1",
     "@carbon/react": "1.77.0",
+    "@dnd-kit/core": "^6.3.1",
     "@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;