@genesislcap/foundation-zero 14.424.1 → 14.426.0

package/dist/react.cjs

@@ -5,7 +5,6 @@
 
 'use strict';
 
-const { provideReactWrapper } = require('@microsoft/fast-react-wrapper');
 const React = require('react');
 const { AccordionItem: AccordionItemWC } = require('./esm/accordion-item/accordion-item.js');
 const { Accordion: AccordionWC } = require('./esm/accordion/accordion.js');
@@ -91,277 +90,771 @@ const { TreeItem: TreeItemWC } = require('./esm/tree-item/tree-item.js');
 const { TreeView: TreeViewWC } = require('./esm/tree-view/tree-view.js');
 const { UrlInput: UrlInputWC } = require('./esm/url-input/url-input.js');
 
-const { wrap } = provideReactWrapper(React);
-
-const Accordion = wrap(AccordionWC);
+function _mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === 'function') ref(value);
+      else if (ref != null) ref.current = value;
+    }
+  };
+}
+
+const Accordion = React.forwardRef(function Accordion(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AccordionWC) ?? '%%prefix%%-card', { ...rest, ref }, children);
+});
 
-const AccordionItem = wrap(AccordionItemWC);
+const AccordionItem = React.forwardRef(function AccordionItem(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AccordionItemWC) ?? '%%prefix%%-card', { ...rest, ref }, children);
+});
 
-const ActionsMenu = wrap(ActionsMenuWC);
+const ActionsMenu = React.forwardRef(function ActionsMenu(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ActionsMenuWC) ?? '%%prefix%%-actions-menu', { ...rest, ref }, children);
+});
 
-const AiIndicator = wrap(AiIndicatorWC);
+const AiIndicator = React.forwardRef(function AiIndicator(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AiIndicatorWC) ?? '%%prefix%%-ai-indicator', { ...rest, ref }, children);
+});
 
