@frontify/fondue 12.0.0-beta.197 → 12.0.0-beta.199

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

@@ -1 +1 @@
-{"version":3,"file":"Accordion.es.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { CollapsibleWrap } from '@components/CollapsibleWrap';\nimport { useAccordion, useAccordionItem } from '@react-aria/accordion';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { Item as StatelyItem } from '@react-stately/collections';\nimport { useTreeState } from '@react-stately/tree';\nimport { FOCUS_STYLE_INSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { Children, Key, KeyboardEvent, ReactElement, ReactNode, isValidElement, useEffect, useRef } from 'react';\nimport { AccordionHeader } from './AccordionHeader';\nimport { AccordionItemProps, AccordionProps, AriaAccordionItemProps } from './types';\n\nconst ACCORDION_ID = 'fondue-accordion';\nconst ACCORDION_ITEM_ID = 'fondue-accordion-item';\n\nconst AriaAccordionItem = ({\n    item,\n    state,\n    header,\n    padding = true,\n    divider = false,\n    headerComponent: HeaderComponent = AccordionHeader,\n    'data-test-id': dataTestId = ACCORDION_ITEM_ID,\n}: AriaAccordionItemProps): ReactElement => {\n    const { active, ...headerProps } = header;\n    const triggerRef = useRef<HTMLButtonElement | null>(null);\n    const { buttonProps, regionProps } = useAccordionItem({ item }, state, triggerRef);\n    const isOpen = state.expandedKeys.has(item.key);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    return (\n        <div\n            key={item.key}\n            className={merge([isFocusVisible ? FOCUS_STYLE_INSET : '', divider && 'tw-divide-y tw-divide-black-10'])}\n        >\n            <button\n                {...mergeProps(buttonProps, focusProps)}\n                data-test-id={dataTestId}\n                ref={triggerRef}\n                onClick={(event) => {\n                    if (header.onClick) {\n                        header.onClick();\n                    }\n\n                    if (buttonProps.onClick) {\n                        buttonProps.onClick(event);\n                    }\n                }}\n                onKeyUp={(event) => {\n                    if (header.onClick && event.key === 'Enter') {\n                        header.onClick();\n                    }\n\n                    if (buttonProps.onKeyUp) {\n                        buttonProps.onKeyUp(event);\n                    }\n                }}\n                className=\"tw-w-full focus-visible:tw-outline-none\"\n            >\n                <HeaderComponent isOpen={isOpen} {...headerProps} />\n            </button>\n            <CollapsibleWrap isOpen={isOpen} preventInitialAnimation={active}>\n                <div {...regionProps} className={merge([padding && 'tw-px-8 tw-pb-6'])}>\n                    {item.props.children?.()}\n                </div>\n            </CollapsibleWrap>\n        </div>\n    );\n};\n\nconst mapToAriaProps = (children: ReactElement<AccordionItemProps>[]) => {\n    const ariaChildren = Children.map(children, (child, index) => {\n        const { header, children } = child.props;\n\n        return (\n            <StatelyItem key={index} textValue={header.children}>\n                {children ? ((() => children) as unknown as ReactNode) : null}\n            </StatelyItem>\n        );\n    });\n\n    const defaultExpandedKeys = (ariaChildren\n        .map((item) => item.key)\n        .filter((key, index) => key && !!children[index]?.props.header?.active) || []) as Key[];\n\n    return { children: ariaChildren, defaultExpandedKeys };\n};\n\nconst filterValidChildren = ({ children }: AccordionProps): ReactElement<AccordionItemProps>[] =>\n    Children.toArray(children).reduce<ReactElement<AccordionItemProps>[]>((validChildren, child) => {\n        if (isValidElement(child) && !child.props.header) {\n            console.warn('Use `AccordionItem` as children of `Accordion` and set the `header` prop accordingly.');\n            return validChildren;\n        }\n\n        if (isValidElement(child)) {\n            validChildren.push(child as ReactElement<AccordionItemProps>);\n        }\n\n        return validChildren;\n    }, []);\n\nexport const AccordionItem = ({ children }: AccordionItemProps): ReactElement => <>{children}</>;\nAccordionItem.displayName = 'FondueAccordionItem';\n\nconst lastChildrenActive = (children: React.ReactNode | undefined): boolean | undefined => {\n    const childrenArray = Children.toArray(children) as { key: string; props?: { header?: { active?: boolean } } }[];\n    return childrenArray[childrenArray.length - 1]?.props?.header?.active === true;\n};\n\nexport const Accordion = (props: AccordionProps): ReactElement => {\n    const { divider = true, border = true, 'data-test-id': dataTestId = ACCORDION_ID } = props;\n    const children = filterValidChildren(props);\n    const ariaProps = mapToAriaProps(children);\n\n    const ref = useRef<HTMLDivElement | null>(null);\n    const state = useTreeState<AccordionItemProps>(ariaProps);\n\n    // We need to detect the firstRender and childrenLength to not toggle any panel\n    const accordionChildren = useRef({ firstRender: true, childLength: Children.toArray(props.children).length });\n    const childrenLength = Children.toArray(props.children).length;\n    useEffect(() => {\n        /**\n         * Checks if the last child in the Array is active\n         * Only works when adding Children to end of Accordion\n         */\n        const childrenIsActive = lastChildrenActive(props.children);\n        if (\n            !!childrenIsActive &&\n            !accordionChildren.current.firstRender &&\n            Children.toArray(props.children).length > accordionChildren.current.childLength\n        ) {\n            state.toggleKey(ariaProps.defaultExpandedKeys[ariaProps.defaultExpandedKeys.length - 1]);\n        }\n        accordionChildren.current = { firstRender: false, childLength: Children.toArray(props.children).length };\n    }, [ariaProps.defaultExpandedKeys, childrenLength, props.children, state]);\n\n    const {\n        // @react-aria prevents default action for onMouseDown as implemented here: https://github.com/adobe/react-spectrum/blob/e14523fedd93ac1a4ede355aed70988af572ae74/packages/%40react-aria/selection/src/useSelectableCollection.ts#L370\n        // This makes it impossible to edit or select text in input fields inside the accordion\n        // onKeydown automatically navigates away from child elements, including dropdown menus etc.\n        // Focus should only be passed if the accordion item itself is focused\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        accordionProps: { onMouseDown, onKeyDown, ...accordionProps },\n        // @react-aria enable by default typeahead which result in an event fired up on keypress and select the section\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        //@ts-ignore\n    } = useAccordion({ ...ariaProps, disallowTypeAhead: true }, state, ref);\n\n    const accordionKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n        const key = (event.target as HTMLButtonElement).dataset.key;\n        const isFocused = state.selectionManager.focusedKey === key;\n        if (key && isFocused) {\n            onKeyDown && onKeyDown(event);\n        }\n    };\n\n    const propsWithModifiedKeyDown = { ...accordionProps, onKeyDown: accordionKeyDown };\n\n    return (\n        <div\n            {...propsWithModifiedKeyDown}\n            ref={ref}\n            data-test-id={dataTestId}\n            className={merge([\n                divider && 'tw-divide-y tw-divide-black-10',\n                border && 'tw-border-t tw-border-b tw-border-black-10',\n            ])}\n        >\n            {[...state.collection].map((item, index) => {\n                const {\n                    header,\n                    padding,\n                    headerComponent,\n                    divider,\n                    'data-test-id': itemDataTestId = ACCORDION_ITEM_ID,\n                } = children[index].props;\n                return (\n                    <AriaAccordionItem\n                        key={item.key}\n                        item={item}\n                        state={state}\n                        divider={divider}\n                        header={header}\n                        padding={padding}\n                        headerComponent={headerComponent}\n                        data-test-id={itemDataTestId}\n                    />\n                );\n            })}\n        </div>\n    );\n};\nAccordion.displayName = 'FondueAccordion';\n"],"names":["ACCORDION_ID","ACCORDION_ITEM_ID","AriaAccordionItem","item","state","header","padding","divider","HeaderComponent","AccordionHeader","dataTestId","active","headerProps","triggerRef","useRef","buttonProps","regionProps","useAccordionItem","isOpen","isFocusVisible","focusProps","useFocusRing","React","merge","FOCUS_STYLE_INSET","mergeProps","event","CollapsibleWrap","_b","_a","mapToAriaProps","children","ariaChildren","Children","child","index","StatelyItem","defaultExpandedKeys","key","filterValidChildren","validChildren","isValidElement","AccordionItem","lastChildrenActive","childrenArray","_c","Accordion","props","border","ariaProps","ref","useTreeState","accordionChildren","childrenLength","useEffect","onMouseDown","onKeyDown","accordionProps","useAccordion","propsWithModifiedKeyDown","isFocused","headerComponent","itemDataTestId"],"mappings":"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"}
+{"version":3,"file":"Accordion.es.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { CollapsibleWrap } from '@components/CollapsibleWrap';\nimport { useAccordion, useAccordionItem } from '@react-aria/accordion';\nimport { useFocusRing } from '@react-aria/focus';\nimport { mergeProps } from '@react-aria/utils';\nimport { Item as StatelyItem } from '@react-stately/collections';\nimport { useTreeState } from '@react-stately/tree';\nimport { FOCUS_STYLE_INSET } from '@utilities/focusStyle';\nimport { merge } from '@utilities/merge';\nimport React, { Children, Key, KeyboardEvent, ReactElement, ReactNode, isValidElement, useEffect, useRef } from 'react';\nimport { AccordionHeader } from './AccordionHeader';\nimport { AccordionItemProps, AccordionProps, AriaAccordionItemProps } from './types';\n\nconst ACCORDION_ID = 'fondue-accordion';\nconst ACCORDION_ITEM_ID = 'fondue-accordion-item';\n\nconst AriaAccordionItem = ({\n    item,\n    state,\n    header,\n    padding = true,\n    divider = false,\n    headerComponent: HeaderComponent = AccordionHeader,\n    'data-test-id': dataTestId = ACCORDION_ITEM_ID,\n}: AriaAccordionItemProps): ReactElement => {\n    const { active, ...headerProps } = header;\n    const triggerRef = useRef<HTMLButtonElement | null>(null);\n    const { buttonProps, regionProps } = useAccordionItem({ item }, state, triggerRef);\n    const isOpen = state.expandedKeys.has(item.key);\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    return (\n        <div\n            key={item.key}\n            className={merge([isFocusVisible ? FOCUS_STYLE_INSET : '', divider && 'tw-divide-y tw-divide-black-10'])}\n        >\n            <button\n                {...mergeProps(buttonProps, focusProps)}\n                data-test-id={dataTestId}\n                ref={triggerRef}\n                onClick={(event) => {\n                    if (header.onClick) {\n                        header.onClick();\n                    }\n\n                    if (buttonProps.onClick) {\n                        buttonProps.onClick(event);\n                    }\n                }}\n                onKeyUp={(event) => {\n                    if (header.onClick && event.key === 'Enter') {\n                        header.onClick();\n                    }\n\n                    if (buttonProps.onKeyUp) {\n                        buttonProps.onKeyUp(event);\n                    }\n                }}\n                className=\"tw-w-full focus-visible:tw-outline-none\"\n            >\n                <HeaderComponent isOpen={isOpen} {...headerProps} />\n            </button>\n            <CollapsibleWrap isOpen={isOpen} preventInitialAnimation={active}>\n                <div {...regionProps} className={merge([padding && 'tw-px-8 tw-pb-6'])}>\n                    {item.props.children?.()}\n                </div>\n            </CollapsibleWrap>\n        </div>\n    );\n};\n\nconst mapToAriaProps = (children: ReactElement<AccordionItemProps>[]) => {\n    const ariaChildren = Children.map(children, (child, index) => {\n        const { header, children } = child.props;\n\n        return (\n            <StatelyItem key={index} textValue={header.children}>\n                {children ? ((() => children) as unknown as ReactNode) : null}\n            </StatelyItem>\n        );\n    });\n\n    const defaultExpandedKeys = (ariaChildren\n        .map((item) => item.key)\n        .filter((key, index) => key && !!children[index]?.props.header?.active) || []) as Key[];\n\n    return { children: ariaChildren, defaultExpandedKeys };\n};\n\nconst filterValidChildren = ({ children }: AccordionProps): ReactElement<AccordionItemProps>[] =>\n    Children.toArray(children).reduce<ReactElement<AccordionItemProps>[]>((validChildren, child) => {\n        if (isValidElement(child) && !child.props.header) {\n            console.warn('Use `AccordionItem` as children of `Accordion` and set the `header` prop accordingly.');\n            return validChildren;\n        }\n\n        if (isValidElement(child)) {\n            validChildren.push(child as ReactElement<AccordionItemProps>);\n        }\n\n        return validChildren;\n    }, []);\n\n// eslint-disable-next-line react/jsx-no-useless-fragment\nexport const AccordionItem = ({ children }: AccordionItemProps): ReactElement => <>{children}</>;\nAccordionItem.displayName = 'FondueAccordionItem';\n\nconst lastChildrenActive = (children: React.ReactNode | undefined): boolean | undefined => {\n    const childrenArray = Children.toArray(children) as { key: string; props?: { header?: { active?: boolean } } }[];\n    return childrenArray[childrenArray.length - 1]?.props?.header?.active === true;\n};\n\nexport const Accordion = (props: AccordionProps): ReactElement => {\n    const { divider = true, border = true, 'data-test-id': dataTestId = ACCORDION_ID } = props;\n    const children = filterValidChildren(props);\n    const ariaProps = mapToAriaProps(children);\n\n    const ref = useRef<HTMLDivElement | null>(null);\n    const state = useTreeState<AccordionItemProps>(ariaProps);\n\n    // We need to detect the firstRender and childrenLength to not toggle any panel\n    const accordionChildren = useRef({ firstRender: true, childLength: Children.toArray(props.children).length });\n    const childrenLength = Children.toArray(props.children).length;\n    useEffect(() => {\n        /**\n         * Checks if the last child in the Array is active\n         * Only works when adding Children to end of Accordion\n         */\n        const childrenIsActive = lastChildrenActive(props.children);\n        if (\n            !!childrenIsActive &&\n            !accordionChildren.current.firstRender &&\n            Children.toArray(props.children).length > accordionChildren.current.childLength\n        ) {\n            state.toggleKey(ariaProps.defaultExpandedKeys[ariaProps.defaultExpandedKeys.length - 1]);\n        }\n        accordionChildren.current = { firstRender: false, childLength: Children.toArray(props.children).length };\n    }, [ariaProps.defaultExpandedKeys, childrenLength, props.children, state]);\n\n    const {\n        // @react-aria prevents default action for onMouseDown as implemented here: https://github.com/adobe/react-spectrum/blob/e14523fedd93ac1a4ede355aed70988af572ae74/packages/%40react-aria/selection/src/useSelectableCollection.ts#L370\n        // This makes it impossible to edit or select text in input fields inside the accordion\n        // onKeydown automatically navigates away from child elements, including dropdown menus etc.\n        // Focus should only be passed if the accordion item itself is focused\n        // eslint-disable-next-line @typescript-eslint/no-unused-vars\n        accordionProps: { onMouseDown, onKeyDown, ...accordionProps },\n        // @react-aria enable by default typeahead which result in an event fired up on keypress and select the section\n        // eslint-disable-next-line @typescript-eslint/ban-ts-comment\n        //@ts-ignore\n    } = useAccordion({ ...ariaProps, disallowTypeAhead: true }, state, ref);\n\n    const accordionKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n        const key = (event.target as HTMLButtonElement).dataset.key;\n        const isFocused = state.selectionManager.focusedKey === key;\n        if (key && isFocused) {\n            onKeyDown && onKeyDown(event);\n        }\n    };\n\n    const propsWithModifiedKeyDown = { ...accordionProps, onKeyDown: accordionKeyDown };\n\n    return (\n        <div\n            {...propsWithModifiedKeyDown}\n            ref={ref}\n            data-test-id={dataTestId}\n            className={merge([\n                divider && 'tw-divide-y tw-divide-black-10',\n                border && 'tw-border-t tw-border-b tw-border-black-10',\n            ])}\n        >\n            {[...state.collection].map((item, index) => {\n                const {\n                    header,\n                    padding,\n                    headerComponent,\n                    divider,\n                    'data-test-id': itemDataTestId = ACCORDION_ITEM_ID,\n                } = children[index].props;\n                return (\n                    <AriaAccordionItem\n                        key={item.key}\n                        item={item}\n                        state={state}\n                        divider={divider}\n                        header={header}\n                        padding={padding}\n                        headerComponent={headerComponent}\n                        data-test-id={itemDataTestId}\n                    />\n                );\n            })}\n        </div>\n    );\n};\nAccordion.displayName = 'FondueAccordion';\n"],"names":["ACCORDION_ID","ACCORDION_ITEM_ID","AriaAccordionItem","item","state","header","padding","divider","HeaderComponent","AccordionHeader","dataTestId","active","headerProps","triggerRef","useRef","buttonProps","regionProps","useAccordionItem","isOpen","isFocusVisible","focusProps","useFocusRing","React","merge","FOCUS_STYLE_INSET","mergeProps","event","CollapsibleWrap","_b","_a","mapToAriaProps","children","ariaChildren","Children","child","index","StatelyItem","defaultExpandedKeys","key","filterValidChildren","validChildren","isValidElement","AccordionItem","lastChildrenActive","childrenArray","_c","Accordion","props","border","ariaProps","ref","useTreeState","accordionChildren","childrenLength","useEffect","onMouseDown","onKeyDown","accordionProps","useAccordion","propsWithModifiedKeyDown","isFocused","headerComponent","itemDataTestId"],"mappings":"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"}

