@mantine/core/cjs/components/Chip/ChipGroup/ChipGroup.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"ChipGroup.cjs","names":["genericFactory","useProps"],"sources":["../../../../src/components/Chip/ChipGroup/ChipGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { Factory, genericFactory, useProps } from '../../../core';\n\nexport interface ChipGroupProps<Multiple extends boolean = false, Value extends string = string> {\n  /** If set, multiple values can be selected */\n  multiple?: Multiple;\n\n  /** Controlled component value */\n  value?: Multiple extends true ? Value[] : Value | null;\n\n  /** Uncontrolled component initial value */\n  defaultValue?: Multiple extends true ? Value[] : Value | null;\n\n  /** Called when value changes. If `multiple` prop is set, called with an array of selected values. If not, called with a string value of selected chip. */\n  onChange?: (value: Multiple extends true ? Value[] : Value) => void;\n\n  /** `Chip` components and any other elements */\n  children?: React.ReactNode;\n}\n\nexport type ChipGroupFactory = Factory<{\n  props: ChipGroupProps;\n  signature: <Multiple extends boolean = false, Value extends string = string>(\n    props: ChipGroupProps<Multiple, Value>\n  ) => React.JSX.Element;\n}>;\n\nexport const ChipGroup = genericFactory<ChipGroupFactory>((props) => {\n  const { value, defaultValue, onChange, multiple, children } = useProps('ChipGroup', null, props);\n\n  const [_value, setValue] = useUncontrolled<string | null | string[]>({\n    value,\n    defaultValue,\n    finalValue: multiple ? ([] as string[]) : null,\n    onChange: onChange as any,\n  });\n\n  const isChipSelected = (val: string) =>\n    Array.isArray(_value) ? _value.includes(val) : val === _value;\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const val = event.currentTarget.value;\n    if (Array.isArray(_value)) {\n      setValue(_value.includes(val) ? _value.filter((v) => v !== val) : [..._value, val]);\n    } else {\n      setValue(val);\n    }\n  };\n\n  return (\n    <ChipGroupContext value={{ isChipSelected, onChange: handleChange, multiple }}>\n      {children}\n    </ChipGroupContext>\n  );\n});\n\nChipGroup.displayName = '@mantine/core/ChipGroup';\n\nexport interface ChipGroupContextValue<Value extends string = string> {\n  isChipSelected: (value: Value) => boolean;\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  multiple: boolean | undefined;\n}\n\nexport const ChipGroupContext = createContext<ChipGroupContextValue | null>(null);\n"],"mappings":";;;;;;;;AA4BA,MAAa,YAAYA,gBAAAA,gBAAkC,UAAU;CACnE,MAAM,EAAE,OAAO,cAAc,UAAU,UAAU,aAAaC,kBAAAA,SAAS,aAAa,MAAM,MAAM;CAEhG,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,iBAAsD;EACnE;EACA;EACA,YAAY,WAAY,EAAE,GAAgB;EAChC;EACX,CAAC;CAEF,MAAM,kBAAkB,QACtB,MAAM,QAAQ,OAAO,GAAG,OAAO,SAAS,IAAI,GAAG,QAAQ;CAEzD,MAAM,gBAAgB,UAA+C;EACnE,MAAM,MAAM,MAAM,cAAc;AAChC,MAAI,MAAM,QAAQ,OAAO,CACvB,UAAS,OAAO,SAAS,IAAI,GAAG,OAAO,QAAQ,MAAM,MAAM,IAAI,GAAG,CAAC,GAAG,QAAQ,IAAI,CAAC;MAEnF,UAAS,IAAI;;AAIjB,QACE,iBAAA,GAAA,kBAAA,KAAC,kBAAD;EAAkB,OAAO;GAAE;GAAgB,UAAU;GAAc;GAAU;EAC1E;EACgB,CAAA;EAErB;AAEF,UAAU,cAAc;AAQxB,MAAa,oBAAA,GAAA,MAAA,eAA+D,KAAK"}