@synerise/ds-manageable-list 1.7.11 → 1.7.13

package/dist/Item/SimpleItem/SimpleItem.d.ts

@@ -1,15 +1,15 @@
-import React from 'react';
-import { type Props } from './SimpleItem.types';
+import { default as React } from 'react';
+import { Props } from './SimpleItem.types';
 declare const SimpleItem: (({ item, onRemove, onSelect, onUpdate, texts, additionalActions, selected, }: Props) => React.JSX.Element) & {
-    ItemContainer: import("styled-components").StyledComponent<"div", any, {
+    ItemContainer: import('styled-components').StyledComponent<"div", any, {
         isSelected: boolean;
         isDisabled: boolean;
     }, never>;
-    ItemLabelWrapper: import("styled-components").StyledComponent<"div", any, {
+    ItemLabelWrapper: import('styled-components').StyledComponent<"div", any, {
         largeSize?: boolean;
     }, never>;
-    ItemLabelWithIcon: import("styled-components").StyledComponent<"span", any, {}, never>;
-    ItemLabel: import("styled-components").StyledComponent<"span", any, {}, never>;
-    DescriptionIcon: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<import("@synerise/ds-icon").BaseIconProps & Omit<React.HTMLAttributes<HTMLDivElement>, keyof import("@synerise/ds-icon").BaseIconProps> & import("@synerise/ds-utils").DataAttributes & React.RefAttributes<HTMLDivElement>>, any, {}, never>;
+    ItemLabelWithIcon: import('styled-components').StyledComponent<"span", any, {}, never>;
+    ItemLabel: import('styled-components').StyledComponent<"span", any, {}, never>;
+    DescriptionIcon: import('styled-components').StyledComponent<React.ForwardRefExoticComponent<import('@synerise/ds-icon').BaseIconProps & Omit<React.HTMLAttributes<HTMLDivElement>, keyof import('@synerise/ds-icon').BaseIconProps> & import('@synerise/ds-utils').DataAttributes & React.RefAttributes<HTMLDivElement>>, any, {}, never>;
 };
 export default SimpleItem;

package/dist/Item/SimpleItem/SimpleItem.js

@@ -1,65 +1,43 @@
-import React, { useCallback, useState } from 'react';
-import Icon from '@synerise/ds-icon';
-import List from '@synerise/ds-list';
-import { useTexts } from '../../hooks/useTexts';
-import * as S from '../Item.styles';
-import ItemActions from '../ItemActions/ItemActions';
-import ItemName from '../ItemName/ItemName';
-var SimpleItemComponent = function SimpleItemComponent(_ref) {
-  var item = _ref.item,
-    onRemove = _ref.onRemove,
-    onSelect = _ref.onSelect,
-    onUpdate = _ref.onUpdate,
-    texts = _ref.texts,
-    additionalActions = _ref.additionalActions,
-    selected = _ref.selected;
-  var _useState = useState(false),
-    editMode = _useState[0],
-    setEditMode = _useState[1];
-  var allTexts = useTexts(texts);
-  var updateName = useCallback(function (updateParams) {
+import { jsx } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import Icon from "@synerise/ds-icon";
+import List from "@synerise/ds-list";
+import { useTexts } from "../../hooks/useTexts.js";
+import { DescriptionIcon, ItemLabel, ItemLabelWithIcon, ItemLabelWrapper, ItemContainer } from "../Item.styles.js";
+import ItemActions from "../ItemActions/ItemActions.js";
+import ItemName from "../ItemName/ItemName.js";
+const SimpleItemComponent = ({
+  item,
+  onRemove,
+  onSelect,
+  onUpdate,
+  texts,
+  additionalActions,
+  selected
+}) => {
+  const [editMode, setEditMode] = useState(false);
+  const allTexts = useTexts(texts);
+  const updateName = useCallback((updateParams) => {
     setEditMode(false);
     onUpdate && onUpdate(updateParams);
   }, [onUpdate]);
-  var handleSelect = useCallback(function () {
-    !editMode && (onSelect == null ? void 0 : onSelect({
+  const handleSelect = useCallback(() => {
+    !editMode && onSelect?.({
       id: item.id
-    }));
+    });
   }, [onSelect, item.id, editMode]);
-  var enterEditMode = useCallback(function () {
+  const enterEditMode = useCallback(() => {
     setEditMode(true);
   }, []);
-  return /*#__PURE__*/React.createElement(S.ItemContainer, {
-    isDisabled: !!item.disabled,
-    "data-active": !!selected,
-    isSelected: !!selected
-  }, /*#__PURE__*/React.createElement(List.Item, {
-    icon: /*#__PURE__*/React.createElement(Icon, {
-      className: "ds-manageable-list-item-icon",
-      component: item.icon,
-      size: 24
-    }),
-    onSelect: handleSelect,
-    actions: /*#__PURE__*/React.createElement(ItemActions, {
-      item: item,
-      editAction: enterEditMode,
-      removeAction: onRemove,
-      editActionTooltip: allTexts.itemActionRenameTooltip,
-      duplicateActionTooltip: allTexts.itemActionDuplicateTooltip,
-      removeActionTooltip: allTexts.itemActionDeleteTooltip,
-      additionalActions: additionalActions
-    })
-  }, /*#__PURE__*/React.createElement(ItemName, {
-    item: item,
-    editMode: editMode,
-    onUpdate: updateName
-  })));
+  return /* @__PURE__ */ jsx(ItemContainer, { isDisabled: !!item.disabled, "data-active": !!selected, isSelected: !!selected, children: /* @__PURE__ */ jsx(List.Item, { icon: /* @__PURE__ */ jsx(Icon, { className: "ds-manageable-list-item-icon", component: item.icon, size: 24 }), onSelect: handleSelect, actions: /* @__PURE__ */ jsx(ItemActions, { item, editAction: enterEditMode, removeAction: onRemove, editActionTooltip: allTexts.itemActionRenameTooltip, duplicateActionTooltip: allTexts.itemActionDuplicateTooltip, removeActionTooltip: allTexts.itemActionDeleteTooltip, additionalActions }), children: /* @__PURE__ */ jsx(ItemName, { item, editMode, onUpdate: updateName }) }) });
 };
-var SimpleItem = Object.assign(SimpleItemComponent, {
-  ItemContainer: S.ItemContainer,
-  ItemLabelWrapper: S.ItemLabelWrapper,
-  ItemLabelWithIcon: S.ItemLabelWithIcon,
-  ItemLabel: S.ItemLabel,
-  DescriptionIcon: S.DescriptionIcon
+const SimpleItem = Object.assign(SimpleItemComponent, {
+  ItemContainer,
+  ItemLabelWrapper,
+  ItemLabelWithIcon,
+  ItemLabel,
+  DescriptionIcon
 });
-export default SimpleItem;
+export {
+  SimpleItem as default
+};

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

@@ -1,5 +1,5 @@
-import type { ReactText } from 'react';
-import { type AdditionalAction, type ItemProps, type Texts } from '../../ManageableList.types';
+import { ReactText } from 'react';
+import { AdditionalAction, ItemProps, Texts } from '../../ManageableList.types';
 export type Props = {
     item: ItemProps;
     onRemove?: (removeParams: {

package/dist/Item/SimpleItem/SimpleItem.types.js

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

package/dist/ManageableList.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
-import { type ManageableListProps } from './ManageableList.types';
+import { default as React } from 'react';
+import { ManageableListProps } from './ManageableList.types';
 declare const ManageableList: (<T extends object>({ className, onItemAdd, onItemSelect, onItemDuplicate, onItemRemove, onItemEdit, onChangeOrder, items, maxToShowItems, visibleItemsLimit, loading, type, addButtonDisabled, changeOrderDisabled, greyBackground, placeholder, selectedItemId, searchQuery, expanderDisabled, onExpand, expandedIds, texts, changeOrderByButtons, additionalActions, style, renderItem, renderCustomToggleButton, }: ManageableListProps<T>) => React.JSX.Element) & {
-    ManageableListContainer: import("styled-components").StyledComponent<"div", any, {
+    ManageableListContainer: import('styled-components').StyledComponent<"div", any, {
         listType: string;
         greyBackground: boolean;
     }, never>;
-    ShowMoreButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+    ShowMoreButton: import('styled-components').StyledComponent<"div", any, {}, never>;
 };
 export default ManageableList;

package/dist/ManageableList.js

@@ -1,190 +1,132 @@
-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, useEffect, useMemo, useState } from 'react';
-import List from '@synerise/ds-list';
-import { DragOverlay, SortableContainer } from '@synerise/ds-sortable';
-import AddBlankItem from './AddBlankItem/AddBlankItem';
-import AddItem from './AddItem/AddItem';
-import AddItemWithName from './AddItemWithName/AddItemWithName';
-import { DraggableItem } from './Item/DraggableItem';
-import Item from './Item/Item';
-import * as S from './ManageableList.styles';
-import { ListType } from './ManageableList.types';
-import { useTexts } from './hooks/useTexts';
-var ManageableListComponent = function ManageableListComponent(_ref) {
-  var className = _ref.className,
-    onItemAdd = _ref.onItemAdd,
-    onItemSelect = _ref.onItemSelect,
-    onItemDuplicate = _ref.onItemDuplicate,
-    onItemRemove = _ref.onItemRemove,
-    onItemEdit = _ref.onItemEdit,
-    onChangeOrder = _ref.onChangeOrder,
-    items = _ref.items,
-    maxToShowItems = _ref.maxToShowItems,
-    visibleItemsLimit = _ref.visibleItemsLimit,
-    loading = _ref.loading,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? ListType.DEFAULT : _ref$type,
-    _ref$addButtonDisable = _ref.addButtonDisabled,
-    addButtonDisabled = _ref$addButtonDisable === void 0 ? false : _ref$addButtonDisable,
-    _ref$changeOrderDisab = _ref.changeOrderDisabled,
-    changeOrderDisabled = _ref$changeOrderDisab === void 0 ? false : _ref$changeOrderDisab,
-    _ref$greyBackground = _ref.greyBackground,
-    greyBackground = _ref$greyBackground === void 0 ? false : _ref$greyBackground,
-    placeholder = _ref.placeholder,
-    selectedItemId = _ref.selectedItemId,
-    searchQuery = _ref.searchQuery,
-    expanderDisabled = _ref.expanderDisabled,
-    onExpand = _ref.onExpand,
-    expandedIds = _ref.expandedIds,
-    texts = _ref.texts,
-    _ref$changeOrderByBut = _ref.changeOrderByButtons,
-    changeOrderByButtons = _ref$changeOrderByBut === void 0 ? false : _ref$changeOrderByBut,
-    additionalActions = _ref.additionalActions,
-    style = _ref.style,
-    _ref$renderItem = _ref.renderItem,
-    renderItem = _ref$renderItem === void 0 ? function () {
-      return /*#__PURE__*/React.createElement(React.Fragment, null);
-    } : _ref$renderItem,
-    renderCustomToggleButton = _ref.renderCustomToggleButton;
-  var _useState = useState(false),
-    allItemsVisible = _useState[0],
-    setAllItemsVisible = _useState[1];
-  var _useState2 = useState(),
-    draggedItem = _useState2[0],
-    setDraggedItem = _useState2[1];
-  var allTexts = useTexts(texts);
-  var visibleLimit = visibleItemsLimit || maxToShowItems;
-  var getExpandedIds = useCallback(function () {
-    return expandedIds !== undefined ? expandedIds : items.filter(function (item) {
-      return item.expanded;
-    }).map(function (item) {
-      return item.id;
-    });
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { useState, useCallback, useEffect, useMemo } from "react";
+import List from "@synerise/ds-list";
+import { SortableContainer, DragOverlay } from "@synerise/ds-sortable";
+import AddBlankItem from "./AddBlankItem/AddBlankItem.js";
+import AddItem from "./AddItem/AddItem.js";
+import AddItemWithName from "./AddItemWithName/AddItemWithName.js";
+import { DraggableItem } from "./Item/DraggableItem.js";
+import Item from "./Item/Item.js";
+import { ShowMoreButton, ManageableListContainer } from "./ManageableList.styles.js";
+import { ListType } from "./ManageableList.types.js";
+import { useTexts } from "./hooks/useTexts.js";
+const ManageableListComponent = ({
+  className,
+  onItemAdd,
+  onItemSelect,
+  onItemDuplicate,
+  onItemRemove,
+  onItemEdit,
+  onChangeOrder,
+  items,
+  maxToShowItems,
+  visibleItemsLimit,
+  loading,
+  type = ListType.DEFAULT,
+  addButtonDisabled = false,
+  changeOrderDisabled = false,
+  greyBackground = false,
+  placeholder,
+  selectedItemId,
+  searchQuery,
+  expanderDisabled,
+  onExpand,
+  expandedIds,
+  texts,
+  changeOrderByButtons = false,
+  additionalActions,
+  style,
+  renderItem = () => /* @__PURE__ */ jsx(Fragment, {}),
+  renderCustomToggleButton
+}) => {
+  const [allItemsVisible, setAllItemsVisible] = useState(false);
+  const [draggedItem, setDraggedItem] = useState();
+  const allTexts = useTexts(texts);
+  const visibleLimit = visibleItemsLimit || maxToShowItems;
+  const getExpandedIds = useCallback(() => {
+    return expandedIds !== void 0 ? expandedIds : items.filter((item) => item.expanded).map((item) => item.id);
   }, [expandedIds, items]);
-  var _useState3 = useState(getExpandedIds()),
-    allExpandedIds = _useState3[0],
-    setAllExpandedIds = _useState3[1];
-  useEffect(function () {
+  const [allExpandedIds, setAllExpandedIds] = useState(getExpandedIds());
+  useEffect(() => {
     setAllExpandedIds(getExpandedIds());
   }, [expandedIds, items, getExpandedIds]);
-  var getItemsOverLimit = useMemo(function () {
+  const getItemsOverLimit = useMemo(() => {
     if (visibleLimit) {
       return items.length - visibleLimit;
     }
     return 0;
   }, [items, visibleLimit]);
-  var visibleItems = useMemo(function () {
+  const visibleItems = useMemo(() => {
     return allItemsVisible ? items : items.slice(0, visibleLimit);
   }, [allItemsVisible, visibleLimit, items]);
-  var buttonLabel = useMemo(function () {
-    return allItemsVisible ? allTexts.showLessLabel : allTexts.showMoreLabel;
-  }, [allItemsVisible, allTexts.showLessLabel, allTexts.showMoreLabel]);
-  var buttonLabelDiff = useMemo(function () {
-    return allItemsVisible ? /*#__PURE__*/React.createElement(React.Fragment, null, "- ", getItemsOverLimit, " ", allTexts.less, ' ') : /*#__PURE__*/React.createElement(React.Fragment, null, "+ ", getItemsOverLimit, " ", allTexts.more, ' ');
-  }, [allItemsVisible, getItemsOverLimit, allTexts.less, allTexts.more]);
-  var toggleAllItems = useCallback(function () {
+  const buttonLabel = useMemo(() => allItemsVisible ? allTexts.showLessLabel : allTexts.showMoreLabel, [allItemsVisible, allTexts.showLessLabel, allTexts.showMoreLabel]);
+  const buttonLabelDiff = useMemo(() => allItemsVisible ? /* @__PURE__ */ jsxs(Fragment, { children: [
+    "- ",
+    getItemsOverLimit,
+    " ",
+    allTexts.less,
+    " "
+  ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+    "+ ",
+    getItemsOverLimit,
+    " ",
+    allTexts.more,
+    " "
+  ] }), [allItemsVisible, getItemsOverLimit, allTexts.less, allTexts.more]);
+  const toggleAllItems = useCallback(() => {
     setAllItemsVisible(!allItemsVisible);
   }, [allItemsVisible]);
-  var createItem = useCallback(function () {
+  const createItem = useCallback(() => {
     onItemAdd && onItemAdd();
   }, [onItemAdd]);
-  var onMoveTop = useCallback(function (item) {
-    var newOrder = [item].concat(items.filter(function (i) {
-      return i.id !== item.id;
-    }));
+  const onMoveTop = useCallback((item) => {
+    const newOrder = [item, ...items.filter((i) => i.id !== item.id)];
     onChangeOrder && onChangeOrder(newOrder);
   }, [items, onChangeOrder]);
-  var onMoveBottom = useCallback(function (item) {
-    var newOrder = [].concat(items.filter(function (i) {
-      return i.id !== item.id;
-    }), [item]);
+  const onMoveBottom = useCallback((item) => {
+    const newOrder = [...items.filter((i) => i.id !== item.id), item];
     onChangeOrder && onChangeOrder(newOrder);
   }, [items, onChangeOrder]);
-  var getItem = useCallback(function (item, index, draggable) {
-    var Component = draggable ? DraggableItem : Item;
-    return /*#__PURE__*/React.createElement(Component, {
-      key: item.id,
-      isDragOverlay: index === -1,
-      isDragPlaceholder: (draggedItem == null ? void 0 : draggedItem.id) === item.id && index > -1,
-      isFirst: index === 0,
-      isLast: index + 1 === items.length,
-      listType: type,
-      onSelect: onItemSelect,
-      onUpdate: onItemEdit,
-      onRemove: onItemRemove,
-      onDuplicate: onItemDuplicate,
-      onExpand: onExpand,
-      onMoveTop: changeOrderByButtons ? onMoveTop : undefined,
-      onMoveBottom: changeOrderByButtons ? onMoveBottom : undefined,
-      item: item,
-      draggable: draggable,
-      changeOrderDisabled: changeOrderDisabled,
-      greyBackground: greyBackground,
-      selected: Boolean(item.id === selectedItemId),
-      texts: allTexts,
-      searchQuery: searchQuery,
-      hideExpander: expanderDisabled,
-      expanded: allExpandedIds && allExpandedIds.includes(item.id),
-      additionalActions: additionalActions,
-      renderItem: renderItem
-    });
-  }, [draggedItem == null ? void 0 : draggedItem.id, items.length, type, onItemSelect, onItemEdit, onItemRemove, onItemDuplicate, onExpand, changeOrderByButtons, onMoveTop, onMoveBottom, changeOrderDisabled, greyBackground, selectedItemId, allTexts, searchQuery, expanderDisabled, allExpandedIds, additionalActions, renderItem]);
-  var toggleMoreItemsButton = visibleLimit && items.length > visibleLimit ? renderCustomToggleButton && renderCustomToggleButton({
+  const getItem = useCallback((item, index, draggable) => {
+    const Component = draggable ? DraggableItem : Item;
+    return /* @__PURE__ */ jsx(Component, { isDragOverlay: index === -1, isDragPlaceholder: draggedItem?.id === item.id && index > -1, isFirst: index === 0, isLast: index + 1 === items.length, listType: type, onSelect: onItemSelect, onUpdate: onItemEdit, onRemove: onItemRemove, onDuplicate: onItemDuplicate, onExpand, onMoveTop: changeOrderByButtons ? onMoveTop : void 0, onMoveBottom: changeOrderByButtons ? onMoveBottom : void 0, item, draggable, changeOrderDisabled, greyBackground, selected: Boolean(item.id === selectedItemId), texts: allTexts, searchQuery, hideExpander: expanderDisabled, expanded: allExpandedIds && allExpandedIds.includes(item.id), additionalActions, renderItem }, item.id);
+  }, [draggedItem?.id, items.length, type, onItemSelect, onItemEdit, onItemRemove, onItemDuplicate, onExpand, changeOrderByButtons, onMoveTop, onMoveBottom, changeOrderDisabled, greyBackground, selectedItemId, allTexts, searchQuery, expanderDisabled, allExpandedIds, additionalActions, renderItem]);
+  const toggleMoreItemsButton = visibleLimit && items.length > visibleLimit ? renderCustomToggleButton && renderCustomToggleButton({
     onClick: toggleAllItems,
-    allItemsVisible: allItemsVisible,
+    allItemsVisible,
     total: items.length,
     limit: visibleLimit
-  }) || /*#__PURE__*/React.createElement(S.ShowMoreButton, {
-    onClick: toggleAllItems,
-    "data-testid": "show-more-button"
-  }, /*#__PURE__*/React.createElement("span", null, buttonLabelDiff), /*#__PURE__*/React.createElement("strong", null, buttonLabel)) : null;
-  var handleDragStart = useCallback(function (_ref2) {
-    var active = _ref2.active;
-    var stepIndex = visibleItems.findIndex(function (item) {
-      return item.id === active.id;
-    });
-    setDraggedItem(_extends({}, visibleItems[stepIndex], {
+  }) || /* @__PURE__ */ jsxs(ShowMoreButton, { onClick: toggleAllItems, "data-testid": "show-more-button", children: [
+    /* @__PURE__ */ jsx("span", { children: buttonLabelDiff }),
+    /* @__PURE__ */ jsx("strong", { children: buttonLabel })
+  ] }) : null;
+  const handleDragStart = useCallback(({
+    active
+  }) => {
+    const stepIndex = visibleItems.findIndex((item) => item.id === active.id);
+    setDraggedItem({
+      ...visibleItems[stepIndex],
       index: stepIndex
-    }));
+    });
   }, [visibleItems]);
-  var handleDragEnd = useCallback(function () {
-    setDraggedItem(undefined);
+  const handleDragEnd = useCallback(() => {
+    setDraggedItem(void 0);
   }, []);
-  return /*#__PURE__*/React.createElement(S.ManageableListContainer, {
-    className: "ds-manageable-list " + (className || ''),
-    listType: type,
-    greyBackground: greyBackground,
-    style: style
-  }, type === ListType.DEFAULT && Boolean(onItemAdd) && /*#__PURE__*/React.createElement(AddItemWithName, {
-    addItemLabel: allTexts.addItemLabel,
-    onItemAdd: onItemAdd,
-    disabled: addButtonDisabled,
-    placeholder: placeholder
-  }), onChangeOrder && !changeOrderDisabled ? /*#__PURE__*/React.createElement(SortableContainer, {
-    axis: "y",
-    onDragStart: handleDragStart,
-    onDragEnd: handleDragEnd,
-    onDragCancel: handleDragEnd,
-    onOrderChange: onChangeOrder,
-    items: visibleItems
-  }, visibleItems.map(function (item, index) {
-    return getItem(item, index, true);
-  }), /*#__PURE__*/React.createElement(DragOverlay, null, draggedItem && /*#__PURE__*/React.createElement(React.Fragment, null, getItem(draggedItem, -1, false)))) : /*#__PURE__*/React.createElement(List, {
-    loading: loading,
-    dataSource: visibleItems,
-    renderItem: getItem
-  }), toggleMoreItemsButton, (type === ListType.CONTENT || type === ListType.CONTENT_LARGE) && Boolean(onItemAdd) && /*#__PURE__*/React.createElement(AddItem, {
-    addItemLabel: allTexts.addItemLabel,
-    onItemAdd: createItem,
-    disabled: addButtonDisabled
-  }), type === ListType.BLANK && Boolean(onItemAdd) && /*#__PURE__*/React.createElement(AddBlankItem, {
-    addItemLabel: allTexts.addItemLabel,
-    onItemAdd: createItem,
-    disabled: addButtonDisabled
-  }));
+  return /* @__PURE__ */ jsxs(ManageableListContainer, { className: `ds-manageable-list ${className || ""}`, listType: type, greyBackground, style, children: [
+    type === ListType.DEFAULT && Boolean(onItemAdd) && /* @__PURE__ */ jsx(AddItemWithName, { addItemLabel: allTexts.addItemLabel, onItemAdd, disabled: addButtonDisabled, placeholder }),
+    onChangeOrder && !changeOrderDisabled ? /* @__PURE__ */ jsxs(SortableContainer, { axis: "y", onDragStart: handleDragStart, onDragEnd: handleDragEnd, onDragCancel: handleDragEnd, onOrderChange: onChangeOrder, items: visibleItems, children: [
+      visibleItems.map((item, index) => getItem(item, index, true)),
+      /* @__PURE__ */ jsx(DragOverlay, { children: draggedItem && /* @__PURE__ */ jsx(Fragment, { children: getItem(draggedItem, -1, false) }) })
+    ] }) : /* @__PURE__ */ jsx(List, { loading, dataSource: visibleItems, renderItem: getItem }),
+    toggleMoreItemsButton,
+    (type === ListType.CONTENT || type === ListType.CONTENT_LARGE) && Boolean(onItemAdd) && /* @__PURE__ */ jsx(AddItem, { addItemLabel: allTexts.addItemLabel, onItemAdd: createItem, disabled: addButtonDisabled }),
+    type === ListType.BLANK && Boolean(onItemAdd) && /* @__PURE__ */ jsx(AddBlankItem, { addItemLabel: allTexts.addItemLabel, onItemAdd: createItem, disabled: addButtonDisabled })
+  ] });
 };
-var ManageableList = Object.assign(ManageableListComponent, {
-  ManageableListContainer: S.ManageableListContainer,
-  ShowMoreButton: S.ShowMoreButton
+const ManageableList = Object.assign(ManageableListComponent, {
+  ManageableListContainer,
+  ShowMoreButton
 });
-export default ManageableList;
+export {
+  ManageableList as default
+};

package/dist/ManageableList.styles.d.ts

@@ -2,6 +2,6 @@ type ManageableListProps = {
     listType: string;
     greyBackground: boolean;
 };
-export declare const ManageableListContainer: import("styled-components").StyledComponent<"div", any, ManageableListProps, never>;
-export declare const ShowMoreButton: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ManageableListContainer: import('styled-components').StyledComponent<"div", any, ManageableListProps, never>;
+export declare const ShowMoreButton: import('styled-components').StyledComponent<"div", any, {}, never>;
 export {};

package/dist/ManageableList.styles.js

@@ -1,15 +1,16 @@
-import styled from 'styled-components';
-import { ListType } from './ManageableList.types';
-export var ManageableListContainer = styled.div.withConfig({
+import styled from "styled-components";
+import { ListType } from "./ManageableList.types.js";
+const ManageableListContainer = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ManageableListstyles__ManageableListContainer",
   componentId: "sc-1pshmn-0"
-})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:", ";& > div{width:100%;padding:0;}.ant-list{width:100%;padding:0;}.ant-spin-nested-loading{width:100%;}"], function (_ref) {
-  var listType = _ref.listType;
-  return listType === ListType.CONTENT ? '24px' : '0';
-});
-export var ShowMoreButton = styled.div.withConfig({
+})(["display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;padding:", ";& > div{width:100%;padding:0;}.ant-list{width:100%;padding:0;}.ant-spin-nested-loading{width:100%;}"], ({
+  listType
+}) => listType === ListType.CONTENT ? "24px" : "0");
+const ShowMoreButton = /* @__PURE__ */ styled.div.withConfig({
   displayName: "ManageableListstyles__ShowMoreButton",
   componentId: "sc-1pshmn-1"
-})(["background:transparent;outline:0;cursor:pointer;&&{padding:16px 8px;margin:0;}&:hover{color:", ";}strong{font-weight:500;}"], function (props) {
-  return props.theme.palette['blue-600'];
-});
+})(["background:transparent;outline:0;cursor:pointer;&&{padding:16px 8px;margin:0;}&:hover{color:", ";}strong{font-weight:500;}"], (props) => props.theme.palette["blue-600"]);
+export {
+  ManageableListContainer,
+  ShowMoreButton
+};

package/dist/ManageableList.types.d.ts

@@ -1,5 +1,5 @@
-import type { CSSProperties, HTMLAttributes, ReactElement, ReactNode, ReactText } from 'react';
-import type { ExactlyOne } from '@synerise/ds-utils';
+import { CSSProperties, HTMLAttributes, ReactElement, ReactNode, ReactText } from 'react';
+import { ExactlyOne } from '@synerise/ds-utils';
 export declare enum ExpansionBehaviour {
     DEFAULT = "default",
     ACCORDION = "accordion",

package/dist/ManageableList.types.js

@@ -1,14 +1,18 @@
-export var ExpansionBehaviour = /*#__PURE__*/function (ExpansionBehaviour) {
-  ExpansionBehaviour["DEFAULT"] = "default";
-  ExpansionBehaviour["ACCORDION"] = "accordion";
-  ExpansionBehaviour["CUSTOM"] = "custom";
-  return ExpansionBehaviour;
-}({});
-export var ListType = /*#__PURE__*/function (ListType) {
-  ListType["DEFAULT"] = "default";
-  ListType["BLANK"] = "blank";
-  ListType["CONTENT"] = "content";
-  ListType["CONTENT_LARGE"] = "content-large";
-  ListType["FILTER"] = "filter";
-  return ListType;
-}({});
+var ExpansionBehaviour = /* @__PURE__ */ ((ExpansionBehaviour2) => {
+  ExpansionBehaviour2["DEFAULT"] = "default";
+  ExpansionBehaviour2["ACCORDION"] = "accordion";
+  ExpansionBehaviour2["CUSTOM"] = "custom";
+  return ExpansionBehaviour2;
+})(ExpansionBehaviour || {});
+var ListType = /* @__PURE__ */ ((ListType2) => {
+  ListType2["DEFAULT"] = "default";
+  ListType2["BLANK"] = "blank";
+  ListType2["CONTENT"] = "content";
+  ListType2["CONTENT_LARGE"] = "content-large";
+  ListType2["FILTER"] = "filter";
+  return ListType2;
+})(ListType || {});
+export {
+  ExpansionBehaviour,
+  ListType
+};

package/dist/hooks/useTexts.d.ts

@@ -1,2 +1,2 @@
-import { type Texts } from '../ManageableList.types';
+import { Texts } from '../ManageableList.types';
 export declare const useTexts: (defaultTexts?: Partial<Texts>) => Texts;