@synerise/ds-manageable-list 1.7.10 → 1.7.12

package/dist/Item/ContentItem/ContentItem.styles.js

@@ -1,118 +1,109 @@
-import styled, { css } from 'styled-components';
-import Button from '@synerise/ds-button';
-import { Tag } from '@synerise/ds-tag/dist/Tag.styles';
-import { ItemLabel } from '../Item.styles';
-import { ItemActionsWrapper } from '../ItemActions/ItemActions.styles';
-import { ItemMeta } from '../ItemMeta/ItemMeta.styles';
-var dashedStyle = function dashedStyle(props) {
-  return css(["&&{box-shadow:0 0 0 0 transparent;border:1px dashed ", ";}&&:hover{border:1px dashed ", ";}"], props.theme.palette['grey-300'], props.theme.palette['grey-400']);
-};
-export var AdditionalSuffix = styled.div.withConfig({
+import styled, { css } from "styled-components";
+import Button from "@synerise/ds-button";
+import { Tag } from "@synerise/ds-tag/dist/Tag.styles";
+import { ItemLabel } from "../Item.styles.js";
+import { ItemActionsWrapper } from "../ItemActions/ItemActions.styles.js";
+import { ItemMeta } from "../ItemMeta/ItemMeta.styles.js";
+const dashedStyle = (props) => css(["&&{box-shadow:0 0 0 0 transparent;border:1px dashed ", ";}&&:hover{border:1px dashed ", ";}"], props.theme.palette["grey-300"], props.theme.palette["grey-400"]);
+const AdditionalSuffix = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ContentItemstyles__AdditionalSuffix",
   componentId: "sc-13pyu4r-0"
 })(["margin-left:8px;"]);
-export var DraggerWrapper = styled.div.withConfig({
+const DraggerWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ContentItemstyles__DraggerWrapper",
   componentId: "sc-13pyu4r-1"
-})(["cursor:pointer;display:flex;opacity:", ";"], function (_ref) {
-  var disabled = _ref.disabled;
-  return disabled ? '0.4' : '1';
-});
-export var IconWrapper = styled.div.withConfig({
+})(["cursor:pointer;display:flex;opacity:", ";"], ({
+  disabled
+}) => disabled ? "0.4" : "1");
+const IconWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ContentItemstyles__IconWrapper",
   componentId: "sc-13pyu4r-2"
 })(["display:flex;"]);
-export var MoveItemButtons = styled.div.withConfig({
+const MoveItemButtons = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ContentItemstyles__MoveItemButtons",
   componentId: "sc-13pyu4r-3"
 })(["display:none;flex-direction:row;align-items:flex-start;justify-content:center;margin-right:8px;.ds-button{margin-left:8px;&:first-child{margin-left:0;}}"]);
-export var ItemHeaderPrefix = styled.div.withConfig({
+const ItemHeaderPrefix = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ContentItemstyles__ItemHeaderPrefix",
   componentId: "sc-13pyu4r-4"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;", "{margin:0;}", "{svg{color:", ";fill:", ";}}"], Tag, DraggerWrapper, function (_ref2) {
-  var theme = _ref2.theme;
-  return theme.palette['grey-400'];
-}, function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.palette['grey-400'];
-});
-export var ItemHeaderSuffix = styled.div.withConfig({
+})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;", "{margin:0;}", "{svg{color:", ";fill:", ";}}"], Tag, DraggerWrapper, ({
+  theme
+}) => theme.palette["grey-400"], ({
+  theme
+}) => theme.palette["grey-400"]);
+const ItemHeaderSuffix = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ContentItemstyles__ItemHeaderSuffix",
   componentId: "sc-13pyu4r-5"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;.ds-dropdown-trigger{cursor:pointer;svg{transition:all 0.3s ease;}&.ant-dropdown-open,&:hover{svg{color:", ";fill:", ";}}}"], function (props) {
-  return props.theme.palette['blue-600'];
-}, function (props) {
-  return props.theme.palette['blue-600'];
-});
-export var ItemHeader = styled.div.withConfig({
+})(["display:flex;flex-direction:row;align-items:center;justify-content:flex-start;.ds-dropdown-trigger{cursor:pointer;svg{transition:all 0.3s ease;}&.ant-dropdown-open,&:hover{svg{color:", ";fill:", ";}}}"], (props) => props.theme.palette["blue-600"], (props) => props.theme.palette["blue-600"]);
+const ItemHeader = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ContentItemstyles__ItemHeader",
   componentId: "sc-13pyu4r-6"
