@yamada-ui/toggle/dist/chunk-EFPQNQ3D.mjs.map

Yamada UI toggle component

{"version":3,"sources":["../src/toggle-group.tsx"],"sourcesContent":["import type {\n  ComponentArgs,\n  CSSUIObject,\n  CSSUIProps,\n  HTMLUIProps,\n  ThemeProps,\n} from \"@yamada-ui/core\"\nimport type { ForwardedRef, ReactElement, RefAttributes } from \"react\"\nimport { forwardRef, ui } from \"@yamada-ui/core\"\nimport { useControllableState } from \"@yamada-ui/use-controllable-state\"\nimport {\n  createContext,\n  cx,\n  isArray,\n  isUndefined,\n  useUpdateEffect,\n} from \"@yamada-ui/utils\"\nimport { useCallback, useMemo, useRef } from \"react\"\n\ninterface ToggleGroupContext extends ThemeProps<\"Button\"> {\n  controlled: boolean\n  disabled?: boolean\n  readOnly?: boolean\n  value?: (number | string)[] | number | string\n  onChange?: <M extends number | string = string>(value: M | undefined) => void\n}\n\nconst [ToggleGroupProvider, useToggleGroup] = createContext<ToggleGroupContext>(\n  {\n    name: \"ToggleGroupContext\",\n    strict: false,\n  },\n)\n\nexport { useToggleGroup }\n\ninterface ToggleGroupOptions<\n  Y extends (number | string)[] | number | string = string,\n> {\n  /**\n   * The initial value of the toggle button group.\n   */\n  defaultValue?: Y extends any[] ? Y : undefined | Y\n  /**\n   * The CSS `flex-direction` property.\n   *\n   * @deprecated Use `flexDirection` instead.\n   */\n  direction?: CSSUIProps[\"flexDirection\"]\n  /**\n   * If `true`, all wrapped toggle button will be disabled.\n   *\n   * @default false\n   */\n  disabled?: boolean\n  /**\n   * If `true`, all wrapped toggle button will be disabled.\n   *\n   * @default false\n   *\n   * @deprecated Use `disabled` instead.\n   */\n  isDisabled?: boolean\n  /**\n   * If `true`, all wrapped toggle button will be readonly.\n   *\n   * @default false\n   *\n   * @deprecated Use `readOnly` instead.\n   */\n  isReadOnly?: boolean\n  /**\n   * If `true`, all wrapped toggle button will be readonly.\n   *\n   * @default false\n   */\n  readOnly?: boolean\n  /**\n   * The value of the toggle button group.\n   */\n  value?: Y extends any[] ? Y : undefined | Y\n  /**\n   * The callback fired when any children toggle button is selected or unselected.\n   */\n  onChange?: (value: Y extends any[] ? Y : undefined | Y) => void\n}\n\n/**\n * `ToggleGroup` is a set of two-state buttons that can be toggled on or off.\n *\n * @see Docs https://yamada-ui.com/components/forms/toggle\n */\nexport interface ToggleGroupProps<\n  Y extends (number | string)[] | number | string = string,\n> extends Omit<HTMLUIProps, \"defaultValue\" | \"direction\" | \"onChange\">,\n    ThemeProps<\"Toggle\">,\n    ToggleGroupOptions<Y> {}\n\nexport const ToggleGroup = forwardRef(\n  <Y extends (number | string)[] | number | string = string>(\n    {\n      className,\n      size,\n      variant,\n      defaultValue,\n      direction,\n      isDisabled,\n      disabled = isDisabled,\n      flexDirection = direction,\n      isReadOnly,\n      readOnly = isReadOnly,\n      value: valueProp,\n      onChange: onChangeProp,\n      ...rest\n    }: ToggleGroupProps<Y>,\n    ref: ForwardedRef<HTMLDivElement>,\n  ) => {\n    type Value = Y extends any[] ? Y : undefined | Y\n\n    const [value, setValue] = useControllableState<Value>({\n      defaultValue,\n      value: valueProp,\n      onChange: onChangeProp,\n    })\n    const controlledRef = useRef<boolean>(!isUndefined(value))\n\n    const onChange = useCallback(\n      <M extends number | string = Y extends any[] ? Y[number] : Y>(\n        value: M | undefined,\n      ) => {\n        if (isUndefined(value)) return\n\n        setValue((prev) => {\n          if (isArray(prev)) {\n            const isIncluded = prev.includes(value)\n\n            if (isIncluded) {\n              return prev.filter((prevValue) => prevValue !== value) as Value\n            } else {\n              return [...prev, value] as Value\n            }\n          } else {\n            if (value === (prev as number | string | undefined)) {\n              return undefined as Value\n            } else {\n              return value as unknown as Value\n            }\n          }\n        })\n      },\n      [setValue],\n    )\n\n    const css: CSSUIObject = {\n      display: \"inline-flex\",\n      flexDirection,\n      gap: \"0.5rem\",\n    }\n\n    const values: ToggleGroupContext = useMemo(\n      () => ({\n        size,\n        variant,\n        controlled: controlledRef.current,\n        disabled,\n        readOnly,\n        value,\n        onChange,\n      }),\n      [value, size, variant, disabled, readOnly, onChange],\n    )\n\n    useUpdateEffect(() => {\n      if (isUndefined(value)) return\n\n      controlledRef.current = true\n    }, [valueProp])\n\n    return (\n      <ToggleGroupProvider value={values}>\n        <ui.div\n          ref={ref}\n          className={cx(\"ui-toggle-group\", className)}\n          role=\"group\"\n          __css={css}\n          {...rest}\n        />\n      </ToggleGroupProvider>\n    )\n  },\n) as {\n  <Y extends (number | string)[] | number | string = string>(\n    props: RefAttributes<HTMLDivElement> & ToggleGroupProps<Y>,\n  ): ReactElement\n} & ComponentArgs\n\nToggleGroup.displayName = \"ToggleGroup\"\nToggleGroup.__ui__ = \"ToggleGroup\"\n"],"mappings":";;;AAQA,SAAS,YAAY,UAAU;AAC/B,SAAS,4BAA4B;AACrC;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AACP,SAAS,aAAa,SAAS,cAAc;AAmKrC;AAzJR,IAAM,CAAC,qBAAqB,cAAc,IAAI;AAAA,EAC5C;AAAA,IACE,MAAM;AAAA,IACN,QAAQ;AAAA,EACV;AACF;AAkEO,IAAM,cAAc;AAAA,EACzB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX,gBAAgB;AAAA,IAChB;AAAA,IACA,WAAW;AAAA,IACX,OAAO;AAAA,IACP,UAAU;AAAA,IACV,GAAG;AAAA,EACL,GACA,QACG;AAGH,UAAM,CAAC,OAAO,QAAQ,IAAI,qBAA4B;AAAA,MACpD;AAAA,MACA,OAAO;AAAA,MACP,UAAU;AAAA,IACZ,CAAC;AACD,UAAM,gBAAgB,OAAgB,CAAC,YAAY,KAAK,CAAC;AAEzD,UAAM,WAAW;AAAA,MACf,CACEA,WACG;AACH,YAAI,YAAYA,MAAK,EAAG;AAExB,iBAAS,CAAC,SAAS;AACjB,cAAI,QAAQ,IAAI,GAAG;AACjB,kBAAM,aAAa,KAAK,SAASA,MAAK;AAEtC,gBAAI,YAAY;AACd,qBAAO,KAAK,OAAO,CAAC,cAAc,cAAcA,MAAK;AAAA,YACvD,OAAO;AACL,qBAAO,CAAC,GAAG,MAAMA,MAAK;AAAA,YACxB;AAAA,UACF,OAAO;AACL,gBAAIA,WAAW,MAAsC;AACnD,qBAAO;AAAA,YACT,OAAO;AACL,qBAAOA;AAAA,YACT;AAAA,UACF;AAAA,QACF,CAAC;AAAA,MACH;AAAA,MACA,CAAC,QAAQ;AAAA,IACX;AAEA,UAAM,MAAmB;AAAA,MACvB,SAAS;AAAA,MACT;AAAA,MACA,KAAK;AAAA,IACP;AAEA,UAAM,SAA6B;AAAA,MACjC,OAAO;AAAA,QACL;AAAA,QACA;AAAA,QACA,YAAY,cAAc;AAAA,QAC1B;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MACF;AAAA,MACA,CAAC,OAAO,MAAM,SAAS,UAAU,UAAU,QAAQ;AAAA,IACrD;AAEA,oBAAgB,MAAM;AACpB,UAAI,YAAY,KAAK,EAAG;AAExB,oBAAc,UAAU;AAAA,IAC1B,GAAG,CAAC,SAAS,CAAC;AAEd,WACE,oBAAC,uBAAoB,OAAO,QAC1B;AAAA,MAAC,GAAG;AAAA,MAAH;AAAA,QACC;AAAA,QACA,WAAW,GAAG,mBAAmB,SAAS;AAAA,QAC1C,MAAK;AAAA,QACL,OAAO;AAAA,QACN,GAAG;AAAA;AAAA,IACN,GACF;AAAA,EAEJ;AACF;AAMA,YAAY,cAAc;AAC1B,YAAY,SAAS;","names":["value"]}