elementdrawing 1.0.0

package/src/jsx/components/Select.jsx

@@ -0,0 +1,397 @@
+/**
+ * Select Component for ElementDrawing Framework
+ * Supports search, multiple, tags, group options, custom render, remote search, clearable, creatable, virtual scroll
+ */
+const ED = require('../core/element');
+
+const SELECT_SIZES = {
+  sm: 'ed-text-sm ed-px-2 ed-py-1',
+  md: 'ed-text-sm ed-px-3 ed-py-1.5',
+  lg: 'ed-text-base ed-px-3 ed-py-2.5',
+};
+
+function Option(props) {
+  const {
+    children,
+    value,
+    label,
+    disabled = false,
+    selected = false,
+    active = false,
+    icon,
+    description,
+    className = '',
+    style = {},
+    onClick,
+    onMouseEnter,
+  } = props;
+
+  const optionClasses = [
+    'ed-flex ed-items-center ed-px-3 ed-py-2 ed-text-sm ed-cursor-pointer ed-transition-colors ed-duration-150 ed-gap-2',
+    disabled
+      ? 'ed-text-gray-400 ed-cursor-not-allowed'
+      : selected
+        ? 'ed-bg-blue-50 ed-text-blue-700 ed-font-medium'
+        : active
+          ? 'ed-bg-gray-50 ed-text-gray-900'
+          : 'ed-text-gray-700 hover:ed-bg-gray-50',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const checkIcon = selected
+    ? ED.createElement('svg', {
+        className: 'ed-w-4 ed-h-4 ed-text-blue-600 ed-flex-shrink-0',
+        fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+        children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M5 13l4 4L19 7' }),
+      })
+    : null;
+
+  const iconElement = icon
+    ? ED.createElement('span', { className: 'ed-w-4 ed-h-4 ed-flex ed-items-center ed-justify-center ed-flex-shrink-0' },
+        typeof icon === 'string' ? ED.createElement('i', { className: icon }) : icon
+      )
+    : null;
+
+  return ED.createElement('div', {
+    className: optionClasses,
+    style,
+    onClick: disabled ? undefined : onClick,
+    onMouseEnter,
+    role: 'option',
+    'aria-selected': selected,
+    'aria-disabled': disabled,
+    children: [
+      checkIcon,
+      iconElement,
+      ED.createElement('div', { className: 'ed-flex-1 ed-min-w-0' }, [
+        ED.createElement('span', { key: 'label', className: 'ed-truncate ed-block' }, children || label),
+        description
+          ? ED.createElement('span', { key: 'desc', className: 'ed-text-xs ed-text-gray-400 ed-block' }, description)
+          : null,
+      ].filter(Boolean)),
+    ],
+  });
+}
+
+Option.displayName = 'Option';
+
+function OptionGroup(props) {
+  const {
+    children,
+    label,
+    className = '',
+    style = {},
+  } = props;
+
+  return ED.createElement('div', { className, style, role: 'optgroup' }, [
+    label
+      ? ED.createElement('div', {
+          key: 'label',
+          className: 'ed-px-3 ed-py-1.5 ed-text-xs ed-font-semibold ed-text-gray-400 ed-uppercase ed-tracking-wider',
+        }, label)
+      : null,
+    children,
+  ]);
+}
+
+OptionGroup.displayName = 'OptionGroup';
+
+function Select(props) {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    options = [],
+    placeholder = 'Select...',
+    searchable = false,
+    multiple = false,
+    tags = false,
+    clearable = false,
+    disabled = false,
+    loading = false,
+    size = 'md',
+    className = '',
+    style = {},
+    dropdownClassName = '',
+    dropdownStyle = {},
+    open: controlledOpen,
+    onDropdownVisibleChange,
+    onSearch,
+    remoteSearch = false,
+    creatable = false,
+    onCreateOption,
+    virtual = false,
+    maxTagCount,
+    maxTagTextLength,
+    label,
+    labelKey = 'label',
+    valueKey = 'value',
+    groupByKey,
+    renderOption,
+    renderValue,
+    suffixIcon,
+    prefixIcon,
+    emptyText = 'No options',
+    notFoundContent,
+    showArrow = true,
+    allowClear,
+    filterOption,
+    menuItemSelectedIcon,
+    dropdownRender,
+    onClear,
+    onFocus,
+    onBlur,
+    id,
+    name,
+    required = false,
+    error = false,
+    bordered = true,
+    status,
+  } = props;
+
+  const isOpen = controlledOpen !== undefined ? controlledOpen : false;
+  const currentValue = value !== undefined ? value : defaultValue;
+  const isMultiple = multiple || tags;
+  const currentError = error || status === 'error';
+
+  const sizeClass = SELECT_SIZES[size] || SELECT_SIZES.md;
+
+  const selectedOptions = Array.isArray(currentValue)
+    ? options.filter(opt => currentValue.includes(typeof opt === 'object' ? opt[valueKey] : opt))
+    : options.filter(opt => (typeof opt === 'object' ? opt[valueKey] : opt) === currentValue);
+
+  const selectedLabel = isMultiple
+    ? selectedOptions.map(opt => typeof opt === 'object' ? opt[labelKey] : opt)
+    : selectedOptions[0]
+      ? (typeof selectedOptions[0] === 'object' ? selectedOptions[0][labelKey] : selectedOptions[0])
+      : '';
+
+  const triggerClasses = [
+    'ed-flex ed-items-center ed-w-full ed-rounded-md ed-transition-colors ed-duration-200 ed-gap-1',
+    sizeClass,
+    bordered ? 'ed-border' : 'ed-border-0',
+    currentError ? 'ed-border-red-500' : 'ed-border-gray-300',
+    disabled ? 'ed-bg-gray-100 ed-cursor-not-allowed ed-text-gray-400' : 'ed-bg-white ed-cursor-pointer ed-text-gray-900',
+    'hover:ed-border-gray-400 focus-within:ed-ring-2 focus-within:ed-ring-blue-500 focus-within:ed-border-blue-500',
+    isOpen ? 'ed-ring-2 ed-ring-blue-500 ed-border-blue-500' : '',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const arrowIcon = showArrow && !loading
+    ? ED.createElement('svg', {
+        className: `ed-w-4 ed-h-4 ed-text-gray-400 ed-transition-transform ed-duration-200 ed-flex-shrink-0 ${isOpen ? 'ed-rotate-180' : ''}`,
+        fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+        children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M19 9l-7 7-7-7' }),
+      })
+    : null;
+
+  const loadingIcon = loading
+    ? ED.createElement('div', { className: 'ed-w-4 ed-h-4 ed-border-2 ed-border-blue-500 ed-border-t-transparent ed-rounded-full ed-animate-spin ed-flex-shrink-0' })
+    : null;
+
+  const clearIcon = (clearable || allowClear) && currentValue && !disabled
+    ? ED.createElement('button', {
+        className: 'ed-flex ed-items-center ed-justify-center ed-text-gray-400 hover:ed-text-gray-600 ed-transition-colors ed-flex-shrink-0',
+        onClick: (e) => { e.stopPropagation(); onClear?.(); onChange?.(isMultiple ? [] : undefined); },
+        tabIndex: -1,
+        children: ED.createElement('svg', {
+          className: 'ed-w-4 ed-h-4',
+          fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+          children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M6 18L18 6M6 6l12 12' }),
+        }),
+      })
+    : null;
+
+  const prefixElement = prefixIcon
+    ? ED.createElement('span', { className: 'ed-text-gray-400 ed-flex-shrink-0' },
+        typeof prefixIcon === 'string' ? ED.createElement('i', { className: prefixIcon }) : prefixIcon
+      )
+    : null;
+
+  const searchInput = searchable && isOpen
+    ? ED.createElement('input', {
+        className: 'ed-flex-1 ed-outline-none ed-bg-transparent ed-text-sm ed-placeholder-ed-text-gray-400',
+        placeholder: selectedLabel || placeholder,
+        onChange: (e) => onSearch?.(e.target.value),
+        autoFocus: true,
+      })
+    : null;
+
+  const tagElements = isMultiple && selectedOptions.length > 0
+    ? selectedOptions.slice(0, maxTagCount || selectedOptions.length).map((opt, idx) =>
+        ED.createElement('span', {
+          key: idx,
+          className: 'ed-inline-flex ed-items-center ed-gap-1 ed-px-2 ed-py-0.5 ed-text-xs ed-bg-blue-100 ed-text-blue-800 ed-rounded ed-font-medium',
+          children: [
+            ED.createElement('span', { key: 'text' },
+              maxTagTextLength && (typeof opt === 'object' ? opt[labelKey] : opt).length > maxTagTextLength
+                ? (typeof opt === 'object' ? opt[labelKey] : opt).slice(0, maxTagTextLength) + '...'
+                : typeof opt === 'object' ? opt[labelKey] : opt
+            ),
+            ED.createElement('button', {
+              key: 'remove',
+              className: 'ed-hover:ed-text-red-500 ed-transition-colors',
+              onClick: (e) => {
+                e.stopPropagation();
+                const optVal = typeof opt === 'object' ? opt[valueKey] : opt;
+                onChange?.(currentValue.filter(v => v !== optVal));
+              },
+              children: ED.createElement('svg', { className: 'ed-w-3 ed-h-3', fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor' },
+                ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M6 18L18 6M6 6l12 12' })
+              ),
+            }),
+          ],
+        })
+      )
+    : null;
+
+  const maxTagElement = isMultiple && maxTagCount && selectedOptions.length > maxTagCount
+    ? ED.createElement('span', {
+        className: 'ed-text-xs ed-text-gray-500',
+      }, `+${selectedOptions.length - maxTagCount}`)
+    : null;
+
+  const displayValue = !isMultiple && !searchable
+    ? renderValue
+      ? renderValue(selectedOptions[0])
+      : selectedLabel || ED.createElement('span', { className: 'ed-text-gray-400' }, placeholder)
+    : null;
+
+  const filteredOptions = options;
+  const grouped = groupByKey && filteredOptions.some(opt => typeof opt === 'object' && opt[groupByKey]);
+
+  const renderOptions = () => {
+    if (grouped) {
+      const groups = {};
+      filteredOptions.forEach(opt => {
+        const group = typeof opt === 'object' ? opt[groupByKey] : 'Other';
+        if (!groups[group]) groups[group] = [];
+        groups[group].push(opt);
+      });
+      return Object.entries(groups).flatMap(([groupLabel, groupOptions]) =>
+        ED.createElement(OptionGroup, { key: groupLabel, label: groupLabel },
+          ...groupOptions.map((opt, idx) => {
+            const optVal = typeof opt === 'object' ? opt[valueKey] : opt;
+            const optLabel = typeof opt === 'object' ? opt[labelKey] : opt;
+            return ED.createElement(Option, {
+              key: optVal || idx,
+              value: optVal,
+              label: optLabel,
+              disabled: opt.disabled,
+              selected: isMultiple
+                ? currentValue?.includes(optVal)
+                : currentValue === optVal,
+              icon: opt.icon,
+              description: opt.description,
+              onClick: () => {
+                if (isMultiple) {
+                  const newVal = currentValue?.includes(optVal)
+                    ? currentValue.filter(v => v !== optVal)
+                    : [...(currentValue || []), optVal];
+                  onChange?.(newVal);
+                } else {
+                  onChange?.(optVal);
+                  onDropdownVisibleChange?.(false);
+                }
+              },
+            }, renderOption ? renderOption(opt) : optLabel);
+          })
+        )
+      );
+    }
+
+    return filteredOptions.map((opt, idx) => {
+      const optVal = typeof opt === 'object' ? opt[valueKey] : opt;
+      const optLabel = typeof opt === 'object' ? opt[labelKey] : opt;
+      return ED.createElement(Option, {
+        key: optVal || idx,
+        value: optVal,
+        label: optLabel,
+        disabled: opt.disabled,
+        selected: isMultiple
+          ? currentValue?.includes(optVal)
+          : currentValue === optVal,
+        icon: opt.icon,
+        description: opt.description,
+        onClick: () => {
+          if (isMultiple) {
+            const newVal = currentValue?.includes(optVal)
+              ? currentValue.filter(v => v !== optVal)
+              : [...(currentValue || []), optVal];
+            onChange?.(newVal);
+          } else {
+            onChange?.(optVal);
+            onDropdownVisibleChange?.(false);
+          }
+        },
+      }, renderOption ? renderOption(opt) : optLabel);
+    });
+  };
+
+  const createOption = creatable && searchable
+    ? ED.createElement('div', {
+        className: 'ed-px-3 ed-py-2 ed-text-sm ed-text-blue-600 ed-cursor-pointer hover:ed-bg-blue-50 ed-transition-colors',
+      }, `Create option`)
+    : null;
+
+  const dropdownContent = ED.createElement('div', {
+    className: [
+      'ed-absolute ed-left-0 ed-right-0 ed-top-full ed-mt-1 ed-bg-white ed-rounded-md ed-shadow-lg ed-border ed-border-gray-200 ed-z-50',
+      'ed-max-h-60 ed-overflow-y-auto ed-py-1',
+      dropdownClassName,
+    ].filter(Boolean).join(' '),
+    style: dropdownStyle,
+    role: 'listbox',
+    children: [
+      filteredOptions.length > 0
+        ? renderOptions()
+        : ED.createElement('div', { className: 'ed-px-3 ed-py-4 ed-text-center ed-text-sm ed-text-gray-400' },
+            notFoundContent || emptyText
+          ),
+      createOption,
+    ],
+  });
+
+  return ED.createElement('div', {
+    className: 'ed-relative ed-inline-flex ed-flex-col',
+    style,
+  }, [
+    label
+      ? ED.createElement('label', {
+          key: 'label',
+          htmlFor: id,
+          className: `ed-block ed-text-sm ed-font-medium ed-mb-1 ${required ? "ed-after:content-['*'] ed-after:ed-text-red-500" : ''} ed-text-gray-700`,
+        }, label)
+      : null,
+    ED.createElement('div', {
+      key: 'trigger',
+      className: triggerClasses,
+      onClick: () => { if (!disabled) onDropdownVisibleChange?.(!isOpen); },
+      onFocus,
+      onBlur,
+      role: 'combobox',
+      'aria-expanded': isOpen,
+      'aria-haspopup': 'listbox',
+      tabIndex: disabled ? -1 : 0,
+      children: [
+        prefixElement,
+        ED.createElement('div', { key: 'value-area', className: 'ed-flex-1 ed-flex ed-items-center ed-flex-wrap ed-gap-1 ed-min-w-0' },
+          tagElements,
+          maxTagElement,
+          searchInput,
+          displayValue,
+        ),
+        clearIcon,
+        loadingIcon || arrowIcon,
+      ],
+    }),
+    isOpen ? dropdownContent : null,
+  ]);
+}
+
+Select.displayName = 'Select';
+Select.Option = Option;
+Select.OptionGroup = OptionGroup;
+Select.SIZES = SELECT_SIZES;
+
+module.exports = Select;

package/src/jsx/components/Sidebar.jsx

@@ -0,0 +1,250 @@
+/**
+ * Sidebar Component for ElementDrawing Framework
+ * Supports collapsible, menu items, nested items, icons, badges, active state, mini mode, overlay, responsive
+ */
+const ED = require('../core/element');
+
+function SidebarItem(props) {
+  const {
+    label,
+    icon,
+    badge,
+    badgeColor = 'blue',
+    active = false,
+    disabled = false,
+    children: nestedItems,
+    href,
+    onClick,
+    className = '',
+    style = {},
+    indent = 0,
+    mini = false,
+    expanded = false,
+    onToggle,
+    depth = 0,
+  } = props;
+
+  const hasChildren = nestedItems && nestedItems.length > 0;
+  const badgeColorClasses = {
+    blue: 'ed-bg-blue-500 ed-text-white',
+    red: 'ed-bg-red-500 ed-text-white',
+    green: 'ed-bg-green-500 ed-text-white',
+    yellow: 'ed-bg-yellow-500 ed-text-white',
+    gray: 'ed-bg-gray-500 ed-text-white',
+  };
+
+  const itemClasses = [
+    'ed-flex ed-items-center ed-px-3 ed-py-2.5 ed-rounded-lg ed-text-sm ed-transition-all ed-duration-200 ed-group',
+    active
+      ? 'ed-bg-blue-50 ed-text-blue-700 ed-font-medium'
+      : 'ed-text-gray-700 hover:ed-bg-gray-100 hover:ed-text-gray-900',
+    disabled ? 'ed-opacity-50 ed-cursor-not-allowed ed-pointer-events-none' : 'ed-cursor-pointer',
+    mini ? 'ed-justify-center ed-px-2' : '',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const badgeElement = badge !== undefined && !mini
+    ? ED.createElement('span', {
+        className: [
+          'ed-ml-auto ed-px-2 ed-py-0.5 ed-text-xs ed-font-medium ed-rounded-full',
+          badgeColorClasses[badgeColor] || badgeColorClasses.blue,
+        ].join(' '),
+      }, typeof badge === 'number' && badge > 99 ? '99+' : badge)
+    : null;
+
+  const iconElement = icon
+    ? ED.createElement('span', {
+        className: `${mini ? '' : 'ed-mr-3'} ed-flex-shrink-0 ed-w-5 ed-h-5 ed-flex ed-items-center ed-justify-center`,
+        children: typeof icon === 'string' ? ED.createElement('i', { className: icon }) : icon,
+      })
+    : null;
+
+  const expandIcon = hasChildren && !mini
+    ? ED.createElement('svg', {
+        className: `ed-ml-auto ed-w-4 ed-h-4 ed-transition-transform ed-duration-200 ${expanded ? 'ed-rotate-90' : ''} ${active ? 'ed-text-blue-500' : 'ed-text-gray-400'}`,
+        fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+        children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M9 5l7 7-7 7' }),
+      })
+    : null;
+
+  const labelElement = !mini
+    ? ED.createElement('span', { className: 'ed-flex-1 ed-truncate' }, label)
+    : null;
+
+  const tooltipElement = mini
+    ? ED.createElement('div', {
+        className: 'ed-absolute ed-left-full ed-ml-2 ed-px-2 ed-py-1 ed-bg-gray-900 ed-text-white ed-text-xs ed-rounded ed-whitespace-nowrap ed-opacity-0 group-hover:ed-opacity-100 ed-transition-opacity ed-pointer-events-none ed-z-50',
+      }, label)
+    : null;
+
+  const handleClick = (e) => {
+    if (disabled) return;
+    if (hasChildren) {
+      onToggle?.();
+    } else {
+      onClick?.(e);
+    }
+  };
+
+  const nestedElement = hasChildren && expanded && !mini
+    ? ED.createElement('div', {
+        className: 'ed-ml-4 ed-mt-1 ed-space-y-0.5 ed-border-l ed-border-gray-200 ed-pl-3',
+        children: nestedItems,
+      })
+    : null;
+
+  return ED.createElement('div', {
+    className: 'ed-relative',
+    style: { paddingLeft: `${indent * 8}px` },
+  }, [
+    ED.createElement('a', {
+      key: 'item',
+      href: disabled ? undefined : href,
+      className: itemClasses,
+      style,
+      onClick: handleClick,
+      'aria-current': active ? 'page' : undefined,
+      role: 'menuitem',
+      tabIndex: disabled ? -1 : 0,
+      children: [iconElement, labelElement, badgeElement, expandIcon, tooltipElement].filter(Boolean),
+    }),
+    nestedElement,
+  ]);
+}
+
+SidebarItem.displayName = 'SidebarItem';
+
+function Sidebar(props) {
+  const {
+    children,
+    items = [],
+    collapsed = false,
+    mini = false,
+    overlay = false,
+    responsive = true,
+    width = 256,
+    miniWidth = 64,
+    className = '',
+    style = {},
+    header,
+    footer,
+    theme = 'light',
+    bordered = true,
+    floating = false,
+    onClose,
+    open = true,
+    onToggle,
+    activeKey,
+    onItemClick,
+    expandedKeys = [],
+    onExpand,
+    breakPoint = 'lg',
+    zIndex = 30,
+    overlayOpacity = 0.5,
+  } = props;
+
+  const effectiveWidth = mini ? miniWidth : (collapsed ? miniWidth : width);
+  const isDark = theme === 'dark';
+
+  const sidebarClasses = [
+    'ed-flex ed-flex-col ed-h-full ed-transition-all ed-duration-300 ed-ease-in-out',
+    overlay ? 'ed-fixed ed-top-0 ed-left-0 ed-bottom-0' : '',
+    isDark ? 'ed-bg-gray-900 ed-text-gray-100' : 'ed-bg-white ed-text-gray-800',
+    bordered ? 'ed-border-r ed-border-gray-200' : '',
+    floating && !overlay ? 'ed-rounded-lg ed-m-2 ed-shadow-lg' : '',
+    !open && !overlay ? 'ed--translate-x-full' : '',
+    'ed-overflow-y-auto ed-overflow-x-hidden',
+    className,
+  ].filter(Boolean).join(' ');
+
+  const renderItems = (menuItems, depth = 0) =>
+    menuItems.map((item, idx) =>
+      ED.createElement(SidebarItem, {
+        key: item.key || idx,
+        label: item.label,
+        icon: item.icon,
+        badge: item.badge,
+        badgeColor: item.badgeColor,
+        active: activeKey === item.key || item.active,
+        disabled: item.disabled,
+        href: item.href,
+        onClick: () => onItemClick?.(item),
+        mini,
+        expanded: expandedKeys.includes(item.key),
+        onToggle: () => onExpand?.(item.key),
+        depth,
+        children: item.children ? renderItems(item.children, depth + 1) : undefined,
+      })
+    );
+
+  const headerElement = header
+    ? ED.createElement('div', {
+        className: [
+          'ed-flex ed-items-center ed-px-4 ed-py-4 ed-border-b',
+          isDark ? 'ed-border-gray-700' : 'ed-border-gray-200',
+          mini ? 'ed-justify-center ed-px-2' : 'ed-justify-between',
+        ].filter(Boolean).join(' '),
+      }, [
+        typeof header === 'string'
+          ? ED.createElement('span', { key: 'header-text', className: 'ed-font-bold ed-text-lg ed-truncate' }, header)
+          : header,
+        !mini && onToggle
+          ? ED.createElement('button', {
+              key: 'collapse-btn',
+              className: 'ed-p-1 ed-rounded ed-text-gray-400 hover:ed-text-gray-600 hover:ed-bg-gray-100 ed-transition-colors',
+              onClick: onToggle,
+              'aria-label': 'Toggle sidebar',
+              children: ED.createElement('svg', {
+                className: 'ed-w-5 ed-h-5',
+                fill: 'none', viewBox: '0 0 24 24', stroke: 'currentColor',
+                children: ED.createElement('path', { strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2, d: 'M11 19l-7-7 7-7m8 14l-7-7 7-7' }),
+              }),
+            })
+          : null,
+      ].filter(Boolean))
+    : null;
+
+  const bodyElement = ED.createElement('div', {
+    className: 'ed-flex-1 ed-overflow-y-auto ed-py-2 ed-px-2',
+    role: 'menu',
+    children: items.length > 0 ? renderItems(items) : children,
+  });
+
+  const footerElement = footer
+    ? ED.createElement('div', {
+        className: [
+          'ed-px-4 ed-py-3 ed-border-t',
+          isDark ? 'ed-border-gray-700' : 'ed-border-gray-200',
+          mini ? 'ed-px-2' : '',
+        ].filter(Boolean).join(' '),
+      }, footer)
+    : null;
+
+  const overlayElement = overlay && open
+    ? ED.createElement('div', {
+        className: 'ed-fixed ed-inset-0 ed-bg-black ed-transition-opacity ed-duration-300',
+        style: { zIndex: zIndex - 1, opacity: overlayOpacity },
+        onClick: onClose,
+      })
+    : null;
+
+  return ED.createElement(ED.Fragment, null, [
+    overlayElement,
+    ED.createElement('aside', {
+      key: 'sidebar',
+      className: sidebarClasses,
+      style: {
+        width: effectiveWidth,
+        minWidth: effectiveWidth,
+        zIndex,
+        ...style,
+      },
+      children: [headerElement, bodyElement, footerElement].filter(Boolean),
+    }),
+  ]);
+}
+
+Sidebar.displayName = 'Sidebar';
+Sidebar.Item = SidebarItem;
+
+module.exports = Sidebar;