-})(["display:flex;flex-direction:row;align-items:center;justify-content:stretch;width:100%;padding:12px;cursor:pointer;max-height:48px;position:relative;", " ", "{gap:", "px;}gap:", "px;", " ", "{padding:0;}&:hover{.suffix--hide-on-hover{display:none;}", "{color:", ";}", "{display:flex;}", "{svg{color:", ";fill:", ";}}", "{display:flex;}}"], function (props) {
-  return props.size === 'large' && css(["", " ", "{position:absolute;left:0;}"], props.hasDescription && 'align-items: flex-start;', DraggerWrapper);
-}, ItemHeaderPrefix, function (props) {
-  return props.size === 'large' ? 16 : 12;
-}, function (props) {
-  return props.size === 'large' ? 16 : 12;
-}, function (props) {
-  return !props.hasPrefix && "padding-left:16px;";
-}, ItemMeta, ItemLabel, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.palette['grey-800'];
-}, ItemActionsWrapper, DraggerWrapper, function (_ref5) {
-  var theme = _ref5.theme;
-  return theme.palette['grey-600'];
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.palette['grey-600'];
-}, MoveItemButtons);
-export var ContentWrapper = styled.div.withConfig({
+})(["display:flex;flex-direction:row;align-items:center;justify-content:stretch;width:100%;padding:12px;cursor:pointer;max-height:48px;position:relative;", " ", "{gap:", "px;}gap:", "px;", " ", "{padding:0;}&:hover{.suffix--hide-on-hover{display:none;}", "{color:", ";}", "{display:flex;}", "{svg{color:", ";fill:", ";}}", "{display:flex;}}"], (props) => props.size === "large" && css(["", " ", "{position:absolute;left:0;}"], props.hasDescription && "align-items: flex-start;", DraggerWrapper), ItemHeaderPrefix, (props) => props.size === "large" ? 16 : 12, (props) => props.size === "large" ? 16 : 12, (props) => !props.hasPrefix && `padding-left:16px;`, ItemMeta, ItemLabel, ({
+  theme
+}) => theme.palette["grey-800"], ItemActionsWrapper, DraggerWrapper, ({
+  theme
+}) => theme.palette["grey-600"], ({
+  theme
+}) => theme.palette["grey-600"], MoveItemButtons);
+const ContentWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ContentItemstyles__ContentWrapper",
   componentId: "sc-13pyu4r-7"
-})(["padding:", ";width:100%;border-top:1px solid ", ";opacity:1;"], function (props) {
-  return props.withoutPadding ? '0px' : '16px 24px 24px';
-}, function (_ref7) {
-  var theme = _ref7.theme;
-  return theme.palette['grey-200'];
-});
-var standardShadow = function standardShadow(_ref8) {
-  var greyBackground = _ref8.greyBackground,
-    theme = _ref8.theme;
-  return greyBackground ? '0 4px 12px 0 rgba(35, 41, 54, 0.04)' : "0 0 0 1px " + theme.palette['grey-200'];
+})(["padding:", ";width:100%;border-top:1px solid ", ";opacity:1;"], (props) => props.withoutPadding ? "0px" : "16px 24px 24px", ({
+  theme
+}) => theme.palette["grey-200"]);
+const standardShadow = ({
+  greyBackground,
+  theme
+}) => {
+  return greyBackground ? "0 4px 12px 0 rgba(35, 41, 54, 0.04)" : `0 0 0 1px ${theme.palette["grey-200"]}`;
 };
