{"version":3,"file":"Segment.mjs","sources":["../../../../src/components/Segment/Segment.tsx"],"sourcesContent":["import { cx } from '@emotion/css';\nimport { isObject } from 'lodash';\nimport { HTMLProps } from 'react';\nimport * as React from 'react';\n\nimport { SelectableValue } from '@grafana/data';\n\nimport { useStyles2 } from '../../themes';\nimport { InlineLabel } from '../Forms/InlineLabel';\n\nimport { SegmentSelect } from './SegmentSelect';\nimport { getSegmentStyles } from './styles';\nimport { SegmentProps } from './types';\nimport { useExpandableLabel } from './useExpandableLabel';\n\nexport interface SegmentSyncProps<T> extends SegmentProps, Omit<HTMLProps<HTMLDivElement>, 'value' | 'onChange'> {\n  value?: T | SelectableValue<T>;\n  onChange: (item: SelectableValue<T>) => void;\n  options: Array<SelectableValue<T>>;\n  inputMinWidth?: number;\n}\n\nexport function Segment<T>({\n  options,\n  value,\n  onChange,\n  Component,\n  className,\n  allowCustomValue,\n  allowEmptyValue,\n  placeholder,\n  disabled,\n  inputMinWidth,\n  inputPlaceholder,\n  onExpandedChange,\n  autofocus = false,\n  ...rest\n}: React.PropsWithChildren<SegmentSyncProps<T>>) {\n  const [Label, labelWidth, expanded, setExpanded] = useExpandableLabel(autofocus, onExpandedChange);\n  const width = inputMinWidth ? Math.max(inputMinWidth, labelWidth) : labelWidth;\n  const styles = useStyles2(getSegmentStyles);\n\n  if (!expanded) {\n    const label = isObject(value) ? value.label : value;\n    const labelAsString = label != null ? String(label) : undefined;\n\n    return (\n      <Label\n        disabled={disabled}\n        Component={\n          Component || (\n            <InlineLabel\n              className={cx(\n                styles.segment,\n                {\n                  [styles.queryPlaceholder]: placeholder !== undefined && !value,\n                  [styles.disabled]: disabled,\n                },\n                className\n              )}\n            >\n              {labelAsString || placeholder}\n            </InlineLabel>\n          )\n        }\n      />\n    );\n  }\n\n  return (\n    <SegmentSelect\n      {...rest}\n      value={value && !isObject(value) ? { value } : value}\n      placeholder={inputPlaceholder}\n      options={options}\n      width={width}\n      onClickOutside={() => setExpanded(false)}\n      allowCustomValue={allowCustomValue}\n      allowEmptyValue={allowEmptyValue}\n      onChange={(item) => {\n        setExpanded(false);\n        onChange(item);\n      }}\n    />\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;AAsBO,SAAS,OAAW,CAAA;AAAA,EACzB,OAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,gBAAA;AAAA,EACA,eAAA;AAAA,EACA,WAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,gBAAA;AAAA,EACA,gBAAA;AAAA,EACA,SAAY,GAAA,KAAA;AAAA,EACZ,GAAG;AACL,CAAiD,EAAA;AAC/C,EAAM,MAAA,CAAC,OAAO,UAAY,EAAA,QAAA,EAAU,WAAW,CAAI,GAAA,kBAAA,CAAmB,WAAW,gBAAgB,CAAA;AACjG,EAAA,MAAM,QAAQ,aAAgB,GAAA,IAAA,CAAK,GAAI,CAAA,aAAA,EAAe,UAAU,CAAI,GAAA,UAAA;AACpE,EAAM,MAAA,MAAA,GAAS,WAAW,gBAAgB,CAAA;AAE1C,EAAA,IAAI,CAAC,QAAU,EAAA;AACb,IAAA,MAAM,KAAQ,GAAA,QAAA,CAAS,KAAK,CAAA,GAAI,MAAM,KAAQ,GAAA,KAAA;AAC9C,IAAA,MAAM,aAAgB,GAAA,KAAA,IAAS,IAAO,GAAA,MAAA,CAAO,KAAK,CAAI,GAAA,KAAA,CAAA;AAEtD,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,WACE,SACE,oBAAA,GAAA;AAAA,UAAC,WAAA;AAAA,UAAA;AAAA,YACC,SAAW,EAAA,EAAA;AAAA,cACT,MAAO,CAAA,OAAA;AAAA,cACP;AAAA,gBACE,CAAC,MAAO,CAAA,gBAAgB,GAAG,WAAA,KAAgB,UAAa,CAAC,KAAA;AAAA,gBACzD,CAAC,MAAO,CAAA,QAAQ,GAAG;AAAA,eACrB;AAAA,cACA;AAAA,aACF;AAAA,YAEC,QAAiB,EAAA,aAAA,IAAA;AAAA;AAAA;AACpB;AAAA,KAGN;AAAA;AAIJ,EACE,uBAAA,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACE,GAAG,IAAA;AAAA,MACJ,KAAA,EAAO,SAAS,CAAC,QAAA,CAAS,KAAK,CAAI,GAAA,EAAE,OAAU,GAAA,KAAA;AAAA,MAC/C,WAAa,EAAA,gBAAA;AAAA,MACb,OAAA;AAAA,MACA,KAAA;AAAA,MACA,cAAA,EAAgB,MAAM,WAAA,CAAY,KAAK,CAAA;AAAA,MACvC,gBAAA;AAAA,MACA,eAAA;AAAA,MACA,QAAA,EAAU,CAAC,IAAS,KAAA;AAClB,QAAA,WAAA,CAAY,KAAK,CAAA;AACjB,QAAA,QAAA,CAAS,IAAI,CAAA;AAAA;AACf;AAAA,GACF;AAEJ;;;;"}