@frontify/fondue 13.2.0 → 13.3.0

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

@@ -1 +1 @@
-{"version":3,"file":"EditableText.es.js","sources":["../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    type ChangeEvent,\n    type FocusEvent,\n    type FocusEventHandler,\n    type KeyboardEvent,\n    type KeyboardEventHandler,\n    type ReactElement,\n    cloneElement,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\n\nimport { EditableTextHelper } from '@components/EditableText/lib/helper';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\nexport enum EditableMode {\n    INPUT = 'INPUT',\n    LABEL = 'LABEL',\n}\n\ninterface InputStyling {\n    fontSize: string;\n    lineHeight: string;\n    letterSpacing: string;\n    minWidth: string;\n    fontWeight: string;\n}\n\n/**\n * isSlimInputField: removes padding\n * mode: display as Input or Label first\n * enableDoubleClick: Should the input be triggered by a double click or single click\n * additionalValues: additional information to be passed via onClick Event\n * removeBoxPadding: Removes the Padding (tw-p-2) around the input Box\n */\ninterface EditableOptionProps {\n    isSlimInputField?: boolean;\n    mode?: EditableMode;\n    enableDoubleClick?: boolean;\n    additionalValues?: string;\n    removeBoxPadding?: boolean;\n}\n\n/**\n * Add Children with badges or icons\n * onEditableSave callback to get updated Value\n * onAdditionalValueSave callback with more information (ex. ID)\n * onModeChange callback when state changes\n * options to specify styling and additional behaviours\n */\nexport interface EditableTextProps {\n    children?: ReactElement;\n    onAdditionalValueSave?: (additionalValue: string, value: string) => void;\n    onEditableSave?: (value: string) => void;\n    onModeChange?: (editableState?: EditableMode) => void;\n    options?: EditableOptionProps;\n    /** @deprecated Temporary solution for text with ellipisis in Tree Component */\n    isOverflowing?: boolean;\n    'data-test-id'?: string;\n}\n\n/**\n * Component to switch between Label and Input state. Wraps the Children\n * with a Button, to allow for accessibility and copies styles to input field\n *\n * Events:\n * - onEditableSave         // When changing from input to label state\n * - onModeChange           // Indicates which state is active\n * - onAdditionalValueSave  // Similar to editable Save with additional Values provided\n *\n * Options properties:\n * - mode:                   enum EditableMode  // {INPUT = 'INPUT',LABEL = 'LABEL'}\n * - enableDoubleClick:      boolean            // should the input be triggered by a double click or single click\n * - isSlimInputField:       boolean            // removes y padding\n * - additionalValues?:      string             // additional Values like ID\n *\n */\nexport const EditableText = ({\n    onEditableSave,\n    onModeChange,\n    onAdditionalValueSave,\n    children,\n    options,\n    isOverflowing = false,\n    'data-test-id': dataTestId = 'editable-node-container',\n}: EditableTextProps) => {\n    // Read initial text strings from children\n    const childrenLabel = EditableTextHelper.getLabel(children);\n\n    // use text strings from children in the input field\n    const [inputValue, setInputValue] = useState(childrenLabel);\n    const [editableState, setEditableState] = useState<EditableMode>(EditableMode.LABEL);\n    const [inputStyling, setInputStyling] = useState<InputStyling>();\n\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => setInputValue(event.target.value);\n\n    const handleSwitchToLabel = (event: KeyboardEvent | FocusEvent) => {\n        setEditableState(EditableMode.LABEL);\n\n        if (onModeChange) {\n            onModeChange(EditableMode.LABEL);\n        }\n        if (options?.additionalValues && onAdditionalValueSave) {\n            onAdditionalValueSave(options.additionalValues, (event.target as HTMLTextAreaElement).value);\n        }\n        if (onEditableSave) {\n            onEditableSave((event.target as HTMLTextAreaElement).value);\n        }\n    };\n\n    const handleSwitchToInput = (childrenText: string) => () => {\n        setInputValue(childrenText);\n        setEditableState(EditableMode.INPUT);\n        if (onModeChange) {\n            onModeChange(EditableMode.INPUT);\n        }\n    };\n\n    const handleKeyDown: KeyboardEventHandler = (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            handleSwitchToLabel(event);\n        }\n    };\n    const handleBlur: FocusEventHandler = (event: FocusEvent<HTMLTextAreaElement>) => handleSwitchToLabel(event);\n\n    // Set initial state of component if provided in the mode\n    useEffect(() => setEditableState(options?.mode ?? EditableMode.LABEL), [options?.mode]);\n\n    const clickBehaviour = options?.enableDoubleClick\n        ? {\n              onDoubleClick: handleSwitchToInput(childrenLabel),\n              onKeyPress: (event: KeyboardEvent) => event.key === 'Enter' && handleSwitchToInput(childrenLabel)(),\n          }\n        : {\n              onClick: handleSwitchToInput(childrenLabel),\n          };\n\n    // Update Input Style and select input field if visible\n    useEffect(() => {\n        if (childRef.current) {\n            setInputStyling(EditableTextHelper.copyStyles(childRef.current));\n        }\n\n        if (editableState === EditableMode.INPUT) {\n            inputRef.current?.select();\n        }\n    }, [editableState, inputRef, children]);\n\n    const childRef = useRef();\n\n    // Clone Child and add ref to Children\n    const ChildrenWithRef =\n        children &&\n        // eslint-disable-next-line @eslint-react/no-clone-element, react-hooks/refs\n        cloneElement(children, {\n            ref: childRef,\n        });\n\n    return (\n        <div\n            data-test-id={dataTestId}\n            className={merge(['tw-relative tw-h-full', options?.removeBoxPadding === true ? '' : 'tw-p-2'])}\n        >\n            {editableState === EditableMode.INPUT ? (\n                <div\n                    className={merge([\n                        'tw-flex tw-items-center',\n                        options?.isSlimInputField === true\n                            ? '-tw-translate-x-[0.315rem] -tw-translate-y-[0.07rem]'\n                            : '-tw-translate-x-[0.81rem] -tw-translate-y-[0.56rem]',\n                    ])}\n                >\n                    <div\n                        data-test-id=\"editable-input\"\n                        className={merge(['tw-relative', isOverflowing && 'tw-w-full tw-flex tw-items-center'])}\n                    >\n                        <input\n                            ref={inputRef}\n                            type=\"text\"\n                            className={merge([\n                                options?.isSlimInputField === true\n                                    ? 'focus-visible:tw-outline-none'\n                                    : FOCUS_VISIBLE_STYLE,\n                                'tw-absolute tw-w-full tw-text-text tw-border tw-rounded tw-bg-base tw-border-solid',\n                                options?.isSlimInputField === true ? 'tw-py-0 tw-px-1' : 'tw-px-3 tw-py-2',\n                            ])}\n                            style={inputStyling}\n                            value={inputValue}\n                            onChange={handleInputChange}\n                            onKeyDown={handleKeyDown}\n                            onBlur={handleBlur}\n                        />\n                        <span\n                            aria-hidden=\"true\"\n                            className={merge([\n                                'tw-rounded tw-px-4 tw-py-2 tw-bg-base tw-truncate',\n                                options?.isSlimInputField === true && 'tw-py-0 tw-px-2',\n                                isOverflowing && 'tw-w-0',\n                            ])}\n                            style={inputStyling}\n                        >\n                            {inputValue}\n                        </span>\n                    </div>\n                </div>\n            ) : null}\n            <button\n                type=\"button\"\n                style={{ display: editableState === EditableMode.INPUT ? 'none' : 'flex' }}\n                className={merge([isOverflowing && 'tw-w-full', 'tw-h-full tw-items-center', FOCUS_VISIBLE_STYLE])}\n                {...clickBehaviour}\n                data-test-id={'node-link-name'}\n                aria-pressed=\"false\"\n            >\n                {ChildrenWithRef}\n            </button>\n        </div>\n    );\n};\nEditableText.displayName = 'FondueEditableText';\n"],"names":["EditableMode","EditableText","onEditableSave","onModeChange","onAdditionalValueSave","children","options","isOverflowing","dataTestId","childrenLabel","EditableTextHelper","inputValue","setInputValue","useState","editableState","setEditableState","inputStyling","setInputStyling","inputRef","useRef","handleInputChange","event","handleSwitchToLabel","handleSwitchToInput","childrenText","handleKeyDown","handleBlur","useEffect","clickBehaviour","childRef","_a","ChildrenWithRef","cloneElement","jsxs","merge","jsx","FOCUS_VISIBLE_STYLE"],"mappings":"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"}
+{"version":3,"file":"EditableText.es.js","sources":["../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport {\n    type ChangeEvent,\n    type FocusEvent,\n    type FocusEventHandler,\n    type KeyboardEvent,\n    type KeyboardEventHandler,\n    type ReactElement,\n    cloneElement,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\n\nimport { EditableTextHelper } from '@components/EditableText/lib/helper';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\n\n/**\n * @deprecated Use the new EditableText component from @frontify/fondue/components instead.\n */\nexport enum EditableMode {\n    INPUT = 'INPUT',\n    LABEL = 'LABEL',\n}\n\ninterface InputStyling {\n    fontSize: string;\n    lineHeight: string;\n    letterSpacing: string;\n    minWidth: string;\n    fontWeight: string;\n}\n\n/**\n * isSlimInputField: removes padding\n * mode: display as Input or Label first\n * enableDoubleClick: Should the input be triggered by a double click or single click\n * additionalValues: additional information to be passed via onClick Event\n * removeBoxPadding: Removes the Padding (tw-p-2) around the input Box\n */\ninterface EditableOptionProps {\n    isSlimInputField?: boolean;\n    mode?: EditableMode;\n    enableDoubleClick?: boolean;\n    additionalValues?: string;\n    removeBoxPadding?: boolean;\n}\n\n/**\n * @deprecated Use the new EditableText component from @frontify/fondue/components instead.\n */\nexport interface EditableTextProps {\n    children?: ReactElement;\n    onAdditionalValueSave?: (additionalValue: string, value: string) => void;\n    onEditableSave?: (value: string) => void;\n    onModeChange?: (editableState?: EditableMode) => void;\n    options?: EditableOptionProps;\n    /** @deprecated Temporary solution for text with ellipisis in Tree Component */\n    isOverflowing?: boolean;\n    'data-test-id'?: string;\n}\n\n/**\n * @deprecated Use the new EditableText component from @frontify/fondue/components instead.\n */\nexport const EditableText = ({\n    onEditableSave,\n    onModeChange,\n    onAdditionalValueSave,\n    children,\n    options,\n    isOverflowing = false,\n    'data-test-id': dataTestId = 'editable-node-container',\n}: EditableTextProps) => {\n    // Read initial text strings from children\n    const childrenLabel = EditableTextHelper.getLabel(children);\n\n    // use text strings from children in the input field\n    const [inputValue, setInputValue] = useState(childrenLabel);\n    const [editableState, setEditableState] = useState<EditableMode>(EditableMode.LABEL);\n    const [inputStyling, setInputStyling] = useState<InputStyling>();\n\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const handleInputChange = (event: ChangeEvent<HTMLInputElement>) => setInputValue(event.target.value);\n\n    const handleSwitchToLabel = (event: KeyboardEvent | FocusEvent) => {\n        setEditableState(EditableMode.LABEL);\n\n        if (onModeChange) {\n            onModeChange(EditableMode.LABEL);\n        }\n        if (options?.additionalValues && onAdditionalValueSave) {\n            onAdditionalValueSave(options.additionalValues, (event.target as HTMLTextAreaElement).value);\n        }\n        if (onEditableSave) {\n            onEditableSave((event.target as HTMLTextAreaElement).value);\n        }\n    };\n\n    const handleSwitchToInput = (childrenText: string) => () => {\n        setInputValue(childrenText);\n        setEditableState(EditableMode.INPUT);\n        if (onModeChange) {\n            onModeChange(EditableMode.INPUT);\n        }\n    };\n\n    const handleKeyDown: KeyboardEventHandler = (event: KeyboardEvent<HTMLInputElement>) => {\n        if (event.key === 'Enter') {\n            handleSwitchToLabel(event);\n        }\n    };\n    const handleBlur: FocusEventHandler = (event: FocusEvent<HTMLTextAreaElement>) => handleSwitchToLabel(event);\n\n    // Set initial state of component if provided in the mode\n    useEffect(() => setEditableState(options?.mode ?? EditableMode.LABEL), [options?.mode]);\n\n    const clickBehaviour = options?.enableDoubleClick\n        ? {\n              onDoubleClick: handleSwitchToInput(childrenLabel),\n              onKeyPress: (event: KeyboardEvent) => event.key === 'Enter' && handleSwitchToInput(childrenLabel)(),\n          }\n        : {\n              onClick: handleSwitchToInput(childrenLabel),\n          };\n\n    // Update Input Style and select input field if visible\n    useEffect(() => {\n        if (childRef.current) {\n            setInputStyling(EditableTextHelper.copyStyles(childRef.current));\n        }\n\n        if (editableState === EditableMode.INPUT) {\n            inputRef.current?.select();\n        }\n    }, [editableState, inputRef, children]);\n\n    const childRef = useRef();\n\n    // Clone Child and add ref to Children\n    const ChildrenWithRef =\n        children &&\n        // eslint-disable-next-line @eslint-react/no-clone-element, react-hooks/refs\n        cloneElement(children, {\n            ref: childRef,\n        });\n\n    return (\n        <div\n            data-test-id={dataTestId}\n            className={merge(['tw-relative tw-h-full', options?.removeBoxPadding === true ? '' : 'tw-p-2'])}\n        >\n            {editableState === EditableMode.INPUT ? (\n                <div\n                    className={merge([\n                        'tw-flex tw-items-center',\n                        options?.isSlimInputField === true\n                            ? '-tw-translate-x-[0.315rem] -tw-translate-y-[0.07rem]'\n                            : '-tw-translate-x-[0.81rem] -tw-translate-y-[0.56rem]',\n                    ])}\n                >\n                    <div\n                        data-test-id=\"editable-input\"\n                        className={merge(['tw-relative', isOverflowing && 'tw-w-full tw-flex tw-items-center'])}\n                    >\n                        <input\n                            ref={inputRef}\n                            type=\"text\"\n                            className={merge([\n                                options?.isSlimInputField === true\n                                    ? 'focus-visible:tw-outline-none'\n                                    : FOCUS_VISIBLE_STYLE,\n                                'tw-absolute tw-w-full tw-text-text tw-border tw-rounded tw-bg-base tw-border-solid',\n                                options?.isSlimInputField === true ? 'tw-py-0 tw-px-1' : 'tw-px-3 tw-py-2',\n                            ])}\n                            style={inputStyling}\n                            value={inputValue}\n                            onChange={handleInputChange}\n                            onKeyDown={handleKeyDown}\n                            onBlur={handleBlur}\n                        />\n                        <span\n                            aria-hidden=\"true\"\n                            className={merge([\n                                'tw-rounded tw-px-4 tw-py-2 tw-bg-base tw-truncate',\n                                options?.isSlimInputField === true && 'tw-py-0 tw-px-2',\n                                isOverflowing && 'tw-w-0',\n                            ])}\n                            style={inputStyling}\n                        >\n                            {inputValue}\n                        </span>\n                    </div>\n                </div>\n            ) : null}\n            <button\n                type=\"button\"\n                style={{ display: editableState === EditableMode.INPUT ? 'none' : 'flex' }}\n                className={merge([isOverflowing && 'tw-w-full', 'tw-h-full tw-items-center', FOCUS_VISIBLE_STYLE])}\n                {...clickBehaviour}\n                data-test-id={'node-link-name'}\n                aria-pressed=\"false\"\n            >\n                {ChildrenWithRef}\n            </button>\n        </div>\n    );\n};\nEditableText.displayName = 'FondueEditableText';\n"],"names":["EditableMode","EditableText","onEditableSave","onModeChange","onAdditionalValueSave","children","options","isOverflowing","dataTestId","childrenLabel","EditableTextHelper","inputValue","setInputValue","useState","editableState","setEditableState","inputStyling","setInputStyling","inputRef","useRef","handleInputChange","event","handleSwitchToLabel","handleSwitchToInput","childrenText","handleKeyDown","handleBlur","useEffect","clickBehaviour","childRef","_a","ChildrenWithRef","cloneElement","jsxs","merge","jsx","FOCUS_VISIBLE_STYLE"],"mappings":";;;;;AAsBO,IAAKA,sBAAAA,OACRA,EAAA,QAAQ,SACRA,EAAA,QAAQ,SAFAA,IAAAA,KAAA,CAAA,CAAA;AA6CL,MAAMC,IAAe,CAAC;AAAA,EACzB,gBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,uBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,SAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,gBAAgBC,IAAa;AACjC,MAAyB;AAErB,QAAMC,IAAgBC,EAAmB,SAASL,CAAQ,GAGpD,CAACM,GAAYC,CAAa,IAAIC,EAASJ,CAAa,GACpD,CAACK,GAAeC,CAAgB,IAAIF;AAAA,IAAuB;AAAA;AAAA,EAAA,GAC3D,CAACG,GAAcC,CAAe,IAAIJ,EAAA,GAElCK,IAAWC,EAAgC,IAAI,GAE/CC,IAAoB,CAACC,MAAyCT,EAAcS,EAAM,OAAO,KAAK,GAE9FC,IAAsB,CAACD,MAAsC;AAC/D,IAAAN;AAAA,MAAiB;AAAA;AAAA,IAAA,GAEbZ,KACAA;AAAA,MAAa;AAAA;AAAA,IAAA,GAEbG,KAAA,QAAAA,EAAS,oBAAoBF,KAC7BA,EAAsBE,EAAQ,kBAAmBe,EAAM,OAA+B,KAAK,GAE3FnB,KACAA,EAAgBmB,EAAM,OAA+B,KAAK;AAAA,EAElE,GAEME,IAAsB,CAACC,MAAyB,MAAM;AACxD,IAAAZ,EAAcY,CAAY,GAC1BT;AAAA,MAAiB;AAAA;AAAA,IAAA,GACbZ,KACAA;AAAA,MAAa;AAAA;AAAA,IAAA;AAAA,EAErB,GAEMsB,IAAsC,CAACJ,MAA2C;AACpF,IAAIA,EAAM,QAAQ,WACdC,EAAoBD,CAAK;AAAA,EAEjC,GACMK,IAAgC,CAACL,MAA2CC,EAAoBD,CAAK;AAG3G,EAAAM,EAAU,MAAMZ;AAAA,KAAiBT,KAAA,gBAAAA,EAAS,SAAQ;AAAA;AAAA,KAAqB,CAACA,KAAA,gBAAAA,EAAS,IAAI,CAAC;AAEtF,QAAMsB,IAAiBtB,KAAA,QAAAA,EAAS,oBAC1B;AAAA,IACI,eAAeiB,EAAoBd,CAAa;AAAA,IAChD,YAAY,CAACY,MAAyBA,EAAM,QAAQ,WAAWE,EAAoBd,CAAa,EAAA;AAAA,EAAE,IAEtG;AAAA,IACI,SAASc,EAAoBd,CAAa;AAAA,EAAA;AAIpD,EAAAkB,EAAU,MAAM;;AACZ,IAAIE,EAAS,WACTZ,EAAgBP,EAAmB,WAAWmB,EAAS,OAAO,CAAC,GAG/Df,MAAkB,aAClBgB,IAAAZ,EAAS,YAAT,QAAAY,EAAkB;AAAA,EAE1B,GAAG,CAAChB,GAAeI,GAAUb,CAAQ,CAAC;AAEtC,QAAMwB,IAAWV,EAAA,GAGXY,IACF1B;AAAA,EAEA2B,EAAa3B,GAAU;AAAA,IACnB,KAAKwB;AAAA,EAAA,CACR;AAEL,SACI,gBAAAI;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,gBAAczB;AAAA,MACd,WAAW0B,EAAM,CAAC,0BAAyB5B,KAAA,gBAAAA,EAAS,sBAAqB,KAAO,KAAK,QAAQ,CAAC;AAAA,MAE7F,UAAA;AAAA,QAAAQ,MAAkB,UACf,gBAAAqB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,WAAWD,EAAM;AAAA,cACb;AAAA,eACA5B,KAAA,gBAAAA,EAAS,sBAAqB,KACxB,yDACA;AAAA,YAAA,CACT;AAAA,YAED,UAAA,gBAAA2B;AAAA,cAAC;AAAA,cAAA;AAAA,gBACG,gBAAa;AAAA,gBACb,WAAWC,EAAM,CAAC,eAAe3B,KAAiB,mCAAmC,CAAC;AAAA,gBAEtF,UAAA;AAAA,kBAAA,gBAAA4B;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACG,KAAKjB;AAAA,sBACL,MAAK;AAAA,sBACL,WAAWgB,EAAM;AAAA,yBACb5B,KAAA,gBAAAA,EAAS,sBAAqB,KACxB,kCACA8B;AAAA,wBACN;AAAA,yBACA9B,KAAA,gBAAAA,EAAS,sBAAqB,KAAO,oBAAoB;AAAA,sBAAA,CAC5D;AAAA,sBACD,OAAOU;AAAA,sBACP,OAAOL;AAAA,sBACP,UAAUS;AAAA,sBACV,WAAWK;AAAA,sBACX,QAAQC;AAAA,oBAAA;AAAA,kBAAA;AAAA,kBAEZ,gBAAAS;AAAA,oBAAC;AAAA,oBAAA;AAAA,sBACG,eAAY;AAAA,sBACZ,WAAWD,EAAM;AAAA,wBACb;AAAA,yBACA5B,KAAA,gBAAAA,EAAS,sBAAqB,MAAQ;AAAA,wBACtCC,KAAiB;AAAA,sBAAA,CACpB;AAAA,sBACD,OAAOS;AAAA,sBAEN,UAAAL;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBACL;AAAA,cAAA;AAAA,YAAA;AAAA,UACJ;AAAA,QAAA,IAEJ;AAAA,QACJ,gBAAAwB;AAAA,UAAC;AAAA,UAAA;AAAA,YACG,MAAK;AAAA,YACL,OAAO,EAAE,SAASrB,MAAkB,UAAqB,SAAS,OAAA;AAAA,YAClE,WAAWoB,EAAM,CAAC3B,KAAiB,aAAa,6BAA6B6B,CAAmB,CAAC;AAAA,YAChG,GAAGR;AAAA,YACJ,gBAAc;AAAA,YACd,gBAAa;AAAA,YAEZ,UAAAG;AAAA,UAAA;AAAA,QAAA;AAAA,MACL;AAAA,IAAA;AAAA,EAAA;AAGZ;AACA9B,EAAa,cAAc;"}

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