-export var ItemContainer = styled.div.withConfig({
+const ItemContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ContentItemstyles__ItemContainer",
   componentId: "sc-13pyu4r-8"
-})(["width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin-bottom:16px;border-radius:3px;position:relative;", " ", " ", " ", " ", " && .item-content-animation{width:100%;}", " ", ""], function (props) {
-  return props.selected && "\n    outline: 2px solid " + props.theme.palette['blue-600'] + " !important;\n  ";
-}, function (props) {
-  return props.isDragOverlay ? "box-shadow: " + standardShadow(props) + ", 0px 16px 32px 0px " + props.theme.palette['grey-200'] + ";\n" : css(["box-shadow:", ";"], standardShadow(props));
-}, function (props) {
-  return props.isDragPlaceholder ? css(["background-color:", ";outline:1px dashed ", " !important;box-shadow:0;box-sizing:border-box;border-radius:3px;", "{visibility:hidden;opacity:0;}", "{display:none;}"], props.theme.palette['blue-050'], props.theme.palette['blue-300'], ItemHeader, ContentWrapper) : css(["background-color:", ";"], props.theme.palette.white);
-}, function (props) {
-  return props.isDisabled && "\n    opacity: 0.4;\n    cursor: default;\n    pointer-events: none;\n  ";
-}, function (_ref9) {
-  var greyBackground = _ref9.greyBackground,
-    isDragOverlay = _ref9.isDragOverlay,
-    theme = _ref9.theme;
-  return !greyBackground && !isDragOverlay && "\n      &:hover {\n        box-shadow: 0 0 0 1px " + theme.palette['grey-300'] + ";\n      }\n  ";
-}, function (props) {
-  return !!props.dashed && dashedStyle(props);
-}, function (props) {
-  return props.size === 'large' && css(["", "{max-height:none;padding:24px;}"], ItemHeader);
-});
-export var ToggleContentWrapper = styled.div.withConfig({
+})(["width:100%;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;margin-bottom:16px;border-radius:3px;position:relative;", " ", " ", " ", " ", " && .item-content-animation{width:100%;}", " ", ""], (props) => props.selected && `
+    outline: 2px solid ${props.theme.palette["blue-600"]} !important;
+  `, (props) => props.isDragOverlay ? `box-shadow: ${standardShadow(props)}, 0px 16px 32px 0px ${props.theme.palette["grey-200"]};
+` : css(["box-shadow:", ";"], standardShadow(props)), (props) => props.isDragPlaceholder ? css(["background-color:", ";outline:1px dashed ", " !important;box-shadow:0;box-sizing:border-box;border-radius:3px;", "{visibility:hidden;opacity:0;}", "{display:none;}"], props.theme.palette["blue-050"], props.theme.palette["blue-300"], ItemHeader, ContentWrapper) : css(["background-color:", ";"], props.theme.palette.white), (props) => props.isDisabled && `
+    opacity: 0.4;
+    cursor: default;
+    pointer-events: none;
+  `, ({
+  greyBackground,
+  isDragOverlay,
+  theme
+}) => !greyBackground && !isDragOverlay && `
+      &:hover {
+        box-shadow: 0 0 0 1px ${theme.palette["grey-300"]};
+      }
+  `, (props) => !!props.dashed && dashedStyle(props), (props) => props.size === "large" && css(["", "{max-height:none;padding:24px;}"], ItemHeader));
+const ToggleContentWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ContentItemstyles__ToggleContentWrapper",
   componentId: "sc-13pyu4r-9"
 })(["margin-left:12px;line-height:0;"]);
