@mantine/core/cjs/components/Switch/SwitchGroup/SwitchGroup.cjs.map

React components library focused on usability, accessibility and developer experience

{"version":3,"file":"SwitchGroup.cjs","names":["genericFactory","useProps","Input","InputsGroupFieldset"],"sources":["../../../../src/components/Switch/SwitchGroup/SwitchGroup.tsx"],"sourcesContent":["import { createContext } from 'react';\nimport { useUncontrolled } from '@mantine/hooks';\nimport { DataAttributes, Factory, genericFactory, MantineSize, useProps } from '../../../core';\nimport { InputsGroupFieldset } from '../../../utils/InputsGroupFieldset';\nimport { Input, InputWrapperProps, InputWrapperStylesNames } from '../../Input';\n\nexport interface SwitchGroupContextValue<Value extends string = string> {\n  value: Value[];\n  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;\n  size: MantineSize | (string & {}) | undefined;\n  isDisabled?: (value: Value) => boolean;\n}\n\nexport const SwitchGroupContext = createContext<SwitchGroupContextValue | null>(null);\n\nexport type SwitchGroupStylesNames = InputWrapperStylesNames;\n\nexport interface SwitchGroupProps<Value extends string = string> extends Omit<\n  InputWrapperProps,\n  'onChange'\n> {\n  /** `Switch` components */\n  children: React.ReactNode;\n\n  /** Controlled component value */\n  value?: Value[];\n\n  /** Default value for uncontrolled component */\n  defaultValue?: Value[];\n\n  /** Called when value changes */\n  onChange?: (value: Value[]) => void;\n\n  /** Props passed down to the `Input.Wrapper` */\n  wrapperProps?: React.ComponentProps<'div'> & DataAttributes;\n\n  /** Controls size of the `Input.Wrapper` @default 'sm' */\n  size?: MantineSize | (string & {});\n\n  /** If set, value cannot be changed */\n  readOnly?: boolean;\n\n  /** `name` attribute of the hidden input for uncontrolled forms */\n  name?: string;\n\n  /** Props passed down to the hidden input for uncontrolled forms */\n  hiddenInputProps?: React.ComponentProps<'input'> & DataAttributes;\n\n  /** Separator for values in the hidden input for uncontrolled forms @default ',' */\n  hiddenInputValuesSeparator?: string;\n\n  /** Maximum number of switches that can be selected. When the limit is reached, unselected switches will be disabled */\n  maxSelectedValues?: number;\n\n  /** Sets `disabled` attribute, prevents interactions */\n  disabled?: boolean;\n}\n\nexport type SwitchGroupFactory = Factory<{\n  props: SwitchGroupProps;\n  ref: HTMLDivElement;\n  stylesNames: SwitchGroupStylesNames;\n  signature: <Value extends string = string>(props: SwitchGroupProps<Value>) => React.JSX.Element;\n}>;\n\nconst defaultProps = {\n  hiddenInputValuesSeparator: ',',\n} satisfies Partial<SwitchGroupProps>;\n\nexport const SwitchGroup = genericFactory<SwitchGroupFactory>(((\n  props: SwitchGroupProps<string>\n) => {\n  const {\n    value,\n    defaultValue,\n    onChange,\n    size,\n    wrapperProps,\n    children,\n    readOnly,\n    name,\n    hiddenInputValuesSeparator,\n    hiddenInputProps,\n    maxSelectedValues,\n    disabled,\n    ...others\n  } = useProps('SwitchGroup', defaultProps, props);\n\n  const [_value, setValue] = useUncontrolled({\n    value,\n    defaultValue,\n    finalValue: [],\n    onChange,\n  });\n\n  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n    const itemValue = event.currentTarget.value;\n\n    if (readOnly) {\n      return;\n    }\n\n    const isCurrentlySelected = _value.includes(itemValue);\n\n    if (!isCurrentlySelected && maxSelectedValues && _value.length >= maxSelectedValues) {\n      return;\n    }\n\n    setValue(\n      isCurrentlySelected ? _value.filter((item) => item !== itemValue) : [..._value, itemValue]\n    );\n  };\n\n  const isDisabled = (switchValue: string) => {\n    if (disabled) {\n      return true;\n    }\n\n    if (!maxSelectedValues) {\n      return false;\n    }\n\n    const isCurrentlySelected = _value.includes(switchValue);\n    const hasReachedLimit = _value.length >= maxSelectedValues;\n    return !isCurrentlySelected && hasReachedLimit;\n  };\n\n  const hiddenInputValue = _value.join(hiddenInputValuesSeparator);\n\n  return (\n    <SwitchGroupContext value={{ value: _value, onChange: handleChange, size, isDisabled }}>\n      <Input.Wrapper\n        size={size}\n        {...wrapperProps}\n        {...others}\n        labelElement=\"div\"\n        __staticSelector=\"SwitchGroup\"\n      >\n        <InputsGroupFieldset role=\"group\">{children}</InputsGroupFieldset>\n        <input type=\"hidden\" name={name} value={hiddenInputValue} {...hiddenInputProps} />\n      </Input.Wrapper>\n    </SwitchGroupContext>\n  );\n}) as any);\n\nSwitchGroup.classes = Input.Wrapper.classes;\nSwitchGroup.displayName = '@mantine/core/SwitchGroup';\n"],"mappings":";;;;;;;;;;AAaA,MAAa,sBAAA,GAAA,MAAA,eAAmE,KAAK;AAoDrF,MAAM,eAAe,EACnB,4BAA4B,KAC7B;AAED,MAAa,cAAcA,gBAAAA,iBACzB,UACG;CACH,MAAM,EACJ,OACA,cACA,UACA,MACA,cACA,UACA,UACA,MACA,4BACA,kBACA,mBACA,UACA,GAAG,WACDC,kBAAAA,SAAS,eAAe,cAAc,MAAM;CAEhD,MAAM,CAAC,QAAQ,aAAA,GAAA,eAAA,iBAA4B;EACzC;EACA;EACA,YAAY,EAAE;EACd;EACD,CAAC;CAEF,MAAM,gBAAgB,UAA+C;EACnE,MAAM,YAAY,MAAM,cAAc;AAEtC,MAAI,SACF;EAGF,MAAM,sBAAsB,OAAO,SAAS,UAAU;AAEtD,MAAI,CAAC,uBAAuB,qBAAqB,OAAO,UAAU,kBAChE;AAGF,WACE,sBAAsB,OAAO,QAAQ,SAAS,SAAS,UAAU,GAAG,CAAC,GAAG,QAAQ,UAAU,CAC3F;;CAGH,MAAM,cAAc,gBAAwB;AAC1C,MAAI,SACF,QAAO;AAGT,MAAI,CAAC,kBACH,QAAO;EAGT,MAAM,sBAAsB,OAAO,SAAS,YAAY;EACxD,MAAM,kBAAkB,OAAO,UAAU;AACzC,SAAO,CAAC,uBAAuB;;CAGjC,MAAM,mBAAmB,OAAO,KAAK,2BAA2B;AAEhE,QACE,iBAAA,GAAA,kBAAA,KAAC,oBAAD;EAAoB,OAAO;GAAE,OAAO;GAAQ,UAAU;GAAc;GAAM;GAAY;YACpF,iBAAA,GAAA,kBAAA,MAACC,cAAAA,MAAM,SAAP;GACQ;GACN,GAAI;GACJ,GAAI;GACJ,cAAa;GACb,kBAAiB;aALnB,CAOE,iBAAA,GAAA,kBAAA,KAACC,4BAAAA,qBAAD;IAAqB,MAAK;IAAS;IAA+B,CAAA,EAClE,iBAAA,GAAA,kBAAA,KAAC,SAAD;IAAO,MAAK;IAAe;IAAM,OAAO;IAAkB,GAAI;IAAoB,CAAA,CACpE;;EACG,CAAA;GAEf;AAEV,YAAY,UAAUD,cAAAA,MAAM,QAAQ;AACpC,YAAY,cAAc"}