@frontify/fondue 12.0.0-beta.291 → 12.0.0-beta.293

package/dist/components/Checkbox/Checkbox.es.js

@@ -110,7 +110,7 @@ const we = (e) => e === "Checked" || e === "Mixed", O = "tw-bg-box-selected-stro
         "data-test-id": `${c}-icon-box`,
         "aria-hidden": "true",
         className: o([
-          "tw-leading-3 tw-p-2 tw-relative tw-flex tw-items-center tw-justify-center tw-rounded tw-shrink-0 tw-flex-none",
+          "tw-leading-3 tw-relative tw-flex tw-items-center tw-justify-center tw-rounded tw-shrink-0 tw-flex-none",
           me[k],
           s ? J : Q
         ])

package/dist/components/Checkbox/Checkbox.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.es.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconMinus } from '@foundation/Icon/Generated';\nimport { InputLabel, InputLabelTooltipProps } from '@components/InputLabel/InputLabel';\nimport React, {\n    ForwardRefRenderFunction,\n    HTMLAttributes,\n    ReactNode,\n    forwardRef,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\n\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { IconSize } from '@foundation/Icon';\nimport { merge } from '@utilities/merge';\nimport { mergeProps } from '@react-aria/utils';\nimport { useCheckbox } from '@react-aria/checkbox';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useToggleState } from '@react-stately/toggle';\n\nexport enum CheckboxState {\n    Checked = 'Checked',\n    Unchecked = 'Unchecked',\n    Mixed = 'Mixed',\n}\n\nexport enum CheckboxEmphasis {\n    Default = 'Default',\n    Weak = 'Weak',\n    Strong = 'Strong',\n}\n\nexport enum CheckboxSize {\n    Default = 'Default',\n    Large = 'Large',\n    XLarge = 'XLarge',\n}\n\nexport type CheckboxProps = {\n    id?: string;\n    state?: CheckboxState;\n    emphasis?: CheckboxEmphasis;\n    size?: CheckboxSize;\n    disabled?: boolean;\n    required?: boolean;\n    value?: string;\n    onChange?: (isChecked: boolean) => void;\n    label?: string;\n    hideLabel?: boolean;\n    tooltip?: InputLabelTooltipProps;\n    helperText?: string;\n    'aria-label'?: string;\n    groupInputProps?: HTMLAttributes<HTMLElement>;\n    'data-test-id'?: string;\n};\n\nconst isCheckedOrMixed = (checked: CheckboxState): boolean => {\n    return checked === CheckboxState.Checked || checked === CheckboxState.Mixed;\n};\n\nconst emphasisDefaultClasses =\n    'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover';\n\nconst emphasisCheckedClassesMap: Record<CheckboxEmphasis, string> = {\n    [CheckboxEmphasis.Weak]:\n        'tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover',\n    [CheckboxEmphasis.Default]: emphasisDefaultClasses,\n    [CheckboxEmphasis.Strong]: emphasisDefaultClasses,\n};\n\nconst sizeClassesMap: Record<CheckboxSize, string> = {\n    [CheckboxSize.Default]: 'tw-h-4 tw-w-4',\n    [CheckboxSize.Large]: 'tw-h-5 tw-w-5',\n    [CheckboxSize.XLarge]: 'tw-h-8 tw-w-8',\n};\n\nconst CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, CheckboxProps> = (\n    {\n        id: propId,\n        emphasis = CheckboxEmphasis.Default,\n        size = CheckboxSize.Default,\n        disabled,\n        required,\n        label,\n        hideLabel,\n        tooltip,\n        helperText,\n        'aria-label': ariaLabel = 'Checkbox',\n        value,\n        groupInputProps,\n        onChange,\n        state = CheckboxState.Unchecked,\n        'data-test-id': dataTestId = 'checkbox',\n    },\n    ref,\n) => {\n    const id = useMemoizedId(propId);\n    const inputRef = useForwardedRef<HTMLInputElement | null>(ref);\n    const { focusProps } = useFocusRing();\n    const toggleState = useToggleState({\n        onChange: disabled ? undefined : onChange,\n        isSelected: state === CheckboxState.Checked,\n    });\n    const [showFocus, setShowFocus] = useState<Nullable<boolean>>();\n    const [listeningForKeyboardEvents, setListeningForKeyboardEvents] = useState<Nullable<boolean>>();\n    const labelContainer = useRef<HTMLSpanElement>(null);\n    const helperTextContainer = useRef<HTMLSpanElement>(null);\n    const [isLabelOverflowing, setIsLabelOverflowing] = useState(false);\n    const [isHelperTextOverflowing, setIsHelperTextOverflowing] = useState(false);\n\n    const tabFocusListener = (event: KeyboardEvent) => {\n        if (event.key === 'Tab') {\n            setShowFocus(true);\n        }\n    };\n\n    const blurListener = () => {\n        setShowFocus(false);\n    };\n\n    useEffect(() => {\n        if (!listeningForKeyboardEvents) {\n            inputRef?.current?.removeEventListener('keyup', tabFocusListener);\n            inputRef?.current?.addEventListener('keyup', tabFocusListener);\n            inputRef?.current?.removeEventListener('blur', blurListener);\n            inputRef?.current?.addEventListener('blur', blurListener);\n\n            setListeningForKeyboardEvents(true);\n        }\n    }, [listeningForKeyboardEvents, inputRef]);\n\n    const { inputProps } = useCheckbox(\n        {\n            isDisabled: disabled,\n            isRequired: required,\n            isIndeterminate: state === CheckboxState.Mixed,\n            'aria-label': ariaLabel,\n            value,\n        },\n        toggleState,\n        inputRef,\n    );\n\n    const stateMap: Record<CheckboxState, ReactNode> = {\n        [CheckboxState.Checked]: (\n            <IconCheckMark size={size === CheckboxSize.XLarge ? IconSize.Size24 : IconSize.Size16} />\n        ),\n        [CheckboxState.Mixed]: <IconMinus />,\n        [CheckboxState.Unchecked]: null,\n    };\n\n    const checkedOrMixed = isCheckedOrMixed(state);\n\n    const disabledClasses = merge([\n        'tw-bg-box-disabled tw-pointer-events-none tw-text-box-disabled-inverse tw-border-line-strong',\n        checkedOrMixed && 'tw-text-box-disabled-inverse tw-border-line-strong',\n    ]);\n\n    const enabledClasses = checkedOrMixed\n        ? emphasisCheckedClassesMap[emphasis]\n        : merge([\n              'tw-bg-base hover:tw-bg-box-neutral',\n              emphasis === CheckboxEmphasis.Strong\n                  ? 'tw-border-2 tw-border-box-selected-strong'\n                  : 'tw-border tw-border-line-xx-strong',\n          ]);\n\n    const checkOverflowing = useCallback(() => {\n        if (labelContainer.current) {\n            setIsLabelOverflowing(labelContainer.current?.scrollWidth > labelContainer.current?.clientWidth);\n        }\n\n        if (helperTextContainer.current) {\n            setIsHelperTextOverflowing(\n                helperTextContainer.current?.scrollWidth > helperTextContainer.current?.clientWidth,\n            );\n        }\n    }, [labelContainer, helperTextContainer]);\n\n    useEffect(() => {\n        if ((!label && !helperText) || hideLabel) {\n            return;\n        }\n        checkOverflowing();\n\n        window.removeEventListener('resize', checkOverflowing);\n        window.addEventListener('resize', checkOverflowing);\n\n        return () => {\n            window.removeEventListener('resize', checkOverflowing);\n        };\n    }, [label, helperText, hideLabel, checkOverflowing]);\n\n    return (\n        <div className=\"tw-gap-1 tw-transition-colors tw-w-full\" data-test-id={dataTestId}>\n            <div className={merge(['tw-inline-flex tw-flex-row tw-rounded tw-w-full', showFocus ? FOCUS_STYLE : ''])}>\n                <InputLabel\n                    disabled={disabled}\n                    clickable\n                    htmlFor={id}\n                    tooltip={tooltip}\n                    required={required}\n                    bold={checkedOrMixed}\n                >\n                    <span className=\"tw-flex tw-items-center tw-whitespace-nowrap\">\n                        <span className=\"tw-inline-flex tw-mr-1.5\">\n                            <input\n                                {...mergeProps(groupInputProps || inputProps, focusProps)}\n                                id={id}\n                                ref={inputRef}\n                                className=\"tw-sr-only\"\n                                data-test-id={`${dataTestId}-input`}\n                                aria-label={ariaLabel}\n                                role=\"checkbox\"\n                                aria-checked={state === CheckboxState.Checked}\n                                required={required}\n                            />\n                            <span\n                                data-test-id={`${dataTestId}-icon-box`}\n                                aria-hidden=\"true\"\n                                className={merge([\n                                    'tw-leading-3 tw-p-2 tw-relative tw-flex tw-items-center tw-justify-center tw-rounded tw-shrink-0 tw-flex-none',\n                                    sizeClassesMap[size],\n                                    disabled ? disabledClasses : enabledClasses,\n                                ])}\n                            >\n                                {stateMap[state]}\n                            </span>\n                        </span>\n                        <span className=\"tw-inline-flex tw-flex-col tw-min-w-0\">\n                            {label && !hideLabel && (\n                                <span\n                                    ref={labelContainer}\n                                    data-test-id={`${dataTestId}-label`}\n                                    className={merge([\n                                        'tw-text-ellipsis tw-overflow-hidden',\n                                        'tw-text-xs tw-select-none hover:tw-cursor-pointer hover:tw-text-black dark:hover:tw-text-white group-hover:tw-text-black dark:group-hover:tw-text-white',\n                                        checkedOrMixed && 'tw-font-medium',\n                                    ])}\n                                    title={isLabelOverflowing ? label : undefined}\n                                >\n                                    {label}\n                                </span>\n                            )}\n                            {helperText && !hideLabel && (\n                                <span\n                                    ref={helperTextContainer}\n                                    data-test-id={`${dataTestId}-helper-text`}\n                                    className={merge([\n                                        'tw-text-ellipsis tw-overflow-hidden',\n                                        'tw-font-sans tw-text-xs tw-font-normal',\n                                        disabled ? 'text-disabled' : 'tw-text-text-weak',\n                                    ])}\n                                    title={isHelperTextOverflowing ? helperText : undefined}\n                                >\n                                    {helperText}\n                                </span>\n                            )}\n                        </span>\n                    </span>\n                </InputLabel>\n            </div>\n        </div>\n    );\n};\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(CheckboxComponent);\nCheckbox.displayName = 'FondueCheckbox';\n"],"names":["CheckboxState","CheckboxEmphasis","CheckboxSize","isCheckedOrMixed","checked","emphasisDefaultClasses","emphasisCheckedClassesMap","sizeClassesMap","CheckboxComponent","propId","emphasis","size","disabled","required","label","hideLabel","tooltip","helperText","ariaLabel","value","groupInputProps","onChange","state","dataTestId","ref","id","useMemoizedId","inputRef","useForwardedRef","focusProps","useFocusRing","toggleState","useToggleState","showFocus","setShowFocus","useState","listeningForKeyboardEvents","setListeningForKeyboardEvents","labelContainer","useRef","helperTextContainer","isLabelOverflowing","setIsLabelOverflowing","isHelperTextOverflowing","setIsHelperTextOverflowing","tabFocusListener","event","blurListener","useEffect","_a","_b","_c","_d","inputProps","useCheckbox","stateMap","React","IconCheckMark","IconSize","IconMinus","checkedOrMixed","disabledClasses","merge","enabledClasses","checkOverflowing","useCallback","FOCUS_STYLE","InputLabel","mergeProps","Checkbox","forwardRef"],"mappings":"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"}
+{"version":3,"file":"Checkbox.es.js","sources":["../../../src/components/Checkbox/Checkbox.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { IconCheckMark, IconMinus } from '@foundation/Icon/Generated';\nimport { InputLabel, InputLabelTooltipProps } from '@components/InputLabel/InputLabel';\nimport React, {\n    ForwardRefRenderFunction,\n    HTMLAttributes,\n    ReactNode,\n    forwardRef,\n    useCallback,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\n\nimport { FOCUS_STYLE } from '@utilities/focusStyle';\nimport { IconSize } from '@foundation/Icon';\nimport { merge } from '@utilities/merge';\nimport { mergeProps } from '@react-aria/utils';\nimport { useCheckbox } from '@react-aria/checkbox';\nimport { useFocusRing } from '@react-aria/focus';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\nimport { useMemoizedId } from '@hooks/useMemoizedId';\nimport { useToggleState } from '@react-stately/toggle';\n\nexport enum CheckboxState {\n    Checked = 'Checked',\n    Unchecked = 'Unchecked',\n    Mixed = 'Mixed',\n}\n\nexport enum CheckboxEmphasis {\n    Default = 'Default',\n    Weak = 'Weak',\n    Strong = 'Strong',\n}\n\nexport enum CheckboxSize {\n    Default = 'Default',\n    Large = 'Large',\n    XLarge = 'XLarge',\n}\n\nexport type CheckboxProps = {\n    id?: string;\n    state?: CheckboxState;\n    emphasis?: CheckboxEmphasis;\n    size?: CheckboxSize;\n    disabled?: boolean;\n    required?: boolean;\n    value?: string;\n    onChange?: (isChecked: boolean) => void;\n    label?: string;\n    hideLabel?: boolean;\n    tooltip?: InputLabelTooltipProps;\n    helperText?: string;\n    'aria-label'?: string;\n    groupInputProps?: HTMLAttributes<HTMLElement>;\n    'data-test-id'?: string;\n};\n\nconst isCheckedOrMixed = (checked: CheckboxState): boolean => {\n    return checked === CheckboxState.Checked || checked === CheckboxState.Mixed;\n};\n\nconst emphasisDefaultClasses =\n    'tw-bg-box-selected-strong tw-text-box-selected-strong-inverse hover:tw-bg-box-selected-strong-hover';\n\nconst emphasisCheckedClassesMap: Record<CheckboxEmphasis, string> = {\n    [CheckboxEmphasis.Weak]:\n        'tw-bg-box-neutral-strong tw-text-box-neutral-strong-inverse hover:tw-bg-box-neutral-strong-hover',\n    [CheckboxEmphasis.Default]: emphasisDefaultClasses,\n    [CheckboxEmphasis.Strong]: emphasisDefaultClasses,\n};\n\nconst sizeClassesMap: Record<CheckboxSize, string> = {\n    [CheckboxSize.Default]: 'tw-h-4 tw-w-4',\n    [CheckboxSize.Large]: 'tw-h-5 tw-w-5',\n    [CheckboxSize.XLarge]: 'tw-h-8 tw-w-8',\n};\n\nconst CheckboxComponent: ForwardRefRenderFunction<HTMLInputElement, CheckboxProps> = (\n    {\n        id: propId,\n        emphasis = CheckboxEmphasis.Default,\n        size = CheckboxSize.Default,\n        disabled,\n        required,\n        label,\n        hideLabel,\n        tooltip,\n        helperText,\n        'aria-label': ariaLabel = 'Checkbox',\n        value,\n        groupInputProps,\n        onChange,\n        state = CheckboxState.Unchecked,\n        'data-test-id': dataTestId = 'checkbox',\n    },\n    ref,\n) => {\n    const id = useMemoizedId(propId);\n    const inputRef = useForwardedRef<HTMLInputElement | null>(ref);\n    const { focusProps } = useFocusRing();\n    const toggleState = useToggleState({\n        onChange: disabled ? undefined : onChange,\n        isSelected: state === CheckboxState.Checked,\n    });\n    const [showFocus, setShowFocus] = useState<Nullable<boolean>>();\n    const [listeningForKeyboardEvents, setListeningForKeyboardEvents] = useState<Nullable<boolean>>();\n    const labelContainer = useRef<HTMLSpanElement>(null);\n    const helperTextContainer = useRef<HTMLSpanElement>(null);\n    const [isLabelOverflowing, setIsLabelOverflowing] = useState(false);\n    const [isHelperTextOverflowing, setIsHelperTextOverflowing] = useState(false);\n\n    const tabFocusListener = (event: KeyboardEvent) => {\n        if (event.key === 'Tab') {\n            setShowFocus(true);\n        }\n    };\n\n    const blurListener = () => {\n        setShowFocus(false);\n    };\n\n    useEffect(() => {\n        if (!listeningForKeyboardEvents) {\n            inputRef?.current?.removeEventListener('keyup', tabFocusListener);\n            inputRef?.current?.addEventListener('keyup', tabFocusListener);\n            inputRef?.current?.removeEventListener('blur', blurListener);\n            inputRef?.current?.addEventListener('blur', blurListener);\n\n            setListeningForKeyboardEvents(true);\n        }\n    }, [listeningForKeyboardEvents, inputRef]);\n\n    const { inputProps } = useCheckbox(\n        {\n            isDisabled: disabled,\n            isRequired: required,\n            isIndeterminate: state === CheckboxState.Mixed,\n            'aria-label': ariaLabel,\n            value,\n        },\n        toggleState,\n        inputRef,\n    );\n\n    const stateMap: Record<CheckboxState, ReactNode> = {\n        [CheckboxState.Checked]: (\n            <IconCheckMark size={size === CheckboxSize.XLarge ? IconSize.Size24 : IconSize.Size16} />\n        ),\n        [CheckboxState.Mixed]: <IconMinus />,\n        [CheckboxState.Unchecked]: null,\n    };\n\n    const checkedOrMixed = isCheckedOrMixed(state);\n\n    const disabledClasses = merge([\n        'tw-bg-box-disabled tw-pointer-events-none tw-text-box-disabled-inverse tw-border-line-strong',\n        checkedOrMixed && 'tw-text-box-disabled-inverse tw-border-line-strong',\n    ]);\n\n    const enabledClasses = checkedOrMixed\n        ? emphasisCheckedClassesMap[emphasis]\n        : merge([\n              'tw-bg-base hover:tw-bg-box-neutral',\n              emphasis === CheckboxEmphasis.Strong\n                  ? 'tw-border-2 tw-border-box-selected-strong'\n                  : 'tw-border tw-border-line-xx-strong',\n          ]);\n\n    const checkOverflowing = useCallback(() => {\n        if (labelContainer.current) {\n            setIsLabelOverflowing(labelContainer.current?.scrollWidth > labelContainer.current?.clientWidth);\n        }\n\n        if (helperTextContainer.current) {\n            setIsHelperTextOverflowing(\n                helperTextContainer.current?.scrollWidth > helperTextContainer.current?.clientWidth,\n            );\n        }\n    }, [labelContainer, helperTextContainer]);\n\n    useEffect(() => {\n        if ((!label && !helperText) || hideLabel) {\n            return;\n        }\n        checkOverflowing();\n\n        window.removeEventListener('resize', checkOverflowing);\n        window.addEventListener('resize', checkOverflowing);\n\n        return () => {\n            window.removeEventListener('resize', checkOverflowing);\n        };\n    }, [label, helperText, hideLabel, checkOverflowing]);\n\n    return (\n        <div className=\"tw-gap-1 tw-transition-colors tw-w-full\" data-test-id={dataTestId}>\n            <div className={merge(['tw-inline-flex tw-flex-row tw-rounded tw-w-full', showFocus ? FOCUS_STYLE : ''])}>\n                <InputLabel\n                    disabled={disabled}\n                    clickable\n                    htmlFor={id}\n                    tooltip={tooltip}\n                    required={required}\n                    bold={checkedOrMixed}\n                >\n                    <span className=\"tw-flex tw-items-center tw-whitespace-nowrap\">\n                        <span className=\"tw-inline-flex tw-mr-1.5\">\n                            <input\n                                {...mergeProps(groupInputProps || inputProps, focusProps)}\n                                id={id}\n                                ref={inputRef}\n                                className=\"tw-sr-only\"\n                                data-test-id={`${dataTestId}-input`}\n                                aria-label={ariaLabel}\n                                role=\"checkbox\"\n                                aria-checked={state === CheckboxState.Checked}\n                                required={required}\n                            />\n                            <span\n                                data-test-id={`${dataTestId}-icon-box`}\n                                aria-hidden=\"true\"\n                                className={merge([\n                                    'tw-leading-3 tw-relative tw-flex tw-items-center tw-justify-center tw-rounded tw-shrink-0 tw-flex-none',\n                                    sizeClassesMap[size],\n                                    disabled ? disabledClasses : enabledClasses,\n                                ])}\n                            >\n                                {stateMap[state]}\n                            </span>\n                        </span>\n                        <span className=\"tw-inline-flex tw-flex-col tw-min-w-0\">\n                            {label && !hideLabel && (\n                                <span\n                                    ref={labelContainer}\n                                    data-test-id={`${dataTestId}-label`}\n                                    className={merge([\n                                        'tw-text-ellipsis tw-overflow-hidden',\n                                        'tw-text-xs tw-select-none hover:tw-cursor-pointer hover:tw-text-black dark:hover:tw-text-white group-hover:tw-text-black dark:group-hover:tw-text-white',\n                                        checkedOrMixed && 'tw-font-medium',\n                                    ])}\n                                    title={isLabelOverflowing ? label : undefined}\n                                >\n                                    {label}\n                                </span>\n                            )}\n                            {helperText && !hideLabel && (\n                                <span\n                                    ref={helperTextContainer}\n                                    data-test-id={`${dataTestId}-helper-text`}\n                                    className={merge([\n                                        'tw-text-ellipsis tw-overflow-hidden',\n                                        'tw-font-sans tw-text-xs tw-font-normal',\n                                        disabled ? 'text-disabled' : 'tw-text-text-weak',\n                                    ])}\n                                    title={isHelperTextOverflowing ? helperText : undefined}\n                                >\n                                    {helperText}\n                                </span>\n                            )}\n                        </span>\n                    </span>\n                </InputLabel>\n            </div>\n        </div>\n    );\n};\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(CheckboxComponent);\nCheckbox.displayName = 'FondueCheckbox';\n"],"names":["CheckboxState","CheckboxEmphasis","CheckboxSize","isCheckedOrMixed","checked","emphasisDefaultClasses","emphasisCheckedClassesMap","sizeClassesMap","CheckboxComponent","propId","emphasis","size","disabled","required","label","hideLabel","tooltip","helperText","ariaLabel","value","groupInputProps","onChange","state","dataTestId","ref","id","useMemoizedId","inputRef","useForwardedRef","focusProps","useFocusRing","toggleState","useToggleState","showFocus","setShowFocus","useState","listeningForKeyboardEvents","setListeningForKeyboardEvents","labelContainer","useRef","helperTextContainer","isLabelOverflowing","setIsLabelOverflowing","isHelperTextOverflowing","setIsHelperTextOverflowing","tabFocusListener","event","blurListener","useEffect","_a","_b","_c","_d","inputProps","useCheckbox","stateMap","React","IconCheckMark","IconSize","IconMinus","checkedOrMixed","disabledClasses","merge","enabledClasses","checkOverflowing","useCallback","FOCUS_STYLE","InputLabel","mergeProps","Checkbox","forwardRef"],"mappings":"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"}

