How to use the @leafygreen-ui/lib.createDataProp function in @leafygreen-ui/lib

export const Size = {
  Default: 'default',
  Small: 'small',
  XSmall: 'xsmall',
} as const;

export type Size = typeof Size[keyof typeof Size];

export const Variant = {
  Default: 'default',
  Dark: 'dark',
} as const;

export type Variant = typeof Variant[keyof typeof Variant];

const toggleInput = createDataProp('toggle-input');
const toggleGroove = createDataProp('toggle-groove');

const transitionInMS = 150;
const focusRing = 3;

const inputStyle = css`
  margin: 0;
  position: absolute;
  left: 100%;
  top: 100%;
  pointer-events: none;
  opacity: 0;
`;

// We use a div for the focus state rather than a pseudo-element
// because said pseudo-element would need to be on the label element

Default: 'default',
  Small: 'small',
  XSmall: 'xsmall',
} as const;

export type Size = typeof Size[keyof typeof Size];

export const Variant = {
  Default: 'default',
  Dark: 'dark',
} as const;

export type Variant = typeof Variant[keyof typeof Variant];

const toggleInput = createDataProp('toggle-input');
const toggleGroove = createDataProp('toggle-groove');

const transitionInMS = 150;
const focusRing = 3;

const inputStyle = css`
  margin: 0;
  position: absolute;
  left: 100%;
  top: 100%;
  pointer-events: none;
  opacity: 0;
`;

// We use a div for the focus state rather than a pseudo-element
// because said pseudo-element would need to be on the label element
// which can't use the contained input's focus pseudo-class.

import * as React from 'react';
import PropTypes from 'prop-types';
import { createDataProp } from '@leafygreen-ui/lib';

export const menuGroup = createDataProp('menu-group-section');

interface MenuGroupProps {
  /**
   * Content that will appear inside of MenuGroup component.
   */
  children: React.ReactNode;

  /**
   * className that will be applied to root MenuGroup element.
   */
  className?: string;
}

/**
 * # MenuGroup
 *

import React from 'react';
import PropTypes from 'prop-types';
import { createDataProp } from '@leafygreen-ui/lib';
import { css, cx } from '@leafygreen-ui/emotion';
import { uiColors } from '@leafygreen-ui/palette';
import Size from './Size';

const radioBoxInput = createDataProp('radio-box-input');

export const radioBoxSizes: { [K in Size]: string } = {
  [Size.Default]: css`
    width: 139px;
  `,

  [Size.Compact]: css`
    padding-right: 4px;
    padding-left: 4px;
  `,

  [Size.Full]: css`
    flex: 1;
  `,
};

import React from 'react';
import PropTypes from 'prop-types';
import { css } from '@leafygreen-ui/emotion';
import { uiColors } from '@leafygreen-ui/palette';
import { createDataProp } from '@leafygreen-ui/lib';
import Icon from '@leafygreen-ui/icon';
import { Variant } from './MongoSelect';

const focusRing = createDataProp('focus-ring');

const containerStyle = css`
  position: relative;
  z-index: 0;
  height: 30px;
  margin: 0px 15px 12px 15px;
`;

const inputStyle = css`
  height: 30px;
  padding: 0px 24px 0px 12px;
  width: 100%;
  font-size: 14px;
  border: 1px solid ${uiColors.gray.base};
  border-radius: 5px;
  position: relative;

import React from 'react';
import PropTypes from 'prop-types';
import { HTMLElementProps, createDataProp } from '@leafygreen-ui/lib';
import { css, cx } from '@leafygreen-ui/emotion';
import { uiColors } from '@leafygreen-ui/palette';

const menuItemContainer = createDataProp('menu-item-container');

const indentation = 20;

const containerStyle = css`
  min-height: 42px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-left: ${indentation}px;
  text-decoration: none;
  cursor: pointer;
  text-decoration: none;
  position: relative;
  transition: background-color 150ms ease-in-out;
  border: none;
  margin: unset;

import * as React from 'react';
import PropTypes from 'prop-types';
import { createDataProp } from '@leafygreen-ui/lib';

export const menuGroupDataProp = createDataProp('menu-group-section');

interface MenuGroupProps {
  /**
   * Content that will appear inside of MenuGroup component.
   */
  children: React.ReactNode;

  /**
   * className that will be applied to root MenuGroup element.
   */
  className?: string;
}

/**
 * # MenuGroup
 *

import React, { useState } from 'react';
import PropTypes from 'prop-types';
import Button from '@leafygreen-ui/button';
import Icon from '@leafygreen-ui/icon';
import {
  Menu,
  MenuItem,
  MenuSeparator,
  FocusableMenuItem,
} from '@leafygreen-ui/menu';
import { createDataProp } from '@leafygreen-ui/lib';
import { uiColors } from '@leafygreen-ui/palette';
import { css, cx } from '@leafygreen-ui/emotion';

const iconRef = createDataProp('icon-ref');

const buttonReset = css`
  appearance: none;
  background: none;
  border: 0px;
  position: relative;
  padding: 0px;

  &:hover:before {
    transform: scale(1);
  }

  &:active {
    outline: none;
    color: ${uiColors.gray.dark2};

import PropTypes from 'prop-types';
import { createDataProp } from '@leafygreen-ui/lib';
import { css, cx } from '@leafygreen-ui/emotion';
import { colors } from '@leafygreen-ui/theme';
import {
  spritesheetLight,
  spritesheetDark,
  disabledLight,
  disabledLightChecked,
  disabledDark,
  disabledDarkChecked,
  indeterminateLight,
  indeterminateDark,
} from './img';

const checkboxWrapper = createDataProp('checkbox-wrapper');

const height = 20;
const width = 600;

export const Variant = {
  Default: 'default',
  Light: 'light',
} as const;

export type Variant = typeof Variant[keyof typeof Variant];

const wrapperStyle = css`
  transition: 300ms opacity ease-in-out;
  height: ${height}px;
  width: ${height}px;
  display: inline-block;

import React, { RefObject, useRef } from 'react';
import IconButton from '@leafygreen-ui/icon-button';
import Icon, { glyphs } from '@leafygreen-ui/icon';
import { css, cx } from '@leafygreen-ui/emotion';
import { uiColors } from '@leafygreen-ui/palette';
import { HTMLElementProps, createDataProp } from '@leafygreen-ui/lib';

import {
  menuItemContainerStyle,
  activeMenuItemContainerStyle,
  disabledMenuItemContainerStyle,
  linkStyle,
  disabledTextStyle,
} from './styles';

const subMenuContainer = createDataProp('sub-menu-container');

const liStyle = css`
  position: relative;
  overflow: hidden;
`;

const subMenuStyle = css`
  flex-direction: row;
  min-height: 56px;
  border-bottom: 1px solid ${uiColors.gray.light2};
  background-color: ${uiColors.gray.light3};
  align-items: center;
`;

const subMenuOpenStyle = css`
  background-color: ${uiColors.white};