@payloadcms/ui 3.77.0 → 3.78.0-internal-debug.f663370

package/dist/elements/Pill/index.js

@@ -1,200 +1,118 @@
 'use client';
-
-import { c as _c } from "react/compiler-runtime";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React, { useEffect, useState } from 'react'; // TODO: abstract this out to support all routers
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
+import React, { useEffect, useState } from 'react';
+// TODO: abstract this out to support all routers
 import { Link } from '../Link/index.js';
-import { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js';
+/**
+   * @default 'light'
+   */ import { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js';
 import './index.scss';
 const baseClass = 'pill';
-const DraggablePill = props => {
-  const $ = _c(12);
-  const {
-    id,
-    className
-  } = props;
-  let t0;
-  if ($[0] !== id) {
-    t0 = {
-      id
-    };
-    $[0] = id;
-    $[1] = t0;
-  } else {
-    t0 = $[1];
-  }
-  const {
-    attributes,
-    isDragging,
-    listeners,
-    setNodeRef,
-    transform
-  } = useDraggableSortable(t0);
-  const t1 = isDragging && `${baseClass}--is-dragging`;
-  let t2;
-  if ($[2] !== className || $[3] !== t1) {
-    t2 = [t1, className].filter(Boolean);
-    $[2] = className;
-    $[3] = t1;
-    $[4] = t2;
-  } else {
-    t2 = $[4];
-  }
-  const t3 = t2.join(" ");
-  let t4;
-  if ($[5] !== attributes || $[6] !== listeners || $[7] !== props || $[8] !== setNodeRef || $[9] !== t3 || $[10] !== transform) {
-    t4 = _jsx(StaticPill, {
-      ...props,
-      className: t3,
-      elementProps: {
-        ...listeners,
-        ...attributes,
-        ref: setNodeRef,
-        style: {
-          transform
-        }
-      }
+const DraggablePill = (props)=>{
+    const { id, className } = props;
+    const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({
+        id
     });
-    $[5] = attributes;
-    $[6] = listeners;
-    $[7] = props;
-    $[8] = setNodeRef;
-    $[9] = t3;
-    $[10] = transform;
-    $[11] = t4;
-  } else {
-    t4 = $[11];
-  }
-  return t4;
+    return /*#__PURE__*/ _jsxDEV(StaticPill, {
+        ...props,
+        className: [
+            isDragging && `${baseClass}--is-dragging`,
+            className
+        ].filter(Boolean).join(' '),
+        elementProps: {
+            ...listeners,
+            ...attributes,
+            ref: setNodeRef,
+            style: {
+                transform
+            }
+        }
+    }, void 0, false, {
+        fileName: "src/elements/Pill/index.tsx",
+        lineNumber: 63,
+        columnNumber: 5
+    }, this);
 };
-const StaticPill = props => {
-  const $ = _c(27);
-  const {
-    id,
-    alignIcon: t0,
-    "aria-checked": ariaChecked,
-    "aria-controls": ariaControls,
-    "aria-expanded": ariaExpanded,
-    "aria-label": ariaLabel,
-    children,
-    className,
-    draggable,
-    elementProps,
-    icon,
-    onClick,
-    pillStyle: t1,
-    rounded,
-    size: t2,
-    to
-  } = props;
-  const alignIcon = t0 === undefined ? "right" : t0;
-  const pillStyle = t1 === undefined ? "light" : t1;
-  const size = t2 === undefined ? "medium" : t2;
-  const [isHydrated, setIsHydrated] = useState(false);
-  let t3;
-  let t4;
-  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
-    t3 = () => {
-      setIsHydrated(true);
-    };
-    t4 = [];
-    $[0] = t3;
-    $[1] = t4;
-  } else {
-    t3 = $[0];
-    t4 = $[1];
-  }
-  useEffect(t3, t4);
-  const isButton = onClick && !to;
-  const t5 = `${baseClass}--style-${pillStyle}`;
-  const t6 = `${baseClass}--size-${size}`;
-  const t7 = className && className;
-  const t8 = to && `${baseClass}--has-link`;
-  const t9 = (to || onClick) && `${baseClass}--has-action`;
-  const t10 = icon && `${baseClass}--has-icon`;
-  const t11 = icon && `${baseClass}--align-icon-${alignIcon}`;
-  const t12 = draggable && `${baseClass}--draggable`;
-  const t13 = rounded && `${baseClass}--rounded`;
-  let t14;
-  if ($[2] !== t10 || $[3] !== t11 || $[4] !== t12 || $[5] !== t13 || $[6] !== t5 || $[7] !== t6 || $[8] !== t7 || $[9] !== t8 || $[10] !== t9) {
-    t14 = [baseClass, t5, t6, t7, t8, t9, t10, t11, t12, t13].filter(Boolean);
-    $[2] = t10;
-    $[3] = t11;
-    $[4] = t12;
-    $[5] = t13;
-    $[6] = t5;
-    $[7] = t6;
-    $[8] = t7;
-    $[9] = t8;
-    $[10] = t9;
-    $[11] = t14;
-  } else {
-    t14 = $[11];
-  }
-  const classes = t14.join(" ");
-  let Element = "div";
-  if (isButton) {
-    Element = "button";
-  }
-  if (to) {
-    Element = Link;
-  }
-  const t15 = isButton ? !isHydrated : undefined;
-  const t16 = to || null;
-  const t17 = isButton ? "button" : undefined;
-  let t18;
-  if ($[12] !== Element || $[13] !== ariaChecked || $[14] !== ariaControls || $[15] !== ariaExpanded || $[16] !== ariaLabel || $[17] !== children || $[18] !== classes || $[19] !== elementProps || $[20] !== icon || $[21] !== id || $[22] !== onClick || $[23] !== t15 || $[24] !== t16 || $[25] !== t17) {
-    t18 = _jsxs(Element, {
-      ...elementProps,
-      "aria-checked": ariaChecked,
-      "aria-controls": ariaControls,
-      "aria-expanded": ariaExpanded,
-      "aria-label": ariaLabel,
-      className: classes,
-      disabled: t15,
-      href: t16,
-      id,
-      onClick,
-      type: t17,
-      children: [_jsx("span", {
-        className: `${baseClass}__label`,
-        children
-      }), Boolean(icon) && _jsx("span", {
-        className: `${baseClass}__icon`,
-        children: icon
-      })]
-    });
-    $[12] = Element;
-    $[13] = ariaChecked;
-    $[14] = ariaControls;
-    $[15] = ariaExpanded;
-    $[16] = ariaLabel;
-    $[17] = children;
-    $[18] = classes;
-    $[19] = elementProps;
-    $[20] = icon;
-    $[21] = id;
-    $[22] = onClick;
-    $[23] = t15;
-    $[24] = t16;
-    $[25] = t17;
-    $[26] = t18;
-  } else {
-    t18 = $[26];
-  }
-  return t18;
+const StaticPill = (props)=>{
+    const { id, alignIcon = 'right', 'aria-checked': ariaChecked, 'aria-controls': ariaControls, 'aria-expanded': ariaExpanded, 'aria-label': ariaLabel, children, className, draggable, elementProps, icon, onClick, pillStyle = 'light', rounded, size = 'medium', to } = props;
+    const [isHydrated, setIsHydrated] = useState(false);
+    useEffect(()=>{
+        setIsHydrated(true);
+    }, []);
+    const isButton = onClick && !to;
+    const classes = [
+        baseClass,
+        `${baseClass}--style-${pillStyle}`,
+        `${baseClass}--size-${size}`,
+        className && className,
+        to && `${baseClass}--has-link`,
+        (to || onClick) && `${baseClass}--has-action`,
+        icon && `${baseClass}--has-icon`,
+        icon && `${baseClass}--align-icon-${alignIcon}`,
+        draggable && `${baseClass}--draggable`,
+        rounded && `${baseClass}--rounded`
+    ].filter(Boolean).join(' ');
+    let Element = 'div';
+    if (isButton) {
+        Element = 'button';
+    }
+    if (to) {
+        Element = Link;
+    }
+    return /*#__PURE__*/ _jsxDEV(Element, {
+        ...elementProps,
+        "aria-checked": ariaChecked,
+        "aria-controls": ariaControls,
+        "aria-expanded": ariaExpanded,
+        "aria-label": ariaLabel,
+        className: classes,
+        disabled: isButton ? !isHydrated : undefined,
+        href: to || null,
+        id: id,
+        onClick: onClick,
+        type: isButton ? 'button' : undefined,
+        children: [
+            /*#__PURE__*/ _jsxDEV("span", {
+                className: `${baseClass}__label`,
+                children: children
+            }, void 0, false, {
+                fileName: "src/elements/Pill/index.tsx",
+                lineNumber: 145,
+                columnNumber: 7
+            }, this),
+            Boolean(icon) && /*#__PURE__*/ _jsxDEV("span", {
+                className: `${baseClass}__icon`,
+                children: icon
+            }, void 0, false, {
+                fileName: "src/elements/Pill/index.tsx",
+                lineNumber: 146,
+                columnNumber: 25
+            }, this)
+        ]
+    }, void 0, true, {
+        fileName: "src/elements/Pill/index.tsx",
+        lineNumber: 132,
+        columnNumber: 5
+    }, this);
 };
-export const Pill = props => {
-  const {
-    draggable
-  } = props;
-  if (draggable) {
-    return /*#__PURE__*/_jsx(DraggablePill, {
-      ...props
-    });
-  }
-  return /*#__PURE__*/_jsx(StaticPill, {
-    ...props
-  });
+export const Pill = (props)=>{
+    const { draggable } = props;
+    if (draggable) {
+        return /*#__PURE__*/ _jsxDEV(DraggablePill, {
+            ...props
+        }, void 0, false, {
+            fileName: "src/elements/Pill/index.tsx",
+            lineNumber: 155,
+            columnNumber: 12
+        }, this);
+    }
+    return /*#__PURE__*/ _jsxDEV(StaticPill, {
+        ...props
+    }, void 0, false, {
+        fileName: "src/elements/Pill/index.tsx",
+        lineNumber: 157,
+        columnNumber: 10
+    }, this);
 };
+
 //# sourceMappingURL=index.js.map

package/dist/elements/Pill/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","React","useEffect","useState","Link","useDraggableSortable","baseClass","DraggablePill","props","$","id","className","t0","attributes","isDragging","listeners","setNodeRef","transform","t1","t2","filter","Boolean","t3","join","t4","_jsx","StaticPill","elementProps","ref","style","alignIcon","ariaChecked","ariaControls","ariaExpanded","ariaLabel","children","draggable","icon","onClick","pillStyle","rounded","size","to","undefined","isHydrated","setIsHydrated","Symbol","for","isButton","t5","t6","t7","t8","t9","t10","t11","t12","t13","t14","classes","Element","t15","t16","t17","t18","_jsxs","disabled","href","type","Pill"],"sources":["../../../src/elements/Pill/index.tsx"],"sourcesContent":["'use client'\nimport type { ElementType, HTMLAttributes } from 'react'\n\nimport React, { useEffect, useState } from 'react' // TODO: abstract this out to support all routers\n\nimport { Link } from '../Link/index.js'\n\nexport type PillStyle =\n  | 'always-white'\n  | 'dark'\n  | 'error'\n  | 'light'\n  | 'light-gray'\n  | 'success'\n  | 'warning'\n  | 'white'\n\nexport type PillProps = {\n  alignIcon?: 'left' | 'right'\n  'aria-checked'?: boolean\n  'aria-controls'?: string\n  'aria-expanded'?: boolean\n  'aria-label'?: string\n  children?: React.ReactNode\n  className?: string\n  draggable?: boolean\n  elementProps?: {\n    ref: React.RefCallback<HTMLElement>\n  } & HTMLAttributes<HTMLElement>\n  icon?: React.ReactNode\n  id?: string\n  onClick?: () => void\n  /**\n   * @default 'light'\n   */\n  pillStyle?: PillStyle\n  rounded?: boolean\n  size?: 'medium' | 'small'\n  to?: string\n}\n\nexport type RenderedTypeProps = {\n  children: React.ReactNode\n  className?: string\n  onClick?: () => void\n  to: string\n  type?: 'button'\n}\n\nimport { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js'\nimport './index.scss'\n\nconst baseClass = 'pill'\n\nconst DraggablePill: React.FC<PillProps> = (props) => {\n  const { id, className } = props\n\n  const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({\n    id,\n  })\n\n  return (\n    <StaticPill\n      {...props}\n      className={[isDragging && `${baseClass}--is-dragging`, className].filter(Boolean).join(' ')}\n      elementProps={{\n        ...listeners,\n        ...attributes,\n        ref: setNodeRef,\n        style: {\n          transform,\n        },\n      }}\n    />\n  )\n}\n\nconst StaticPill: React.FC<PillProps> = (props) => {\n  const {\n    id,\n    alignIcon = 'right',\n    'aria-checked': ariaChecked,\n    'aria-controls': ariaControls,\n    'aria-expanded': ariaExpanded,\n    'aria-label': ariaLabel,\n    children,\n    className,\n    draggable,\n    elementProps,\n    icon,\n    onClick,\n    pillStyle = 'light',\n    rounded,\n    size = 'medium',\n    to,\n  } = props\n\n  const [isHydrated, setIsHydrated] = useState(false)\n\n  useEffect(() => {\n    setIsHydrated(true)\n  }, [])\n\n  const isButton = onClick && !to\n\n  const classes = [\n    baseClass,\n    `${baseClass}--style-${pillStyle}`,\n    `${baseClass}--size-${size}`,\n    className && className,\n    to && `${baseClass}--has-link`,\n    (to || onClick) && `${baseClass}--has-action`,\n    icon && `${baseClass}--has-icon`,\n    icon && `${baseClass}--align-icon-${alignIcon}`,\n    draggable && `${baseClass}--draggable`,\n    rounded && `${baseClass}--rounded`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let Element: ElementType | React.FC<RenderedTypeProps> = 'div'\n\n  if (isButton) {\n    Element = 'button'\n  }\n\n  if (to) {\n    Element = Link\n  }\n\n  return (\n    <Element\n      {...elementProps}\n      aria-checked={ariaChecked}\n      aria-controls={ariaControls}\n      aria-expanded={ariaExpanded}\n      aria-label={ariaLabel}\n      className={classes}\n      disabled={isButton ? !isHydrated : undefined}\n      href={to || null}\n      id={id}\n      onClick={onClick}\n      type={isButton ? 'button' : undefined}\n    >\n      <span className={`${baseClass}__label`}>{children}</span>\n      {Boolean(icon) && <span className={`${baseClass}__icon`}>{icon}</span>}\n    </Element>\n  )\n}\n\nexport const Pill: React.FC<PillProps> = (props) => {\n  const { draggable } = props\n\n  if (draggable) {\n    return <DraggablePill {...props} />\n  }\n  return <StaticPill {...props} />\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"sources":["../../../src/elements/Pill/index.tsx"],"sourcesContent":["'use client'\nimport type { ElementType, HTMLAttributes } from 'react'\n\nimport React, { useEffect, useState } from 'react' // TODO: abstract this out to support all routers\n\nimport { Link } from '../Link/index.js'\n\nexport type PillStyle =\n  | 'always-white'\n  | 'dark'\n  | 'error'\n  | 'light'\n  | 'light-gray'\n  | 'success'\n  | 'warning'\n  | 'white'\n\nexport type PillProps = {\n  alignIcon?: 'left' | 'right'\n  'aria-checked'?: boolean\n  'aria-controls'?: string\n  'aria-expanded'?: boolean\n  'aria-label'?: string\n  children?: React.ReactNode\n  className?: string\n  draggable?: boolean\n  elementProps?: {\n    ref: React.RefCallback<HTMLElement>\n  } & HTMLAttributes<HTMLElement>\n  icon?: React.ReactNode\n  id?: string\n  onClick?: () => void\n  /**\n   * @default 'light'\n   */\n  pillStyle?: PillStyle\n  rounded?: boolean\n  size?: 'medium' | 'small'\n  to?: string\n}\n\nexport type RenderedTypeProps = {\n  children: React.ReactNode\n  className?: string\n  onClick?: () => void\n  to: string\n  type?: 'button'\n}\n\nimport { useDraggableSortable } from '../DraggableSortable/useDraggableSortable/index.js'\nimport './index.scss'\n\nconst baseClass = 'pill'\n\nconst DraggablePill: React.FC<PillProps> = (props) => {\n  const { id, className } = props\n\n  const { attributes, isDragging, listeners, setNodeRef, transform } = useDraggableSortable({\n    id,\n  })\n\n  return (\n    <StaticPill\n      {...props}\n      className={[isDragging && `${baseClass}--is-dragging`, className].filter(Boolean).join(' ')}\n      elementProps={{\n        ...listeners,\n        ...attributes,\n        ref: setNodeRef,\n        style: {\n          transform,\n        },\n      }}\n    />\n  )\n}\n\nconst StaticPill: React.FC<PillProps> = (props) => {\n  const {\n    id,\n    alignIcon = 'right',\n    'aria-checked': ariaChecked,\n    'aria-controls': ariaControls,\n    'aria-expanded': ariaExpanded,\n    'aria-label': ariaLabel,\n    children,\n    className,\n    draggable,\n    elementProps,\n    icon,\n    onClick,\n    pillStyle = 'light',\n    rounded,\n    size = 'medium',\n    to,\n  } = props\n\n  const [isHydrated, setIsHydrated] = useState(false)\n\n  useEffect(() => {\n    setIsHydrated(true)\n  }, [])\n\n  const isButton = onClick && !to\n\n  const classes = [\n    baseClass,\n    `${baseClass}--style-${pillStyle}`,\n    `${baseClass}--size-${size}`,\n    className && className,\n    to && `${baseClass}--has-link`,\n    (to || onClick) && `${baseClass}--has-action`,\n    icon && `${baseClass}--has-icon`,\n    icon && `${baseClass}--align-icon-${alignIcon}`,\n    draggable && `${baseClass}--draggable`,\n    rounded && `${baseClass}--rounded`,\n  ]\n    .filter(Boolean)\n    .join(' ')\n\n  let Element: ElementType | React.FC<RenderedTypeProps> = 'div'\n\n  if (isButton) {\n    Element = 'button'\n  }\n\n  if (to) {\n    Element = Link\n  }\n\n  return (\n    <Element\n      {...elementProps}\n      aria-checked={ariaChecked}\n      aria-controls={ariaControls}\n      aria-expanded={ariaExpanded}\n      aria-label={ariaLabel}\n      className={classes}\n      disabled={isButton ? !isHydrated : undefined}\n      href={to || null}\n      id={id}\n      onClick={onClick}\n      type={isButton ? 'button' : undefined}\n    >\n      <span className={`${baseClass}__label`}>{children}</span>\n      {Boolean(icon) && <span className={`${baseClass}__icon`}>{icon}</span>}\n    </Element>\n  )\n}\n\nexport const Pill: React.FC<PillProps> = (props) => {\n  const { draggable } = props\n\n  if (draggable) {\n    return <DraggablePill {...props} />\n  }\n  return <StaticPill {...props} />\n}\n"],"names":["React","useEffect","useState","Link","useDraggableSortable","baseClass","DraggablePill","props","id","className","attributes","isDragging","listeners","setNodeRef","transform","StaticPill","filter","Boolean","join","elementProps","ref","style","alignIcon","ariaChecked","ariaControls","ariaExpanded","ariaLabel","children","draggable","icon","onClick","pillStyle","rounded","size","to","isHydrated","setIsHydrated","isButton","classes","Element","aria-checked","aria-controls","aria-expanded","aria-label","disabled","undefined","href","type","span","Pill"],"mappings":"AAAA;;AAGA,OAAOA,SAASC,SAAS,EAAEC,QAAQ,QAAQ,QAAO;AAAC,iDAAiD;AAEpG,SAASC,IAAI,QAAQ,mBAAkB;AA2BrC;;GAEC,GAeH,SAASC,oBAAoB,QAAQ,qDAAoD;AACzF,OAAO,eAAc;AAErB,MAAMC,YAAY;AAElB,MAAMC,gBAAqC,CAACC;IAC1C,MAAM,EAAEC,EAAE,EAAEC,SAAS,EAAE,GAAGF;IAE1B,MAAM,EAAEG,UAAU,EAAEC,UAAU,EAAEC,SAAS,EAAEC,UAAU,EAAEC,SAAS,EAAE,GAAGV,qBAAqB;QACxFI;IACF;IAEA,qBACE,QAACO;QACE,GAAGR,KAAK;QACTE,WAAW;YAACE,cAAc,GAAGN,UAAU,aAAa,CAAC;YAAEI;SAAU,CAACO,MAAM,CAACC,SAASC,IAAI,CAAC;QACvFC,cAAc;YACZ,GAAGP,SAAS;YACZ,GAAGF,UAAU;YACbU,KAAKP;YACLQ,OAAO;gBACLP;YACF;QACF;;;;;;AAGN;AAEA,MAAMC,aAAkC,CAACR;IACvC,MAAM,EACJC,EAAE,EACFc,YAAY,OAAO,EACnB,gBAAgBC,WAAW,EAC3B,iBAAiBC,YAAY,EAC7B,iBAAiBC,YAAY,EAC7B,cAAcC,SAAS,EACvBC,QAAQ,EACRlB,SAAS,EACTmB,SAAS,EACTT,YAAY,EACZU,IAAI,EACJC,OAAO,EACPC,YAAY,OAAO,EACnBC,OAAO,EACPC,OAAO,QAAQ,EACfC,EAAE,EACH,GAAG3B;IAEJ,MAAM,CAAC4B,YAAYC,cAAc,GAAGlC,SAAS;IAE7CD,UAAU;QACRmC,cAAc;IAChB,GAAG,EAAE;IAEL,MAAMC,WAAWP,WAAW,CAACI;IAE7B,MAAMI,UAAU;QACdjC;QACA,GAAGA,UAAU,QAAQ,EAAE0B,WAAW;QAClC,GAAG1B,UAAU,OAAO,EAAE4B,MAAM;QAC5BxB,aAAaA;QACbyB,MAAM,GAAG7B,UAAU,UAAU,CAAC;QAC7B6B,CAAAA,MAAMJ,OAAM,KAAM,GAAGzB,UAAU,YAAY,CAAC;QAC7CwB,QAAQ,GAAGxB,UAAU,UAAU,CAAC;QAChCwB,QAAQ,GAAGxB,UAAU,aAAa,EAAEiB,WAAW;QAC/CM,aAAa,GAAGvB,UAAU,WAAW,CAAC;QACtC2B,WAAW,GAAG3B,UAAU,SAAS,CAAC;KACnC,CACEW,MAAM,CAACC,SACPC,IAAI,CAAC;IAER,IAAIqB,UAAqD;IAEzD,IAAIF,UAAU;QACZE,UAAU;IACZ;IAEA,IAAIL,IAAI;QACNK,UAAUpC;IACZ;IAEA,qBACE,QAACoC;QACE,GAAGpB,YAAY;QAChBqB,gBAAcjB;QACdkB,iBAAejB;QACfkB,iBAAejB;QACfkB,cAAYjB;QACZjB,WAAW6B;QACXM,UAAUP,WAAW,CAACF,aAAaU;QACnCC,MAAMZ,MAAM;QACZ1B,IAAIA;QACJsB,SAASA;QACTiB,MAAMV,WAAW,WAAWQ;;0BAE5B,QAACG;gBAAKvC,WAAW,GAAGJ,UAAU,OAAO,CAAC;0BAAGsB;;;;;;YACxCV,QAAQY,uBAAS,QAACmB;gBAAKvC,WAAW,GAAGJ,UAAU,MAAM,CAAC;0BAAGwB;;;;;;;;;;;;AAGhE;AAEA,OAAO,MAAMoB,OAA4B,CAAC1C;IACxC,MAAM,EAAEqB,SAAS,EAAE,GAAGrB;IAEtB,IAAIqB,WAAW;QACb,qBAAO,QAACtB;YAAe,GAAGC,KAAK;;;;;;IACjC;IACA,qBAAO,QAACQ;QAAY,GAAGR,KAAK;;;;;;AAC9B,EAAC"}

package/dist/elements/PillSelector/index.js

@@ -1,6 +1,5 @@
 'use client';
-
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxDEV as _jsxDEV } from "react/jsx-dev-runtime";
 import React from 'react';
 import { PlusIcon } from '../../icons/Plus/index.js';
 import { XIcon } from '../../icons/X/index.js';
@@ -11,60 +10,84 @@ const baseClass = 'pill-selector';
 /**
  * Displays a wrappable list of pills that can be selected or deselected.
  * If `draggable` is true, the pills can be reordered by dragging.
- */
-export const PillSelector = ({
-  draggable,
-  onClick,
-  pills
-}) => {
-  // IMPORTANT: Do NOT wrap DraggableSortable in a dynamic component function using useMemo.
-  // BAD: useMemo(() => ({ children }) => <DraggableSortable>...</DraggableSortable>, [deps])
-  // This creates a new function reference on each recomputation, causing React to treat it as a
-  // different component type, triggering unmount/mount cycles instead of just updating props.
-  // GOOD: Use conditional rendering directly: draggable ? <DraggableSortable /> : <div />
-  const pillElements = React.useMemo(() => {
-    return pills.map((pill, i) => {
-      return /*#__PURE__*/_jsx(Pill, {
-        alignIcon: "left",
-        "aria-checked": pill.selected,
-        className: [`${baseClass}__pill`, pill.selected && `${baseClass}__pill--selected`].filter(Boolean).join(' '),
-        draggable: Boolean(draggable),
-        icon: pill.selected ? /*#__PURE__*/_jsx(XIcon, {}) : /*#__PURE__*/_jsx(PlusIcon, {}),
-        id: pill.name,
-        onClick: () => {
-          if (onClick) {
-            void onClick({
-              pill
-            });
-          }
-        },
-        size: "small",
-        children: pill.Label ?? /*#__PURE__*/_jsx("span", {
-          className: `${baseClass}__pill-label`,
-          children: pill.name
-        })
-      }, pill.key ?? `${pill.name}-${i}`);
-    });
-  }, [pills, onClick, draggable]);
-  if (draggable) {
-    return /*#__PURE__*/_jsx(DraggableSortable, {
-      className: baseClass,
-      ids: pills.map(pill_0 => pill_0.name),
-      onDragEnd: ({
-        moveFromIndex,
-        moveToIndex
-      }) => {
-        draggable.onDragEnd({
-          moveFromIndex,
-          moveToIndex
+ */ export const PillSelector = ({ draggable, onClick, pills })=>{
+    // IMPORTANT: Do NOT wrap DraggableSortable in a dynamic component function using useMemo.
+    // BAD: useMemo(() => ({ children }) => <DraggableSortable>...</DraggableSortable>, [deps])
+    // This creates a new function reference on each recomputation, causing React to treat it as a
+    // different component type, triggering unmount/mount cycles instead of just updating props.
+    // GOOD: Use conditional rendering directly: draggable ? <DraggableSortable /> : <div />
+    const pillElements = React.useMemo(()=>{
+        return pills.map((pill, i)=>{
+            return /*#__PURE__*/ _jsxDEV(Pill, {
+                alignIcon: "left",
+                "aria-checked": pill.selected,
+                className: [
+                    `${baseClass}__pill`,
+                    pill.selected && `${baseClass}__pill--selected`
+                ].filter(Boolean).join(' '),
+                draggable: Boolean(draggable),
+                icon: pill.selected ? /*#__PURE__*/ _jsxDEV(XIcon, {}, void 0, false, {
+                    fileName: "src/elements/PillSelector/index.tsx",
+                    lineNumber: 48,
+                    columnNumber: 33
+                }, void 0) : /*#__PURE__*/ _jsxDEV(PlusIcon, {}, void 0, false, {
+                    fileName: "src/elements/PillSelector/index.tsx",
+                    lineNumber: 48,
+                    columnNumber: 45
+                }, void 0),
+                id: pill.name,
+                onClick: ()=>{
+                    if (onClick) {
+                        void onClick({
+                            pill
+                        });
+                    }
+                },
+                size: "small",
+                children: pill.Label ?? /*#__PURE__*/ _jsxDEV("span", {
+                    className: `${baseClass}__pill-label`,
+                    children: pill.name
+                }, void 0, false, {
+                    fileName: "src/elements/PillSelector/index.tsx",
+                    lineNumber: 58,
+                    columnNumber: 26
+                }, this)
+            }, pill.key ?? `${pill.name}-${i}`, false, {
+                fileName: "src/elements/PillSelector/index.tsx",
+                lineNumber: 41,
+                columnNumber: 9
+            }, this);
         });
-      },
-      children: pillElements
-    });
-  }
-  return /*#__PURE__*/_jsx("div", {
-    className: baseClass,
-    children: pillElements
-  });
+    }, [
+        pills,
+        onClick,
+        draggable
+    ]);
+    if (draggable) {
+        return /*#__PURE__*/ _jsxDEV(DraggableSortable, {
+            className: baseClass,
+            ids: pills.map((pill)=>pill.name),
+            onDragEnd: ({ moveFromIndex, moveToIndex })=>{
+                draggable.onDragEnd({
+                    moveFromIndex,
+                    moveToIndex
+                });
+            },
+            children: pillElements
+        }, void 0, false, {
+            fileName: "src/elements/PillSelector/index.tsx",
+            lineNumber: 66,
+            columnNumber: 7
+        }, this);
+    }
+    return /*#__PURE__*/ _jsxDEV("div", {
+        className: baseClass,
+        children: pillElements
+    }, void 0, false, {
+        fileName: "src/elements/PillSelector/index.tsx",
+        lineNumber: 81,
+        columnNumber: 10
+    }, this);
 };
+
 //# sourceMappingURL=index.js.map

package/dist/elements/PillSelector/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","PlusIcon","XIcon","DraggableSortable","Pill","baseClass","PillSelector","draggable","onClick","pills","pillElements","useMemo","map","pill","i","_jsx","alignIcon","selected","className","filter","Boolean","join","icon","id","name","size","Label","key","ids","onDragEnd","moveFromIndex","moveToIndex"],"sources":["../../../src/elements/PillSelector/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { Pill } from '../Pill/index.js'\nimport './index.scss'\n\nconst baseClass = 'pill-selector'\n\nexport type SelectablePill = {\n  key?: string\n  Label?: React.ReactNode\n  name: string\n  selected: boolean\n}\n\nexport type Props = {\n  draggable?: {\n    onDragEnd: (args: { moveFromIndex: number; moveToIndex: number }) => void\n  }\n  onClick?: (args: { pill: SelectablePill }) => Promise<void> | void\n  pills: SelectablePill[]\n}\n\n/**\n * Displays a wrappable list of pills that can be selected or deselected.\n * If `draggable` is true, the pills can be reordered by dragging.\n */\nexport const PillSelector: React.FC<Props> = ({ draggable, onClick, pills }) => {\n  // IMPORTANT: Do NOT wrap DraggableSortable in a dynamic component function using useMemo.\n  // BAD: useMemo(() => ({ children }) => <DraggableSortable>...</DraggableSortable>, [deps])\n  // This creates a new function reference on each recomputation, causing React to treat it as a\n  // different component type, triggering unmount/mount cycles instead of just updating props.\n  // GOOD: Use conditional rendering directly: draggable ? <DraggableSortable /> : <div />\n  const pillElements = React.useMemo(() => {\n    return pills.map((pill, i) => {\n      return (\n        <Pill\n          alignIcon=\"left\"\n          aria-checked={pill.selected}\n          className={[`${baseClass}__pill`, pill.selected && `${baseClass}__pill--selected`]\n            .filter(Boolean)\n            .join(' ')}\n          draggable={Boolean(draggable)}\n          icon={pill.selected ? <XIcon /> : <PlusIcon />}\n          id={pill.name}\n          key={pill.key ?? `${pill.name}-${i}`}\n          onClick={() => {\n            if (onClick) {\n              void onClick({ pill })\n            }\n          }}\n          size=\"small\"\n        >\n          {pill.Label ?? <span className={`${baseClass}__pill-label`}>{pill.name}</span>}\n        </Pill>\n      )\n    })\n  }, [pills, onClick, draggable])\n\n  if (draggable) {\n    return (\n      <DraggableSortable\n        className={baseClass}\n        ids={pills.map((pill) => pill.name)}\n        onDragEnd={({ moveFromIndex, moveToIndex }) => {\n          draggable.onDragEnd({\n            moveFromIndex,\n            moveToIndex,\n          })\n        }}\n      >\n        {pillElements}\n      </DraggableSortable>\n    )\n  }\n\n  return <div className={baseClass}>{pillElements}</div>\n}\n"],"mappings":"AAAA;;;AAEA,OAAOA,KAAA,MAAW;AAElB,SAASC,QAAQ,QAAQ;AACzB,SAASC,KAAK,QAAQ;AACtB,SAASC,iBAAiB,QAAQ;AAClC,SAASC,IAAI,QAAQ;AACrB,OAAO;AAEP,MAAMC,SAAA,GAAY;AAiBlB;;;;AAIA,OAAO,MAAMC,YAAA,GAAgCA,CAAC;EAAEC,SAAS;EAAEC,OAAO;EAAEC;AAAK,CAAE;EACzE;EACA;EACA;EACA;EACA;EACA,MAAMC,YAAA,GAAeV,KAAA,CAAMW,OAAO,CAAC;IACjC,OAAOF,KAAA,CAAMG,GAAG,CAAC,CAACC,IAAA,EAAMC,CAAA;MACtB,oBACEC,IAAA,CAACX,IAAA;QACCY,SAAA,EAAU;QACV,gBAAcH,IAAA,CAAKI,QAAQ;QAC3BC,SAAA,EAAW,CAAC,GAAGb,SAAA,QAAiB,EAAEQ,IAAA,CAAKI,QAAQ,IAAI,GAAGZ,SAAA,kBAA2B,CAAC,CAC/Ec,MAAM,CAACC,OAAA,EACPC,IAAI,CAAC;QACRd,SAAA,EAAWa,OAAA,CAAQb,SAAA;QACnBe,IAAA,EAAMT,IAAA,CAAKI,QAAQ,gBAAGF,IAAA,CAACb,KAAA,qBAAWa,IAAA,CAACd,QAAA;QACnCsB,EAAA,EAAIV,IAAA,CAAKW,IAAI;QAEbhB,OAAA,EAASA,CAAA;UACP,IAAIA,OAAA,EAAS;YACX,KAAKA,OAAA,CAAQ;cAAEK;YAAK;UACtB;QACF;QACAY,IAAA,EAAK;kBAEJZ,IAAA,CAAKa,KAAK,iBAAIX,IAAA,CAAC;UAAKG,SAAA,EAAW,GAAGb,SAAA,cAAuB;oBAAGQ,IAAA,CAAKW;;SAR7DX,IAAA,CAAKc,GAAG,IAAI,GAAGd,IAAA,CAAKW,IAAI,IAAIV,CAAA,EAAG;IAW1C;EACF,GAAG,CAACL,KAAA,EAAOD,OAAA,EAASD,SAAA,CAAU;EAE9B,IAAIA,SAAA,EAAW;IACb,oBACEQ,IAAA,CAACZ,iBAAA;MACCe,SAAA,EAAWb,SAAA;MACXuB,GAAA,EAAKnB,KAAA,CAAMG,GAAG,CAAEC,MAAA,IAASA,MAAA,CAAKW,IAAI;MAClCK,SAAA,EAAWA,CAAC;QAAEC,aAAa;QAAEC;MAAW,CAAE;QACxCxB,SAAA,CAAUsB,SAAS,CAAC;UAClBC,aAAA;UACAC;QACF;MACF;gBAECrB;;EAGP;EAEA,oBAAOK,IAAA,CAAC;IAAIG,SAAA,EAAWb,SAAA;cAAYK;;AACrC","ignoreList":[]}
+{"version":3,"sources":["../../../src/elements/PillSelector/index.tsx"],"sourcesContent":["'use client'\n\nimport React from 'react'\n\nimport { PlusIcon } from '../../icons/Plus/index.js'\nimport { XIcon } from '../../icons/X/index.js'\nimport { DraggableSortable } from '../DraggableSortable/index.js'\nimport { Pill } from '../Pill/index.js'\nimport './index.scss'\n\nconst baseClass = 'pill-selector'\n\nexport type SelectablePill = {\n  key?: string\n  Label?: React.ReactNode\n  name: string\n  selected: boolean\n}\n\nexport type Props = {\n  draggable?: {\n    onDragEnd: (args: { moveFromIndex: number; moveToIndex: number }) => void\n  }\n  onClick?: (args: { pill: SelectablePill }) => Promise<void> | void\n  pills: SelectablePill[]\n}\n\n/**\n * Displays a wrappable list of pills that can be selected or deselected.\n * If `draggable` is true, the pills can be reordered by dragging.\n */\nexport const PillSelector: React.FC<Props> = ({ draggable, onClick, pills }) => {\n  // IMPORTANT: Do NOT wrap DraggableSortable in a dynamic component function using useMemo.\n  // BAD: useMemo(() => ({ children }) => <DraggableSortable>...</DraggableSortable>, [deps])\n  // This creates a new function reference on each recomputation, causing React to treat it as a\n  // different component type, triggering unmount/mount cycles instead of just updating props.\n  // GOOD: Use conditional rendering directly: draggable ? <DraggableSortable /> : <div />\n  const pillElements = React.useMemo(() => {\n    return pills.map((pill, i) => {\n      return (\n        <Pill\n          alignIcon=\"left\"\n          aria-checked={pill.selected}\n          className={[`${baseClass}__pill`, pill.selected && `${baseClass}__pill--selected`]\n            .filter(Boolean)\n            .join(' ')}\n          draggable={Boolean(draggable)}\n          icon={pill.selected ? <XIcon /> : <PlusIcon />}\n          id={pill.name}\n          key={pill.key ?? `${pill.name}-${i}`}\n          onClick={() => {\n            if (onClick) {\n              void onClick({ pill })\n            }\n          }}\n          size=\"small\"\n        >\n          {pill.Label ?? <span className={`${baseClass}__pill-label`}>{pill.name}</span>}\n        </Pill>\n      )\n    })\n  }, [pills, onClick, draggable])\n\n  if (draggable) {\n    return (\n      <DraggableSortable\n        className={baseClass}\n        ids={pills.map((pill) => pill.name)}\n        onDragEnd={({ moveFromIndex, moveToIndex }) => {\n          draggable.onDragEnd({\n            moveFromIndex,\n            moveToIndex,\n          })\n        }}\n      >\n        {pillElements}\n      </DraggableSortable>\n    )\n  }\n\n  return <div className={baseClass}>{pillElements}</div>\n}\n"],"names":["React","PlusIcon","XIcon","DraggableSortable","Pill","baseClass","PillSelector","draggable","onClick","pills","pillElements","useMemo","map","pill","i","alignIcon","aria-checked","selected","className","filter","Boolean","join","icon","id","name","size","Label","span","key","ids","onDragEnd","moveFromIndex","moveToIndex","div"],"mappings":"AAAA;;AAEA,OAAOA,WAAW,QAAO;AAEzB,SAASC,QAAQ,QAAQ,4BAA2B;AACpD,SAASC,KAAK,QAAQ,yBAAwB;AAC9C,SAASC,iBAAiB,QAAQ,gCAA+B;AACjE,SAASC,IAAI,QAAQ,mBAAkB;AACvC,OAAO,eAAc;AAErB,MAAMC,YAAY;AAiBlB;;;CAGC,GACD,OAAO,MAAMC,eAAgC,CAAC,EAAEC,SAAS,EAAEC,OAAO,EAAEC,KAAK,EAAE;IACzE,0FAA0F;IAC1F,2FAA2F;IAC3F,8FAA8F;IAC9F,4FAA4F;IAC5F,wFAAwF;IACxF,MAAMC,eAAeV,MAAMW,OAAO,CAAC;QACjC,OAAOF,MAAMG,GAAG,CAAC,CAACC,MAAMC;YACtB,qBACE,QAACV;gBACCW,WAAU;gBACVC,gBAAcH,KAAKI,QAAQ;gBAC3BC,WAAW;oBAAC,GAAGb,UAAU,MAAM,CAAC;oBAAEQ,KAAKI,QAAQ,IAAI,GAAGZ,UAAU,gBAAgB,CAAC;iBAAC,CAC/Ec,MAAM,CAACC,SACPC,IAAI,CAAC;gBACRd,WAAWa,QAAQb;gBACnBe,MAAMT,KAAKI,QAAQ,iBAAG,QAACf;;;;2CAAW,QAACD;;;;;gBACnCsB,IAAIV,KAAKW,IAAI;gBAEbhB,SAAS;oBACP,IAAIA,SAAS;wBACX,KAAKA,QAAQ;4BAAEK;wBAAK;oBACtB;gBACF;gBACAY,MAAK;0BAEJZ,KAAKa,KAAK,kBAAI,QAACC;oBAAKT,WAAW,GAAGb,UAAU,YAAY,CAAC;8BAAGQ,KAAKW,IAAI;;;;;;eARjEX,KAAKe,GAAG,IAAI,GAAGf,KAAKW,IAAI,CAAC,CAAC,EAAEV,GAAG;;;;;QAW1C;IACF,GAAG;QAACL;QAAOD;QAASD;KAAU;IAE9B,IAAIA,WAAW;QACb,qBACE,QAACJ;YACCe,WAAWb;YACXwB,KAAKpB,MAAMG,GAAG,CAAC,CAACC,OAASA,KAAKW,IAAI;YAClCM,WAAW,CAAC,EAAEC,aAAa,EAAEC,WAAW,EAAE;gBACxCzB,UAAUuB,SAAS,CAAC;oBAClBC;oBACAC;gBACF;YACF;sBAECtB;;;;;;IAGP;IAEA,qBAAO,QAACuB;QAAIf,WAAWb;kBAAYK;;;;;;AACrC,EAAC"}