-export var DropdownTrigger = styled(Button).withConfig({
+const DropdownTrigger = /* @__PURE__ */ styled(Button).withConfig({
   displayName: "ContentItemstyles__DropdownTrigger",
   componentId: "sc-13pyu4r-10"
 })(["margin-left:12px;"]);
-export var FilterDropdownTrigger = styled(Button).withConfig({
+const FilterDropdownTrigger = /* @__PURE__ */ styled(Button).withConfig({
   displayName: "ContentItemstyles__FilterDropdownTrigger",
   componentId: "sc-13pyu4r-11"
 })(["margin-left:0px;"]);
-export var DropdownWrapper = styled.div.withConfig({
+const DropdownWrapper = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ContentItemstyles__DropdownWrapper",
   componentId: "sc-13pyu4r-12"
-})([""]);
+})([""]);
+export {
+  AdditionalSuffix,
+  ContentWrapper,
+  DraggerWrapper,
+  DropdownTrigger,
+  DropdownWrapper,
+  FilterDropdownTrigger,
+  IconWrapper,
+  ItemContainer,
+  ItemHeader,
+  ItemHeaderPrefix,
+  ItemHeaderSuffix,
+  MoveItemButtons,
+  ToggleContentWrapper
+};

package/dist/Item/ContentItem/ContentItem.types.d.ts

@@ -1,7 +1,7 @@
-import { type ComponentType, type HTMLAttributes, type ReactNode, type ReactText } from 'react';
-import { type StyledComponent } from 'styled-components';
-import type { WithHTMLAttributes } from '@synerise/ds-utils';
-import { type ItemProps, type Texts } from '../../ManageableList.types';
+import { ComponentType, HTMLAttributes, ReactNode, ReactText } from 'react';
+import { StyledComponent } from 'styled-components';
+import { WithHTMLAttributes } from '@synerise/ds-utils';
+import { ItemProps, Texts } from '../../ManageableList.types';
 type BaseContentItemProps = Omit<ContentItemHeaderProps, 'texts' | 'isExpanded' | 'setIsExpanded'> & {
     dashed?: boolean;
     expanded?: boolean;

package/dist/Item/ContentItem/ContentItem.types.js

@@ -1 +1 @@
-export {};
+

package/dist/Item/ContentItem/ContentItemHeader.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-import type { ContentItemHeaderProps } from './ContentItem.types';
+import { default as React } from 'react';
+import { ContentItemHeaderProps } from './ContentItem.types';
 export declare const ContentItemHeader: ({ onRemove, onUpdate, onDuplicate, draggable, item, changeOrderDisabled, texts, hideExpander, onExpand, onSelect, headerSuffix, headerPrefix, onMoveTop, onMoveBottom, isFirst, isLast, isExpanded, dragHandleProps, isDragOverlay, setIsExpanded, size, }: ContentItemHeaderProps) => React.JSX.Element;

package/dist/Item/ContentItem/ContentItemHeader.js

@@ -1,151 +1,105 @@
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-import React, { useCallback, useMemo, useState } from 'react';
-import Button from '@synerise/ds-button';
-import { useTheme } from '@synerise/ds-core';
-import Dropdown from '@synerise/ds-dropdown';
-import Icon, { AngleBottomS, AngleTopS, DragHandleM, OptionHorizontalM } from '@synerise/ds-icon';
-import Tooltip from '@synerise/ds-tooltip';
-import ItemActions from '../ItemActions/ItemActions';
-import ItemMeta from '../ItemMeta/ItemMeta';
-import ItemName from '../ItemName/ItemName';
-import ItemNameLarge from '../ItemNameLarge/ItemNameLarge';
-import * as S from './ContentItem.styles';
-export var ContentItemHeader = function ContentItemHeader(_ref) {
-  var onRemove = _ref.onRemove,
-    onUpdate = _ref.onUpdate,
-    onDuplicate = _ref.onDuplicate,
-    draggable = _ref.draggable,
-    item = _ref.item,
-    changeOrderDisabled = _ref.changeOrderDisabled,
-    texts = _ref.texts,
-    hideExpander = _ref.hideExpander,
-    onExpand = _ref.onExpand,
-    onSelect = _ref.onSelect,
-    headerSuffix = _ref.headerSuffix,
-    headerPrefix = _ref.headerPrefix,
-    onMoveTop = _ref.onMoveTop,
-    onMoveBottom = _ref.onMoveBottom,
-    isFirst = _ref.isFirst,
-    isLast = _ref.isLast,
-    isExpanded = _ref.isExpanded,
-    dragHandleProps = _ref.dragHandleProps,
-    isDragOverlay = _ref.isDragOverlay,
-    setIsExpanded = _ref.setIsExpanded,
-    _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'default' : _ref$size;
-  var theme = useTheme();
-  var _useState = useState(false),
-    editMode = _useState[0],
-    setEditMode = _useState[1];
-  var updateName = useCallback(function (updateParams) {
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from "react";
+import Button from "@synerise/ds-button";
+import { useTheme } from "@synerise/ds-core";
+import Dropdown from "@synerise/ds-dropdown";
+import Icon, { AngleTopS, AngleBottomS, DragHandleM, OptionHorizontalM } from "@synerise/ds-icon";
+import Tooltip from "@synerise/ds-tooltip";
+import ItemActions from "../ItemActions/ItemActions.js";
+import { ItemMeta } from "../ItemMeta/ItemMeta.js";
+import ItemName from "../ItemName/ItemName.js";
+import ItemNameLarge from "../ItemNameLarge/ItemNameLarge.js";
+import { MoveItemButtons, ItemHeader, ItemHeaderPrefix, DraggerWrapper, IconWrapper, ItemHeaderSuffix, ToggleContentWrapper, DropdownWrapper, DropdownTrigger, AdditionalSuffix } from "./ContentItem.styles.js";
+const ContentItemHeader = ({
+  onRemove,
+  onUpdate,
+  onDuplicate,
+  draggable,
+  item,
+  changeOrderDisabled,
+  texts,
+  hideExpander,
+  onExpand,
+  onSelect,
+  headerSuffix,
+  headerPrefix,
+  onMoveTop,
+  onMoveBottom,
+  isFirst,
+  isLast,
+  isExpanded,
+  dragHandleProps,
+  isDragOverlay,
+  setIsExpanded,
+  size = "default"
+}) => {
+  const theme = useTheme();
+  const [editMode, setEditMode] = useState(false);
+  const updateName = useCallback((updateParams) => {
     setEditMode(false);
     onUpdate && onUpdate(updateParams);
   }, [onUpdate]);
-  var enterEditMode = function enterEditMode() {
+  const enterEditMode = () => {
     setEditMode(true);
   };
-  var stopPropagationHandler = function stopPropagationHandler(event) {
+  const stopPropagationHandler = (event) => {
     event.stopPropagation();
   };
-  var hasPrefix = useMemo(function () {
-    if (size === 'large') {
+  const hasPrefix = useMemo(() => {
+    if (size === "large") {
       return Boolean(headerPrefix || item.headerPrefix || item.tag || item.icon);
     }
     return Boolean(headerPrefix || draggable || item.tag || item.icon);
   }, [draggable, item, size, headerPrefix]);
-  var renderMoveButtons = useMemo(function () {
-    return (onMoveTop || onMoveBottom) && /*#__PURE__*/React.createElement(S.MoveItemButtons, null, onMoveTop && !isFirst && /*#__PURE__*/React.createElement(Tooltip, {
-      title: texts == null ? void 0 : texts.moveToTopTooltip
-    }, /*#__PURE__*/React.createElement(Button, {
-      type: "ghost",
-      mode: "single-icon",
-      onClick: function onClick(event) {
+  const renderMoveButtons = useMemo(() => {
+    return (onMoveTop || onMoveBottom) && /* @__PURE__ */ jsxs(MoveItemButtons, { children: [
+      onMoveTop && !isFirst && /* @__PURE__ */ jsx(Tooltip, { title: texts?.moveToTopTooltip, children: /* @__PURE__ */ jsx(Button, { type: "ghost", mode: "single-icon", onClick: (event) => {
         event.stopPropagation();
         onMoveTop(item);
-      }
-    }, /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(AngleTopS, null)
-    }))), onMoveBottom && !isLast && /*#__PURE__*/React.createElement(Tooltip, {
-      title: texts == null ? void 0 : texts.moveToBottomTooltip
-    }, /*#__PURE__*/React.createElement(Button, {
-      type: "ghost",
-      mode: "single-icon",
-      onClick: function onClick(event) {
+      }, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleTopS, {}) }) }) }),
+      onMoveBottom && !isLast && /* @__PURE__ */ jsx(Tooltip, { title: texts?.moveToBottomTooltip, children: /* @__PURE__ */ jsx(Button, { type: "ghost", mode: "single-icon", onClick: (event) => {
         event.stopPropagation();
         onMoveBottom(item);
-      }
-    }, /*#__PURE__*/React.createElement(Icon, {
-      component: /*#__PURE__*/React.createElement(AngleBottomS, null)
-    }))));
+      }, children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(AngleBottomS, {}) }) }) })
+    ] });
   }, [isFirst, isLast, item, onMoveBottom, onMoveTop, texts]);
-  return /*#__PURE__*/React.createElement(S.ItemHeader, {
-    size: size,
-    hasPrefix: hasPrefix,
-    hasDescription: !!item.description,
-    onClick: function onClick() {
-      if (onSelect && !editMode) {
-        onSelect({
-          id: item.id
-        });
-      } else if (!item.disableExpanding && !editMode && !item.disableHeaderClick) {
-        setIsExpanded(!isExpanded);
-        onExpand && onExpand(item.id, !isExpanded);
-      }
+  return /* @__PURE__ */ jsxs(ItemHeader, { size, hasPrefix, hasDescription: !!item.description, onClick: () => {
+    if (onSelect && !editMode) {
+      onSelect({
+        id: item.id
+      });
+    } else if (!item.disableExpanding && !editMode && !item.disableHeaderClick) {
+      setIsExpanded(!isExpanded);
+      onExpand && onExpand(item.id, !isExpanded);
     }
-  }, hasPrefix && /*#__PURE__*/React.createElement(S.ItemHeaderPrefix, null, (draggable || isDragOverlay) && /*#__PURE__*/React.createElement(S.DraggerWrapper, _extends({}, dragHandleProps, {
-    disabled: Boolean(changeOrderDisabled)
-  }), /*#__PURE__*/React.createElement(Icon, {
-    size: 24,
-    component: /*#__PURE__*/React.createElement(DragHandleM, null)
-  })), item.headerPrefix ? item.headerPrefix : /*#__PURE__*/React.createElement(React.Fragment, null, item.tag && item.tag, item.icon && /*#__PURE__*/React.createElement(S.IconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
-    size: 24,
-    component: item.icon,
-    color: theme.palette['grey-600']
-  }))), !!headerPrefix && headerPrefix), size === 'default' ? /*#__PURE__*/React.createElement(ItemName, {
-    item: item,
-    editMode: editMode,
-    onUpdate: updateName
-  }) : /*#__PURE__*/React.createElement(ItemNameLarge, {
-    item: item
-  }), /*#__PURE__*/React.createElement(S.ItemHeaderSuffix, null, /*#__PURE__*/React.createElement("div", {
-    className: item.hideHeaderSuffixOnHover ? 'suffix--hide-on-hover' : ''
-  }, (!!headerSuffix || (item == null ? void 0 : item.headerSuffix)) && headerSuffix || item.headerSuffix), renderMoveButtons, /*#__PURE__*/React.createElement(ItemActions, {
-    item: item,
-    duplicateAction: onDuplicate,
-    duplicateActionTooltip: texts == null ? void 0 : texts.itemActionDuplicateTooltip,
-    removeAction: onRemove,
-    removeActionTooltip: texts == null ? void 0 : texts.itemActionDeleteTooltip,
-    editAction: enterEditMode,
-    editActionTooltip: texts == null ? void 0 : texts.itemActionRenameTooltip
-  }), ' ', item.content && !hideExpander && /*#__PURE__*/React.createElement(S.ToggleContentWrapper, {
-    "data-testid": "item-toggle-content-wrapper"
-  }, /*#__PURE__*/React.createElement(Button.Expander, {
-    disabled: item.disableExpanding,
-    onClick: function onClick(event) {
-      !!event && event.stopPropagation();
-      !item.disableExpanding && setIsExpanded(!isExpanded);
-      !item.disableExpanding && onExpand && onExpand(item.id, !isExpanded);
-    },
-    expanded: isExpanded
-  })), item.dropdown && /*#__PURE__*/React.createElement(S.DropdownWrapper, {
-    onClick: stopPropagationHandler
-  }, /*#__PURE__*/React.createElement(Dropdown, {
-    trigger: ['click'],
-    overlay: item.dropdown,
-    placement: "bottomRight",
-    hideOnItemClick: true,
-    popoverProps: {
-      testId: 'manageable-list-content-item'
-    }
-  }, /*#__PURE__*/React.createElement(S.DropdownTrigger, {
-    className: "ds-dropdown-trigger",
-    mode: "single-icon",
-    type: "ghost"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    component: /*#__PURE__*/React.createElement(OptionHorizontalM, null),
-    color: theme.palette['grey-600']
-  })))), item.additionalSuffix && /*#__PURE__*/React.createElement(S.AdditionalSuffix, null, item.additionalSuffix), (item.user || item.created) && /*#__PURE__*/React.createElement(ItemMeta, {
-    user: item.user,
-    created: item.created
-  })));
-};
+  }, children: [
+    hasPrefix && /* @__PURE__ */ jsxs(ItemHeaderPrefix, { children: [
+      (draggable || isDragOverlay) && /* @__PURE__ */ jsx(DraggerWrapper, { ...dragHandleProps, disabled: Boolean(changeOrderDisabled), children: /* @__PURE__ */ jsx(Icon, { size: 24, component: /* @__PURE__ */ jsx(DragHandleM, {}) }) }),
+      item.headerPrefix ? item.headerPrefix : /* @__PURE__ */ jsxs(Fragment, { children: [
+        item.tag && item.tag,
+        item.icon && /* @__PURE__ */ jsx(IconWrapper, { children: /* @__PURE__ */ jsx(Icon, { size: 24, component: item.icon, color: theme.palette["grey-600"] }) })
+      ] }),
+      !!headerPrefix && headerPrefix
+    ] }),
+    size === "default" ? /* @__PURE__ */ jsx(ItemName, { item, editMode, onUpdate: updateName }) : /* @__PURE__ */ jsx(ItemNameLarge, { item }),
+    /* @__PURE__ */ jsxs(ItemHeaderSuffix, { children: [
+      /* @__PURE__ */ jsx("div", { className: item.hideHeaderSuffixOnHover ? "suffix--hide-on-hover" : "", children: (!!headerSuffix || item?.headerSuffix) && headerSuffix || item.headerSuffix }),
+      renderMoveButtons,
+      /* @__PURE__ */ jsx(ItemActions, { item, duplicateAction: onDuplicate, duplicateActionTooltip: texts?.itemActionDuplicateTooltip, removeAction: onRemove, removeActionTooltip: texts?.itemActionDeleteTooltip, editAction: enterEditMode, editActionTooltip: texts?.itemActionRenameTooltip }),
+      " ",
+      item.content && !hideExpander && /* @__PURE__ */ jsx(ToggleContentWrapper, { "data-testid": "item-toggle-content-wrapper", children: /* @__PURE__ */ jsx(Button.Expander, { disabled: item.disableExpanding, onClick: (event) => {
+        !!event && event.stopPropagation();
+        !item.disableExpanding && setIsExpanded(!isExpanded);
+        !item.disableExpanding && onExpand && onExpand(item.id, !isExpanded);
+      }, expanded: isExpanded }) }),
+      item.dropdown && /* @__PURE__ */ jsx(DropdownWrapper, { onClick: stopPropagationHandler, children: /* @__PURE__ */ jsx(Dropdown, { trigger: ["click"], overlay: item.dropdown, placement: "bottomRight", hideOnItemClick: true, popoverProps: {
+        testId: "manageable-list-content-item"
+      }, children: /* @__PURE__ */ jsx(DropdownTrigger, { className: "ds-dropdown-trigger", mode: "single-icon", type: "ghost", children: /* @__PURE__ */ jsx(Icon, { component: /* @__PURE__ */ jsx(OptionHorizontalM, {}), color: theme.palette["grey-600"] }) }) }) }),
+      item.additionalSuffix && /* @__PURE__ */ jsx(AdditionalSuffix, { children: item.additionalSuffix }),
+      (item.user || item.created) && /* @__PURE__ */ jsx(ItemMeta, { user: item.user, created: item.created })
+    ] })
+  ] });
+};
+export {
+  ContentItemHeader
+};

package/dist/Item/DraggableItem.d.ts

@@ -1,3 +1,3 @@
-import React from 'react';
-import { type Props } from './Item.types';
+import { default as React } from 'react';
+import { Props } from './Item.types';
 export declare const DraggableItem: ({ item, ...rest }: Omit<Props, "dragHandleProps">) => React.JSX.Element;

package/dist/Item/DraggableItem.js

@@ -1,29 +1,28 @@
-var _excluded = ["item"];
-function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
-function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }
-import React from 'react';
-import { CSS, useSortable } from '@synerise/ds-sortable';
-import Item from './Item';
-export var DraggableItem = function DraggableItem(_ref) {
-  var item = _ref.item,
-    rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-  var _useSortable = useSortable({
-      id: item.id
-    }),
-    attributes = _useSortable.attributes,
-    listeners = _useSortable.listeners,
-    setNodeRef = _useSortable.setNodeRef,
-    transform = _useSortable.transform,
-    transition = _useSortable.transition;
-  var dragStyle = {
+import { jsx } from "react/jsx-runtime";
+import { useSortable, CSS } from "@synerise/ds-sortable";
+import Item from "./Item.js";
+const DraggableItem = ({
+  item,
+  ...rest
+}) => {
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition
+  } = useSortable({
+    id: item.id
+  });
+  const dragStyle = {
     transform: CSS.Transform.toString(transform),
-    transition: transition
+    transition
   };
-  return /*#__PURE__*/React.createElement("div", {
-    style: dragStyle,
-    ref: setNodeRef
-  }, /*#__PURE__*/React.createElement(Item, _extends({
-    dragHandleProps: _extends({}, attributes, listeners),
-    item: item
-  }, rest)));
-};
+  return /* @__PURE__ */ jsx("div", { style: dragStyle, ref: setNodeRef, children: /* @__PURE__ */ jsx(Item, { dragHandleProps: {
+    ...attributes,
+    ...listeners
+  }, item, ...rest }) });
+};
+export {
+  DraggableItem
+};