package/dist/components/Tree/TreeItem/DragHandle.es.js

@@ -11,8 +11,8 @@ const d = i(
       ref: o,
       className: m([
         n,
-        "tw-p-1 first:tw-ml-2 tw-text-text tw-opacity-0 group-hover:tw-opacity-100 group-focus-within:tw-opacity-100 tw-rounded-sm hover:tw-cursor-grab",
-        e && "tw-opacity-100 tw-text-white",
+        "tw-p-1 first:tw-ml-2 group-hover:tw-opacity-100 group-focus-within:tw-opacity-100 tw-rounded-sm hover:tw-cursor-grab",
+        e ? "tw-opacity-100 tw-text-white" : "tw-opacity-0 tw-text-text",
         r
       ]),
       "data-test-id": "fondue-tree-item-drag-handle"

package/dist/components/Tree/TreeItem/DragHandle.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"DragHandle.es.js","sources":["../../../../src/components/Tree/TreeItem/DragHandle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef } from 'react';\n\nimport { IconGrabHandle12 } from '@foundation/Icon';\n\nimport { merge } from '@utilities/merge';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\n\nexport type DragHandleProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {\n    active?: boolean;\n};\n\nexport const DragHandle = forwardRef(\n    ({ active, className, ...props }: DragHandleProps, ref: React.ForwardedRef<HTMLButtonElement>) => {\n        return (\n            <button\n                aria-label=\"Draggable item\"\n                {...props}\n                ref={ref}\n                className={merge([\n                    FOCUS_VISIBLE_STYLE,\n                    'tw-p-1 first:tw-ml-2 tw-text-text tw-opacity-0 group-hover:tw-opacity-100 group-focus-within:tw-opacity-100 tw-rounded-sm hover:tw-cursor-grab',\n                    active && 'tw-opacity-100 tw-text-white',\n                    className,\n                ])}\n                data-test-id=\"fondue-tree-item-drag-handle\"\n            >\n                <IconGrabHandle12 />\n            </button>\n        );\n    },\n);\n\nDragHandle.displayName = 'FondueDragHandle';\n"],"names":["DragHandle","forwardRef","active","className","props","ref","React","merge","FOCUS_VISIBLE_STYLE","IconGrabHandle12"],"mappings":";;;;AAaO,MAAMA,IAAaC;AAAA,EACtB,CAAC,EAAE,QAAAC,GAAQ,WAAAC,GAAW,GAAGC,EAAA,GAA0BC,MAE3C,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAW;AAAA,MACV,GAAGF;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAM;AAAA,QACbC;AAAA,QACA;AAAA,QACAN,KAAU;AAAA,QACVC;AAAA,MAAA,CACH;AAAA,MACD,gBAAa;AAAA,IAAA;AAAA,oCAEZM,GAAiB,IAAA;AAAA,EAAA;AAIlC;AAEAT,EAAW,cAAc;"}
+{"version":3,"file":"DragHandle.es.js","sources":["../../../../src/components/Tree/TreeItem/DragHandle.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ButtonHTMLAttributes, DetailedHTMLProps, forwardRef } from 'react';\n\nimport { IconGrabHandle12 } from '@foundation/Icon';\n\nimport { merge } from '@utilities/merge';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\n\nexport type DragHandleProps = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> & {\n    active?: boolean;\n};\n\nexport const DragHandle = forwardRef(\n    ({ active, className, ...props }: DragHandleProps, ref: React.ForwardedRef<HTMLButtonElement>) => {\n        return (\n            <button\n                aria-label=\"Draggable item\"\n                {...props}\n                ref={ref}\n                className={merge([\n                    FOCUS_VISIBLE_STYLE,\n                    'tw-p-1 first:tw-ml-2 group-hover:tw-opacity-100 group-focus-within:tw-opacity-100 tw-rounded-sm hover:tw-cursor-grab',\n                    active ? 'tw-opacity-100 tw-text-white' : 'tw-opacity-0 tw-text-text',\n                    className,\n                ])}\n                data-test-id=\"fondue-tree-item-drag-handle\"\n            >\n                <IconGrabHandle12 />\n            </button>\n        );\n    },\n);\n\nDragHandle.displayName = 'FondueDragHandle';\n"],"names":["DragHandle","forwardRef","active","className","props","ref","React","merge","FOCUS_VISIBLE_STYLE","IconGrabHandle12"],"mappings":";;;;AAaO,MAAMA,IAAaC;AAAA,EACtB,CAAC,EAAE,QAAAC,GAAQ,WAAAC,GAAW,GAAGC,EAAA,GAA0BC,MAE3C,gBAAAC,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,cAAW;AAAA,MACV,GAAGF;AAAA,MACJ,KAAAC;AAAA,MACA,WAAWE,EAAM;AAAA,QACbC;AAAA,QACA;AAAA,QACAN,IAAS,iCAAiC;AAAA,QAC1CC;AAAA,MAAA,CACH;AAAA,MACD,gBAAa;AAAA,IAAA;AAAA,oCAEZM,GAAiB,IAAA;AAAA,EAAA;AAIlC;AAEAT,EAAW,cAAc;"}