@evergis/uilib-gl 1.0.45 → 1.0.47

package/dist/index.d.ts

@@ -55,6 +55,7 @@ export * from "./organisms/ColorPicker";
 export * from "./organisms/DataGrid";
 export * from "./organisms/DatePicker";
 export * from "./organisms/Dialog";
+export * from "./organisms/DraggableTree";
 export * from "./organisms/Dropdown";
 export * from "./organisms/FilterInput";
 export * from "./organisms/FocusTrap";

package/dist/organisms/DraggableTree/DraggableTree.d.ts

@@ -0,0 +1,3 @@
+import { FC } from "react";
+import { DraggableTreeProps } from "./types";
+export declare const DraggableTree: FC<DraggableTreeProps>;

package/dist/organisms/DraggableTree/constants.d.ts

@@ -0,0 +1,3 @@
+export declare const TREE_PASTE_PLACEHOLDER_HEIGHT = "0.125rem";
+export declare const TREE_PASTE_PLACEHOLDER_COLOR = "#00AAFF";
+export declare const TREE_DRAGGING_NODE_BACKGROUND_COLOR = "rgba(0, 195, 255, 0.12)";

package/dist/organisms/DraggableTree/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./DraggableTree";
+export * from "./styled";
+export * from "./types";

package/dist/organisms/DraggableTree/styled.d.ts

@@ -0,0 +1,11 @@
+import { LayoutProps, PaddingProps } from "styled-system";
+import { DraggableTreeItemProps, DraggableTreeOptions } from "./types";
+export declare const DraggableTreeContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const DraggableTreeItem: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, Pick<DraggableTreeItemProps, "isDraggingOver"> & {
+    level: number;
+    isDragging?: boolean | undefined;
+    treeOptions?: DraggableTreeOptions | undefined;
+    isHidden?: boolean | undefined;
+    isPlaceholder?: boolean | undefined;
+    isFolder?: boolean | undefined;
+} & LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & PaddingProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;

package/dist/organisms/DraggableTree/types.d.ts

@@ -0,0 +1,23 @@
+import { CSSProperties, PropsWithChildren, ReactNode } from "react";
+export interface DraggableTreeItemProps extends PropsWithChildren {
+    isDraggingOver?: boolean;
+}
+export declare type DraggableTreeNodeId = string | number;
+export interface DraggableTreeNode {
+    id: DraggableTreeNodeId;
+    children?: DraggableTreeNode[];
+    isExpanded?: boolean;
+    additionalData?: any;
+    render: (node: DraggableTreeNode) => ReactNode;
+}
+export interface DraggableTreeOptions {
+    pastePlaceholderHeight?: CSSProperties["height"];
+    pastePlaceholderColor?: CSSProperties["color"];
+    draggingNodeBackgroundColor?: CSSProperties["backgroundColor"];
+}
+export interface DraggableTreeProps {
+    nodes?: DraggableTreeNode[];
+    options?: DraggableTreeOptions;
+    disableDrag?: boolean;
+    onUpdate?: (updatedNodes: DraggableTreeNode[]) => void;
+}

package/dist/organisms/DraggableTree/utils/isNodeAllowedToDrop.d.ts

@@ -0,0 +1,2 @@
+import { DraggableTreeNode } from "../types";
+export declare const isNodeAllowedToDrop: (draggingNode?: DraggableTreeNode | undefined, draggingOverId?: string | number | undefined) => boolean;

package/dist/uilib-gl.esm.js

@@ -1,4 +1,4 @@
-import { memo, Children, cloneElement, Component, useRef, useEffect, useState, useMemo, useCallback, useLayoutEffect, isValidElement } from 'react';
+import { memo, Children, cloneElement, Component, useRef, useEffect, useState, useMemo, useCallback, useLayoutEffect, isValidElement, Fragment } from 'react';
 import styled, { ThemeProvider as ThemeProvider$1, css, keyframes, createGlobalStyle } from 'styled-components';
 import merge from 'deepmerge';
 import { rgb, hsl, hsla, opacify, ellipsis, rem, normalize } from 'polished';
