How to use @hig/utils - 10 common examples

checked: false,
    disabled: false,
    indeterminate: false,
    name: "checkbox",
    value: "value"
  };

  setIndeterminate = input => {
    if (input) {
      // Workaround for https://github.com/facebook/react/issues/1798
      // eslint-disable-next-line no-param-reassign
      input.indeterminate = this.props.indeterminate;
    }
  };

  id = generateId("checkbox");

  render() {
    const {
      checked,
      disabled,
      indeterminate,
      label,
      name,
      onBlur,
      onChange,
      onClick,
      onFocus,
      required,
      value
    } = this.props;

export default function PanelContainerPresenter(props) {
  const {
    children,
    innerRef,
    maxHeight,
    stylesheet: customStylesheet,
    ...otherProps
  } = props;
  const { className } = otherProps;
  const maxHeightInPixels = maxHeight ? `${maxHeight}px` : undefined;
  const panelContainerClassName = createCustomClassNames(
    className,
    "panel-container"
  );
  const panelContainerInnerClassName = createCustomClassNames(
    className,
    "panel-container-inner"
  );

  return (
    
      {({ resolvedRoles, metadata }) => {
        const themeId = metadata.colorSchemeId;
        const styles = stylesheet(
          {
            transitionStatus: null,
            anchorPoint: null,
            stylesheet: customStylesheet
          },
          resolvedRoles,
          themeId

function Image({ image, name, size, onError, className, resolvedRoles }) {
  const alt = `Avatar image of ${name}`;
  const styles = stylesheet({ size }, resolvedRoles);

  const imageWrapperClassName = createCustomClassNames(
    className,
    "image-wrapper"
  );
  const imageClassName = createCustomClassNames(className, "image");

  return (
    <span>
      <img alt="{alt}" src="{image}">
    </span>
  );
}

const iconClassName = createCustomClassNames(
          otherProps.className,
          "icon"
        );

        const labelClassName = createCustomClassNames(
          otherProps.className,
          "label"
        );

        const closeButtonClassName = createCustomClassNames(
          otherProps.className,
          "close-button"
        );

        const haloClassName = createCustomClassNames(
          otherProps.className,
          "halo"
        );

        const dividerClassName = createCustomClassNames(
          otherProps.className,
          "divider"
        );

        return (
          <li>
            </li>

open,
      stylesheet: customizeStyles,
      title,
      type,
      ...otherProps
    } = this.props;
    const { className } = otherProps;
    const modalOverlayClassName = createCustomClassNames(
      className,
      "modal-overlay"
    );
    const modalWindowClassName = createCustomClassNames(
      className,
      "modal-window"
    );
    const modalBodyClassName = createCustomClassNames(className, "modal-body");
    const modalBodyContentClassName = createCustomClassNames(
      className,
      "modal-body-content"
    );

    /*
     * The "no-noninteractive-element-interactions" rule is disabled for this block.
     * This is due to the modal being is a special case where its containers are to be considered
     * as non-interactive, static content by screen-readers, but must also respond to `click`
     * events. Additionally, even though they respond to `click` events, they're not focusable.
     */
    /*
      eslint-disable
      jsx-a11y/no-noninteractive-element-interactions,
      jsx-a11y/click-events-have-key-events
    */

const buttonClassName = createCustomClassNames(
          otherProps.className,
          "button"
        );

        const iconClassName = createCustomClassNames(
          otherProps.className,
          "icon"
        );

        const labelClassName = createCustomClassNames(
          otherProps.className,
          "label"
        );

        const closeButtonClassName = createCustomClassNames(
          otherProps.className,
          "close-button"
        );

        const haloClassName = createCustomClassNames(
          otherProps.className,
          "halo"
        );

        const dividerClassName = createCustomClassNames(
          otherProps.className,
          "divider"
        );

        return (
          <li></li>

export default function PanelPresenter({
  children,
  onScroll,
  stylesheet: customStylesheet,
  ...otherProps
}) {
  const { className } = otherProps;
  const panelClassName = createCustomClassNames(className, "panel");

  return (
    
      {({ resolvedRoles }) => {
        const styles = stylesheet(
          {
            transitionStatus: null,
            anchorPoint: null,
            stylesheet: customStylesheet
          },
          resolvedRoles
        );

        return (

stylesheet: customizeStyles,
      title,
      type,
      ...otherProps
    } = this.props;
    const { className } = otherProps;
    const modalOverlayClassName = createCustomClassNames(
      className,
      "modal-overlay"
    );
    const modalWindowClassName = createCustomClassNames(
      className,
      "modal-window"
    );
    const modalBodyClassName = createCustomClassNames(className, "modal-body");
    const modalBodyContentClassName = createCustomClassNames(
      className,
      "modal-body-content"
    );

    /*
     * The "no-noninteractive-element-interactions" rule is disabled for this block.
     * This is due to the modal being is a special case where its containers are to be considered
     * as non-interactive, static content by screen-readers, but must also respond to `click`
     * events. Additionally, even though they respond to `click` events, they're not focusable.
     */
    /*
      eslint-disable
      jsx-a11y/no-noninteractive-element-interactions,
      jsx-a11y/click-events-have-key-events
    */

effectiveAlign,
      effectiveOrientation,
      effectiveShowTabDivider
    } = this.state;

    let showTabDivider = effectiveShowTabDivider;
    if (index === activeTabIndex || index === activeTabIndex - 1) {
      showTabDivider = false;
    }
    if (index === hoveredTabIndex || index === hoveredTabIndex - 1) {
      showTabDivider = false;
    }

    const className = cx(
      tabClassName,
      createCustomClassNames(tabsClassName, "tab")
    );

    const payload = {
      ...props,
      key,
      variant,
      className,
      showDivider: showTabDivider,
      align: effectiveAlign,
      orientation: effectiveOrientation,
      active: activeTabIndex === index,
      ...this.createTabEventHandlers(index, { disabled })
    };

    return ;
  };

stylesheet: customStylesheet,
      target,
      title,
      type,
      width,
      ...otherProps
    } = this.props;

    const { className } = otherProps;

    const href = link || undefined;
    const tabIndex = disabled ? "-1" : "0";
    const Wrapper = link ? "a" : "button";
    const wrapperTarget = link ? target : undefined;
    const iconClassName = createCustomClassNames(className, "icon");
    const iconTextClassName = createCustomClassNames(className, "icon-text");

    return (
      
        {({ resolvedRoles, metadata }) => {
          const styles = stylesheet(
            { disabled, hasFocus, hasHover, isPressed, type, width },
            resolvedRoles,
            metadata
          );
          const cssStyles = customStylesheet
            ? customStylesheet(styles, this.props, resolvedRoles, metadata)
            : styles;

          return (