package/dist/components/DatePicker/DatePicker.es.js

@@ -1,7 +1,7 @@
 import { IconSize as r } from "../../foundation/Icon/IconSize.es.js";
-import { format as L, getYear as T } from "date-fns";
-import e, { forwardRef as _, useState as j } from "react";
-import v from "react-datepicker";
+import { format as T, getYear as _ } from "date-fns";
+import e, { forwardRef as j, useState as v } from "react";
+import F from "react-datepicker";
 import "./DatePicker.css.es.js";
 import { DatePickerTrigger as G } from "./DatePickerTrigger.es.js";
 import { Validation as H } from "../../utilities/validation.es.js";
@@ -10,8 +10,8 @@ import Y from "../../foundation/Icon/Generated/IconCaretLeft.es.js";
 import $ from "../../foundation/Icon/Generated/IconCaretRight.es.js";
 import q from "../../foundation/Icon/Generated/IconCaretRightDouble.es.js";
 import { Button as i } from "../Button/Button.es.js";
-import { ButtonStyle as n, ButtonSize as s, ButtonEmphasis as o } from "../Button/ButtonTypes.es.js";
-const J = 40, K = (m, a) => m === "single" ? a < new Date() ? "past-date" : "future-date" : "range-day", Q = _(
+import { ButtonStyle as n, ButtonSize as o, ButtonEmphasis as s } from "../Button/ButtonTypes.es.js";
+const J = 40, K = (m, a) => m === "single" ? a < new Date() ? "past-date" : "future-date" : "range-day", Q = j(
   ({
     placeHolder: m = "Select a date",
     isClearable: a,
@@ -21,30 +21,30 @@ const J = 40, K = (m, a) => m === "single" ? a < new Date() ? "past-date" : "fut
     onClose: c,
     onBlur: h,
     onKeyDown: C,
-    dateFormat: E = "dd MMM yyyy",
-    value: k,
+    dateFormat: k = "dd MMM yyyy",
+    value: E,
     startDate: z,
     endDate: M,
     minDate: S,
     maxDate: I,
     validation: R = H.Default,
     customTrigger: N,
-    children: b = /* @__PURE__ */ e.createElement(e.Fragment, null),
+    children: b,
     hasPopperArrow: x = !0,
     preventOpenOnFocus: P = !1,
     filterDate: W = () => !0,
     variant: u = "single"
   }, B) => {
-    const [A, w] = j(!1), O = () => {
+    const [A, w] = v(!1), O = () => {
       w(!0), l == null || l();
-    }, F = () => {
+    }, L = () => {
       w(!1), c == null || c();
     };
     return /* @__PURE__ */ e.createElement("div", { "data-test-id": "date-picker" }, /* @__PURE__ */ e.createElement(
-      v,
+      F,
       {
         calendarClassName: "tw-rounded-sm tw-border tw-border-line-x-strong react-datepicker-wrap",
-        selected: k,
+        selected: E,
         startDate: z,
         endDate: M,
         minDate: S,
@@ -70,8 +70,8 @@ const J = 40, K = (m, a) => m === "single" ? a < new Date() ? "past-date" : "fut
         ref: B,
         formatWeekDay: (t) => t.slice(0, 1),
         isClearable: a,
-        dateFormat: E,
-        onCalendarClose: F,
+        dateFormat: k,
+        onCalendarClose: L,
         onCalendarOpen: O,
         shouldCloseOnSelect: y,
         dayClassName: (t) => K(u, t),
@@ -82,36 +82,36 @@ const J = 40, K = (m, a) => m === "single" ? a < new Date() ? "past-date" : "fut
           i,
           {
             style: n.Default,
-            size: s.Medium,
+            size: o.Medium,
             onClick: D,
-            emphasis: o.Weak,
+            emphasis: s.Weak,
             icon: /* @__PURE__ */ e.createElement(V, { size: r.Size20 })
           }
         ), /* @__PURE__ */ e.createElement(
           i,
           {
             style: n.Default,
-            size: s.Medium,
+            size: o.Medium,
             onClick: d,
-            emphasis: o.Weak,
+            emphasis: s.Weak,
             icon: /* @__PURE__ */ e.createElement(Y, { size: r.Size20 })
           }
-        ), /* @__PURE__ */ e.createElement("p", { className: "tw-font-sans tw-font-semibold tw-grow tw-self-center" }, L(t, "MMMM"), " ", T(t)), /* @__PURE__ */ e.createElement(
+        ), /* @__PURE__ */ e.createElement("p", { className: "tw-font-sans tw-font-semibold tw-grow tw-self-center" }, T(t, "MMMM"), " ", _(t)), /* @__PURE__ */ e.createElement(
           i,
           {
             style: n.Default,
-            size: s.Medium,
+            size: o.Medium,
             onClick: p,
-            emphasis: o.Weak,
+            emphasis: s.Weak,
             icon: /* @__PURE__ */ e.createElement($, { size: r.Size20 })
           }
         ), /* @__PURE__ */ e.createElement(
           i,
           {
             style: n.Default,
-            size: s.Medium,
+            size: o.Medium,
             onClick: g,
-            emphasis: o.Weak,
+            emphasis: s.Weak,
             icon: /* @__PURE__ */ e.createElement(q, { size: r.Size20 })
           }
         )),

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

@@ -1 +1 @@
-{"version":3,"file":"DatePicker.es.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { format, getYear } from 'date-fns';\nimport React, { forwardRef, useState } from 'react';\nimport DatepickerComponent, { ReactDatePicker } from 'react-datepicker';\nimport './DatePicker.css';\nimport { DatePickerTrigger } from './DatePickerTrigger';\nimport { IconCaretLeft, IconCaretLeftDouble, IconCaretRight, IconCaretRightDouble } from '@foundation/Icon/Generated';\nimport { Validation } from '@utilities/validation';\n\nconst ARROW_PADDING_CORRECTION = 40;\n\ntype SingleDatePickerProps = {\n    variant?: 'single';\n    onChange: (date: Date | null) => void;\n    startDate?: null;\n    endDate?: null;\n};\n\ntype RangeDatePickerProps = {\n    variant: 'range';\n    onChange: (date: [Date | null, Date | null] | null) => void;\n    startDate: Date | null;\n    endDate: Date | null;\n};\n\nexport type DatePickerProps = {\n    placeHolder?: string;\n    isClearable?: boolean;\n    shouldCloseOnSelect?: boolean;\n    dateFormat?: string;\n    /** @description when the variant is of type 'range', the value should be the startDate */\n    value?: Date | null;\n    minDate?: Date;\n    maxDate?: Date;\n    validation?: Validation;\n    customTrigger?: React.ReactNode;\n    children?: React.ReactNode;\n    hasPopperArrow?: boolean;\n    preventOpenOnFocus?: boolean;\n    filterDate?: (date: Date) => boolean;\n    onOpen?: () => void;\n    onClose?: () => void;\n    onBlur?: () => void;\n    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n} & (SingleDatePickerProps | RangeDatePickerProps);\n\nconst getDayClasses = (variant: DatePickerProps['variant'], date: Date) => {\n    if (variant === 'single') {\n        return date < new Date() ? 'past-date' : 'future-date';\n    }\n    return 'range-day';\n};\n\nexport type ReactDatePickerRef = ReactDatePicker<never, boolean>;\n\nexport const DatePicker = forwardRef<ReactDatePicker<never, boolean>, DatePickerProps>(\n    (\n        {\n            placeHolder = 'Select a date',\n            isClearable,\n            shouldCloseOnSelect,\n            onChange,\n            onOpen,\n            onClose,\n            onBlur,\n            onKeyDown,\n            dateFormat = 'dd MMM yyyy',\n            value,\n            startDate,\n            endDate,\n            minDate,\n            maxDate,\n            validation = Validation.Default,\n            customTrigger,\n            children = <></>,\n            hasPopperArrow = true,\n            preventOpenOnFocus = false,\n            filterDate = () => true,\n            variant = 'single',\n        },\n        ref,\n    ) => {\n        const [isCalendarOpen, setIsCalendarOpen] = useState<boolean>(false);\n\n        const handleOpen = () => {\n            setIsCalendarOpen(true);\n            onOpen?.();\n        };\n\n        const handleClose = () => {\n            setIsCalendarOpen(false);\n            onClose?.();\n        };\n\n        return (\n            <div data-test-id=\"date-picker\">\n                <DatepickerComponent\n                    calendarClassName=\"tw-rounded-sm tw-border tw-border-line-x-strong react-datepicker-wrap\"\n                    selected={value}\n                    startDate={startDate}\n                    endDate={endDate}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    calendarStartDay={1}\n                    onChange={onChange}\n                    onKeyDown={onKeyDown}\n                    onBlur={onBlur}\n                    selectsRange={variant === 'range' ? true : false}\n                    showPopperArrow={hasPopperArrow}\n                    preventOpenOnFocus={preventOpenOnFocus}\n                    filterDate={filterDate}\n                    customInput={\n                        customTrigger ?? (\n                            <DatePickerTrigger\n                                isCalendarOpen={isCalendarOpen}\n                                isClearable={isClearable}\n                                placeHolder={placeHolder}\n                                validation={validation}\n                                onDateChanged={onChange}\n                            />\n                        )\n                    }\n                    ref={ref}\n                    formatWeekDay={(day) => day.slice(0, 1)}\n                    isClearable={isClearable}\n                    dateFormat={dateFormat}\n                    onCalendarClose={handleClose}\n                    onCalendarOpen={handleOpen}\n                    shouldCloseOnSelect={shouldCloseOnSelect}\n                    dayClassName={(date) => getDayClasses(variant, date)}\n                    popperProps={{\n                        strategy: 'fixed',\n                    }}\n                    renderCustomHeader={({ date, decreaseMonth, increaseMonth, increaseYear, decreaseYear }) => (\n                        <div className=\"tw-flex tw-justify-between tw-pb-4 tw-px-0\">\n                            <Button\n                                style={ButtonStyle.Default}\n                                size={ButtonSize.Medium}\n                                onClick={decreaseYear}\n                                emphasis={ButtonEmphasis.Weak}\n                                icon={<IconCaretLeftDouble size={IconSize.Size20} />}\n                            />\n                            <Button\n                                style={ButtonStyle.Default}\n                                size={ButtonSize.Medium}\n                                onClick={decreaseMonth}\n                                emphasis={ButtonEmphasis.Weak}\n                                icon={<IconCaretLeft size={IconSize.Size20} />}\n                            />\n                            <p className=\"tw-font-sans tw-font-semibold tw-grow tw-self-center\">\n                                {format(date, 'MMMM')} {getYear(date)}\n                            </p>\n                            <Button\n                                style={ButtonStyle.Default}\n                                size={ButtonSize.Medium}\n                                onClick={increaseMonth}\n                                emphasis={ButtonEmphasis.Weak}\n                                icon={<IconCaretRight size={IconSize.Size20} />}\n                            />\n                            <Button\n                                style={ButtonStyle.Default}\n                                size={ButtonSize.Medium}\n                                onClick={increaseYear}\n                                emphasis={ButtonEmphasis.Weak}\n                                icon={<IconCaretRightDouble size={IconSize.Size20} />}\n                            />\n                        </div>\n                    )}\n                    popperModifiers={[\n                        {\n                            name: 'arrow',\n                            options: {\n                                padding: ({ popper, reference, placement }) => {\n                                    const side = placement.includes('end') ? 'left' : 'right';\n                                    const padding = {\n                                        [`${side}`]:\n                                            Math.max(popper.width, Math.min(popper.width, reference.width)) -\n                                            ARROW_PADDING_CORRECTION,\n                                    };\n\n                                    return padding;\n                                },\n                            },\n                        },\n                    ]}\n                >\n                    {children}\n                </DatepickerComponent>\n            </div>\n        );\n    },\n);\n\nDatePicker.displayName = 'FondueDatePicker';\n"],"names":["ARROW_PADDING_CORRECTION","getDayClasses","variant","date","DatePicker","forwardRef","placeHolder","isClearable","shouldCloseOnSelect","onChange","onOpen","onClose","onBlur","onKeyDown","dateFormat","value","startDate","endDate","minDate","maxDate","validation","Validation","customTrigger","children","React","hasPopperArrow","preventOpenOnFocus","filterDate","ref","isCalendarOpen","setIsCalendarOpen","useState","handleOpen","handleClose","DatepickerComponent","DatePickerTrigger","day","decreaseMonth","increaseMonth","increaseYear","decreaseYear","Button","ButtonStyle","ButtonSize","ButtonEmphasis","IconCaretLeftDouble","IconSize","IconCaretLeft","format","getYear","IconCaretRight","IconCaretRightDouble","popper","reference","placement"],"mappings":"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"}
+{"version":3,"file":"DatePicker.es.js","sources":["../../../src/components/DatePicker/DatePicker.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { Button, ButtonEmphasis, ButtonSize, ButtonStyle } from '@components/Button';\nimport { IconSize } from '@foundation/Icon/IconSize';\nimport { format, getYear } from 'date-fns';\nimport React, { forwardRef, useState } from 'react';\nimport DatepickerComponent, { ReactDatePicker } from 'react-datepicker';\nimport './DatePicker.css';\nimport { DatePickerTrigger } from './DatePickerTrigger';\nimport { IconCaretLeft, IconCaretLeftDouble, IconCaretRight, IconCaretRightDouble } from '@foundation/Icon/Generated';\nimport { Validation } from '@utilities/validation';\n\nconst ARROW_PADDING_CORRECTION = 40;\n\ntype SingleDatePickerProps = {\n    variant?: 'single';\n    onChange: (date: Date | null) => void;\n    startDate?: null;\n    endDate?: null;\n};\n\ntype RangeDatePickerProps = {\n    variant: 'range';\n    onChange: (date: [Date | null, Date | null] | null) => void;\n    startDate: Date | null;\n    endDate: Date | null;\n};\n\nexport type DatePickerProps = {\n    placeHolder?: string;\n    isClearable?: boolean;\n    shouldCloseOnSelect?: boolean;\n    dateFormat?: string;\n    /** @description when the variant is of type 'range', the value should be the startDate */\n    value?: Date | null;\n    minDate?: Date;\n    maxDate?: Date;\n    validation?: Validation;\n    customTrigger?: React.ReactNode;\n    children?: React.ReactNode;\n    hasPopperArrow?: boolean;\n    preventOpenOnFocus?: boolean;\n    filterDate?: (date: Date) => boolean;\n    onOpen?: () => void;\n    onClose?: () => void;\n    onBlur?: () => void;\n    onKeyDown?: (event: React.KeyboardEvent<HTMLDivElement>) => void;\n} & (SingleDatePickerProps | RangeDatePickerProps);\n\nconst getDayClasses = (variant: DatePickerProps['variant'], date: Date) => {\n    if (variant === 'single') {\n        return date < new Date() ? 'past-date' : 'future-date';\n    }\n    return 'range-day';\n};\n\nexport type ReactDatePickerRef = ReactDatePicker<never, boolean>;\n\nexport const DatePicker = forwardRef<ReactDatePicker<never, boolean>, DatePickerProps>(\n    (\n        {\n            placeHolder = 'Select a date',\n            isClearable,\n            shouldCloseOnSelect,\n            onChange,\n            onOpen,\n            onClose,\n            onBlur,\n            onKeyDown,\n            dateFormat = 'dd MMM yyyy',\n            value,\n            startDate,\n            endDate,\n            minDate,\n            maxDate,\n            validation = Validation.Default,\n            customTrigger,\n            children,\n            hasPopperArrow = true,\n            preventOpenOnFocus = false,\n            filterDate = () => true,\n            variant = 'single',\n        },\n        ref,\n    ) => {\n        const [isCalendarOpen, setIsCalendarOpen] = useState<boolean>(false);\n\n        const handleOpen = () => {\n            setIsCalendarOpen(true);\n            onOpen?.();\n        };\n\n        const handleClose = () => {\n            setIsCalendarOpen(false);\n            onClose?.();\n        };\n\n        return (\n            <div data-test-id=\"date-picker\">\n                <DatepickerComponent\n                    calendarClassName=\"tw-rounded-sm tw-border tw-border-line-x-strong react-datepicker-wrap\"\n                    selected={value}\n                    startDate={startDate}\n                    endDate={endDate}\n                    minDate={minDate}\n                    maxDate={maxDate}\n                    calendarStartDay={1}\n                    onChange={onChange}\n                    onKeyDown={onKeyDown}\n                    onBlur={onBlur}\n                    selectsRange={variant === 'range'}\n                    showPopperArrow={hasPopperArrow}\n                    preventOpenOnFocus={preventOpenOnFocus}\n                    filterDate={filterDate}\n                    customInput={\n                        customTrigger ?? (\n                            <DatePickerTrigger\n                                isCalendarOpen={isCalendarOpen}\n                                isClearable={isClearable}\n                                placeHolder={placeHolder}\n                                validation={validation}\n                                onDateChanged={onChange}\n                            />\n                        )\n                    }\n                    ref={ref}\n                    formatWeekDay={(day) => day.slice(0, 1)}\n                    isClearable={isClearable}\n                    dateFormat={dateFormat}\n                    onCalendarClose={handleClose}\n                    onCalendarOpen={handleOpen}\n                    shouldCloseOnSelect={shouldCloseOnSelect}\n                    dayClassName={(date) => getDayClasses(variant, date)}\n                    popperProps={{\n                        strategy: 'fixed',\n                    }}\n                    renderCustomHeader={({ date, decreaseMonth, increaseMonth, increaseYear, decreaseYear }) => (\n                        <div className=\"tw-flex tw-justify-between tw-pb-4 tw-px-0\">\n                            <Button\n                                style={ButtonStyle.Default}\n                                size={ButtonSize.Medium}\n                                onClick={decreaseYear}\n                                emphasis={ButtonEmphasis.Weak}\n                                icon={<IconCaretLeftDouble size={IconSize.Size20} />}\n                            />\n                            <Button\n                                style={ButtonStyle.Default}\n                                size={ButtonSize.Medium}\n                                onClick={decreaseMonth}\n                                emphasis={ButtonEmphasis.Weak}\n                                icon={<IconCaretLeft size={IconSize.Size20} />}\n                            />\n                            <p className=\"tw-font-sans tw-font-semibold tw-grow tw-self-center\">\n                                {format(date, 'MMMM')} {getYear(date)}\n                            </p>\n                            <Button\n                                style={ButtonStyle.Default}\n                                size={ButtonSize.Medium}\n                                onClick={increaseMonth}\n                                emphasis={ButtonEmphasis.Weak}\n                                icon={<IconCaretRight size={IconSize.Size20} />}\n                            />\n                            <Button\n                                style={ButtonStyle.Default}\n                                size={ButtonSize.Medium}\n                                onClick={increaseYear}\n                                emphasis={ButtonEmphasis.Weak}\n                                icon={<IconCaretRightDouble size={IconSize.Size20} />}\n                            />\n                        </div>\n                    )}\n                    popperModifiers={[\n                        {\n                            name: 'arrow',\n                            options: {\n                                padding: ({ popper, reference, placement }) => {\n                                    const side = placement.includes('end') ? 'left' : 'right';\n                                    const padding = {\n                                        [`${side}`]:\n                                            Math.max(popper.width, Math.min(popper.width, reference.width)) -\n                                            ARROW_PADDING_CORRECTION,\n                                    };\n\n                                    return padding;\n                                },\n                            },\n                        },\n                    ]}\n                >\n                    {children}\n                </DatepickerComponent>\n            </div>\n        );\n    },\n);\n\nDatePicker.displayName = 'FondueDatePicker';\n"],"names":["ARROW_PADDING_CORRECTION","getDayClasses","variant","date","DatePicker","forwardRef","placeHolder","isClearable","shouldCloseOnSelect","onChange","onOpen","onClose","onBlur","onKeyDown","dateFormat","value","startDate","endDate","minDate","maxDate","validation","Validation","customTrigger","children","hasPopperArrow","preventOpenOnFocus","filterDate","ref","isCalendarOpen","setIsCalendarOpen","useState","handleOpen","handleClose","React","DatepickerComponent","DatePickerTrigger","day","decreaseMonth","increaseMonth","increaseYear","decreaseYear","Button","ButtonStyle","ButtonSize","ButtonEmphasis","IconCaretLeftDouble","IconSize","IconCaretLeft","format","getYear","IconCaretRight","IconCaretRightDouble","popper","reference","placement"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import l, { useState as E, useRef as N, useEffect as S } from "react";
+import l, { useState as b, useRef as N, useEffect as S } from "react";
 import { EditableTextHelper as T } from "./lib/helper.es.js";
 import { FOCUS_VISIBLE_STYLE as h } from "../../utilities/focusStyle.es.js";
 import { merge as r } from "../../utilities/merge.es.js";
@@ -6,22 +6,22 @@ var F = /* @__PURE__ */ ((a) => (a.INPUT = "INPUT", a.LABEL = "LABEL", a))(F ||
 const A = ({
   onEditableSave: a,
   onModeChange: u,
-  onAdditionalValueSave: b,
+  onAdditionalValueSave: E,
   children: c,
   options: e,
   isOverflowing: m = !1
 }) => {
-  const w = T.getLabel(c), [x, I] = E(w), [d, n] = E(
+  const w = T.getLabel(c), [x, I] = b(w), [d, n] = b(
     "LABEL"
     /* LABEL */
-  ), [L, B] = E(), f = N(null), P = (t) => I(t.target.value), i = (t) => {
+  ), [L, B] = b(), f = N(null), P = (t) => I(t.target.value), i = (t) => {
     n(
       "LABEL"
       /* LABEL */
     ), u && u(
       "LABEL"
       /* LABEL */
-    ), e != null && e.additionalValues && b && b(e.additionalValues, t.target.value), a && a(t.target.value);
+    ), e != null && e.additionalValues && E && E(e.additionalValues, t.target.value), a && a(t.target.value);
   }, s = (t) => () => {
     I(t), n(
       "INPUT"
@@ -30,9 +30,9 @@ const A = ({
       "INPUT"
       /* INPUT */
     );
-  }, g = (t) => {
+  }, U = (t) => {
     t.key === "Enter" && i(t);
-  }, U = (t) => i(t);
+  }, g = (t) => i(t);
   S(() => n(
     (e == null ? void 0 : e.mode) ?? "LABEL"
     /* LABEL */
@@ -83,8 +83,8 @@ const A = ({
             style: L,
             value: x,
             onChange: P,
-            onKeyDown: g,
-            onBlur: U
+            onKeyDown: U,
+            onBlur: g
           }
         ),
         /* @__PURE__ */ l.createElement(
@@ -101,7 +101,7 @@ const A = ({
           x
         )
       )
-    ) : /* @__PURE__ */ l.createElement(l.Fragment, null),
+    ) : null,
     /* @__PURE__ */ l.createElement(
       "button",
       {

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 React, {\n    ChangeEvent,\n    FocusEvent,\n    FocusEventHandler,\n    KeyboardEvent,\n    KeyboardEventHandler,\n    ReactElement,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\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}\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}: 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        onModeChange && onModeChange(EditableMode.LABEL);\n        options?.additionalValues &&\n            onAdditionalValueSave &&\n            onAdditionalValueSave(options.additionalValues, (event.target as HTMLTextAreaElement).value);\n        onEditableSave && onEditableSave((event.target as HTMLTextAreaElement).value);\n    };\n\n    const handleSwitchToInput = (childrenText: string) => () => {\n        setInputValue(childrenText);\n        setEditableState(EditableMode.INPUT);\n        onModeChange && onModeChange(EditableMode.INPUT);\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        React.cloneElement(children, {\n            ref: childRef,\n        });\n\n    return (\n        <div\n            data-test-id=\"editable-node-container\"\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            ) : (\n                <></>\n            )}\n            <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","childrenLabel","EditableTextHelper","inputValue","setInputValue","useState","editableState","setEditableState","inputStyling","setInputStyling","inputRef","useRef","handleInputChange","event","handleSwitchToLabel","handleSwitchToInput","childrenText","handleKeyDown","handleBlur","useEffect","clickBehaviour","childRef","_a","ChildrenWithRef","React","merge","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 React, {\n    ChangeEvent,\n    FocusEvent,\n    FocusEventHandler,\n    KeyboardEvent,\n    KeyboardEventHandler,\n    ReactElement,\n    useEffect,\n    useRef,\n    useState,\n} from 'react';\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}\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}: 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        onModeChange && onModeChange(EditableMode.LABEL);\n        options?.additionalValues &&\n            onAdditionalValueSave &&\n            onAdditionalValueSave(options.additionalValues, (event.target as HTMLTextAreaElement).value);\n        onEditableSave && onEditableSave((event.target as HTMLTextAreaElement).value);\n    };\n\n    const handleSwitchToInput = (childrenText: string) => () => {\n        setInputValue(childrenText);\n        setEditableState(EditableMode.INPUT);\n        onModeChange && onModeChange(EditableMode.INPUT);\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        React.cloneElement(children, {\n            ref: childRef,\n        });\n\n    return (\n        <div\n            data-test-id=\"editable-node-container\"\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                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","childrenLabel","EditableTextHelper","inputValue","setInputValue","useState","editableState","setEditableState","inputStyling","setInputStyling","inputRef","useRef","handleInputChange","event","handleSwitchToLabel","handleSwitchToInput","childrenText","handleKeyDown","handleBlur","useEffect","clickBehaviour","childRef","_a","ChildrenWithRef","React","merge","FOCUS_VISIBLE_STYLE"],"mappings":"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"}

package/dist/components/MultiSelect/SelectMenuItems/SelectMenuItems.es.js

@@ -1,39 +1,39 @@
-import e from "react";
+import t from "react";
 import { Text as n } from "../../../typography/Text/Text.es.js";
-import f from "../../../foundation/Icon/Generated/IconCheckMark16.es.js";
-const u = () => /* @__PURE__ */ e.createElement("div", { className: "tw-border-t tw-w-full tw-border-solid tw-my-2 tw-border-line" });
+import E from "../../../foundation/Icon/Generated/IconCheckMark16.es.js";
+const u = () => /* @__PURE__ */ t.createElement("div", { className: "tw-border-t tw-w-full tw-border-solid tw-my-2 tw-border-line" });
 u.displayName = "FondueDividerItem";
-const y = ({ label: t }) => /* @__PURE__ */ e.createElement("div", { className: "tw-w-full tw-text-left tw-py-2 tw-px-5 tw-min-w-[20.5rem]" }, /* @__PURE__ */ e.createElement(n, { weight: "strong" }, t));
+const y = ({ label: e }) => /* @__PURE__ */ t.createElement("div", { className: "tw-w-full tw-text-left tw-py-2 tw-px-5 tw-min-w-[20.5rem]" }, /* @__PURE__ */ t.createElement(n, { weight: "strong" }, e));
 y.displayName = "FondueCategoryItem";
-const g = ({ label: t, value: r, avatar: l = /* @__PURE__ */ e.createElement(e.Fragment, null), imgSrc: m, isChecked: a = !1 }) => /* @__PURE__ */ e.createElement(
+const I = ({ label: e, value: r, avatar: l, imgSrc: m, isChecked: a = !1 }) => /* @__PURE__ */ t.createElement(
   "div",
   {
     className: `tw-flex tw-items-center tw-justify-between tw-min-w-[18rem] ${a ? "tw-text-text-interactive" : ""}`
   },
-  /* @__PURE__ */ e.createElement("div", { className: "tw-flex tw-gap-3 tw-items-center" }, l, m && /* @__PURE__ */ e.createElement(
+  /* @__PURE__ */ t.createElement("div", { className: "tw-flex tw-gap-3 tw-items-center" }, l, m && /* @__PURE__ */ t.createElement(
     "img",
     {
       src: m,
       alt: r,
       className: "tw-w-[1.5rem] tw-h-[1.5rem] tw-rounded-[50%] tw-object-cover tw-z-10"
     }
-  ), /* @__PURE__ */ e.createElement(n, { color: a ? "interactive" : "weak" }, t)),
-  a && /* @__PURE__ */ e.createElement("div", { className: "tw-ml-2" }, /* @__PURE__ */ e.createElement(f, null))
+  ), /* @__PURE__ */ t.createElement(n, { color: a ? "interactive" : "weak" }, e)),
+  a && /* @__PURE__ */ t.createElement("div", { className: "tw-ml-2" }, /* @__PURE__ */ t.createElement(E, null))
 );
-g.displayName = "FondueDefaultItem";
-const I = ({ label: t = "" }) => /* @__PURE__ */ e.createElement("div", { className: "tw-py-2 tw-px-5 tw-min-w-[20.5rem]" }, /* @__PURE__ */ e.createElement(n, { color: "weak" }, t));
-I.displayName = "FondueNoSearchResults";
-const F = ({ checkboxes: t, index: r }) => {
+I.displayName = "FondueDefaultItem";
+const g = ({ label: e = "" }) => /* @__PURE__ */ t.createElement("div", { className: "tw-py-2 tw-px-5 tw-min-w-[20.5rem]" }, /* @__PURE__ */ t.createElement(n, { color: "weak" }, e));
+g.displayName = "FondueNoSearchResults";
+const C = ({ checkboxes: e, index: r }) => {
   var s, o, i, w, c;
-  const { value: l, label: m, isCategory: a, isDivider: d } = t[r], v = ((s = t[r + 1]) == null ? void 0 : s.isCategory) || ((o = t[r + 1]) == null ? void 0 : o.isDivider), p = (i = t[r - 1]) == null ? void 0 : i.isCategory, E = !((w = t[r + 2]) != null && w.isCategory) && ((c = t[r + 2]) == null ? void 0 : c.value), N = t[r + 1] && !v;
-  return a ? N ? /* @__PURE__ */ e.createElement(y, { key: l, label: m }) : /* @__PURE__ */ e.createElement(e.Fragment, null) : d ? p || !E ? /* @__PURE__ */ e.createElement(e.Fragment, null) : /* @__PURE__ */ e.createElement(u, { key: l + r }) : null;
+  const { value: l, label: m, isCategory: a, isDivider: d } = e[r], v = ((s = e[r + 1]) == null ? void 0 : s.isCategory) || ((o = e[r + 1]) == null ? void 0 : o.isDivider), p = (i = e[r - 1]) == null ? void 0 : i.isCategory, N = !((w = e[r + 2]) != null && w.isCategory) && ((c = e[r + 2]) == null ? void 0 : c.value), f = e[r + 1] && !v;
+  return a ? f ? /* @__PURE__ */ t.createElement(y, { key: l, label: m }) : null : d ? p || !N ? null : /* @__PURE__ */ t.createElement(u, { key: l + r }) : null;
 };
-F.displayName = "FondueOptionalItems";
+C.displayName = "FondueOptionalItems";
 export {
   y as CategoryItem,
-  g as DefaultItem,
+  I as DefaultItem,
   u as DividerItem,
-  I as NoSearchResults,
-  F as OptionalItems
+  g as NoSearchResults,
+  C as OptionalItems
 };
 //# sourceMappingURL=SelectMenuItems.es.js.map

package/dist/components/MultiSelect/SelectMenuItems/SelectMenuItems.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SelectMenuItems.es.js","sources":["../../../../src/components/MultiSelect/SelectMenuItems/SelectMenuItems.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { Text } from '@typography/Text';\nimport { IconCheckMark16 } from '@foundation/Icon/Generated';\nimport { Item } from '../MultiSelect';\n\nexport const DividerItem = () => {\n    return <div className=\"tw-border-t tw-w-full tw-border-solid tw-my-2 tw-border-line\" />;\n};\nDividerItem.displayName = 'FondueDividerItem';\n\ntype CategoryItemProps = {\n    label: string;\n};\n\n// Min width for the MenuItem content should be 18rem\n// CategoryItem and NoSearchResults will add the MenuItem internal padding of 2.5rem since they are not being\n// rendered inside a MenuItem component due to hover state\nexport const CategoryItem = ({ label }: CategoryItemProps) => {\n    return (\n        <div className=\"tw-w-full tw-text-left tw-py-2 tw-px-5 tw-min-w-[20.5rem]\">\n            <Text weight=\"strong\">{label}</Text>\n        </div>\n    );\n};\nCategoryItem.displayName = 'FondueCategoryItem';\n\ntype DefaultItemProps = {\n    label: string;\n    value: string;\n    avatar?: React.ReactNode;\n    isChecked?: boolean;\n    imgSrc?: string;\n};\n\nexport const DefaultItem = ({ label, value, avatar = <></>, imgSrc, isChecked = false }: DefaultItemProps) => {\n    return (\n        <div\n            className={`tw-flex tw-items-center tw-justify-between tw-min-w-[18rem] ${\n                isChecked ? 'tw-text-text-interactive' : ''\n            }`}\n        >\n            <div className=\"tw-flex tw-gap-3 tw-items-center\">\n                {avatar}\n                {imgSrc && (\n                    <img\n                        src={imgSrc}\n                        alt={value}\n                        className=\"tw-w-[1.5rem] tw-h-[1.5rem] tw-rounded-[50%] tw-object-cover tw-z-10\"\n                    />\n                )}\n                <Text color={isChecked ? 'interactive' : 'weak'}>{label}</Text>\n            </div>\n            {isChecked && (\n                <div className=\"tw-ml-2\">\n                    <IconCheckMark16 />\n                </div>\n            )}\n        </div>\n    );\n};\nDefaultItem.displayName = 'FondueDefaultItem';\n\ntype NoSearchResultsProps = {\n    label?: string;\n};\n\nexport const NoSearchResults = ({ label = '' }: NoSearchResultsProps) => {\n    return (\n        <div className=\"tw-py-2 tw-px-5 tw-min-w-[20.5rem]\">\n            <Text color=\"weak\">{label}</Text>\n        </div>\n    );\n};\nNoSearchResults.displayName = 'FondueNoSearchResults';\n\ntype OptionalItemsProps = {\n    checkboxes: Item[];\n    index: number;\n};\n\nexport const OptionalItems = ({ checkboxes, index }: OptionalItemsProps) => {\n    const { value, label, isCategory, isDivider } = checkboxes[index];\n    const isNextItemDivider = checkboxes[index + 1]?.isCategory || checkboxes[index + 1]?.isDivider;\n    const isPrevItemCategory = checkboxes[index - 1]?.isCategory;\n    const hasItemAfterCategory = !checkboxes[index + 2]?.isCategory && checkboxes[index + 2]?.value;\n    const hasNextValue = checkboxes[index + 1] && !isNextItemDivider;\n\n    if (isCategory) {\n        return !hasNextValue ? <></> : <CategoryItem key={value} label={label} />;\n    }\n    if (isDivider) {\n        return isPrevItemCategory || !hasItemAfterCategory ? <></> : <DividerItem key={value + index} />;\n    }\n    return null;\n};\nOptionalItems.displayName = 'FondueOptionalItems';\n"],"names":["DividerItem","React","CategoryItem","label","Text","DefaultItem","value","avatar","imgSrc","isChecked","IconCheckMark16","NoSearchResults","OptionalItems","checkboxes","index","isCategory","isDivider","isNextItemDivider","_a","_b","isPrevItemCategory","_c","hasItemAfterCategory","_d","_e","hasNextValue"],"mappings":";;;AAOO,MAAMA,IAAc,MAChB,gBAAAC,EAAA,cAAC,OAAI,EAAA,WAAU,+DAA+D,CAAA;AAEzFD,EAAY,cAAc;AASnB,MAAME,IAAe,CAAC,EAAE,OAAAC,QAEvB,gBAAAF,EAAA,cAAC,SAAI,WAAU,4DAAA,mCACVG,GAAK,EAAA,QAAO,SAAU,GAAAD,CAAM,CACjC;AAGRD,EAAa,cAAc;AAUd,MAAAG,IAAc,CAAC,EAAE,OAAAF,GAAO,OAAAG,GAAO,QAAAC,IAAS,gBAAAN,EAAA,cAAAA,EAAA,UAAA,IAAE,GAAK,QAAAO,GAAQ,WAAAC,IAAY,GAAA,MAExE,gBAAAR,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,+DACPQ,IAAY,6BAA6B;AAAA,EAAA;AAAA,EAG5C,gBAAAR,EAAA,cAAA,OAAA,EAAI,WAAU,mCAAA,GACVM,GACAC,KACG,gBAAAP,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKO;AAAA,MACL,KAAKF;AAAA,MACL,WAAU;AAAA,IAAA;AAAA,EAAA,mCAGjBF,GAAK,EAAA,OAAOK,IAAY,gBAAgB,UAASN,CAAM,CAC5D;AAAA,EACCM,KACI,gBAAAR,EAAA,cAAA,OAAA,EAAI,WAAU,UACX,GAAA,gBAAAA,EAAA,cAACS,OAAgB,CACrB;AAAA;AAKhBL,EAAY,cAAc;AAMnB,MAAMM,IAAkB,CAAC,EAAE,OAAAR,IAAQ,SAElC,gBAAAF,EAAA,cAAC,SAAI,WAAU,qCAAA,mCACVG,GAAK,EAAA,OAAM,OAAQ,GAAAD,CAAM,CAC9B;AAGRQ,EAAgB,cAAc;AAOvB,MAAMC,IAAgB,CAAC,EAAE,YAAAC,GAAY,OAAAC,QAAgC;;AACxE,QAAM,EAAE,OAAAR,GAAO,OAAAH,GAAO,YAAAY,GAAY,WAAAC,MAAcH,EAAWC,CAAK,GAC1DG,MAAoBC,IAAAL,EAAWC,IAAQ,CAAC,MAApB,gBAAAI,EAAuB,iBAAcC,IAAAN,EAAWC,IAAQ,CAAC,MAApB,gBAAAK,EAAuB,YAChFC,KAAqBC,IAAAR,EAAWC,IAAQ,CAAC,MAApB,gBAAAO,EAAuB,YAC5CC,IAAuB,GAACC,IAAAV,EAAWC,IAAQ,CAAC,MAApB,QAAAS,EAAuB,iBAAcC,IAAAX,EAAWC,IAAQ,CAAC,MAApB,gBAAAU,EAAuB,QACpFC,IAAeZ,EAAWC,IAAQ,CAAC,KAAK,CAACG;AAE/C,SAAIF,IACQU,oCAAwBvB,GAAa,EAAA,KAAKI,GAAO,OAAAH,EAAc,CAAA,IAA9C,gBAAAF,EAAA,cAAAA,EAAA,UAAA,IAAA,IAEzBe,IACOI,KAAsB,CAACE,IAAuB,gBAAArB,EAAA,cAAAA,EAAA,UAAA,IAAE,IAAO,gBAAAA,EAAA,cAAAD,GAAA,EAAY,KAAKM,IAAQQ,EAAO,CAAA,IAE3F;AACX;AACAF,EAAc,cAAc;"}
+{"version":3,"file":"SelectMenuItems.es.js","sources":["../../../../src/components/MultiSelect/SelectMenuItems/SelectMenuItems.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React from 'react';\nimport { Text } from '@typography/Text';\nimport { IconCheckMark16 } from '@foundation/Icon/Generated';\nimport { Item } from '../MultiSelect';\n\nexport const DividerItem = () => {\n    return <div className=\"tw-border-t tw-w-full tw-border-solid tw-my-2 tw-border-line\" />;\n};\nDividerItem.displayName = 'FondueDividerItem';\n\ntype CategoryItemProps = {\n    label: string;\n};\n\n// Min width for the MenuItem content should be 18rem\n// CategoryItem and NoSearchResults will add the MenuItem internal padding of 2.5rem since they are not being\n// rendered inside a MenuItem component due to hover state\nexport const CategoryItem = ({ label }: CategoryItemProps) => {\n    return (\n        <div className=\"tw-w-full tw-text-left tw-py-2 tw-px-5 tw-min-w-[20.5rem]\">\n            <Text weight=\"strong\">{label}</Text>\n        </div>\n    );\n};\nCategoryItem.displayName = 'FondueCategoryItem';\n\ntype DefaultItemProps = {\n    label: string;\n    value: string;\n    avatar?: React.ReactNode;\n    isChecked?: boolean;\n    imgSrc?: string;\n};\n\nexport const DefaultItem = ({ label, value, avatar, imgSrc, isChecked = false }: DefaultItemProps) => {\n    return (\n        <div\n            className={`tw-flex tw-items-center tw-justify-between tw-min-w-[18rem] ${\n                isChecked ? 'tw-text-text-interactive' : ''\n            }`}\n        >\n            <div className=\"tw-flex tw-gap-3 tw-items-center\">\n                {avatar}\n                {imgSrc && (\n                    <img\n                        src={imgSrc}\n                        alt={value}\n                        className=\"tw-w-[1.5rem] tw-h-[1.5rem] tw-rounded-[50%] tw-object-cover tw-z-10\"\n                    />\n                )}\n                <Text color={isChecked ? 'interactive' : 'weak'}>{label}</Text>\n            </div>\n            {isChecked && (\n                <div className=\"tw-ml-2\">\n                    <IconCheckMark16 />\n                </div>\n            )}\n        </div>\n    );\n};\nDefaultItem.displayName = 'FondueDefaultItem';\n\ntype NoSearchResultsProps = {\n    label?: string;\n};\n\nexport const NoSearchResults = ({ label = '' }: NoSearchResultsProps) => {\n    return (\n        <div className=\"tw-py-2 tw-px-5 tw-min-w-[20.5rem]\">\n            <Text color=\"weak\">{label}</Text>\n        </div>\n    );\n};\nNoSearchResults.displayName = 'FondueNoSearchResults';\n\ntype OptionalItemsProps = {\n    checkboxes: Item[];\n    index: number;\n};\n\nexport const OptionalItems = ({ checkboxes, index }: OptionalItemsProps) => {\n    const { value, label, isCategory, isDivider } = checkboxes[index];\n    const isNextItemDivider = checkboxes[index + 1]?.isCategory || checkboxes[index + 1]?.isDivider;\n    const isPrevItemCategory = checkboxes[index - 1]?.isCategory;\n    const hasItemAfterCategory = !checkboxes[index + 2]?.isCategory && checkboxes[index + 2]?.value;\n    const hasNextValue = checkboxes[index + 1] && !isNextItemDivider;\n\n    if (isCategory) {\n        return !hasNextValue ? null : <CategoryItem key={value} label={label} />;\n    }\n    if (isDivider) {\n        return isPrevItemCategory || !hasItemAfterCategory ? null : <DividerItem key={value + index} />;\n    }\n    return null;\n};\nOptionalItems.displayName = 'FondueOptionalItems';\n"],"names":["DividerItem","React","CategoryItem","label","Text","DefaultItem","value","avatar","imgSrc","isChecked","IconCheckMark16","NoSearchResults","OptionalItems","checkboxes","index","isCategory","isDivider","isNextItemDivider","_a","_b","isPrevItemCategory","_c","hasItemAfterCategory","_d","_e","hasNextValue"],"mappings":";;;AAOO,MAAMA,IAAc,MAChB,gBAAAC,EAAA,cAAC,OAAI,EAAA,WAAU,+DAA+D,CAAA;AAEzFD,EAAY,cAAc;AASnB,MAAME,IAAe,CAAC,EAAE,OAAAC,QAEvB,gBAAAF,EAAA,cAAC,SAAI,WAAU,4DAAA,mCACVG,GAAK,EAAA,QAAO,SAAU,GAAAD,CAAM,CACjC;AAGRD,EAAa,cAAc;AAUd,MAAAG,IAAc,CAAC,EAAE,OAAAF,GAAO,OAAAG,GAAO,QAAAC,GAAQ,QAAAC,GAAQ,WAAAC,IAAY,SAEhE,gBAAAR,EAAA;AAAA,EAAC;AAAA,EAAA;AAAA,IACG,WAAW,+DACPQ,IAAY,6BAA6B;AAAA,EAAA;AAAA,EAG5C,gBAAAR,EAAA,cAAA,OAAA,EAAI,WAAU,mCAAA,GACVM,GACAC,KACG,gBAAAP,EAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACG,KAAKO;AAAA,MACL,KAAKF;AAAA,MACL,WAAU;AAAA,IAAA;AAAA,EAAA,mCAGjBF,GAAK,EAAA,OAAOK,IAAY,gBAAgB,UAASN,CAAM,CAC5D;AAAA,EACCM,KACI,gBAAAR,EAAA,cAAA,OAAA,EAAI,WAAU,UACX,GAAA,gBAAAA,EAAA,cAACS,OAAgB,CACrB;AAAA;AAKhBL,EAAY,cAAc;AAMnB,MAAMM,IAAkB,CAAC,EAAE,OAAAR,IAAQ,SAElC,gBAAAF,EAAA,cAAC,SAAI,WAAU,qCAAA,mCACVG,GAAK,EAAA,OAAM,OAAQ,GAAAD,CAAM,CAC9B;AAGRQ,EAAgB,cAAc;AAOvB,MAAMC,IAAgB,CAAC,EAAE,YAAAC,GAAY,OAAAC,QAAgC;;AACxE,QAAM,EAAE,OAAAR,GAAO,OAAAH,GAAO,YAAAY,GAAY,WAAAC,MAAcH,EAAWC,CAAK,GAC1DG,MAAoBC,IAAAL,EAAWC,IAAQ,CAAC,MAApB,gBAAAI,EAAuB,iBAAcC,IAAAN,EAAWC,IAAQ,CAAC,MAApB,gBAAAK,EAAuB,YAChFC,KAAqBC,IAAAR,EAAWC,IAAQ,CAAC,MAApB,gBAAAO,EAAuB,YAC5CC,IAAuB,GAACC,IAAAV,EAAWC,IAAQ,CAAC,MAApB,QAAAS,EAAuB,iBAAcC,IAAAX,EAAWC,IAAQ,CAAC,MAApB,gBAAAU,EAAuB,QACpFC,IAAeZ,EAAWC,IAAQ,CAAC,KAAK,CAACG;AAE/C,SAAIF,IACQU,oCAAuBvB,GAAa,EAAA,KAAKI,GAAO,OAAAH,EAAc,CAAA,IAA/C,OAEvBa,IACOI,KAAsB,CAACE,IAAuB,uCAAQtB,GAAY,EAAA,KAAKM,IAAQQ,EAAO,CAAA,IAE1F;AACX;AACAF,EAAc,cAAc;"}

package/dist/components/RichTextEditor/serializer/utils/convertCamelCaseToKebabCase.es.js

@@ -1,4 +1,4 @@
-const a = (e) => e.replace(/([A-Z])/g, "-$1").toLowerCase();
+const a = (e) => e.replaceAll(/([A-Z])/g, "-$1").toLowerCase();
 export {
   a as convertCamelCaseToKebabCase
 };

package/dist/components/RichTextEditor/serializer/utils/convertCamelCaseToKebabCase.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"convertCamelCaseToKebabCase.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/utils/convertCamelCaseToKebabCase.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const convertCamelCaseToKebabCase = (str: string): string => {\n    return str.replace(/([A-Z])/g, '-$1').toLowerCase();\n};\n"],"names":["convertCamelCaseToKebabCase","str"],"mappings":"AAEa,MAAAA,IAA8B,CAACC,MACjCA,EAAI,QAAQ,YAAY,KAAK,EAAE,YAAY;"}
+{"version":3,"file":"convertCamelCaseToKebabCase.es.js","sources":["../../../../../src/components/RichTextEditor/serializer/utils/convertCamelCaseToKebabCase.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nexport const convertCamelCaseToKebabCase = (str: string): string => {\n    return str.replaceAll(/([A-Z])/g, '-$1').toLowerCase();\n};\n"],"names":["convertCamelCaseToKebabCase","str"],"mappings":"AAEa,MAAAA,IAA8B,CAACC,MACjCA,EAAI,WAAW,YAAY,KAAK,EAAE,YAAY;"}

package/dist/components/RichTextEditor/utils/parseRawValue.es.js

@@ -1,6 +1,6 @@
-import { ELEMENT_PARAGRAPH as l, deserializeHtml as c, normalizeEditor as m } from "@udecode/plate";
+import { ELEMENT_PARAGRAPH as o, deserializeHtml as c, normalizeEditor as m } from "@udecode/plate";
 import { InitPlateEditor as p } from "./InitPlateEditor.es.js";
-const d = (t) => new DOMParser().parseFromString(t, "text/html").body.children.length > 0, u = (t) => d(t) ? t : `<p>${t}</p>`, h = [{ type: l, children: [{ text: "" }] }], f = ({ editorId: t = "parseRawValue", raw: e, plugins: a }) => {
+const d = (t) => new DOMParser().parseFromString(t, "text/html").body.children.length > 0, u = (t) => d(t) ? t : `<p>${t}</p>`, h = [{ type: o, children: [{ text: "" }] }], f = ({ editorId: t = "parseRawValue", raw: e, plugins: a }) => {
   const r = p.init(`${t}_parseRawValue`, a).getInstance();
   let n = h;
   if (!e)
@@ -8,8 +8,8 @@ const d = (t) => new DOMParser().parseFromString(t, "text/html").body.children.l
   try {
     n = JSON.parse(e);
   } catch {
-    const s = e.trim().replace(/>\s+</g, "><"), o = u(s), i = c(r, {
-      element: o,
+    const l = e.trim().replaceAll(/>\s+</g, "><"), s = u(l), i = c(r, {
+      element: s,
       stripWhitespace: !0
     });
     i && (n = i);

package/dist/components/RichTextEditor/utils/parseRawValue.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"parseRawValue.es.js","sources":["../../../../src/components/RichTextEditor/utils/parseRawValue.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ELEMENT_PARAGRAPH, Value, deserializeHtml, normalizeEditor } from '@udecode/plate';\nimport { PluginComposer } from '../Plugins';\nimport { InitPlateEditor } from './InitPlateEditor';\n\nconst isHtmlString = (string: string): boolean => {\n    const fragment = new DOMParser().parseFromString(string, 'text/html');\n    return fragment.body.children.length > 0;\n};\n\nconst wrapTextInHtml = (text: string) => (isHtmlString(text) ? text : `<p>${text}</p>`);\n\nexport const EMPTY_RICH_TEXT_VALUE: Value = [{ type: ELEMENT_PARAGRAPH, children: [{ text: '' }] }];\n\ntype ParseRawValueOptions = {\n    editorId?: string;\n    raw?: string;\n    plugins?: PluginComposer;\n};\n\nexport const parseRawValue = ({ editorId = 'parseRawValue', raw, plugins }: ParseRawValueOptions): Value => {\n    const editor = InitPlateEditor.init(`${editorId}_parseRawValue`, plugins).getInstance();\n    let parsedValue = EMPTY_RICH_TEXT_VALUE;\n\n    if (!raw) {\n        return parsedValue;\n    }\n\n    try {\n        parsedValue = JSON.parse(raw);\n    } catch {\n        const trimmed = raw.trim().replace(/>\\s+</g, '><');\n        const htmlDocumentString = wrapTextInHtml(trimmed);\n        const parsedHtml = deserializeHtml(editor, {\n            element: htmlDocumentString,\n            stripWhitespace: true,\n        }) as Value;\n        if (parsedHtml) {\n            parsedValue = parsedHtml;\n        }\n    }\n\n    editor.children = parsedValue;\n    normalizeEditor(editor, { force: true });\n\n    return editor.children;\n};\n"],"names":["isHtmlString","string","wrapTextInHtml","text","EMPTY_RICH_TEXT_VALUE","ELEMENT_PARAGRAPH","parseRawValue","editorId","raw","plugins","editor","InitPlateEditor","parsedValue","trimmed","htmlDocumentString","parsedHtml","deserializeHtml","normalizeEditor"],"mappings":";;AAMA,MAAMA,IAAe,CAACC,MACD,IAAI,UAAA,EAAY,gBAAgBA,GAAQ,WAAW,EACpD,KAAK,SAAS,SAAS,GAGrCC,IAAiB,CAACC,MAAkBH,EAAaG,CAAI,IAAIA,IAAO,MAAMA,SAE/DC,IAA+B,CAAC,EAAE,MAAMC,GAAmB,UAAU,CAAC,EAAE,MAAM,GAAI,CAAA,GAAG,GAQrFC,IAAgB,CAAC,EAAE,UAAAC,IAAW,iBAAiB,KAAAC,GAAK,SAAAC,QAA2C;AACxG,QAAMC,IAASC,EAAgB,KAAK,GAAGJ,mBAA0BE,CAAO,EAAE;AAC1E,MAAIG,IAAcR;AAElB,MAAI,CAACI;AACM,WAAAI;AAGP,MAAA;AACc,IAAAA,IAAA,KAAK,MAAMJ,CAAG;AAAA,EAAA,QAC9B;AACE,UAAMK,IAAUL,EAAI,KAAA,EAAO,QAAQ,UAAU,IAAI,GAC3CM,IAAqBZ,EAAeW,CAAO,GAC3CE,IAAaC,EAAgBN,GAAQ;AAAA,MACvC,SAASI;AAAA,MACT,iBAAiB;AAAA,IAAA,CACpB;AACD,IAAIC,MACcH,IAAAG;AAAA,EAEtB;AAEA,SAAAL,EAAO,WAAWE,GAClBK,EAAgBP,GAAQ,EAAE,OAAO,GAAM,CAAA,GAEhCA,EAAO;AAClB;"}
+{"version":3,"file":"parseRawValue.es.js","sources":["../../../../src/components/RichTextEditor/utils/parseRawValue.ts"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport { ELEMENT_PARAGRAPH, Value, deserializeHtml, normalizeEditor } from '@udecode/plate';\nimport { PluginComposer } from '../Plugins';\nimport { InitPlateEditor } from './InitPlateEditor';\n\nconst isHtmlString = (string: string): boolean => {\n    const fragment = new DOMParser().parseFromString(string, 'text/html');\n    return fragment.body.children.length > 0;\n};\n\nconst wrapTextInHtml = (text: string) => (isHtmlString(text) ? text : `<p>${text}</p>`);\n\nexport const EMPTY_RICH_TEXT_VALUE: Value = [{ type: ELEMENT_PARAGRAPH, children: [{ text: '' }] }];\n\ntype ParseRawValueOptions = {\n    editorId?: string;\n    raw?: string;\n    plugins?: PluginComposer;\n};\n\nexport const parseRawValue = ({ editorId = 'parseRawValue', raw, plugins }: ParseRawValueOptions): Value => {\n    const editor = InitPlateEditor.init(`${editorId}_parseRawValue`, plugins).getInstance();\n    let parsedValue = EMPTY_RICH_TEXT_VALUE;\n\n    if (!raw) {\n        return parsedValue;\n    }\n\n    try {\n        parsedValue = JSON.parse(raw);\n    } catch {\n        const trimmed = raw.trim().replaceAll(/>\\s+</g, '><');\n        const htmlDocumentString = wrapTextInHtml(trimmed);\n        const parsedHtml = deserializeHtml(editor, {\n            element: htmlDocumentString,\n            stripWhitespace: true,\n        }) as Value;\n        if (parsedHtml) {\n            parsedValue = parsedHtml;\n        }\n    }\n\n    editor.children = parsedValue;\n    normalizeEditor(editor, { force: true });\n\n    return editor.children;\n};\n"],"names":["isHtmlString","string","wrapTextInHtml","text","EMPTY_RICH_TEXT_VALUE","ELEMENT_PARAGRAPH","parseRawValue","editorId","raw","plugins","editor","InitPlateEditor","parsedValue","trimmed","htmlDocumentString","parsedHtml","deserializeHtml","normalizeEditor"],"mappings":";;AAMA,MAAMA,IAAe,CAACC,MACD,IAAI,UAAA,EAAY,gBAAgBA,GAAQ,WAAW,EACpD,KAAK,SAAS,SAAS,GAGrCC,IAAiB,CAACC,MAAkBH,EAAaG,CAAI,IAAIA,IAAO,MAAMA,SAE/DC,IAA+B,CAAC,EAAE,MAAMC,GAAmB,UAAU,CAAC,EAAE,MAAM,GAAI,CAAA,GAAG,GAQrFC,IAAgB,CAAC,EAAE,UAAAC,IAAW,iBAAiB,KAAAC,GAAK,SAAAC,QAA2C;AACxG,QAAMC,IAASC,EAAgB,KAAK,GAAGJ,mBAA0BE,CAAO,EAAE;AAC1E,MAAIG,IAAcR;AAElB,MAAI,CAACI;AACM,WAAAI;AAGP,MAAA;AACc,IAAAA,IAAA,KAAK,MAAMJ,CAAG;AAAA,EAAA,QAC9B;AACE,UAAMK,IAAUL,EAAI,KAAA,EAAO,WAAW,UAAU,IAAI,GAC9CM,IAAqBZ,EAAeW,CAAO,GAC3CE,IAAaC,EAAgBN,GAAQ;AAAA,MACvC,SAASI;AAAA,MACT,iBAAiB;AAAA,IAAA,CACpB;AACD,IAAIC,MACcH,IAAAG;AAAA,EAEtB;AAEA,SAAAL,EAAO,WAAWE,GAClBK,EAAgBP,GAAQ,EAAE,OAAO,GAAM,CAAA,GAEhCA,EAAO;AAClB;"}