@@ -12,7 +12,7 @@ import AutosuggestHighlightParse from 'autosuggest-highlight/parse';
 import { debounce as debounce$1, throttle, isEqual, isNil, unescape, defaults, keyBy } from 'lodash-es';
 import { CSSTransition as CSSTransition$1, TransitionGroup } from 'react-transition-group';
 import Transition from 'react-transition-group/Transition';
-import { background, border, color, flexbox, fontSize, fontWeight, fontStyle, space, layout, textAlign, position, lineHeight } from 'styled-system';
+import { background, border, color, flexbox, fontSize, fontWeight, fontStyle, space, layout, textAlign, position, lineHeight, padding } from 'styled-system';
 import ReactDOM__default, { createPortal } from 'react-dom';
 import tippy from 'tippy.js';
 import Bowser from 'bowser';
@@ -39,6 +39,7 @@ import subDays from 'date-fns/subDays';
 import addDays from 'date-fns/addDays';
 import getDaysInMonth from 'date-fns/getDaysInMonth';
 import getDay from 'date-fns/getDay';
+import { returnFound, removeObject, changeProps, insertObjectAfter } from 'find-and';
 import { parse } from 'date-fns';
 import { DateRange } from 'react-date-range';
 import PropTypes from 'prop-types';
@@ -22950,6 +22951,209 @@ const DialogTitle = styled.div`
   }
 `;
 
