@grafana/ui/dist/esm/components/UnitPicker/UnitPicker.mjs

Grafana Components Library

import { jsx } from 'react/jsx-runtime';
import { memo } from 'react';
import { getValueFormats } from '@grafana/data';
import { selectors } from '@grafana/e2e-selectors';
import { t } from '@grafana/i18n';
import { Cascader } from '../Cascader/Cascader.mjs';

"use strict";
function formatCreateLabel(input) {
  return `Custom unit: ${input}`;
}
const UnitPicker = memo(({ onChange, value, width, id }) => {
  let current = void 0;
  const unitGroups = getValueFormats();
  const groupOptions = unitGroups.map((group) => {
    const options = group.submenu.map((unit) => {
      const sel = {
        label: unit.text,
        value: unit.value
      };
      if (unit.value === value) {
        current = sel;
      }
      return sel;
    });
    return {
      label: group.text,
      value: group.text,
      items: options
    };
  });
  if (value && !current) {
    current = { value, label: value };
  }
  return /* @__PURE__ */ jsx(
    Cascader,
    {
      id,
      width,
      initialValue: current && current.label,
      allowCustomValue: true,
      changeOnSelect: false,
      formatCreateLabel,
      options: groupOptions,
      placeholder: t("grafana-ui.unit-picker.placeholder", "Choose"),
      isClearable: true,
      onSelect: onChange,
      "data-testid": selectors.components.UnitPicker.container
    }
  );
});
UnitPicker.displayName = "UnitPicker";

export { UnitPicker };
//# sourceMappingURL=UnitPicker.mjs.map