-const AiCriteriaSearch = wrap(AiCriteriaSearchWC, {
-  events: {
-    onCriteriaChanged: 'criteria-changed',
-    onValidationErrors: 'validation-errors',
-  },
+const AiCriteriaSearch = React.forwardRef(function AiCriteriaSearch(props, ref) {
+  const { onCriteriaChanged, onValidationErrors, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onCriteriaChangedRef = React.useRef(onCriteriaChanged);
+  _onCriteriaChangedRef.current = onCriteriaChanged;
+  const _onValidationErrorsRef = React.useRef(onValidationErrors);
+  _onValidationErrorsRef.current = onValidationErrors;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onCriteriaChangedFn = (e) => _onCriteriaChangedRef.current?.(e);
+    el.addEventListener('criteria-changed', _onCriteriaChangedFn);
+    const _onValidationErrorsFn = (e) => _onValidationErrorsRef.current?.(e);
+    el.addEventListener('validation-errors', _onValidationErrorsFn);
+    return () => {
+      el.removeEventListener('criteria-changed', _onCriteriaChangedFn);
+      el.removeEventListener('validation-errors', _onValidationErrorsFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(AiCriteriaSearchWC) ?? '%%prefix%%-ai-criteria-search', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const Anchor = wrap(AnchorWC);
+const Anchor = React.forwardRef(function Anchor(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AnchorWC) ?? '%%prefix%%-anchor', { ...rest, ref }, children);
+});
 
-const AnchoredRegion = wrap(AnchoredRegionWC, {
-  events: {
-    onLoaded: 'loaded',
-    onPositionchange: 'positionchange',
-  },
+const AnchoredRegion = React.forwardRef(function AnchoredRegion(props, ref) {
+  const { onLoaded, onPositionchange, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onLoadedRef = React.useRef(onLoaded);
+  _onLoadedRef.current = onLoaded;
+  const _onPositionchangeRef = React.useRef(onPositionchange);
+  _onPositionchangeRef.current = onPositionchange;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onLoadedFn = (e) => _onLoadedRef.current?.(e);
+    el.addEventListener('loaded', _onLoadedFn);
+    const _onPositionchangeFn = (e) => _onPositionchangeRef.current?.(e);
+    el.addEventListener('positionchange', _onPositionchangeFn);
+    return () => {
+      el.removeEventListener('loaded', _onLoadedFn);
+      el.removeEventListener('positionchange', _onPositionchangeFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(AnchoredRegionWC) ?? '%%prefix%%-anchored-region', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const Avatar = wrap(AvatarWC);
+const Avatar = React.forwardRef(function Avatar(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AvatarWC) ?? '%%prefix%%-avatar', { ...rest, ref }, children);
+});
 
-const Badge = wrap(BadgeWC);
+const Badge = React.forwardRef(function Badge(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(BadgeWC) ?? '%%prefix%%-badge', { ...rest, ref }, children);
+});
 
-const Banner = wrap(BannerWC);
+const Banner = React.forwardRef(function Banner(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(BannerWC) ?? '%%prefix%%-banner', { ...rest, ref }, children);
+});
 
-const Breadcrumb = wrap(BreadcrumbWC);
+const Breadcrumb = React.forwardRef(function Breadcrumb(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(BreadcrumbWC) ?? '%%prefix%%-breadcrumb', { ...rest, ref }, children);
+});
 
-const BreadcrumbItem = wrap(BreadcrumbItemWC);
+const BreadcrumbItem = React.forwardRef(function BreadcrumbItem(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(BreadcrumbItemWC) ?? '%%prefix%%-breadcrumb-item', { ...rest, ref }, children);
+});
 
-const Button = wrap(ButtonWC);
+const Button = React.forwardRef(function Button(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ButtonWC) ?? '%%prefix%%-button', { ...rest, ref }, children);
+});
 
-const Calendar = wrap(CalendarWC);
+const Calendar = React.forwardRef(function Calendar(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(CalendarWC) ?? '%%prefix%%-calendar', { ...rest, ref }, children);
+});
 
-const Card = wrap(CardWC);
+const Card = React.forwardRef(function Card(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(CardWC) ?? '%%prefix%%-card', { ...rest, ref }, children);
+});
 
-const CategorizedMultiselect = wrap(CategorizedMultiselectWC, {
-  events: {
-    onSelectionChange: 'selectionChange',
-  },
+const CategorizedMultiselect = React.forwardRef(function CategorizedMultiselect(props, ref) {
+  const { onSelectionChange, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onSelectionChangeRef = React.useRef(onSelectionChange);
+  _onSelectionChangeRef.current = onSelectionChange;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onSelectionChangeFn = (e) => _onSelectionChangeRef.current?.(e);
+    el.addEventListener('selectionChange', _onSelectionChangeFn);
+    return () => {
+      el.removeEventListener('selectionChange', _onSelectionChangeFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(CategorizedMultiselectWC) ?? '%%prefix%%-categorized-multiselect', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const Checkbox = wrap(CheckboxWC);
+const Checkbox = React.forwardRef(function Checkbox(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(CheckboxWC) ?? '%%prefix%%-checkbox', { ...rest, ref }, children);
+});
 
-const Combobox = wrap(ComboboxWC);
+const Combobox = React.forwardRef(function Combobox(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ComboboxWC) ?? '%%prefix%%-combobox', { ...rest, ref }, children);
+});
 
-const ConnectionIndicator = wrap(ConnectionIndicatorWC);
+const ConnectionIndicator = React.forwardRef(function ConnectionIndicator(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ConnectionIndicatorWC) ?? '%%prefix%%-connection-indicator', { ...rest, ref }, children);
+});
 
-const DataGridCell = wrap(DataGridCellWC, {
-  events: {
-    onCellFocused: 'cell-focused',
-  },
+const DataGridCell = React.forwardRef(function DataGridCell(props, ref) {
+  const { onCellFocused, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onCellFocusedRef = React.useRef(onCellFocused);
+  _onCellFocusedRef.current = onCellFocused;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onCellFocusedFn = (e) => _onCellFocusedRef.current?.(e);
+    el.addEventListener('cell-focused', _onCellFocusedFn);
+    return () => {
+      el.removeEventListener('cell-focused', _onCellFocusedFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(DataGridCellWC) ?? '%%prefix%%-data-grid-cell', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const DataGridRow = wrap(DataGridRowWC, {
-  events: {
-    onRowFocused: 'row-focused',
-  },
+const DataGridRow = React.forwardRef(function DataGridRow(props, ref) {
+  const { onRowFocused, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onRowFocusedRef = React.useRef(onRowFocused);
+  _onRowFocusedRef.current = onRowFocused;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onRowFocusedFn = (e) => _onRowFocusedRef.current?.(e);
+    el.addEventListener('row-focused', _onRowFocusedFn);
+    return () => {
+      el.removeEventListener('row-focused', _onRowFocusedFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(DataGridRowWC) ?? '%%prefix%%-data-grid-row', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const DataGrid = wrap(DataGridWC);
+const DataGrid = React.forwardRef(function DataGrid(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(DataGridWC) ?? '%%prefix%%-data-grid', { ...rest, ref }, children);
+});
 
-const DatePicker = wrap(DatePickerWC, {
-  events: {
-    onValueChanged: 'value-changed',
-  },
+const DatePicker = React.forwardRef(function DatePicker(props, ref) {
+  const { onValueChanged, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onValueChangedRef = React.useRef(onValueChanged);
+  _onValueChangedRef.current = onValueChanged;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onValueChangedFn = (e) => _onValueChangedRef.current?.(e);
+    el.addEventListener('value-changed', _onValueChangedFn);
+    return () => {
+      el.removeEventListener('value-changed', _onValueChangedFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(DatePickerWC) ?? '%%prefix%%-date-picker', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const ZeroDesignSystemProvider = wrap(ZeroDesignSystemProviderWC);
+const ZeroDesignSystemProvider = React.forwardRef(function ZeroDesignSystemProvider(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ZeroDesignSystemProviderWC) ?? '%%prefix%%-design-system-provider', { ...rest, ref }, children);
+});
 
-const Dialog = wrap(DialogWC, {
-  events: {
-    onClose: 'close',
-  },
+const Dialog = React.forwardRef(function Dialog(props, ref) {
+  const { onClose, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onCloseRef = React.useRef(onClose);
+  _onCloseRef.current = onClose;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onCloseFn = (e) => _onCloseRef.current?.(e);
+    el.addEventListener('close', _onCloseFn);
+    return () => {
+      el.removeEventListener('close', _onCloseFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(DialogWC) ?? '%%prefix%%-dialog', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const Disclosure = wrap(DisclosureWC);
+const Disclosure = React.forwardRef(function Disclosure(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(DisclosureWC) ?? '%%prefix%%-disclosure', { ...rest, ref }, children);
+});
 
-const Divider = wrap(DividerWC);
+const Divider = React.forwardRef(function Divider(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(DividerWC) ?? '%%prefix%%-divider', { ...rest, ref }, children);
+});
 
-const DropdownMenu = wrap(DropdownMenuWC);
+const DropdownMenu = React.forwardRef(function DropdownMenu(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(DropdownMenuWC) ?? '%%prefix%%-dropdown-menu', { ...rest, ref }, children);
+});
 
-const EnvironmentIndicator = wrap(EnvironmentIndicatorWC);
+const EnvironmentIndicator = React.forwardRef(function EnvironmentIndicator(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(EnvironmentIndicatorWC) ?? '%%prefix%%-environment-indicator', { ...rest, ref }, children);
+});
 
-const ErrorBanner = wrap(ErrorBannerWC);
+const ErrorBanner = React.forwardRef(function ErrorBanner(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ErrorBannerWC) ?? '%%prefix%%-error-banner', { ...rest, ref }, children);
+});
 
-const ErrorBoundary = wrap(ErrorBoundaryWC);
+const ErrorBoundary = React.forwardRef(function ErrorBoundary(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ErrorBoundaryWC) ?? '%%prefix%%-error-boundary', { ...rest, ref }, children);
+});
 
-const ErrorDialog = wrap(ErrorDialogWC);
+const ErrorDialog = React.forwardRef(function ErrorDialog(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ErrorDialogWC) ?? '%%prefix%%-error-dialog', { ...rest, ref }, children);
+});
 
-const FileUpload = wrap(FileUploadWC, {
-  events: {
-    onFileSelected: 'file-selected',
-    onSuccess: 'success',
-    onErrorOut: 'errorOut',
-    onClear: 'clear',
-  },
+const FileUpload = React.forwardRef(function FileUpload(props, ref) {
+  const { onFileSelected, onSuccess, onErrorOut, onClear, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onFileSelectedRef = React.useRef(onFileSelected);
+  _onFileSelectedRef.current = onFileSelected;
+  const _onSuccessRef = React.useRef(onSuccess);
+  _onSuccessRef.current = onSuccess;
+  const _onErrorOutRef = React.useRef(onErrorOut);
+  _onErrorOutRef.current = onErrorOut;
+  const _onClearRef = React.useRef(onClear);
+  _onClearRef.current = onClear;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onFileSelectedFn = (e) => _onFileSelectedRef.current?.(e);
+    el.addEventListener('file-selected', _onFileSelectedFn);
+    const _onSuccessFn = (e) => _onSuccessRef.current?.(e);
+    el.addEventListener('success', _onSuccessFn);
+    const _onErrorOutFn = (e) => _onErrorOutRef.current?.(e);
+    el.addEventListener('errorOut', _onErrorOutFn);
+    const _onClearFn = (e) => _onClearRef.current?.(e);
+    el.addEventListener('clear', _onClearFn);
+    return () => {
+      el.removeEventListener('file-selected', _onFileSelectedFn);
+      el.removeEventListener('success', _onSuccessFn);
+      el.removeEventListener('errorOut', _onErrorOutFn);
+      el.removeEventListener('clear', _onClearFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(FileUploadWC) ?? '%%prefix%%-file-upload', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const Filter = wrap(FilterWC, {
-  events: {
-    onFilterChanged: 'filter-changed',
-    onFilterCleared: 'filter-cleared',
-  },
+const Filter = React.forwardRef(function Filter(props, ref) {
+  const { onFilterChanged, onFilterCleared, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onFilterChangedRef = React.useRef(onFilterChanged);
+  _onFilterChangedRef.current = onFilterChanged;
+  const _onFilterClearedRef = React.useRef(onFilterCleared);
+  _onFilterClearedRef.current = onFilterCleared;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onFilterChangedFn = (e) => _onFilterChangedRef.current?.(e);
+    el.addEventListener('filter-changed', _onFilterChangedFn);
+    const _onFilterClearedFn = (e) => _onFilterClearedRef.current?.(e);
+    el.addEventListener('filter-cleared', _onFilterClearedFn);
+    return () => {
+      el.removeEventListener('filter-changed', _onFilterChangedFn);
+      el.removeEventListener('filter-cleared', _onFilterClearedFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(FilterWC) ?? '%%prefix%%-filter', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const FilterBar = wrap(FilterBarWC);
+const FilterBar = React.forwardRef(function FilterBar(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(FilterBarWC) ?? '%%prefix%%-filter-bar', { ...rest, ref }, children);
+});
 
-const FlexLayout = wrap(FlexLayoutWC);
+const FlexLayout = React.forwardRef(function FlexLayout(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(FlexLayoutWC) ?? '%%prefix%%-flex-layout', { ...rest, ref }, children);
+});
 
-const Flipper = wrap(FlipperWC);
+const Flipper = React.forwardRef(function Flipper(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(FlipperWC) ?? '%%prefix%%-flipper', { ...rest, ref }, children);
+});
 
-const Flyout = wrap(FlyoutWC, {
-  events: {
-    onClosed: 'closed',
-  },
+const Flyout = React.forwardRef(function Flyout(props, ref) {
+  const { onClosed, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onClosedRef = React.useRef(onClosed);
+  _onClosedRef.current = onClosed;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onClosedFn = (e) => _onClosedRef.current?.(e);
+    el.addEventListener('closed', _onClosedFn);
+    return () => {
+      el.removeEventListener('closed', _onClosedFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(FlyoutWC) ?? '%%prefix%%-flyout', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const GridLayout = wrap(GridLayoutWC);
+const GridLayout = React.forwardRef(function GridLayout(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(GridLayoutWC) ?? '%%prefix%%-grid-layout', { ...rest, ref }, children);
+});
 
-const GridLayoutItem = wrap(GridLayoutItemWC);
+const GridLayoutItem = React.forwardRef(function GridLayoutItem(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(GridLayoutItemWC) ?? '%%prefix%%-grid-layout-item', { ...rest, ref }, children);
+});
 
-const HorizontalScroll = wrap(HorizontalScrollWC, {
-  events: {
-    onScrollstart: 'scrollstart',
-    onScrollend: 'scrollend',
-  },
+const HorizontalScroll = React.forwardRef(function HorizontalScroll(props, ref) {
+  const { onScrollstart, onScrollend, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onScrollstartRef = React.useRef(onScrollstart);
+  _onScrollstartRef.current = onScrollstart;
+  const _onScrollendRef = React.useRef(onScrollend);
+  _onScrollendRef.current = onScrollend;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onScrollstartFn = (e) => _onScrollstartRef.current?.(e);
+    el.addEventListener('scrollstart', _onScrollstartFn);
+    const _onScrollendFn = (e) => _onScrollendRef.current?.(e);
+    el.addEventListener('scrollend', _onScrollendFn);
+    return () => {
+      el.removeEventListener('scrollstart', _onScrollstartFn);
+      el.removeEventListener('scrollend', _onScrollendFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(HorizontalScrollWC) ?? '%%prefix%%-horizontal-scroll', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const Icon = wrap(IconWC);
+const Icon = React.forwardRef(function Icon(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(IconWC) ?? '%%prefix%%-icon', { ...rest, ref }, children);
+});
 
-const Listbox = wrap(ListboxWC);
+const Listbox = React.forwardRef(function Listbox(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ListboxWC) ?? '%%prefix%%-listbox', { ...rest, ref }, children);
+});
 
-const ListboxOption = wrap(ListboxOptionWC);
+const ListboxOption = React.forwardRef(function ListboxOption(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ListboxOptionWC) ?? '%%prefix%%-option', { ...rest, ref }, children);
+});
 
-const Menu = wrap(MenuWC);
+const Menu = React.forwardRef(function Menu(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(MenuWC) ?? '%%prefix%%-menu', { ...rest, ref }, children);
+});
 
-const MenuItem = wrap(MenuItemWC, {
-  events: {
-    onOnMenuClick: 'onMenuClick',
-    onExpandedChange: 'expanded-change',
-  },
+const MenuItem = React.forwardRef(function MenuItem(props, ref) {
+  const { onOnMenuClick, onExpandedChange, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onOnMenuClickRef = React.useRef(onOnMenuClick);
+  _onOnMenuClickRef.current = onOnMenuClick;
+  const _onExpandedChangeRef = React.useRef(onExpandedChange);
+  _onExpandedChangeRef.current = onExpandedChange;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onOnMenuClickFn = (e) => _onOnMenuClickRef.current?.(e);
+    el.addEventListener('onMenuClick', _onOnMenuClickFn);
+    const _onExpandedChangeFn = (e) => _onExpandedChangeRef.current?.(e);
+    el.addEventListener('expanded-change', _onExpandedChangeFn);
+    return () => {
+      el.removeEventListener('onMenuClick', _onOnMenuClickFn);
+      el.removeEventListener('expanded-change', _onExpandedChangeFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(MenuItemWC) ?? '%%prefix%%-menu-item', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const Modal = wrap(ModalWC);
+const Modal = React.forwardRef(function Modal(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ModalWC) ?? '%%prefix%%-modal', { ...rest, ref }, children);
+});
 
-const Multiselect = wrap(MultiselectWC, {
-  events: {
-    onSelectionChange: 'selectionChange',
-    onClear: 'clear',
-  },
+const Multiselect = React.forwardRef(function Multiselect(props, ref) {
+  const { onSelectionChange, onClear, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onSelectionChangeRef = React.useRef(onSelectionChange);
+  _onSelectionChangeRef.current = onSelectionChange;
+  const _onClearRef = React.useRef(onClear);
+  _onClearRef.current = onClear;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onSelectionChangeFn = (e) => _onSelectionChangeRef.current?.(e);
+    el.addEventListener('selectionChange', _onSelectionChangeFn);
+    const _onClearFn = (e) => _onClearRef.current?.(e);
+    el.addEventListener('clear', _onClearFn);
+    return () => {
+      el.removeEventListener('selectionChange', _onSelectionChangeFn);
+      el.removeEventListener('clear', _onClearFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(MultiselectWC) ?? '%%prefix%%-multiselect', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const NotificationListener = wrap(NotificationListenerWC);
+const NotificationListener = React.forwardRef(function NotificationListener(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(NotificationListenerWC) ?? '%%prefix%%-notification-listener', { ...rest, ref }, children);
+});
 
-const NumberField = wrap(NumberFieldWC);
+const NumberField = React.forwardRef(function NumberField(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(NumberFieldWC) ?? '%%prefix%%-number-field', { ...rest, ref }, children);
+});
 
-const Optgroup = wrap(OptgroupWC);
+const Optgroup = React.forwardRef(function Optgroup(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(OptgroupWC) ?? '%%prefix%%-optgroup', { ...rest, ref }, children);
+});
 
-const Progress = wrap(ProgressWC);
+const Progress = React.forwardRef(function Progress(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ProgressWC) ?? '%%prefix%%-progress', { ...rest, ref }, children);
+});
 
-const ProgressRing = wrap(ProgressRingWC);
+const ProgressRing = React.forwardRef(function ProgressRing(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ProgressRingWC) ?? '%%prefix%%-progress-ring', { ...rest, ref }, children);
+});
 
-const Radio = wrap(RadioWC);
+const Radio = React.forwardRef(function Radio(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(RadioWC) ?? '%%prefix%%-radio', { ...rest, ref }, children);
+});
 
-const RadioGroup = wrap(RadioGroupWC);
+const RadioGroup = React.forwardRef(function RadioGroup(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(RadioGroupWC) ?? '%%prefix%%-radio-group', { ...rest, ref }, children);
+});
 
-const Scheduler = wrap(SchedulerWC);
+const Scheduler = React.forwardRef(function Scheduler(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SchedulerWC) ?? '%%prefix%%-scheduler', { ...rest, ref }, children);
+});
 
-const SchedulerCronBuilder = wrap(SchedulerCronBuilderWC);
+const SchedulerCronBuilder = React.forwardRef(function SchedulerCronBuilder(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SchedulerCronBuilderWC) ?? '%%prefix%%-scheduler-cron-builder', { ...rest, ref }, children);
+});
 
-const SchedulerTimezone = wrap(SchedulerTimezoneWC);
+const SchedulerTimezone = React.forwardRef(function SchedulerTimezone(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SchedulerTimezoneWC) ?? '%%prefix%%-scheduler-timezone', { ...rest, ref }, children);
+});
 
-const SearchBarCombobox = wrap(SearchBarComboboxWC, {
-  events: {
-    onInputdeleted: 'inputdeleted',
-  },
+const SearchBarCombobox = React.forwardRef(function SearchBarCombobox(props, ref) {
+  const { onInputdeleted, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onInputdeletedRef = React.useRef(onInputdeleted);
+  _onInputdeletedRef.current = onInputdeleted;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onInputdeletedFn = (e) => _onInputdeletedRef.current?.(e);
+    el.addEventListener('inputdeleted', _onInputdeletedFn);
+    return () => {
+      el.removeEventListener('inputdeleted', _onInputdeletedFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(SearchBarComboboxWC) ?? '%%prefix%%-search-bar-combobox', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const SearchBar = wrap(SearchBarWC, {
-  events: {
-    onSelectionChange: 'selectionChange',
-  },
+const SearchBar = React.forwardRef(function SearchBar(props, ref) {
+  const { onSelectionChange, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onSelectionChangeRef = React.useRef(onSelectionChange);
+  _onSelectionChangeRef.current = onSelectionChange;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onSelectionChangeFn = (e) => _onSelectionChangeRef.current?.(e);
+    el.addEventListener('selectionChange', _onSelectionChangeFn);
+    return () => {
+      el.removeEventListener('selectionChange', _onSelectionChangeFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(SearchBarWC) ?? '%%prefix%%-search-bar', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const SectionNavigator = wrap(SectionNavigatorWC, {
-  events: {
-    onSectionNavigatorSetState: 'section-navigator-set-state',
-    onSectionNavigatorSetStates: 'section-navigator-set-states',
-    onSectionNavigatorClearState: 'section-navigator-clear-state',
-    onSectionNavigatorClearAllStates: 'section-navigator-clear-all-states',
-  },
+const SectionNavigator = React.forwardRef(function SectionNavigator(props, ref) {
+  const { onSectionNavigatorSetState, onSectionNavigatorSetStates, onSectionNavigatorClearState, onSectionNavigatorClearAllStates, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onSectionNavigatorSetStateRef = React.useRef(onSectionNavigatorSetState);
+  _onSectionNavigatorSetStateRef.current = onSectionNavigatorSetState;
+  const _onSectionNavigatorSetStatesRef = React.useRef(onSectionNavigatorSetStates);
+  _onSectionNavigatorSetStatesRef.current = onSectionNavigatorSetStates;
+  const _onSectionNavigatorClearStateRef = React.useRef(onSectionNavigatorClearState);
+  _onSectionNavigatorClearStateRef.current = onSectionNavigatorClearState;
+  const _onSectionNavigatorClearAllStatesRef = React.useRef(onSectionNavigatorClearAllStates);
+  _onSectionNavigatorClearAllStatesRef.current = onSectionNavigatorClearAllStates;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onSectionNavigatorSetStateFn = (e) => _onSectionNavigatorSetStateRef.current?.(e);
+    el.addEventListener('section-navigator-set-state', _onSectionNavigatorSetStateFn);
+    const _onSectionNavigatorSetStatesFn = (e) => _onSectionNavigatorSetStatesRef.current?.(e);
+    el.addEventListener('section-navigator-set-states', _onSectionNavigatorSetStatesFn);
+    const _onSectionNavigatorClearStateFn = (e) => _onSectionNavigatorClearStateRef.current?.(e);
+    el.addEventListener('section-navigator-clear-state', _onSectionNavigatorClearStateFn);
+    const _onSectionNavigatorClearAllStatesFn = (e) => _onSectionNavigatorClearAllStatesRef.current?.(e);
+    el.addEventListener('section-navigator-clear-all-states', _onSectionNavigatorClearAllStatesFn);
+    return () => {
+      el.removeEventListener('section-navigator-set-state', _onSectionNavigatorSetStateFn);
+      el.removeEventListener('section-navigator-set-states', _onSectionNavigatorSetStatesFn);
+      el.removeEventListener('section-navigator-clear-state', _onSectionNavigatorClearStateFn);
+      el.removeEventListener('section-navigator-clear-all-states', _onSectionNavigatorClearAllStatesFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(SectionNavigatorWC) ?? '%%prefix%%-section-navigator', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const SegmentedControl = wrap(SegmentedControlWC);
+const SegmentedControl = React.forwardRef(function SegmentedControl(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SegmentedControlWC) ?? '%%prefix%%-segmented-control', { ...rest, ref }, children);
+});
 
-const SegmentedItem = wrap(SegmentedItemWC);
+const SegmentedItem = React.forwardRef(function SegmentedItem(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SegmentedItemWC) ?? '%%prefix%%-segmented-item', { ...rest, ref }, children);
+});
 
-const Select = wrap(SelectWC);
+const Select = React.forwardRef(function Select(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SelectWC) ?? '%%prefix%%-select', { ...rest, ref }, children);
+});
 
-const Skeleton = wrap(SkeletonWC);
+const Skeleton = React.forwardRef(function Skeleton(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SkeletonWC) ?? '%%prefix%%-skeleton', { ...rest, ref }, children);
+});
 
-const Slider = wrap(SliderWC);
+const Slider = React.forwardRef(function Slider(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SliderWC) ?? '%%prefix%%-slider', { ...rest, ref }, children);
+});
 
-const SliderLabel = wrap(SliderLabelWC);
+const SliderLabel = React.forwardRef(function SliderLabel(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SliderLabelWC) ?? '%%prefix%%-slider-label', { ...rest, ref }, children);
+});
 
-const Snackbar = wrap(SnackbarWC, {
-  events: {
-    onAutoDismiss: 'autoDismiss',
-  },
+const Snackbar = React.forwardRef(function Snackbar(props, ref) {
+  const { onAutoDismiss, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onAutoDismissRef = React.useRef(onAutoDismiss);
+  _onAutoDismissRef.current = onAutoDismiss;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onAutoDismissFn = (e) => _onAutoDismissRef.current?.(e);
+    el.addEventListener('autoDismiss', _onAutoDismissFn);
+    return () => {
+      el.removeEventListener('autoDismiss', _onAutoDismissFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(SnackbarWC) ?? '%%prefix%%-snackbar', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const StackingIcons = wrap(StackingIconsWC);
+const StackingIcons = React.forwardRef(function StackingIcons(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(StackingIconsWC) ?? '%%prefix%%-stacking-icons', { ...rest, ref }, children);
+});
 
-const StatusPill = wrap(StatusPillWC);
+const StatusPill = React.forwardRef(function StatusPill(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(StatusPillWC) ?? '%%prefix%%-status-pill', { ...rest, ref }, children);
+});
 
-const Stepper = wrap(StepperWC, {
-  events: {
-    onStepClick: 'step-click',
-    onValidationFailure: 'validation-failure',
-    onNextStep: 'next-step',
-    onValidationSuccess: 'validation-success',
-  },
+const Stepper = React.forwardRef(function Stepper(props, ref) {
+  const { onStepClick, onValidationFailure, onNextStep, onValidationSuccess, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onStepClickRef = React.useRef(onStepClick);
+  _onStepClickRef.current = onStepClick;
+  const _onValidationFailureRef = React.useRef(onValidationFailure);
+  _onValidationFailureRef.current = onValidationFailure;
+  const _onNextStepRef = React.useRef(onNextStep);
+  _onNextStepRef.current = onNextStep;
+  const _onValidationSuccessRef = React.useRef(onValidationSuccess);
+  _onValidationSuccessRef.current = onValidationSuccess;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onStepClickFn = (e) => _onStepClickRef.current?.(e);
+    el.addEventListener('step-click', _onStepClickFn);
+    const _onValidationFailureFn = (e) => _onValidationFailureRef.current?.(e);
+    el.addEventListener('validation-failure', _onValidationFailureFn);
+    const _onNextStepFn = (e) => _onNextStepRef.current?.(e);
+    el.addEventListener('next-step', _onNextStepFn);
+    const _onValidationSuccessFn = (e) => _onValidationSuccessRef.current?.(e);
+    el.addEventListener('validation-success', _onValidationSuccessFn);
+    return () => {
+      el.removeEventListener('step-click', _onStepClickFn);
+      el.removeEventListener('validation-failure', _onValidationFailureFn);
+      el.removeEventListener('next-step', _onNextStepFn);
+      el.removeEventListener('validation-success', _onValidationSuccessFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(StepperWC) ?? '%%prefix%%-stepper', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const StepperTab = wrap(StepperTabWC, {
-  events: {
-    onTabClicked: 'tab-clicked',
-  },
+const StepperTab = React.forwardRef(function StepperTab(props, ref) {
+  const { onTabClicked, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onTabClickedRef = React.useRef(onTabClicked);
+  _onTabClickedRef.current = onTabClicked;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onTabClickedFn = (e) => _onTabClickedRef.current?.(e);
+    el.addEventListener('tab-clicked', _onTabClickedFn);
+    return () => {
+      el.removeEventListener('tab-clicked', _onTabClickedFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(StepperTabWC) ?? '%%prefix%%-stepper-tab', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const StepperTabPanel = wrap(StepperTabPanelWC);
+const StepperTabPanel = React.forwardRef(function StepperTabPanel(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(StepperTabPanelWC) ?? '%%prefix%%-stepper-tab-panel', { ...rest, ref }, children);
+});
 
-const Switch = wrap(SwitchWC);
+const Switch = React.forwardRef(function Switch(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SwitchWC) ?? '%%prefix%%-switch', { ...rest, ref }, children);
+});
 
-const Tab = wrap(TabWC);
+const Tab = React.forwardRef(function Tab(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(TabWC) ?? '%%prefix%%-tab', { ...rest, ref }, children);
+});
 
-const TabPanel = wrap(TabPanelWC);
+const TabPanel = React.forwardRef(function TabPanel(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(TabPanelWC) ?? '%%prefix%%-tab-panel', { ...rest, ref }, children);
+});
 
-const Tabs = wrap(TabsWC);
+const Tabs = React.forwardRef(function Tabs(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(TabsWC) ?? '%%prefix%%-tabs', { ...rest, ref }, children);
+});
 
-const TextArea = wrap(TextAreaWC);
+const TextArea = React.forwardRef(function TextArea(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(TextAreaWC) ?? '%%prefix%%-text-area', { ...rest, ref }, children);
+});
 
-const TextField = wrap(TextFieldWC);
+const TextField = React.forwardRef(function TextField(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(TextFieldWC) ?? '%%prefix%%-text-field', { ...rest, ref }, children);
+});
 
-const Toast = wrap(ToastWC);
+const Toast = React.forwardRef(function Toast(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ToastWC) ?? '%%prefix%%-toast', { ...rest, ref }, children);
+});
 
-const Toolbar = wrap(ToolbarWC);
+const Toolbar = React.forwardRef(function Toolbar(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ToolbarWC) ?? '%%prefix%%-toolbar', { ...rest, ref }, children);
+});
 
-const Tooltip = wrap(TooltipWC, {
-  events: {
-    onDismiss: 'dismiss',
-  },
+const Tooltip = React.forwardRef(function Tooltip(props, ref) {
+  const { onDismiss, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onDismissRef = React.useRef(onDismiss);
+  _onDismissRef.current = onDismiss;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onDismissFn = (e) => _onDismissRef.current?.(e);
+    el.addEventListener('dismiss', _onDismissFn);
+    return () => {
+      el.removeEventListener('dismiss', _onDismissFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(TooltipWC) ?? '%%prefix%%-tooltip', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const TreeItem = wrap(TreeItemWC, {
-  events: {
-    onExpandedChange: 'expanded-change',
-    onSelectedChange: 'selected-change',
-  },
+const TreeItem = React.forwardRef(function TreeItem(props, ref) {
+  const { onExpandedChange, onSelectedChange, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onExpandedChangeRef = React.useRef(onExpandedChange);
+  _onExpandedChangeRef.current = onExpandedChange;
+  const _onSelectedChangeRef = React.useRef(onSelectedChange);
+  _onSelectedChangeRef.current = onSelectedChange;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onExpandedChangeFn = (e) => _onExpandedChangeRef.current?.(e);
+    el.addEventListener('expanded-change', _onExpandedChangeFn);
+    const _onSelectedChangeFn = (e) => _onSelectedChangeRef.current?.(e);
+    el.addEventListener('selected-change', _onSelectedChangeFn);
+    return () => {
+      el.removeEventListener('expanded-change', _onExpandedChangeFn);
+      el.removeEventListener('selected-change', _onSelectedChangeFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(TreeItemWC) ?? '%%prefix%%-tree-item', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
 });
 
-const TreeView = wrap(TreeViewWC);
+const TreeView = React.forwardRef(function TreeView(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(TreeViewWC) ?? '%%prefix%%-tree-view', { ...rest, ref }, children);
+});
 
-const UrlInput = wrap(UrlInputWC);
+const UrlInput = React.forwardRef(function UrlInput(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(UrlInputWC) ?? '%%prefix%%-url-input', { ...rest, ref }, children);
+});
 
 module.exports = {
   Accordion,