@frontify/fondue 12.0.0-beta.2 → 12.0.0-beta.4

package/dist/components/Button/Button.es.js

@@ -1,69 +1,70 @@
-import B, { forwardRef as I, cloneElement as M } from "react";
-import { useButton as N } from "@react-aria/button";
+import f, { forwardRef as M, cloneElement as N } from "react";
+import { useButton as P } from "@react-aria/button";
 import { merge as u } from "../../utilities/merge.es.js";
 import { useForwardedRef as T } from "../../utilities/useForwardedRef.es.js";
-import { ButtonStyle as o, ButtonEmphasis as r, ButtonType as z, ButtonSize as P, ButtonRounding as F } from "./ButtonTypes.es.js";
-import { ButtonEmphasis as h, ButtonRounding as tt, ButtonSize as ot, ButtonStyle as et, ButtonType as nt, UpdatedButtonStyle as st } from "./ButtonTypes.es.js";
-import { ButtonCommonClasses as O, ButtonRoundingClasses as U, ButtonSizeClasses as S, IconSpacingClasses as _, ButtonStyleClasses as k, ButtonDisabledClasses as V } from "./ButtonClasses.es.js";
-import { ButtonCommonClasses as ut, ButtonDisabledClasses as rt, ButtonRoundingClasses as lt, ButtonSizeClasses as mt, ButtonStyleClasses as ft, IconSpacingClasses as Bt } from "./ButtonClasses.es.js";
-import { FOCUS_VISIBLE_STYLE as W } from "../../utilities/focusStyle.es.js";
-import { buttonTypeMap as Y, buttonIconSizeMap as $ } from "./mappings.es.js";
-const j = ({
-  type: c = z.Button,
+import { ButtonStyle as o, ButtonEmphasis as r, ButtonType as z, ButtonSize as O, ButtonRounding as U } from "./ButtonTypes.es.js";
+import { ButtonEmphasis as nt, ButtonRounding as st, ButtonSize as at, ButtonStyle as ut, ButtonType as rt, UpdatedButtonStyle as mt } from "./ButtonTypes.es.js";
+import { ButtonCommonClasses as V, ButtonRoundingClasses as _, ButtonSizeClasses as c, IconSpacingClasses as k, ButtonStyleClasses as W, ButtonDisabledClasses as Y } from "./ButtonClasses.es.js";
+import { ButtonCommonClasses as it, ButtonDisabledClasses as ft, ButtonRoundingClasses as Bt, ButtonSizeClasses as pt, ButtonStyleClasses as ct, IconSpacingClasses as St } from "./ButtonClasses.es.js";
+import { FOCUS_VISIBLE_STYLE as $ } from "../../utilities/focusStyle.es.js";
+import { buttonTypeMap as j, buttonIconSizeMap as q } from "./mappings.es.js";
+import { useFocusRing as v } from "@react-aria/focus";
+const A = ({
+  type: S = z.Button,
   style: t = o.Default,
-  size: e = P.Medium,
-  rounding: C = F.Medium,
+  size: e = O.Medium,
+  rounding: C = U.Medium,
   emphasis: n = r.Strong,
-  hideLabel: l = !1,
+  hideLabel: m = !1,
   disabled: s = !1,
-  icon: m,
+  icon: l,
   children: a,
-  onClick: i,
+  onClick: B,
   hugWidth: d = !0,
   "aria-label": b,
   formId: g,
   solid: y,
   inverted: E
-}, D) => {
+}, R) => {
   t === o.Primary ? (t = o.Default, n = r.Strong) : t === o.Secondary && (t = o.Default, n = r.Default), y === !1 && (n = r.Weak);
-  const p = T(D), { buttonProps: R } = N({ onPress: () => i && i(), isDisabled: s, type: Y[c] }, p), f = (x) => s ? V : `${k[n][t][x]}`, w = u([
-    W,
-    f("button"),
-    O,
-    U[C],
-    m && !a || l ? S[e].iconOnly : S[e].default,
+  const p = T(R), { buttonProps: D } = P({ onPress: () => B && B(), isDisabled: s, type: j[S] }, p), { isFocusVisible: w, focusProps: x } = v(), i = (F) => s ? Y : `${W[n][t][F]}`, I = u([
+    i("button"),
+    V,
+    _[C],
+    l && !a || m ? c[e].iconOnly : c[e].default,
     !d && "tw-w-full"
   ]);
-  return /* @__PURE__ */ B.createElement("button", {
+  return /* @__PURE__ */ f.createElement("button", {
     "aria-label": b,
     "aria-disabled": s,
     ref: p,
-    className: u([w, E && "tw-dark"]),
+    className: u([I, E && "tw-dark", w && $]),
     disabled: s,
     "data-test-id": "button",
     form: g,
-    ...R
-  }, m && /* @__PURE__ */ B.createElement("span", {
+    ...D,
+    ...x
+  }, l && /* @__PURE__ */ f.createElement("span", {
     "data-test-id": "button-icon",
-    className: u([a && !l ? _[e] : "", f("icon")])
-  }, M(m, { size: $[e] })), a && /* @__PURE__ */ B.createElement("span", {
+    className: u([a && !m ? k[e] : "", i("icon")])
+  }, N(l, { size: q[e] })), a && /* @__PURE__ */ f.createElement("span", {
     "data-test-id": "button-text",
-    className: u([f("text"), l && "tw-sr-only"])
+    className: u([i("text"), m && "tw-sr-only"])
   }, a));
-}, Q = I(j);
+}, tt = M(A);
 export {
-  Q as Button,
-  ut as ButtonCommonClasses,
-  rt as ButtonDisabledClasses,
-  h as ButtonEmphasis,
-  tt as ButtonRounding,
-  lt as ButtonRoundingClasses,
-  ot as ButtonSize,
-  mt as ButtonSizeClasses,
-  et as ButtonStyle,
-  ft as ButtonStyleClasses,
-  nt as ButtonType,
-  Bt as IconSpacingClasses,
-  st as UpdatedButtonStyle
+  tt as Button,
+  it as ButtonCommonClasses,
+  ft as ButtonDisabledClasses,
+  nt as ButtonEmphasis,
+  st as ButtonRounding,
+  Bt as ButtonRoundingClasses,
+  at as ButtonSize,
+  pt as ButtonSizeClasses,
+  ut as ButtonStyle,
+  ct as ButtonStyleClasses,
+  rt as ButtonType,
+  St as IconSpacingClasses,
+  mt as UpdatedButtonStyle
 };
 //# sourceMappingURL=Button.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Button.es.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ForwardRefRenderFunction, MouseEvent, ReactElement, ReactNode, cloneElement, forwardRef } from 'react';\n\nimport { useButton } from '@react-aria/button';\nimport { merge } from '@utilities/merge';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\nimport {\n    ButtonElements,\n    ButtonEmphasis,\n    ButtonRounding,\n    ButtonSize,\n    ButtonStyle,\n    ButtonType,\n    UpdatedButtonStyle,\n} from './ButtonTypes';\nimport {\n    ButtonCommonClasses,\n    ButtonDisabledClasses,\n    ButtonRoundingClasses,\n    ButtonSizeClasses,\n    ButtonStyleClasses,\n    IconSpacingClasses,\n} from './ButtonClasses';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { buttonIconSizeMap, buttonTypeMap } from '@components/Button/mappings';\n\n// To be NON-Breaking but import should be done through index.ts\nexport * from './ButtonClasses';\nexport * from './ButtonTypes';\n\nexport type ButtonProps = {\n    type?: ButtonType;\n    style?: ButtonStyle;\n    emphasis?: ButtonEmphasis;\n    hideLabel?: boolean;\n    size?: ButtonSize;\n    rounding?: ButtonRounding;\n    disabled?: boolean;\n    icon?: ReactElement;\n    children?: ReactNode;\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    hugWidth?: boolean;\n    'aria-label'?: string;\n    formId?: string;\n    /** @deprecated use emphasis with ButtonEmphasis.Weak */\n    solid?: boolean;\n    /** @deprecated inverted can be done by wrapping the component in a className=\"tw-dark\" */\n    inverted?: boolean;\n};\n\nconst ButtonComponent: ForwardRefRenderFunction<HTMLButtonElement | null, ButtonProps> = (\n    {\n        type = ButtonType.Button,\n        style = ButtonStyle.Default,\n        size = ButtonSize.Medium,\n        rounding = ButtonRounding.Medium,\n        emphasis = ButtonEmphasis.Strong,\n        hideLabel = false,\n        disabled = false,\n        icon,\n        children,\n        onClick,\n        hugWidth = true,\n        'aria-label': ariaLabel,\n        formId,\n        solid,\n        inverted,\n    },\n    externalRef,\n) => {\n    // Map Style Primary, Secondary to style and emphasis\n    // Primary and Secondary can be omitted from the style type\n    if (style === ButtonStyle.Primary) {\n        style = ButtonStyle.Default;\n        emphasis = ButtonEmphasis.Strong;\n    } else if (style === ButtonStyle.Secondary) {\n        style = ButtonStyle.Default;\n        emphasis = ButtonEmphasis.Default;\n    }\n\n    // Rewrite Solid to property emphasis\n    if (solid === false) {\n        emphasis = ButtonEmphasis.Weak;\n    }\n\n    const ref = useForwardedRef<HTMLButtonElement | null>(externalRef);\n    const { buttonProps } = useButton(\n        { onPress: () => onClick && onClick(), isDisabled: disabled, type: buttonTypeMap[type] },\n        ref,\n    );\n\n    const getStyles = (kind: keyof ButtonElements) =>\n        !disabled\n            ? `${ButtonStyleClasses[emphasis][style as unknown as UpdatedButtonStyle][kind]}`\n            : ButtonDisabledClasses;\n\n    const buttonClassName = merge([\n        FOCUS_VISIBLE_STYLE,\n        getStyles('button'),\n        ButtonCommonClasses,\n        ButtonRoundingClasses[rounding],\n        (icon && !children) || hideLabel ? ButtonSizeClasses[size].iconOnly : ButtonSizeClasses[size].default,\n        !hugWidth && 'tw-w-full',\n    ]);\n\n    return (\n        <button\n            aria-label={ariaLabel}\n            aria-disabled={disabled}\n            ref={ref}\n            className={merge([buttonClassName, inverted && 'tw-dark'])}\n            disabled={disabled}\n            data-test-id=\"button\"\n            form={formId}\n            {...buttonProps}\n        >\n            {icon && (\n                <span\n                    data-test-id=\"button-icon\"\n                    className={merge([children && !hideLabel ? IconSpacingClasses[size] : '', getStyles('icon')])}\n                >\n                    {cloneElement(icon, { size: buttonIconSizeMap[size] })}\n                </span>\n            )}\n            {children && (\n                <span data-test-id=\"button-text\" className={merge([getStyles('text'), hideLabel && 'tw-sr-only'])}>\n                    {children}\n                </span>\n            )}\n        </button>\n    );\n};\n\nexport const Button = forwardRef(ButtonComponent);\n"],"names":[],"mappings":";;;;;;;;;;AAmDA,MAAM,IAAmF,CACrF;AAAA,EACI,UAAO,EAAW;AAAA,EAClB,WAAQ,EAAY;AAAA,EACpB,UAAO,EAAW;AAAA,EAClB,cAAW,EAAe;AAAA,EAC1B,cAAW,EAAe;AAAA,EAC1B,eAAY;AAAA,EACZ,cAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,GAEJ,MACC;AAGG,EAAA,MAAU,EAAY,UACtB,KAAQ,EAAY,SACpB,IAAW,EAAe,UACnB,MAAU,EAAY,aAC7B,KAAQ,EAAY,SACpB,IAAW,EAAe,UAI1B,MAAU,MACV,KAAW,EAAe;AAGxB,QAAA,IAAM,EAA0C,CAAW,GAC3D,EAAE,mBAAgB,EACpB,EAAE,SAAS,MAAM,KAAW,EAAQ,GAAG,YAAY,GAAU,MAAM,EAAc,GAAA,GACjF,CACJ,GAEM,IAAY,CAAC,MACf,AAAC,IAEK,IADA,GAAG,EAAmB,GAAU,GAAwC,MAG5E,IAAkB,EAAM;AAAA,IAC1B;AAAA,IACA,EAAU,QAAQ;AAAA,IAClB;AAAA,IACA,EAAsB;AAAA,IACrB,KAAQ,CAAC,KAAa,IAAY,EAAkB,GAAM,WAAW,EAAkB,GAAM;AAAA,IAC9F,CAAC,KAAY;AAAA,EAAA,CAChB;AAED,SACK,kBAAA,cAAA,UAAA;AAAA,IACG,cAAY;AAAA,IACZ,iBAAe;AAAA,IACf;AAAA,IACA,WAAW,EAAM,CAAC,GAAiB,KAAY,SAAS,CAAC;AAAA,IACzD;AAAA,IACA,gBAAa;AAAA,IACb,MAAM;AAAA,IACL,GAAG;AAAA,EAAA,GAEH,KACI,kBAAA,cAAA,QAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAW,EAAM,CAAC,KAAY,CAAC,IAAY,EAAmB,KAAQ,IAAI,EAAU,MAAM,CAAC,CAAC;AAAA,EAE3F,GAAA,EAAa,GAAM,EAAE,MAAM,EAAkB,GAAO,CAAA,CACzD,GAEH,KACI,kBAAA,cAAA,QAAA;AAAA,IAAK,gBAAa;AAAA,IAAc,WAAW,EAAM,CAAC,EAAU,MAAM,GAAG,KAAa,YAAY,CAAC;AAAA,EAAA,GAC3F,CACL,CAER;AAER,GAEa,IAAS,EAAW,CAAe;"}
+{"version":3,"file":"Button.es.js","sources":["../../../src/components/Button/Button.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { ForwardRefRenderFunction, MouseEvent, ReactElement, ReactNode, cloneElement, forwardRef } from 'react';\n\nimport { useButton } from '@react-aria/button';\nimport { merge } from '@utilities/merge';\nimport { useForwardedRef } from '@utilities/useForwardedRef';\nimport {\n    ButtonElements,\n    ButtonEmphasis,\n    ButtonRounding,\n    ButtonSize,\n    ButtonStyle,\n    ButtonType,\n    UpdatedButtonStyle,\n} from './ButtonTypes';\nimport {\n    ButtonCommonClasses,\n    ButtonDisabledClasses,\n    ButtonRoundingClasses,\n    ButtonSizeClasses,\n    ButtonStyleClasses,\n    IconSpacingClasses,\n} from './ButtonClasses';\nimport { FOCUS_VISIBLE_STYLE } from '@utilities/focusStyle';\nimport { buttonIconSizeMap, buttonTypeMap } from '@components/Button/mappings';\nimport { useFocusRing } from '@react-aria/focus';\n\n// To be NON-Breaking but import should be done through index.ts\nexport * from './ButtonClasses';\nexport * from './ButtonTypes';\n\nexport type ButtonProps = {\n    type?: ButtonType;\n    style?: ButtonStyle;\n    emphasis?: ButtonEmphasis;\n    hideLabel?: boolean;\n    size?: ButtonSize;\n    rounding?: ButtonRounding;\n    disabled?: boolean;\n    icon?: ReactElement;\n    children?: ReactNode;\n    onClick?: (event?: MouseEvent<HTMLButtonElement>) => void;\n    hugWidth?: boolean;\n    'aria-label'?: string;\n    formId?: string;\n    /** @deprecated use emphasis with ButtonEmphasis.Weak */\n    solid?: boolean;\n    /** @deprecated inverted can be done by wrapping the component in a className=\"tw-dark\" */\n    inverted?: boolean;\n};\n\nconst ButtonComponent: ForwardRefRenderFunction<HTMLButtonElement | null, ButtonProps> = (\n    {\n        type = ButtonType.Button,\n        style = ButtonStyle.Default,\n        size = ButtonSize.Medium,\n        rounding = ButtonRounding.Medium,\n        emphasis = ButtonEmphasis.Strong,\n        hideLabel = false,\n        disabled = false,\n        icon,\n        children,\n        onClick,\n        hugWidth = true,\n        'aria-label': ariaLabel,\n        formId,\n        solid,\n        inverted,\n    },\n    externalRef,\n) => {\n    // Map Style Primary, Secondary to style and emphasis\n    // Primary and Secondary can be omitted from the style type\n    if (style === ButtonStyle.Primary) {\n        style = ButtonStyle.Default;\n        emphasis = ButtonEmphasis.Strong;\n    } else if (style === ButtonStyle.Secondary) {\n        style = ButtonStyle.Default;\n        emphasis = ButtonEmphasis.Default;\n    }\n\n    // Rewrite Solid to property emphasis\n    if (solid === false) {\n        emphasis = ButtonEmphasis.Weak;\n    }\n\n    const ref = useForwardedRef<HTMLButtonElement | null>(externalRef);\n    const { buttonProps } = useButton(\n        { onPress: () => onClick && onClick(), isDisabled: disabled, type: buttonTypeMap[type] },\n        ref,\n    );\n    const { isFocusVisible, focusProps } = useFocusRing();\n\n    const getStyles = (kind: keyof ButtonElements) =>\n        !disabled\n            ? `${ButtonStyleClasses[emphasis][style as unknown as UpdatedButtonStyle][kind]}`\n            : ButtonDisabledClasses;\n\n    const buttonClassName = merge([\n        getStyles('button'),\n        ButtonCommonClasses,\n        ButtonRoundingClasses[rounding],\n        (icon && !children) || hideLabel ? ButtonSizeClasses[size].iconOnly : ButtonSizeClasses[size].default,\n        !hugWidth && 'tw-w-full',\n    ]);\n\n    return (\n        <button\n            aria-label={ariaLabel}\n            aria-disabled={disabled}\n            ref={ref}\n            className={merge([buttonClassName, inverted && 'tw-dark', isFocusVisible && FOCUS_VISIBLE_STYLE])}\n            disabled={disabled}\n            data-test-id=\"button\"\n            form={formId}\n            {...buttonProps}\n            {...focusProps}\n        >\n            {icon && (\n                <span\n                    data-test-id=\"button-icon\"\n                    className={merge([children && !hideLabel ? IconSpacingClasses[size] : '', getStyles('icon')])}\n                >\n                    {cloneElement(icon, { size: buttonIconSizeMap[size] })}\n                </span>\n            )}\n            {children && (\n                <span data-test-id=\"button-text\" className={merge([getStyles('text'), hideLabel && 'tw-sr-only'])}>\n                    {children}\n                </span>\n            )}\n        </button>\n    );\n};\n\nexport const Button = forwardRef(ButtonComponent);\n"],"names":[],"mappings":";;;;;;;;;;;AAoDA,MAAM,IAAmF,CACrF;AAAA,EACI,UAAO,EAAW;AAAA,EAClB,WAAQ,EAAY;AAAA,EACpB,UAAO,EAAW;AAAA,EAClB,cAAW,EAAe;AAAA,EAC1B,cAAW,EAAe;AAAA,EAC1B,eAAY;AAAA,EACZ,cAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAW;AAAA,EACX,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,GAEJ,MACC;AAGG,EAAA,MAAU,EAAY,UACtB,KAAQ,EAAY,SACpB,IAAW,EAAe,UACnB,MAAU,EAAY,aAC7B,KAAQ,EAAY,SACpB,IAAW,EAAe,UAI1B,MAAU,MACV,KAAW,EAAe;AAGxB,QAAA,IAAM,EAA0C,CAAW,GAC3D,EAAE,mBAAgB,EACpB,EAAE,SAAS,MAAM,KAAW,EAAQ,GAAG,YAAY,GAAU,MAAM,EAAc,GAAA,GACjF,CACJ,GACM,EAAE,mBAAgB,kBAAe,EAAa,GAE9C,IAAY,CAAC,MACf,AAAC,IAEK,IADA,GAAG,EAAmB,GAAU,GAAwC,MAG5E,IAAkB,EAAM;AAAA,IAC1B,EAAU,QAAQ;AAAA,IAClB;AAAA,IACA,EAAsB;AAAA,IACrB,KAAQ,CAAC,KAAa,IAAY,EAAkB,GAAM,WAAW,EAAkB,GAAM;AAAA,IAC9F,CAAC,KAAY;AAAA,EAAA,CAChB;AAED,SACK,kBAAA,cAAA,UAAA;AAAA,IACG,cAAY;AAAA,IACZ,iBAAe;AAAA,IACf;AAAA,IACA,WAAW,EAAM,CAAC,GAAiB,KAAY,WAAW,KAAkB,CAAmB,CAAC;AAAA,IAChG;AAAA,IACA,gBAAa;AAAA,IACb,MAAM;AAAA,IACL,GAAG;AAAA,IACH,GAAG;AAAA,EAAA,GAEH,KACI,kBAAA,cAAA,QAAA;AAAA,IACG,gBAAa;AAAA,IACb,WAAW,EAAM,CAAC,KAAY,CAAC,IAAY,EAAmB,KAAQ,IAAI,EAAU,MAAM,CAAC,CAAC;AAAA,EAE3F,GAAA,EAAa,GAAM,EAAE,MAAM,EAAkB,GAAO,CAAA,CACzD,GAEH,KACI,kBAAA,cAAA,QAAA;AAAA,IAAK,gBAAa;AAAA,IAAc,WAAW,EAAM,CAAC,EAAU,MAAM,GAAG,KAAa,YAAY,CAAC;AAAA,EAAA,GAC3F,CACL,CAER;AAER,GAEa,KAAS,EAAW,CAAe;"}

package/dist/components/EditableText/EditableText.d.ts

@@ -8,12 +8,14 @@ export declare enum EditableMode {
  * mode: display as Input or Label first
  * enableDoubleClick: Should the input be triggered by a double click or single click
  * additionalValues: additional information to be passed via onClick Event
+ * removeBoxPadding: Removes the Padding (tw-p-2) around the input Box
  */
 interface EditableOptionProps {
     isSlimInputField?: boolean;
     mode?: EditableMode;
     enableDoubleClick?: boolean;
     additionalValues?: string;
+    removeBoxPadding?: boolean;
 }
 /**
  * Add Children with badges or icons

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

@@ -1,82 +1,82 @@
 import l, { useState as E, useRef as x, useEffect as N } from "react";
 import { EditableTextHelper as S } from "./lib/helper.es.js";
 import { FOCUS_VISIBLE_STYLE as T } from "../../utilities/focusStyle.es.js";
-import { merge as n } from "../../utilities/merge.es.js";
-var v = /* @__PURE__ */ ((a) => (a.INPUT = "INPUT", a.LABEL = "LABEL", a))(v || {});
+import { merge as r } from "../../utilities/merge.es.js";
+var U = /* @__PURE__ */ ((a) => (a.INPUT = "INPUT", a.LABEL = "LABEL", a))(U || {});
 const D = ({
   onEditableSave: a,
-  onModeChange: r,
-  onAdditionalValueSave: b,
-  children: m,
+  onModeChange: u,
+  onAdditionalValueSave: f,
+  children: c,
   options: e
 }) => {
-  const c = S.getLabel(m), [i, f] = E(c), [u, d] = E("LABEL"), [L, h] = E(), w = x(null), B = (t) => f(t.target.value), I = (t) => {
-    d("LABEL"), r && r("LABEL"), (e == null ? void 0 : e.additionalValues) && b && b(e.additionalValues, t.target.value), a && a(t.target.value);
-  }, s = (t) => () => {
-    f(t), d("INPUT"), r && r("INPUT");
-  }, g = (t) => {
-    t.key === "Enter" && I(t);
-  }, k = (t) => I(t);
+  const d = S.getLabel(c), [s, I] = E(d), [m, w] = E("LABEL"), [L, B] = E(), n = x(null), g = (t) => I(t.target.value), i = (t) => {
+    w("LABEL"), u && u("LABEL"), (e == null ? void 0 : e.additionalValues) && f && f(e.additionalValues, t.target.value), a && a(t.target.value);
+  }, b = (t) => () => {
+    I(t), w("INPUT"), u && u("INPUT");
+  }, h = (t) => {
+    t.key === "Enter" && i(t);
+  }, v = (t) => i(t);
   N(() => {
     var t;
-    return d((t = e == null ? void 0 : e.mode) != null ? t : "LABEL");
+    return w((t = e == null ? void 0 : e.mode) != null ? t : "LABEL");
   }, [e == null ? void 0 : e.mode]);
   const P = e != null && e.enableDoubleClick ? {
-    onDoubleClick: s(c),
-    onKeyPress: (t) => t.key === "Enter" && s(c)()
+    onDoubleClick: b(d),
+    onKeyPress: (t) => t.key === "Enter" && b(d)()
   } : {
-    onClick: s(c)
+    onClick: b(d)
   };
   N(() => {
     var t;
-    y.current && h(S.copyStyles(y.current)), u === "INPUT" && ((t = w.current) == null || t.select());
-  }, [u, w]);
-  const y = x(), U = m && l.cloneElement(m, {
+    y.current && B(S.copyStyles(y.current)), m === "INPUT" && ((t = n.current) == null || t.select());
+  }, [m, n, c]);
+  const y = x(), k = c && l.cloneElement(c, {
     ref: y
   });
   return /* @__PURE__ */ l.createElement("div", {
     "data-test-id": "editable-node-container",
-    className: "tw-relative"
-  }, u === "INPUT" ? /* @__PURE__ */ l.createElement("div", {
-    className: n([
-      "tw-flex tw-items-center -tw-translate-x-[0.81rem] -tw-translate-y-[0.56rem]",
-      (e == null ? void 0 : e.isSlimInputField) === !0 && "-tw-translate-y-[0.06rem] -tw-translate-x-[0.15rem]"
+    className: r(["tw-relative", (e == null ? void 0 : e.removeBoxPadding) === !0 ? "" : "tw-p-2"])
+  }, m === "INPUT" ? /* @__PURE__ */ l.createElement("div", {
+    className: r([
+      "tw-flex tw-items-center",
+      (e == null ? void 0 : e.isSlimInputField) === !0 ? "-tw-translate-x-[0.315rem] -tw-translate-y-[0.06rem]" : "-tw-translate-x-[0.81rem] -tw-translate-y-[0.56rem]"
     ])
   }, /* @__PURE__ */ l.createElement("div", {
     "data-test-id": "editable-input",
-    className: n(["tw-relative"])
+    className: r(["tw-relative"])
   }, /* @__PURE__ */ l.createElement("input", {
-    ref: w,
+    ref: n,
     type: "text",
-    className: n([
+    className: r([
       "tw-absolute tw-w-full",
-      T,
-      "tw-text-text tw-px-3 tw-py-2 tw-border tw-rounded tw-bg-base",
+      (e == null ? void 0 : e.isSlimInputField) === !0 ? "focus-visible:tw-outline-none" : T,
+      "tw-text-text tw-border tw-rounded tw-bg-base",
       "tw-border-solid",
-      (e == null ? void 0 : e.isSlimInputField) === !0 && "tw-py-0 tw-px-1"
+      (e == null ? void 0 : e.isSlimInputField) === !0 ? "tw-py-0 tw-px-1" : "tw-px-3 tw-py-2"
     ]),
     style: L,
-    value: i,
-    onChange: B,
-    onKeyDown: g,
-    onBlur: k
+    value: s,
+    onChange: g,
+    onKeyDown: h,
+    onBlur: v
   }), /* @__PURE__ */ l.createElement("span", {
     "aria-hidden": "true",
-    className: n([
-      "tw-px-4 tw-py-2 tw-bg-base",
+    className: r([
+      "tw-rounded tw-px-4 tw-py-2 tw-bg-base",
       (e == null ? void 0 : e.isSlimInputField) === !0 && "tw-py-0 tw-px-2"
     ]),
     style: L
-  }, i))) : /* @__PURE__ */ l.createElement(l.Fragment, null), /* @__PURE__ */ l.createElement("button", {
-    style: { display: u === "INPUT" ? "none" : "block" },
+  }, s))) : /* @__PURE__ */ l.createElement(l.Fragment, null), /* @__PURE__ */ l.createElement("button", {
+    style: { display: m === "INPUT" ? "none" : "block" },
     className: T,
     ...P,
     "data-test-id": "node-link-name",
     "aria-pressed": "false"
-  }, U));
+  }, k));
 };
 export {
-  v as EditableMode,
+  U as EditableMode,
   D as EditableText
 };
 //# sourceMappingURL=EditableText.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"EditableText.es.js","sources":["../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["import 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}\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 */\ninterface EditableOptionProps {\n    isSlimInputField?: boolean;\n    mode?: EditableMode;\n    enableDoubleClick?: boolean;\n    additionalValues?: string;\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}\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}: 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]);\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 data-test-id=\"editable-node-container\" className=\"tw-relative\">\n            {editableState === EditableMode.INPUT ? (\n                <div\n                    className={merge([\n                        'tw-flex tw-items-center -tw-translate-x-[0.81rem] -tw-translate-y-[0.56rem]',\n                        options?.isSlimInputField === true && '-tw-translate-y-[0.06rem] -tw-translate-x-[0.15rem]',\n                    ])}\n                >\n                    <div data-test-id=\"editable-input\" className={merge(['tw-relative'])}>\n                        <input\n                            ref={inputRef}\n                            type=\"text\"\n                            className={merge([\n                                'tw-absolute tw-w-full',\n                                FOCUS_VISIBLE_STYLE,\n                                'tw-text-text tw-px-3 tw-py-2 tw-border tw-rounded tw-bg-base',\n                                'tw-border-solid',\n                                options?.isSlimInputField === true && 'tw-py-0 tw-px-1',\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-px-4 tw-py-2 tw-bg-base',\n                                options?.isSlimInputField === true && 'tw-py-0 tw-px-2',\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' : 'block' }}\n                className={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};\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"EditableText.es.js","sources":["../../../src/components/EditableText/EditableText.tsx"],"sourcesContent":["import 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}\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}: 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', 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.06rem]'\n                            : '-tw-translate-x-[0.81rem] -tw-translate-y-[0.56rem]',\n                    ])}\n                >\n                    <div data-test-id=\"editable-input\" className={merge(['tw-relative'])}>\n                        <input\n                            ref={inputRef}\n                            type=\"text\"\n                            className={merge([\n                                'tw-absolute tw-w-full',\n                                options?.isSlimInputField === true\n                                    ? 'focus-visible:tw-outline-none'\n                                    : FOCUS_VISIBLE_STYLE,\n                                'tw-text-text tw-border tw-rounded tw-bg-base',\n                                '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',\n                                options?.isSlimInputField === true && 'tw-py-0 tw-px-2',\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' : 'block' }}\n                className={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};\n"],"names":[],"mappings":"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"}

package/dist/components/EditableText/lib/helper.d.ts

@@ -16,5 +16,6 @@ export declare const EditableTextHelper: {
         lineHeight: string;
         letterSpacing: string;
         minWidth: string;
+        fontWeight: string;
     };
 };

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

@@ -1,9 +1,9 @@
-import n from "react";
-const a = {
+import g from "react";
+const i = {
   getLabel: (t) => {
     let o = "";
     const p = (r) => {
-      n.Children.map(r, (e) => {
+      g.Children.map(r, (e) => {
         typeof e == "string" ? o += e : e != null && e.props && p(e == null ? void 0 : e.props.children);
       });
     };
@@ -13,10 +13,11 @@ const a = {
     fontSize: window.getComputedStyle(t).getPropertyValue("font-size"),
     lineHeight: window.getComputedStyle(t).getPropertyValue("line-height"),
     letterSpacing: window.getComputedStyle(t).getPropertyValue("letter-spacing"),
-    minWidth: window.getComputedStyle(t).getPropertyValue("width")
+    minWidth: window.getComputedStyle(t).getPropertyValue("width"),
+    fontWeight: window.getComputedStyle(t).getPropertyValue("font-weight")
   })
 };
 export {
-  a as EditableTextHelper
+  i as EditableTextHelper
 };
 //# sourceMappingURL=helper.es.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"helper.es.js","sources":["../../../../src/components/EditableText/lib/helper.ts"],"sourcesContent":["import React, { ReactElement, ReactNode } from 'react';\n\nexport const EditableTextHelper = {\n    /**\n     * Recursively iterators through Children\n     * returns all instances of string amended together\n     *\n     */\n    getLabel: (children?: ReactNode | string) => {\n        let label = '';\n        const iteratorStep = (children?: ReactNode | string) => {\n            React.Children.map(children, (child) => {\n                if (typeof child === 'string') {\n                    label += child;\n                } else {\n                    !!(child as ReactElement)?.props && iteratorStep((child as ReactElement)?.props.children);\n                }\n            });\n        };\n        iteratorStep(children);\n\n        return label;\n    },\n\n    /**\n     * Accesses the window object and copies the computed style\n     * of the element\n     *\n     */\n    copyStyles: (current: Element) => {\n        return {\n            fontSize: window.getComputedStyle(current).getPropertyValue('font-size'),\n            lineHeight: window.getComputedStyle(current).getPropertyValue('line-height'),\n            letterSpacing: window.getComputedStyle(current).getPropertyValue('letter-spacing'),\n            minWidth: window.getComputedStyle(current).getPropertyValue('width'),\n        };\n    },\n};\n"],"names":[],"mappings":";AAEO,MAAM,IAAqB;AAAA,EAM9B,UAAU,CAAC,MAAkC;AACzC,QAAI,IAAQ;AACN,UAAA,IAAe,CAAC,MAAkC;AACpD,QAAM,SAAS,IAAI,GAAU,CAAC,MAAU;AAChC,QAAA,OAAO,KAAU,WACR,KAAA,IAET,AAAG,eAAwB,SAAS,EAAc,uBAAwB,MAAM,QAAQ;AAAA,MAC5F,CACH;AAAA,IAAA;AAEL,aAAa,CAAQ,GAEd;AAAA,EACX;AAAA,EAOA,YAAY,CAAC,MACF;AAAA,IACH,UAAU,OAAO,iBAAiB,CAAO,EAAE,iBAAiB,WAAW;AAAA,IACvE,YAAY,OAAO,iBAAiB,CAAO,EAAE,iBAAiB,aAAa;AAAA,IAC3E,eAAe,OAAO,iBAAiB,CAAO,EAAE,iBAAiB,gBAAgB;AAAA,IACjF,UAAU,OAAO,iBAAiB,CAAO,EAAE,iBAAiB,OAAO;AAAA,EAAA;AAG/E;"}
+{"version":3,"file":"helper.es.js","sources":["../../../../src/components/EditableText/lib/helper.ts"],"sourcesContent":["import React, { ReactElement, ReactNode } from 'react';\n\nexport const EditableTextHelper = {\n    /**\n     * Recursively iterators through Children\n     * returns all instances of string amended together\n     *\n     */\n    getLabel: (children?: ReactNode | string) => {\n        let label = '';\n        const iteratorStep = (children?: ReactNode | string) => {\n            React.Children.map(children, (child) => {\n                if (typeof child === 'string') {\n                    label += child;\n                } else {\n                    !!(child as ReactElement)?.props && iteratorStep((child as ReactElement)?.props.children);\n                }\n            });\n        };\n        iteratorStep(children);\n\n        return label;\n    },\n\n    /**\n     * Accesses the window object and copies the computed style\n     * of the element\n     *\n     */\n    copyStyles: (current: Element) => {\n        return {\n            fontSize: window.getComputedStyle(current).getPropertyValue('font-size'),\n            lineHeight: window.getComputedStyle(current).getPropertyValue('line-height'),\n            letterSpacing: window.getComputedStyle(current).getPropertyValue('letter-spacing'),\n            minWidth: window.getComputedStyle(current).getPropertyValue('width'),\n            fontWeight: window.getComputedStyle(current).getPropertyValue('font-weight'),\n        };\n    },\n};\n"],"names":[],"mappings":";AAEO,MAAM,IAAqB;AAAA,EAM9B,UAAU,CAAC,MAAkC;AACzC,QAAI,IAAQ;AACN,UAAA,IAAe,CAAC,MAAkC;AACpD,QAAM,SAAS,IAAI,GAAU,CAAC,MAAU;AAChC,QAAA,OAAO,KAAU,WACR,KAAA,IAET,AAAG,eAAwB,SAAS,EAAc,uBAAwB,MAAM,QAAQ;AAAA,MAC5F,CACH;AAAA,IAAA;AAEL,aAAa,CAAQ,GAEd;AAAA,EACX;AAAA,EAOA,YAAY,CAAC,MACF;AAAA,IACH,UAAU,OAAO,iBAAiB,CAAO,EAAE,iBAAiB,WAAW;AAAA,IACvE,YAAY,OAAO,iBAAiB,CAAO,EAAE,iBAAiB,aAAa;AAAA,IAC3E,eAAe,OAAO,iBAAiB,CAAO,EAAE,iBAAiB,gBAAgB;AAAA,IACjF,UAAU,OAAO,iBAAiB,CAAO,EAAE,iBAAiB,OAAO;AAAA,IACnE,YAAY,OAAO,iBAAiB,CAAO,EAAE,iBAAiB,aAAa;AAAA,EAAA;AAGvF;"}

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

@@ -1,57 +1,59 @@
-import t, { useState as I, useEffect as E } from "react";
-import { CollectionItem as b } from "./CollectionItem.es.js";
+import t, { useState as I, useEffect as b } from "react";
+import { CollectionItem as k } from "./CollectionItem.es.js";
 import { DropZone as i } from "../DropZone/DropZone.es.js";
-import { HTML5Backend as D } from "react-dnd-html5-backend";
-import { DndProvider as k } from "react-dnd";
+import { HTML5Backend as E } from "react-dnd-html5-backend";
+import { DndProvider as D } from "react-dnd";
 import "../../utilities/dnd/DndWrapper.es.js";
-import { moveItems as g } from "../../utilities/dnd/moveItems.es.js";
-import { DropZonePosition as c } from "../../utilities/dnd/types.es.js";
-import { useId as v } from "@react-aria/utils";
-const y = (r, o) => r.sort === null && o.sort === null || r.sort === null ? 1 : o.sort === null ? -1 : r.sort - o.sort, H = ({
-  onMove: r,
-  dragDisabled: o,
+import { moveItems as y } from "../../utilities/dnd/moveItems.es.js";
+import { DropZonePosition as d } from "../../utilities/dnd/types.es.js";
+import { useId as g } from "@react-aria/utils";
+const v = (o, n) => o.sort === null && n.sort === null || o.sort === null ? 1 : n.sort === null ? -1 : o.sort - n.sort, z = ({
+  onMove: o,
+  dragDisabled: n,
   items: s,
-  renderContent: d
+  renderContent: p
 }) => {
-  const [a, p] = I(s), l = v();
-  E(() => {
+  const [l, c] = I(s), a = g();
+  b(() => {
     const e = [...s];
-    e.sort(y), p(e);
+    e.sort(v), c(e);
   }, [s]);
-  const m = (e, n, f) => {
-    const u = g(e, n, f, a);
-    r(u);
+  const m = (e, r, f) => {
+    const u = y(e, r, f, l);
+    o(u);
   };
-  return /* @__PURE__ */ t.createElement(k, {
-    backend: D
+  return /* @__PURE__ */ t.createElement(D, {
+    backend: E
   }, /* @__PURE__ */ t.createElement("div", {
     className: "tw-outline-none",
     "data-test-id": "orderable-list"
-  }, a.map((e, n) => /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement(i, {
-    key: `orderable-list-item-${n}-before`,
+  }, l.map((e, r) => /* @__PURE__ */ t.createElement(t.Fragment, {
+    key: `dropzone-orderable-list-key-${r}`
+  }, /* @__PURE__ */ t.createElement(i, {
+    key: `orderable-list-item-${r}-before`,
     data: {
       targetItem: e,
-      position: c.Before
+      position: d.Before
     },
     onDrop: m,
-    treeId: l
-  }), /* @__PURE__ */ t.createElement(b, {
+    treeId: a
+  }), /* @__PURE__ */ t.createElement(k, {
     key: e.id,
-    dragDisabled: o,
+    dragDisabled: n,
     item: e,
-    renderContent: d,
-    listId: l
-  }), n === s.length - 1 && /* @__PURE__ */ t.createElement(i, {
-    key: `orderable-list-item-${n}-after`,
+    renderContent: p,
+    listId: a
+  }), r === s.length - 1 && /* @__PURE__ */ t.createElement(i, {
+    key: `orderable-list-item-${r}-after`,
     data: {
       targetItem: e,
-      position: c.After
+      position: d.After
     },
     onDrop: m,
-    treeId: l
+    treeId: a
   })))));
 };
 export {
-  H as OrderableList
+  z as OrderableList
 };
 //# sourceMappingURL=OrderableList.es.js.map

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 React, { useEffect, useState } from 'react';\n\nimport { CollectionItem } from './CollectionItem';\nimport { OrderableListItem, OrderableListProps } from './types';\nimport { DropZone } from '@components/DropZone';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\nimport { DndProvider } from 'react-dnd';\nimport { DropZonePosition, moveItems } from '@utilities/dnd';\nimport { useId } from '@react-aria/utils';\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\nexport const OrderableList = <T extends object>({\n    onMove,\n    dragDisabled,\n    items,\n    renderContent,\n}: OrderableListProps<T>) => {\n    const [itemsState, setItemsState] = useState(items);\n    const listId = useId();\n\n    useEffect(() => {\n        // sort the incoming items\n        const itemsClone = [...items];\n        itemsClone.sort(listItemsCompareFn);\n        setItemsState(itemsClone);\n    }, [items]);\n\n    const handleDrop = (\n        targetItem: OrderableListItem<T>,\n        sourceItem: OrderableListItem<T>,\n        position: DropZonePosition,\n    ) => {\n        const modifiedItems = moveItems(targetItem, sourceItem, position, itemsState);\n        onMove(modifiedItems);\n    };\n\n    return (\n        <DndProvider backend={HTML5Backend}>\n            <div className=\"tw-outline-none\" data-test-id=\"orderable-list\">\n                {itemsState.map((item, index) => (\n                    <>\n                        <DropZone\n                            key={`orderable-list-item-${index}-before`}\n                            data={{\n                                targetItem: item,\n                                position: DropZonePosition.Before,\n                            }}\n                            onDrop={handleDrop}\n                            treeId={listId}\n                        />\n                        <CollectionItem\n                            key={item.id}\n                            dragDisabled={dragDisabled}\n                            item={item}\n                            renderContent={renderContent}\n                            listId={listId}\n                        />\n                        {index === items.length - 1 && (\n                            <DropZone\n                                key={`orderable-list-item-${index}-after`}\n                                data={{\n                                    targetItem: item,\n                                    position: DropZonePosition.After,\n                                }}\n                                onDrop={handleDrop}\n                                treeId={listId}\n                            />\n                        )}\n                    </>\n                ))}\n            </div>\n        </DndProvider>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;AAYA,MAAM,IAAqB,CAAmB,GAA6B,MACnE,EAAM,SAAS,QAAQ,EAAM,SAAS,QAGtC,EAAM,SAAS,OACR,IAEP,EAAM,SAAS,OACR,KAGJ,EAAM,OAAO,EAAM,MAGjB,IAAgB,CAAmB;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACyB;AACzB,QAAM,CAAC,GAAY,KAAiB,EAAS,CAAK,GAC5C,IAAS;AAEf,IAAU,MAAM;AAEN,UAAA,IAAa,CAAC,GAAG,CAAK;AAC5B,MAAW,KAAK,CAAkB,GAClC,EAAc,CAAU;AAAA,EAAA,GACzB,CAAC,CAAK,CAAC;AAEV,QAAM,IAAa,CACf,GACA,GACA,MACC;AACD,UAAM,IAAgB,EAAU,GAAY,GAAY,GAAU,CAAU;AAC5E,MAAO,CAAa;AAAA,EAAA;AAGxB,SACK,kBAAA,cAAA,GAAA;AAAA,IAAY,SAAS;AAAA,EAAA,GACjB,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,IAAkB,gBAAa;AAAA,EAAA,GACzC,EAAW,IAAI,CAAC,GAAM,wDAEd,kBAAA,cAAA,GAAA;AAAA,IACG,KAAK,uBAAuB;AAAA,IAC5B,MAAM;AAAA,MACF,YAAY;AAAA,MACZ,UAAU,EAAiB;AAAA,IAC/B;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,EAAA,CACZ,GACC,kBAAA,cAAA,GAAA;AAAA,IACG,KAAK,EAAK;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACJ,GACC,MAAU,EAAM,SAAS,KACrB,kBAAA,cAAA,GAAA;AAAA,IACG,KAAK,uBAAuB;AAAA,IAC5B,MAAM;AAAA,MACF,YAAY;AAAA,MACZ,UAAU,EAAiB;AAAA,IAC/B;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,EAAA,CACZ,CAER,CACH,CACL,CACJ;AAER;"}
+{"version":3,"file":"OrderableList.es.js","sources":["../../../src/components/OrderableList/OrderableList.tsx"],"sourcesContent":["/* (c) Copyright Frontify Ltd., all rights reserved. */\n\nimport React, { useEffect, useState } from 'react';\n\nimport { CollectionItem } from './CollectionItem';\nimport { OrderableListItem, OrderableListProps } from './types';\nimport { DropZone } from '@components/DropZone';\nimport { HTML5Backend } from 'react-dnd-html5-backend';\nimport { DndProvider } from 'react-dnd';\nimport { DropZonePosition, moveItems } from '@utilities/dnd';\nimport { useId } from '@react-aria/utils';\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\nexport const OrderableList = <T extends object>({\n    onMove,\n    dragDisabled,\n    items,\n    renderContent,\n}: OrderableListProps<T>) => {\n    const [itemsState, setItemsState] = useState(items);\n    const listId = useId();\n\n    useEffect(() => {\n        // sort the incoming items\n        const itemsClone = [...items];\n        itemsClone.sort(listItemsCompareFn);\n        setItemsState(itemsClone);\n    }, [items]);\n\n    const handleDrop = (\n        targetItem: OrderableListItem<T>,\n        sourceItem: OrderableListItem<T>,\n        position: DropZonePosition,\n    ) => {\n        const modifiedItems = moveItems(targetItem, sourceItem, position, itemsState);\n        onMove(modifiedItems);\n    };\n\n    return (\n        <DndProvider backend={HTML5Backend}>\n            <div className=\"tw-outline-none\" data-test-id=\"orderable-list\">\n                {itemsState.map((item, index) => (\n                    <React.Fragment key={`dropzone-orderable-list-key-${index}`}>\n                        <DropZone\n                            key={`orderable-list-item-${index}-before`}\n                            data={{\n                                targetItem: item,\n                                position: DropZonePosition.Before,\n                            }}\n                            onDrop={handleDrop}\n                            treeId={listId}\n                        />\n                        <CollectionItem\n                            key={item.id}\n                            dragDisabled={dragDisabled}\n                            item={item}\n                            renderContent={renderContent}\n                            listId={listId}\n                        />\n                        {index === items.length - 1 && (\n                            <DropZone\n                                key={`orderable-list-item-${index}-after`}\n                                data={{\n                                    targetItem: item,\n                                    position: DropZonePosition.After,\n                                }}\n                                onDrop={handleDrop}\n                                treeId={listId}\n                            />\n                        )}\n                    </React.Fragment>\n                ))}\n            </div>\n        </DndProvider>\n    );\n};\n"],"names":[],"mappings":";;;;;;;;;AAYA,MAAM,IAAqB,CAAmB,GAA6B,MACnE,EAAM,SAAS,QAAQ,EAAM,SAAS,QAGtC,EAAM,SAAS,OACR,IAEP,EAAM,SAAS,OACR,KAGJ,EAAM,OAAO,EAAM,MAGjB,IAAgB,CAAmB;AAAA,EAC5C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,MACyB;AACzB,QAAM,CAAC,GAAY,KAAiB,EAAS,CAAK,GAC5C,IAAS;AAEf,IAAU,MAAM;AAEN,UAAA,IAAa,CAAC,GAAG,CAAK;AAC5B,MAAW,KAAK,CAAkB,GAClC,EAAc,CAAU;AAAA,EAAA,GACzB,CAAC,CAAK,CAAC;AAEV,QAAM,IAAa,CACf,GACA,GACA,MACC;AACD,UAAM,IAAgB,EAAU,GAAY,GAAY,GAAU,CAAU;AAC5E,MAAO,CAAa;AAAA,EAAA;AAGxB,SACK,kBAAA,cAAA,GAAA;AAAA,IAAY,SAAS;AAAA,EAAA,GACjB,kBAAA,cAAA,OAAA;AAAA,IAAI,WAAU;AAAA,IAAkB,gBAAa;AAAA,EAAA,GACzC,EAAW,IAAI,CAAC,GAAM,MACnB,kBAAA,cAAC,EAAM,UAAN;AAAA,IAAe,KAAK,+BAA+B;AAAA,EAAA,GAC/C,kBAAA,cAAA,GAAA;AAAA,IACG,KAAK,uBAAuB;AAAA,IAC5B,MAAM;AAAA,MACF,YAAY;AAAA,MACZ,UAAU,EAAiB;AAAA,IAC/B;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,EAAA,CACZ,GACC,kBAAA,cAAA,GAAA;AAAA,IACG,KAAK,EAAK;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,CACJ,GACC,MAAU,EAAM,SAAS,KACrB,kBAAA,cAAA,GAAA;AAAA,IACG,KAAK,uBAAuB;AAAA,IAC5B,MAAM;AAAA,MACF,YAAY;AAAA,MACZ,UAAU,EAAiB;AAAA,IAC/B;AAAA,IACA,QAAQ;AAAA,IACR,QAAQ;AAAA,EAAA,CACZ,CAER,CACH,CACL,CACJ;AAER;"}