@@ -1 +1 @@
-{"version":3,"file":"OrderableList.es.js","sources":["../../../src/components/OrderableList/OrderableList.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useId } from '@react-aria/utils';\nimport { useEffect, useMemo, useState } from 'react';\n\nimport { Tree } from '@components/Tree/Tree';\nimport { TreeItem } from '@components/Tree/TreeItem/TreeItem';\nimport { type OnTreeDropCallback } from '@components/Tree/types';\nimport { type DraggableItem } from '@utilities/dnd/types';\n\nimport { type OrderableListItem, type OrderableListItemStyle, type OrderableListProps } from './types';\n\nconst listItemsCompareFn = <T extends object>(itemA: OrderableListItem<T>, itemB: OrderableListItem<T>): number => {\n    if (itemA.sort === null && itemB.sort === null) {\n        return 1;\n    }\n    if (itemA.sort === null) {\n        return 1;\n    }\n    if (itemB.sort === null) {\n        return -1;\n    }\n\n    return itemA.sort - itemB.sort;\n};\n\nconst moveItem = <T extends object>(\n    id: string,\n    newPosition: number | null,\n    items: DraggableItem<T>[],\n): DraggableItem<T>[] => {\n    const theItem = items.find((item) => item.id === id) as DraggableItem<T>;\n\n    return theItem ? [{ ...theItem, sort: newPosition }] : [];\n};\n\nexport const OrderableList = <T extends object>({\n    onMove,\n    dragDisabled,\n    items,\n    dragHandlerPosition = 'none',\n    enableDragDelay = true,\n    itemStyle,\n    selectedId,\n    renderContent,\n    'data-test-id': dataTestId = 'orderable-list',\n}: OrderableListProps<T>) => {\n    const [itemsState, setItemsState] = useState(items);\n    const listId = useId();\n    const isDraggable = !dragDisabled;\n\n    useEffect(() => {\n        // sort the incoming items\n        const itemsClone = [...items];\n        itemsClone.sort(listItemsCompareFn);\n        // eslint-disable-next-line react-hooks/set-state-in-effect\n        setItemsState(itemsClone);\n    }, [items]);\n\n    const handleDrop: OnTreeDropCallback = (dropArgs) => {\n        onMove(moveItem(dropArgs.id, dropArgs.sort, itemsState));\n    };\n\n    const treeItemStyle = useMemo(() => {\n        return {\n            spacingY: 'small',\n            contentHight: 'content-fit',\n            shadow: 'small',\n            borderRadius: 'medium',\n            borderWidth: 'x-small',\n            borderStyle: 'solid',\n            activeColorStyle: 'soft',\n            ...itemStyle,\n        } as OrderableListItemStyle;\n    }, [itemStyle]);\n\n    return (\n        <Tree\n            draggable={isDraggable}\n            id={listId}\n            onDrop={handleDrop}\n            data-test-id={dataTestId}\n            selectedIds={selectedId ? [selectedId] : []}\n            itemStyle={treeItemStyle}\n            showDragHandlerOnHoverOnly={!isDraggable}\n            dragHandlerPosition={!isDraggable ? 'none' : dragHandlerPosition}\n            showContentWhileDragging\n            enableDragDelay={enableDragDelay}\n        >\n            {itemsState.map((item) => {\n                const identifier = `collection-item-${item.id}`;\n                return (\n                    <TreeItem\n                        data-test-id={`${dataTestId}-item`}\n                        id={item.id}\n                        key={identifier}\n                        type=\"collection-item\"\n                        accepts=\"collection-item\"\n                        expandable={false}\n                        levelConstraint={0}\n                        contentComponent={renderContent(item)}\n                    />\n                );\n            })}\n        </Tree>\n    );\n};\nOrderableList.displayName = 'FondueOrderableList';\n"],"names":["listItemsCompareFn","itemA","itemB","moveItem","id","newPosition","items","theItem","item","OrderableList","onMove","dragDisabled","dragHandlerPosition","enableDragDelay","itemStyle","selectedId","renderContent","dataTestId","itemsState","setItemsState","useState","listId","useId","isDraggable","useEffect","itemsClone","handleDrop","dropArgs","treeItemStyle","useMemo","jsx","Tree","identifier","TreeItem"],"mappings":";;;;;AAYA,MAAMA,IAAqB,CAAmBC,GAA6BC,MACnED,EAAM,SAAS,QAAQC,EAAM,SAAS,QAGtCD,EAAM,SAAS,OACR,IAEPC,EAAM,SAAS,OACR,KAGJD,EAAM,OAAOC,EAAM,MAGxBC,IAAW,CACbC,GACAC,GACAC,MACqB;AACrB,QAAMC,IAAUD,EAAM,KAAK,CAACE,MAASA,EAAK,OAAOJ,CAAE;AAEnD,SAAOG,IAAU,CAAC,EAAE,GAAGA,GAAS,MAAMF,EAAA,CAAa,IAAI,CAAA;AAC3D,GAEaI,IAAgB,CAAmB;AAAA,EAC5C,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAL;AAAA,EACA,qBAAAM,IAAsB;AAAA,EACtB,iBAAAC,IAAkB;AAAA,EAClB,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAA6B;AACzB,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASd,CAAK,GAC5Ce,IAASC,EAAA,GACTC,IAAc,CAACZ;AAErB,EAAAa,EAAU,MAAM;AAEZ,UAAMC,IAAa,CAAC,GAAGnB,CAAK;AAC5B,IAAAmB,EAAW,KAAKzB,CAAkB,GAElCmB,EAAcM,CAAU;AAAA,EAC5B,GAAG,CAACnB,CAAK,CAAC;AAEV,QAAMoB,IAAiC,CAACC,MAAa;AACjD,IAAAjB,EAAOP,EAASwB,EAAS,IAAIA,EAAS,MAAMT,CAAU,CAAC;AAAA,EAC3D,GAEMU,IAAgBC,EAAQ,OACnB;AAAA,IACH,UAAU;AAAA,IACV,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,IACb,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,GAAGf;AAAA,EAAA,IAER,CAACA,CAAS,CAAC;AAEd,SACI,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAWR;AAAA,MACX,IAAIF;AAAA,MACJ,QAAQK;AAAA,MACR,gBAAcT;AAAA,MACd,aAAaF,IAAa,CAACA,CAAU,IAAI,CAAA;AAAA,MACzC,WAAWa;AAAA,MACX,4BAA4B,CAACL;AAAA,MAC7B,qBAAsBA,IAAuBX,IAAT;AAAA,MACpC,0BAAwB;AAAA,MACxB,iBAAAC;AAAA,MAEC,UAAAK,EAAW,IAAI,CAACV,MAAS;AACtB,cAAMwB,IAAa,mBAAmBxB,EAAK,EAAE;AAC7C,eACI,gBAAAsB;AAAA,UAACG;AAAA,UAAA;AAAA,YACG,gBAAc,GAAGhB,CAAU;AAAA,YAC3B,IAAIT,EAAK;AAAA,YAET,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,YAAY;AAAA,YACZ,iBAAiB;AAAA,YACjB,kBAAkBQ,EAAcR,CAAI;AAAA,UAAA;AAAA,UAL/BwB;AAAA,QAAA;AAAA,MAQjB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGb;AACAvB,EAAc,cAAc;"}
+{"version":3,"file":"OrderableList.es.js","sources":["../../../src/components/OrderableList/OrderableList.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { useId } from '@react-aria/utils';\nimport { useEffect, useMemo, useState } from 'react';\n\nimport { Tree } from '@components/Tree/Tree';\nimport { TreeItem } from '@components/Tree/TreeItem/TreeItem';\nimport { type OnTreeDropCallback } from '@components/Tree/types';\nimport { type DraggableItem } from '@utilities/dnd/types';\n\nimport { type OrderableListItem, type OrderableListItemStyle, type OrderableListProps } from './types';\n\nconst listItemsCompareFn = <T extends object>(itemA: OrderableListItem<T>, itemB: OrderableListItem<T>): number => {\n    if (itemA.sort === null && itemB.sort === null) {\n        return 1;\n    }\n    if (itemA.sort === null) {\n        return 1;\n    }\n    if (itemB.sort === null) {\n        return -1;\n    }\n\n    return itemA.sort - itemB.sort;\n};\n\nconst moveItem = <T extends object>(\n    id: string,\n    newPosition: number | null,\n    items: DraggableItem<T>[],\n): DraggableItem<T>[] => {\n    const theItem = items.find((item) => item.id === id) as DraggableItem<T>;\n\n    return theItem ? [{ ...theItem, sort: newPosition }] : [];\n};\n\n/**\n * @deprecated Use the new OrderableList component from @frontify/fondue/components instead.\n */\nexport const OrderableList = <T extends object>({\n    onMove,\n    dragDisabled,\n    items,\n    dragHandlerPosition = 'none',\n    enableDragDelay = true,\n    itemStyle,\n    selectedId,\n    renderContent,\n    'data-test-id': dataTestId = 'orderable-list',\n}: OrderableListProps<T>) => {\n    const [itemsState, setItemsState] = useState(items);\n    const listId = useId();\n    const isDraggable = !dragDisabled;\n\n    useEffect(() => {\n        // sort the incoming items\n        const itemsClone = [...items];\n        itemsClone.sort(listItemsCompareFn);\n        // eslint-disable-next-line react-hooks/set-state-in-effect\n        setItemsState(itemsClone);\n    }, [items]);\n\n    const handleDrop: OnTreeDropCallback = (dropArgs) => {\n        onMove(moveItem(dropArgs.id, dropArgs.sort, itemsState));\n    };\n\n    const treeItemStyle = useMemo(() => {\n        return {\n            spacingY: 'small',\n            contentHight: 'content-fit',\n            shadow: 'small',\n            borderRadius: 'medium',\n            borderWidth: 'x-small',\n            borderStyle: 'solid',\n            activeColorStyle: 'soft',\n            ...itemStyle,\n        } as OrderableListItemStyle;\n    }, [itemStyle]);\n\n    return (\n        <Tree\n            draggable={isDraggable}\n            id={listId}\n            onDrop={handleDrop}\n            data-test-id={dataTestId}\n            selectedIds={selectedId ? [selectedId] : []}\n            itemStyle={treeItemStyle}\n            showDragHandlerOnHoverOnly={!isDraggable}\n            dragHandlerPosition={!isDraggable ? 'none' : dragHandlerPosition}\n            showContentWhileDragging\n            enableDragDelay={enableDragDelay}\n        >\n            {itemsState.map((item) => {\n                const identifier = `collection-item-${item.id}`;\n                return (\n                    <TreeItem\n                        data-test-id={`${dataTestId}-item`}\n                        id={item.id}\n                        key={identifier}\n                        type=\"collection-item\"\n                        accepts=\"collection-item\"\n                        expandable={false}\n                        levelConstraint={0}\n                        contentComponent={renderContent(item)}\n                    />\n                );\n            })}\n        </Tree>\n    );\n};\nOrderableList.displayName = 'FondueOrderableList';\n"],"names":["listItemsCompareFn","itemA","itemB","moveItem","id","newPosition","items","theItem","item","OrderableList","onMove","dragDisabled","dragHandlerPosition","enableDragDelay","itemStyle","selectedId","renderContent","dataTestId","itemsState","setItemsState","useState","listId","useId","isDraggable","useEffect","itemsClone","handleDrop","dropArgs","treeItemStyle","useMemo","jsx","Tree","identifier","TreeItem"],"mappings":";;;;;AAYA,MAAMA,IAAqB,CAAmBC,GAA6BC,MACnED,EAAM,SAAS,QAAQC,EAAM,SAAS,QAGtCD,EAAM,SAAS,OACR,IAEPC,EAAM,SAAS,OACR,KAGJD,EAAM,OAAOC,EAAM,MAGxBC,IAAW,CACbC,GACAC,GACAC,MACqB;AACrB,QAAMC,IAAUD,EAAM,KAAK,CAACE,MAASA,EAAK,OAAOJ,CAAE;AAEnD,SAAOG,IAAU,CAAC,EAAE,GAAGA,GAAS,MAAMF,EAAA,CAAa,IAAI,CAAA;AAC3D,GAKaI,IAAgB,CAAmB;AAAA,EAC5C,QAAAC;AAAA,EACA,cAAAC;AAAA,EACA,OAAAL;AAAA,EACA,qBAAAM,IAAsB;AAAA,EACtB,iBAAAC,IAAkB;AAAA,EAClB,WAAAC;AAAA,EACA,YAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAgBC,IAAa;AACjC,MAA6B;AACzB,QAAM,CAACC,GAAYC,CAAa,IAAIC,EAASd,CAAK,GAC5Ce,IAASC,EAAA,GACTC,IAAc,CAACZ;AAErB,EAAAa,EAAU,MAAM;AAEZ,UAAMC,IAAa,CAAC,GAAGnB,CAAK;AAC5B,IAAAmB,EAAW,KAAKzB,CAAkB,GAElCmB,EAAcM,CAAU;AAAA,EAC5B,GAAG,CAACnB,CAAK,CAAC;AAEV,QAAMoB,IAAiC,CAACC,MAAa;AACjD,IAAAjB,EAAOP,EAASwB,EAAS,IAAIA,EAAS,MAAMT,CAAU,CAAC;AAAA,EAC3D,GAEMU,IAAgBC,EAAQ,OACnB;AAAA,IACH,UAAU;AAAA,IACV,cAAc;AAAA,IACd,QAAQ;AAAA,IACR,cAAc;AAAA,IACd,aAAa;AAAA,IACb,aAAa;AAAA,IACb,kBAAkB;AAAA,IAClB,GAAGf;AAAA,EAAA,IAER,CAACA,CAAS,CAAC;AAEd,SACI,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,WAAWR;AAAA,MACX,IAAIF;AAAA,MACJ,QAAQK;AAAA,MACR,gBAAcT;AAAA,MACd,aAAaF,IAAa,CAACA,CAAU,IAAI,CAAA;AAAA,MACzC,WAAWa;AAAA,MACX,4BAA4B,CAACL;AAAA,MAC7B,qBAAsBA,IAAuBX,IAAT;AAAA,MACpC,0BAAwB;AAAA,MACxB,iBAAAC;AAAA,MAEC,UAAAK,EAAW,IAAI,CAACV,MAAS;AACtB,cAAMwB,IAAa,mBAAmBxB,EAAK,EAAE;AAC7C,eACI,gBAAAsB;AAAA,UAACG;AAAA,UAAA;AAAA,YACG,gBAAc,GAAGhB,CAAU;AAAA,YAC3B,IAAIT,EAAK;AAAA,YAET,MAAK;AAAA,YACL,SAAQ;AAAA,YACR,YAAY;AAAA,YACZ,iBAAiB;AAAA,YACjB,kBAAkBQ,EAAcR,CAAI;AAAA,UAAA;AAAA,UAL/BwB;AAAA,QAAA;AAAA,MAQjB,CAAC;AAAA,IAAA;AAAA,EAAA;AAGb;AACAvB,EAAc,cAAc;"}