+const TREE_PASTE_PLACEHOLDER_HEIGHT = "0.125rem";
+const TREE_PASTE_PLACEHOLDER_COLOR = "#00AAFF";
+const TREE_DRAGGING_NODE_BACKGROUND_COLOR = "rgba(0, 195, 255, 0.12)";
+
+const DraggableTreeContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  width: 100%;
+`;
+const DraggableTreeItem = styled.span`
+  display: ${_ref => {
+  let {
+    isHidden
+  } = _ref;
+  return isHidden ? "none" : "inline-flex";
+}};
+  flex-direction: column;
+  overflow: hidden;
+  padding-left: ${_ref2 => {
+  let {
+    level
+  } = _ref2;
+  return `${level * 16}px`;
+}};
+  padding-bottom: ${_ref3 => {
+  let {
+    treeOptions,
+    isFolder
+  } = _ref3;
+  return !isFolder ? `calc(${(treeOptions == null ? void 0 : treeOptions.pastePlaceholderHeight) ?? TREE_PASTE_PLACEHOLDER_HEIGHT} * 6)` : undefined;
+}};
+  background-color: ${_ref4 => {
+  let {
+    isDragging,
+    treeOptions
+  } = _ref4;
+  return isDragging ? (treeOptions == null ? void 0 : treeOptions.draggingNodeBackgroundColor) ?? TREE_DRAGGING_NODE_BACKGROUND_COLOR : "initial";
+}};
+  height: ${_ref5 => {
+  let {
+    treeOptions,
+    isPlaceholder
+  } = _ref5;
+  return isPlaceholder ? `calc(${(treeOptions == null ? void 0 : treeOptions.pastePlaceholderHeight) ?? TREE_PASTE_PLACEHOLDER_HEIGHT} * 2)` : undefined;
+}};
+
+  ${layout}
+  ${padding}
+  &:after {
+    display: ${_ref6 => {
+  let {
+    isHidden
+  } = _ref6;
+  return isHidden ? "none" : "initial";
+}};
+    content: "";
+    width: 100%;
+    height: ${_ref7 => {
+  let {
+    treeOptions
+  } = _ref7;
+  return (treeOptions == null ? void 0 : treeOptions.pastePlaceholderHeight) ?? TREE_PASTE_PLACEHOLDER_HEIGHT;
+}};
+    background-color: ${_ref8 => {
+  let {
+    isDraggingOver,
+    treeOptions
+  } = _ref8;
+  return isDraggingOver ? (treeOptions == null ? void 0 : treeOptions.pastePlaceholderColor) ?? TREE_PASTE_PLACEHOLDER_COLOR : "transparent";
+}};
+  }
+`;
+
+const isNodeAllowedToDrop = (draggingNode, draggingOverId) => {
+  if (!draggingNode || !draggingOverId) {
+    return false;
+  }
+
+  return !returnFound(draggingNode, {
+    id: draggingOverId
+  });
+};
+
+const DraggableTree = _ref => {
+  let {
+    nodes,
+    options,
+    disableDrag,
+    onUpdate
+  } = _ref;
+  const [nodesClone, setNodesClone] = useState();
+  const [isDragging, setIsDragging] = useState(false);
+  const [draggingNode, setDraggingNode] = useState();
+  const [draggingOverId, setDraggingOverId] = useState();
+  const draggingNodeRef = useRef(null);
+  const onDragStart = useCallback(node => {
+    setDraggingOverId(undefined);
+    setIsDragging(true);
+    setDraggingNode(node);
+  }, []);
+  const onDragEnd = useCallback(() => {
+    if (draggingOverId && draggingOverId !== (draggingNode == null ? void 0 : draggingNode.id) && isNodeAllowedToDrop(draggingNode, draggingOverId)) {
+      if (draggingOverId === "root") {
+        onUpdate == null ? void 0 : onUpdate([draggingNode, ...removeObject(nodes, {
+          id: draggingNode == null ? void 0 : draggingNode.id
+        })]);
+      } else if (typeof draggingOverId === "string" && draggingOverId.startsWith("folder-placeholder")) {
+        const destinationFolderId = draggingOverId.replace("folder-placeholder-", "");
+        const filteredNodes = removeObject(nodes, {
+          id: draggingNode == null ? void 0 : draggingNode.id
+        });
+        onUpdate == null ? void 0 : onUpdate(changeProps(filteredNodes, {
+          id: destinationFolderId
+        }, {
+          children: [draggingNode, ...returnFound(filteredNodes, {
+            id: destinationFolderId
+          }).children]
+        }));
+      } else {
+        onUpdate == null ? void 0 : onUpdate(insertObjectAfter(removeObject(nodes, {
+          id: draggingNode == null ? void 0 : draggingNode.id
+        }), {
+          id: draggingOverId
+        }, draggingNode));
+      }
+    } else {
+      setNodesClone(nodes);
+    }
+
+    setDraggingOverId(undefined);
+    setIsDragging(false);
+    setDraggingNode(undefined);
+  }, [draggingNode, draggingOverId, nodes, onUpdate]);
+  const renderNodes = useCallback((treeNodes, level, folderId, isFolderExpanded) => {
+    const placeholderId = level === 0 ? "root" : `folder-placeholder-${folderId}`;
+    return [React.createElement(DraggableTreeItem, {
+      key: "root-placeholder",
+      level: level,
+      treeOptions: options,
+      isPlaceholder: true,
+      isHidden: isFolderExpanded === false,
+      isDraggingOver: isDragging && draggingOverId === placeholderId && (level === 0 || isNodeAllowedToDrop(draggingNode, folderId)),
+      onDragOver: () => setDraggingOverId(placeholderId),
+      onDragEnd: onDragEnd
+    }), ...treeNodes.map((node, nodeIndex) => {
+      return React.createElement(Fragment, {
+        key: `fragment-${nodeIndex}-${node.id}`
+      }, React.createElement(DraggableTreeItem, {
+        key: `node-${nodeIndex}-${node.id}`,
+        draggable: !disableDrag,
+        level: level,
+        treeOptions: options,
+        isFolder: Boolean(node.children),
+        isHidden: isFolderExpanded === false,
+        isDragging: isDragging && (draggingNode == null ? void 0 : draggingNode.id) === node.id,
+        isDraggingOver: isDragging && draggingOverId === node.id && isNodeAllowedToDrop(draggingNode, node.id),
+        onDragStart: e => {
+          var _document$body;
+
+          draggingNodeRef.current = document.createElement("canvas");
+          e.dataTransfer.setDragImage(draggingNodeRef.current, 0, 0);
+          (_document$body = document.body) == null ? void 0 : _document$body.appendChild(draggingNodeRef.current);
+          onDragStart(node);
+        },
+        onDragOver: e => {
+          e.preventDefault();
+
+          if (draggingOverId === node.id) {
+            return;
+          }
+
+          if (node.children && !node.isExpanded) {
+            setNodesClone(changeProps(nodesClone, {
+              id: node.id
+            }, {
+              isExpanded: true
+            }));
+          }
+
+          setDraggingOverId(node.id);
+        },
+        onDragEnd: () => {
+          var _draggingNodeRef$curr;
+
+          (_draggingNodeRef$curr = draggingNodeRef.current) == null ? void 0 : _draggingNodeRef$curr.remove();
+          draggingNodeRef.current = null;
+          onDragEnd();
+        }
+      }, node.render(node)), node.children && renderNodes(node.children, level + 1, node.id, isFolderExpanded === undefined && !node.isExpanded ? false : isFolderExpanded));
+    })];
+  }, [options, isDragging, draggingOverId, draggingNode, onDragEnd, onDragStart, nodesClone]);
+  useEffect(() => {
+    setNodesClone(nodes);
+  }, [nodes]);
+
+  if (nodesClone === undefined) {
+    return null;
+  }
+
+  return React.createElement(DraggableTreeContainer, null, renderNodes(nodesClone, 0));
+};
+
 const Spacer = styled.div`
   * {
     margin-right: 1rem;
@@ -29883,5 +30087,5 @@ const JSONEditorBase = _ref => {
 
 const JSONEditor = /*#__PURE__*/memo(JSONEditorBase);
 
-export { ActionButton, Actions, ActionsGroup, AnchorContainer, AutoComplete, BaseButton, Blank, Box, ButtonsGroup, ButtonsGroupComponent, CSSTransition, Card, CardBodyContainer, Header$1 as CardHeader, ImageGradientOverlay as CardImageGradientOverlay, ImageOverlay as CardImageOverlay, CardLoader, Checkbox, CheckboxComponent, Chip, ChipAutoCompleDivider, ChipAutoCompleSlider, ChipAutoComplete, ChipAutoCompleteControlFlex, ChipAutoCompleteImagePlaceholder, ChipAutoCompleteItem, ChipAutoCompleteItemIcon, ChipAutoCompleteItemImage, ChipAutoCompleteMode, ChipAutoCompleteTags, ChipContainer, ChipInput, Circle, CircularProgress, Collapse, CollapseWrapper, ColorButton, ColorInput, ColorPicker, ComparisonOperator, CustomButton, CustomToggle, DATE_FORMAT, DATE_TIME_FORMAT, DataGrid, DatePicker, Description, Dialog, DialogActions, DialogComponent, DialogContent, DialogOverlay, DialogTitle, Divider, DividerLine, Dropdown, DropdownContainer, DropdownField, ElementsArea, ExpandButton, Expander, FILE_SIZE_STEP, FadingIcon, FieldValue, FilterInput, FlatButton, Flex, FlexSpan, FocusTrap, GlobalsContainer, H1, H2, H3, H4, Handlers, HueMap, HueSlider, selection as IcoMoonSelection, Icon, IconButton, IconButtonButton, IconButtonInnerChild, IconMenu, IconToggle, IconToggleButton, IconToggleText, Image, ImageLoader, InjectGlobalStyles, Input$1 as Input, InputLabel, InputsGroup, InputsGroupContainer, InputsGroupELement, InputsGroupElements, InputsGroupLabel, ItemIcon, JSONEditor, JSONEditorContainer, JSONEditorLinearProgress, JSONEditorWrapper, Label$2 as Label, LabeledTextarea, LeftSide, LegendToggler, LinearLoader, LinearProgress, Link, ListTransition, MAX_NUMBER, MB_FILE_SIZE, MIN_NUMBER, MaskedComponent, Menu, MenuContainer, Message, MultiSelectContainer, Notifications, NumberInput, NumberRangeContainer, NumberRangeInputContainer, NumberRangeSlider, NumberRangeSliderContainer, NumberRangeSliderLabel, OpacitySlider, Option, OptionContainer, OptionDescription, OptionIcon, OptionText, OptionValueContainer, OptionValueWrapper, PaginationFull, PaginationSimple, Paragraph, PasswordToggle, Placeholder, Popover, PopoverTransition, Popup$1 as Popup, Portal, Preview, Radio$1 as Radio, RadioGroup, RaisedButton, RangeDateInput, RangeDatePicker, RangeNumberInput, RangeSliderButtons, RangeSliderContainer, RatioLine, RegularIconButton, SEPARATED_TIME_FORMAT, SearchField, SearchInputContainer, SimpleInput, Slider, SliderContainer$2 as SliderContainer, HandleContainer as SliderHandle, Label$1 as SliderLabel, LowerTrackBackground as SliderLowerTrackBackground, SliderPopover, Track as SliderTrack, SortToggle, Spinner, Stepper, Switch, SwitchArea, SwitchContainer, SwitchTitle, Switcher, SymbolLibrary, SymbolPreview, THROTTLING_DELAY, TIME_FORMAT, TabBlock, TabContainer, TabContainerLine, Tabs, Text, TextTrim, Textarea, ThemeProvider, Tippy, TitleText, Tooltip, TooltipContent, Tree, TreeContainer, TreeContent, TreeDescription, TreeItem, TreeItems, TreeRow, TreeText, UnicodeBig, UnicodeSmall, Uploader, UploaderTitle, ValueLink, WaitingButton, WaitingButtonComponent, Wizard, addItem, borderRadius, buttonMixin, clamp, cloneWithRefs, collapseDuration, combineRefs, createColorOrMono, createIconColors, createLinkStates, createMessageColors, createTheme, createToggleStates, createVariants, cropLeftBorderRadius, cropRightBorderRadius, theme$1 as darkTheme, dateFormat, defaultOptions, defaultStub, theme as defaultTheme, fileSizeFormat, fonts, getChipColor, getColorOrMono, getHighlightParts, getIconColors, getLinkColors, getLocale, getMessageColors, getNumberFromPixels, getRealChildren, getTagColor, getTextWidth, getTheme, getToggleStates, getUnicodeFromString, getVariant, horizontalDivider, iconTypes, injectIcon, isDefined, isDescendant, isDomNode, isNumeric, isOutside, isReactDomElement, isReactElement, isSimpleStyledComponent, isTextFitElementWidth, isTouchDevice, isValidUrl, mapToSimpleOption, palette, photo, preventDefault, randomInteger, randomRgba, rangeValueFormat, removeItem, sendRefSafety, shadows, sortNumbers, stub, textOverflowEllipsisMixin, toNumber, toSimpleOption, transition, transparencyDark2, transparencyDark4, Transparency_dark8 as transparencyDark8, transparencyLight2, transparencyLight4, Transparency_light8 as transparencyLight8, typeId, urlify, useAsyncAutocomplete, useDelayedStyleLoader, useDialogShadow, useDragAndDropEffect, useEventListener, useForceUpdate, useMounted, useMutationObserver, usePrevValue, useStyleLoader, useThrottling, useToggle, useUndraggableEffect, useUnselectableEffect, verticalDivider, withLabel };
+export { ActionButton, Actions, ActionsGroup, AnchorContainer, AutoComplete, BaseButton, Blank, Box, ButtonsGroup, ButtonsGroupComponent, CSSTransition, Card, CardBodyContainer, Header$1 as CardHeader, ImageGradientOverlay as CardImageGradientOverlay, ImageOverlay as CardImageOverlay, CardLoader, Checkbox, CheckboxComponent, Chip, ChipAutoCompleDivider, ChipAutoCompleSlider, ChipAutoComplete, ChipAutoCompleteControlFlex, ChipAutoCompleteImagePlaceholder, ChipAutoCompleteItem, ChipAutoCompleteItemIcon, ChipAutoCompleteItemImage, ChipAutoCompleteMode, ChipAutoCompleteTags, ChipContainer, ChipInput, Circle, CircularProgress, Collapse, CollapseWrapper, ColorButton, ColorInput, ColorPicker, ComparisonOperator, CustomButton, CustomToggle, DATE_FORMAT, DATE_TIME_FORMAT, DataGrid, DatePicker, Description, Dialog, DialogActions, DialogComponent, DialogContent, DialogOverlay, DialogTitle, Divider, DividerLine, DraggableTree, DraggableTreeContainer, DraggableTreeItem, Dropdown, DropdownContainer, DropdownField, ElementsArea, ExpandButton, Expander, FILE_SIZE_STEP, FadingIcon, FieldValue, FilterInput, FlatButton, Flex, FlexSpan, FocusTrap, GlobalsContainer, H1, H2, H3, H4, Handlers, HueMap, HueSlider, selection as IcoMoonSelection, Icon, IconButton, IconButtonButton, IconButtonInnerChild, IconMenu, IconToggle, IconToggleButton, IconToggleText, Image, ImageLoader, InjectGlobalStyles, Input$1 as Input, InputLabel, InputsGroup, InputsGroupContainer, InputsGroupELement, InputsGroupElements, InputsGroupLabel, ItemIcon, JSONEditor, JSONEditorContainer, JSONEditorLinearProgress, JSONEditorWrapper, Label$2 as Label, LabeledTextarea, LeftSide, LegendToggler, LinearLoader, LinearProgress, Link, ListTransition, MAX_NUMBER, MB_FILE_SIZE, MIN_NUMBER, MaskedComponent, Menu, MenuContainer, Message, MultiSelectContainer, Notifications, NumberInput, NumberRangeContainer, NumberRangeInputContainer, NumberRangeSlider, NumberRangeSliderContainer, NumberRangeSliderLabel, OpacitySlider, Option, OptionContainer, OptionDescription, OptionIcon, OptionText, OptionValueContainer, OptionValueWrapper, PaginationFull, PaginationSimple, Paragraph, PasswordToggle, Placeholder, Popover, PopoverTransition, Popup$1 as Popup, Portal, Preview, Radio$1 as Radio, RadioGroup, RaisedButton, RangeDateInput, RangeDatePicker, RangeNumberInput, RangeSliderButtons, RangeSliderContainer, RatioLine, RegularIconButton, SEPARATED_TIME_FORMAT, SearchField, SearchInputContainer, SimpleInput, Slider, SliderContainer$2 as SliderContainer, HandleContainer as SliderHandle, Label$1 as SliderLabel, LowerTrackBackground as SliderLowerTrackBackground, SliderPopover, Track as SliderTrack, SortToggle, Spinner, Stepper, Switch, SwitchArea, SwitchContainer, SwitchTitle, Switcher, SymbolLibrary, SymbolPreview, THROTTLING_DELAY, TIME_FORMAT, TabBlock, TabContainer, TabContainerLine, Tabs, Text, TextTrim, Textarea, ThemeProvider, Tippy, TitleText, Tooltip, TooltipContent, Tree, TreeContainer, TreeContent, TreeDescription, TreeItem, TreeItems, TreeRow, TreeText, UnicodeBig, UnicodeSmall, Uploader, UploaderTitle, ValueLink, WaitingButton, WaitingButtonComponent, Wizard, addItem, borderRadius, buttonMixin, clamp, cloneWithRefs, collapseDuration, combineRefs, createColorOrMono, createIconColors, createLinkStates, createMessageColors, createTheme, createToggleStates, createVariants, cropLeftBorderRadius, cropRightBorderRadius, theme$1 as darkTheme, dateFormat, defaultOptions, defaultStub, theme as defaultTheme, fileSizeFormat, fonts, getChipColor, getColorOrMono, getHighlightParts, getIconColors, getLinkColors, getLocale, getMessageColors, getNumberFromPixels, getRealChildren, getTagColor, getTextWidth, getTheme, getToggleStates, getUnicodeFromString, getVariant, horizontalDivider, iconTypes, injectIcon, isDefined, isDescendant, isDomNode, isNumeric, isOutside, isReactDomElement, isReactElement, isSimpleStyledComponent, isTextFitElementWidth, isTouchDevice, isValidUrl, mapToSimpleOption, palette, photo, preventDefault, randomInteger, randomRgba, rangeValueFormat, removeItem, sendRefSafety, shadows, sortNumbers, stub, textOverflowEllipsisMixin, toNumber, toSimpleOption, transition, transparencyDark2, transparencyDark4, Transparency_dark8 as transparencyDark8, transparencyLight2, transparencyLight4, Transparency_light8 as transparencyLight8, typeId, urlify, useAsyncAutocomplete, useDelayedStyleLoader, useDialogShadow, useDragAndDropEffect, useEventListener, useForceUpdate, useMounted, useMutationObserver, usePrevValue, useStyleLoader, useThrottling, useToggle, useUndraggableEffect, useUnselectableEffect, verticalDivider, withLabel };
 //# sourceMappingURL=uilib-gl.esm.js.map