@ui5/webcomponents-react/wrappers/components/VariantItem/index.js

React Wrapper for UI5 Web Components and additional components

'use client';

import { useStylesheet, useSyncRef } from '@ui5/webcomponents-react-base';
import { clsx } from 'clsx';
import { forwardRef, useContext, useEffect } from 'react';
import { VariantManagementContext } from '../../internal/VariantManagementContext.js';
import { ListItemStandard } from '../../webComponents/ListItemStandard/index.js';
import { classNames, styleData } from './VariantItem.module.css.js';
import { jsx as _jsx } from "react/jsx-runtime";
/**
 * The `VariantItem` describes a variant/view of the `VariantManagement` component.
 */
const VariantItem = /*#__PURE__*/forwardRef((props, ref) => {
  const {
    isDefault,
    author,
    favorite,
    global,
    labelReadOnly,
    applyAutomatically,
    applyAutomaticallyText,
    readOnly,
    selected,
    children,
    hideDelete
  } = props;
  useStylesheet(styleData, VariantItem.displayName);
  const {
    selectVariantItem,
    selectedVariant
  } = useContext(VariantManagementContext);
  const [componentRef, consolidatedRef] = useSyncRef(ref);
  useEffect(() => {
    if (selected) {
      selectVariantItem({
        ...props,
        variantItem: consolidatedRef.current
      });
    }
  }, [selected]);

  // ToDo: rename `children` to `text` in next major release (check `ListItemStandard`)
  // inputProps are passed through to input components used in the configuration dialogs
  const {
    manageViewsInputProps: _0,
    saveViewInputProps: _1,
    children: _2,
    ...rest
  } = props;
  return /*#__PURE__*/_jsx(ListItemStandard, {
    ...rest,
    text: children,
    ref: componentRef,
    className: clsx(classNames.variantItem),
    "data-is-default": isDefault,
    "data-author": author,
    "data-favorite": favorite,
    "data-global": global,
    "data-label-read-only": labelReadOnly,
    "data-apply-automatically": applyAutomatically,
    "data-apply-automatically-text": applyAutomaticallyText,
    "data-read-only": readOnly,
    "data-children": children,
    "data-hide-delete": hideDelete,
    selected: selectedVariant?.children === children
  });
});
VariantItem.displayName = 'VariantItem';
export { VariantItem };