{"version":3,"file":"ToggleSlider.cjs","sources":["../../../../src/components/toggle-switch/ToggleSlider.tsx"],"sourcesContent":["import clsx from \"clsx\";\nimport React, {\n    type FC,\n    Fragment,\n    type MouseEventHandler,\n    useRef,\n    useState,\n} from \"react\";\nimport { useId } from \"../../hooks/useId/useId.js\";\nimport { useSwipeGesture } from \"../../hooks/useSwipeGesture/useSwipeGesture.js\";\nimport type { ToggleChangeHandler, ToggleSliderProps } from \"./types.js\";\nimport { usePillStyles } from \"./usePillStyles.js\";\n\n/**\n * @deprecated bruk heller {@link SegmentedControl}\n */\n\nexport const ToggleSlider: FC<ToggleSliderProps> = ({\n    children,\n    labels,\n    className = \"\",\n    onToggle,\n    defaultValue,\n    hideLegend = false,\n    ...rest\n}) => {\n    const size = (rest as { \"data-size\"?: string })[\"data-size\"];\n\n    const [currentLabel, setCurrentLabel] = useState(defaultValue || labels[0]);\n    const id = useId(\"jkl-toggle-slider\");\n    const legendId = useId(\"jkl-toggle-slider-legend\");\n    const activeRef = useRef<HTMLLabelElement>(null);\n\n    const shouldTransform = currentLabel === labels[1];\n    const pillStyles = usePillStyles(activeRef, shouldTransform, [size]);\n\n    const handleChange: ToggleChangeHandler<HTMLElement> = (_, pressed) => {\n        setCurrentLabel(pressed ? labels[1] : labels[0]);\n        onToggle(pressed ? labels[1] : labels[0]);\n    };\n\n    const handleClick: MouseEventHandler<HTMLInputElement> = (event) => {\n        const { value } = event.currentTarget;\n        setCurrentLabel(value);\n        onToggle(value);\n    };\n\n    const { gestureHandlers } = useSwipeGesture<HTMLDivElement>({\n        onClick: handleClick,\n        onChange: handleChange,\n    });\n    const { onClick, ...swipeHandlers } = gestureHandlers;\n\n    if (process.env.NODE_ENV !== \"production\") {\n        console.error(\n            \"WARNING: ToggleSlider component has been deprecated and will be removed in some future version of the library\",\n        );\n    }\n\n    return (\n        <fieldset\n            {...rest}\n            className={clsx(\"jkl-toggle-slider\", className)}\n            aria-labelledby={legendId}\n            data-testid=\"jkl-toggle-slider\"\n        >\n            <div\n                id={legendId}\n                className={clsx(\"jkl-toggle-slider__legend\", {\n                    \"jkl-toggle-slider__legend--sr-only\": hideLegend,\n                })}\n            >\n                {children}\n            </div>\n            <div className=\"jkl-toggle-slider__inputs\" {...swipeHandlers}>\n                {labels.map((label) => (\n                    <Fragment key={label}>\n                        <input\n                            className=\"jkl-toggle-slider__input\"\n                            type=\"radio\"\n                            value={label}\n                            checked={label === currentLabel}\n                            name={id}\n                            id={`${label}-${id}`}\n                            onClick={onClick}\n                            onChange={() => {}}\n                        />\n                        <label\n                            className={clsx(\"jkl-toggle-slider__label\", {\n                                \"jkl-toggle-slider__label--selected\":\n                                    label === currentLabel,\n                            })}\n                            ref={label === currentLabel ? activeRef : undefined}\n                            htmlFor={`${label}-${id}`}\n                        >\n                            {label}\n                        </label>\n                    </Fragment>\n                ))}\n                <span\n                    className=\"jkl-toggle-slider__pill\"\n                    style={pillStyles}\n                    aria-hidden\n                />\n            </div>\n        </fieldset>\n    );\n};\n"],"names":["children","labels","className","onToggle","defaultValue","hideLegend","rest","size","currentLabel","setCurrentLabel","useState","id","useId","legendId","activeRef","useRef","shouldTransform","pillStyles","usePillStyles","gestureHandlers","useSwipeGesture","onClick","event","value","currentTarget","onChange","_","pressed","swipeHandlers","process","env","NODE_ENV","console","error","jsxs","clsx","jsx","map","label","Fragment","type","checked","name","ref","htmlFor","style"],"mappings":"4UAiBmD,EAC/CA,SAAAA,EACAC,OAAAA,EACAC,UAAAA,EAAY,GACZC,SAAAA,EACAC,aAAAA,EACAC,WAAAA,GAAa,KACVC,MAEH,MAAMC,EAAQD,EAAkC,cAEzCE,EAAcC,GAAmBC,EAAAA,SAASN,GAAgBH,EAAO,IAClEU,EAAKC,EAAAA,MAAM,qBACXC,EAAWD,EAAAA,MAAM,4BACjBE,EAAYC,EAAAA,OAAyB,MAErCC,EAAkBR,IAAiBP,EAAO,GAC1CgB,EAAaC,EAAAA,cAAcJ,EAAWE,EAAiB,CAACT,KAatDY,gBAAAA,GAAoBC,kBAAgC,CACxDC,QAPsDC,IACtD,MAAQC,MAAAA,GAAUD,EAAME,cACxBf,EAAgBc,GAChBpB,EAASoB,IAKTE,SAbmD,CAACC,EAAGC,KACvDlB,EAAgBkB,EAAU1B,EAAO,GAAKA,EAAO,IAC7CE,EAASwB,EAAU1B,EAAO,GAAKA,EAAO,QAalCoB,QAAAA,KAAYO,GAAkBT,EAEtC,MAA6B,eAAzBU,QAAQC,IAAIC,UACZC,QAAQC,MACJ,iHAKJC,EAAAA,KAAC,WAAA,IACO5B,EACJJ,UAAWiC,EAAAA,KAAK,oBAAqBjC,GACrC,kBAAiBW,EACjB,cAAY,oBAEZb,SAAA,CAAAoC,EAAAA,IAAC,MAAA,CACGzB,GAAIE,EACJX,UAAWiC,EAAAA,KAAK,4BAA6B,CACzC,qCAAsC9B,IAGzCL,SAAAA,IAELkC,EAAAA,KAAC,MAAA,CAAIhC,UAAU,+BAAgC0B,EAC1C5B,SAAA,CAAAC,EAAOoC,IAAKC,GACTJ,EAAAA,KAACK,EAAAA,SAAA,CACGvC,SAAA,CAAAoC,EAAAA,IAAC,QAAA,CACGlC,UAAU,2BACVsC,KAAK,QACLjB,MAAOe,EACPG,QAASH,IAAU9B,EACnBkC,KAAM/B,EACNA,GAAI,GAAG2B,KAAS3B,IAChBU,QAAAA,EACAI,SAAU,SAEdW,EAAAA,IAAC,QAAA,CACGlC,UAAWiC,EAAAA,KAAK,2BAA4B,CACxC,qCACIG,IAAU9B,IAElBmC,IAAKL,IAAU9B,EAAeM,OAAY,EAC1C8B,QAAS,GAAGN,KAAS3B,IAEpBX,SAAAsC,MAnBMA,IAuBnBF,EAAAA,IAAC,OAAA,CACGlC,UAAU,0BACV2C,MAAO5B,EACP,eAAW"}