@ruya.sa/ui 3.71.3

package/dist/elements/Collapsible/index.js

@@ -0,0 +1,153 @@
+'use client';
+
+import { c as _c } from "react/compiler-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState } from 'react';
+import { ChevronIcon } from '../../icons/Chevron/index.js';
+import { DragHandleIcon } from '../../icons/DragHandle/index.js';
+import { useTranslation } from '../../providers/Translation/index.js';
+import './index.scss';
+import { AnimateHeight } from '../AnimateHeight/index.js';
+import { CollapsibleProvider, useCollapsible } from './provider.js';
+const baseClass = 'collapsible';
+export { CollapsibleProvider, useCollapsible };
+export const Collapsible = t0 => {
+  const $ = _c(25);
+  const {
+    actions,
+    AfterCollapsible,
+    children,
+    className,
+    collapsibleStyle: t1,
+    disableHeaderToggle: t2,
+    disableToggleIndicator: t3,
+    dragHandleProps,
+    header,
+    initCollapsed,
+    isCollapsed: collapsedFromProps,
+    onToggle
+  } = t0;
+  const collapsibleStyle = t1 === undefined ? "default" : t1;
+  const disableHeaderToggle = t2 === undefined ? false : t2;
+  const disableToggleIndicator = t3 === undefined ? false : t3;
+  const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed));
+  const [hoveringToggle, setHoveringToggle] = useState(false);
+  const {
+    isWithinCollapsible
+  } = useCollapsible();
+  const {
+    t
+  } = useTranslation();
+  const isCollapsed = typeof collapsedFromProps === "boolean" ? collapsedFromProps : collapsedLocal;
+  let t4;
+  if ($[0] !== isCollapsed || $[1] !== onToggle) {
+    t4 = () => {
+      if (typeof onToggle === "function") {
+        onToggle(!isCollapsed);
+      }
+      setCollapsedLocal(!isCollapsed);
+    };
+    $[0] = isCollapsed;
+    $[1] = onToggle;
+    $[2] = t4;
+  } else {
+    t4 = $[2];
+  }
+  const toggleCollapsible = t4;
+  const t5 = dragHandleProps && `${baseClass}--has-drag-handle`;
+  const t6 = isCollapsed && `${baseClass}--collapsed`;
+  const t7 = isWithinCollapsible && `${baseClass}--nested`;
+  const t8 = hoveringToggle && !disableHeaderToggle && `${baseClass}--hovered`;
+  const t9 = `${baseClass}--style-${collapsibleStyle}`;
+  let t10;
+  if ($[3] !== className || $[4] !== t5 || $[5] !== t6 || $[6] !== t7 || $[7] !== t8 || $[8] !== t9) {
+    t10 = [baseClass, className, t5, t6, t7, t8, t9].filter(Boolean);
+    $[3] = className;
+    $[4] = t5;
+    $[5] = t6;
+    $[6] = t7;
+    $[7] = t8;
+    $[8] = t9;
+    $[9] = t10;
+  } else {
+    t10 = $[9];
+  }
+  const t11 = t10.join(" ");
+  const t12 = `${baseClass}__toggle-wrap${disableHeaderToggle ? " toggle-disabled" : ""}`;
+  let t13;
+  let t14;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = () => setHoveringToggle(true);
+    t14 = () => setHoveringToggle(false);
+    $[10] = t13;
+    $[11] = t14;
+  } else {
+    t13 = $[10];
+    t14 = $[11];
+  }
+  let t15;
+  if ($[12] !== AfterCollapsible || $[13] !== actions || $[14] !== children || $[15] !== disableHeaderToggle || $[16] !== disableToggleIndicator || $[17] !== dragHandleProps || $[18] !== header || $[19] !== isCollapsed || $[20] !== t || $[21] !== t11 || $[22] !== t12 || $[23] !== toggleCollapsible) {
+    t15 = _jsx("div", {
+      className: t11,
+      children: _jsxs(CollapsibleProvider, {
+        isCollapsed,
+        toggle: toggleCollapsible,
+        children: [_jsxs("div", {
+          className: t12,
+          onMouseEnter: t13,
+          onMouseLeave: t14,
+          children: [!disableHeaderToggle && _jsx("button", {
+            className: [`${baseClass}__toggle`, `${baseClass}__toggle--${isCollapsed ? "collapsed" : "open"}`].filter(Boolean).join(" "),
+            onClick: toggleCollapsible,
+            type: "button",
+            children: _jsx("span", {
+              children: t("fields:toggleBlock")
+            })
+          }), dragHandleProps && _jsx("div", {
+            className: `${baseClass}__drag`,
+            ...dragHandleProps.attributes,
+            ...dragHandleProps.listeners,
+            children: _jsx(DragHandleIcon, {})
+          }), header ? _jsx("div", {
+            className: [`${baseClass}__header-wrap`, dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`].filter(Boolean).join(" "),
+            children: header
+          }) : null, _jsxs("div", {
+            className: `${baseClass}__actions-wrap`,
+            children: [actions ? _jsx("div", {
+              className: `${baseClass}__actions`,
+              children: actions
+            }) : null, !disableToggleIndicator && _jsx("div", {
+              className: `${baseClass}__indicator`,
+              children: _jsx(ChevronIcon, {
+                direction: !isCollapsed ? "up" : undefined
+              })
+            })]
+          })]
+        }), _jsx(AnimateHeight, {
+          height: isCollapsed ? 0 : "auto",
+          children: _jsx("div", {
+            className: `${baseClass}__content`,
+            children
+          })
+        }), AfterCollapsible]
+      })
+    });
+    $[12] = AfterCollapsible;
+    $[13] = actions;
+    $[14] = children;
+    $[15] = disableHeaderToggle;
+    $[16] = disableToggleIndicator;
+    $[17] = dragHandleProps;
+    $[18] = header;
+    $[19] = isCollapsed;
+    $[20] = t;
+    $[21] = t11;
+    $[22] = t12;
+    $[23] = toggleCollapsible;
+    $[24] = t15;
+  } else {
+    t15 = $[24];
+  }
+  return t15;
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["c","_c","React","useState","ChevronIcon","DragHandleIcon","useTranslation","AnimateHeight","CollapsibleProvider","useCollapsible","baseClass","Collapsible","t0","$","actions","AfterCollapsible","children","className","collapsibleStyle","t1","disableHeaderToggle","t2","disableToggleIndicator","t3","dragHandleProps","header","initCollapsed","isCollapsed","collapsedFromProps","onToggle","undefined","collapsedLocal","setCollapsedLocal","Boolean","hoveringToggle","setHoveringToggle","isWithinCollapsible","t","t4","toggleCollapsible","t5","t6","t7","t8","t9","t10","filter","t11","join","t12","t13","t14","Symbol","for","t15","_jsx","_jsxs","toggle","onMouseEnter","onMouseLeave","onClick","type","attributes","listeners","direction","height"],"sources":["../../../src/elements/Collapsible/index.tsx"],"sourcesContent":["'use client'\nimport React, { useState } from 'react'\n\nimport type { DragHandleProps } from '../DraggableSortable/DraggableSortableItem/types.js'\n\nimport { ChevronIcon } from '../../icons/Chevron/index.js'\nimport { DragHandleIcon } from '../../icons/DragHandle/index.js'\nimport { useTranslation } from '../../providers/Translation/index.js'\nimport './index.scss'\nimport { AnimateHeight } from '../AnimateHeight/index.js'\nimport { CollapsibleProvider, useCollapsible } from './provider.js'\n\nconst baseClass = 'collapsible'\n\nexport { CollapsibleProvider, useCollapsible }\n\nexport type CollapsibleProps = {\n  actions?: React.ReactNode\n  /**\n   * Components that will be rendered within the collapsible provider but after the wrapper.\n   */\n  AfterCollapsible?: React.ReactNode\n  children: React.ReactNode\n  className?: string\n  collapsibleStyle?: 'default' | 'error'\n  /**\n   * If set to true, clicking on the collapsible header will not toggle the collapsible state.\n   * This is useful if the collapsible state is controlled externally (e.g. from a parent component or custom button).\n   */\n  disableHeaderToggle?: boolean\n  /**\n   * If set to true, the toggle indicator (chevron) on the right side of the header will be hidden.\n   */\n  disableToggleIndicator?: boolean\n  dragHandleProps?: DragHandleProps\n  header?: React.ReactNode\n  initCollapsed?: boolean\n  isCollapsed?: boolean\n  onToggle?: (collapsed: boolean) => Promise<void> | void\n}\n\nexport const Collapsible: React.FC<CollapsibleProps> = ({\n  actions,\n  AfterCollapsible,\n  children,\n  className,\n  collapsibleStyle = 'default',\n  disableHeaderToggle = false,\n  disableToggleIndicator = false,\n  dragHandleProps,\n  header,\n  initCollapsed,\n  isCollapsed: collapsedFromProps,\n  onToggle,\n}) => {\n  const [collapsedLocal, setCollapsedLocal] = useState(Boolean(initCollapsed))\n  const [hoveringToggle, setHoveringToggle] = useState(false)\n  const { isWithinCollapsible } = useCollapsible()\n  const { t } = useTranslation()\n\n  const isCollapsed = typeof collapsedFromProps === 'boolean' ? collapsedFromProps : collapsedLocal\n\n  const toggleCollapsible = React.useCallback(() => {\n    if (typeof onToggle === 'function') {\n      void onToggle(!isCollapsed)\n    }\n    setCollapsedLocal(!isCollapsed)\n  }, [onToggle, isCollapsed])\n\n  return (\n    <div\n      className={[\n        baseClass,\n        className,\n        dragHandleProps && `${baseClass}--has-drag-handle`,\n        isCollapsed && `${baseClass}--collapsed`,\n        isWithinCollapsible && `${baseClass}--nested`,\n        hoveringToggle && !disableHeaderToggle && `${baseClass}--hovered`,\n        `${baseClass}--style-${collapsibleStyle}`,\n      ]\n        .filter(Boolean)\n        .join(' ')}\n    >\n      <CollapsibleProvider isCollapsed={isCollapsed} toggle={toggleCollapsible}>\n        <div\n          className={`${baseClass}__toggle-wrap${disableHeaderToggle ? ' toggle-disabled' : ''}`}\n          onMouseEnter={() => setHoveringToggle(true)}\n          onMouseLeave={() => setHoveringToggle(false)}\n        >\n          {!disableHeaderToggle && (\n            <button\n              className={[\n                `${baseClass}__toggle`,\n                `${baseClass}__toggle--${isCollapsed ? 'collapsed' : 'open'}`,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n              onClick={toggleCollapsible}\n              type=\"button\"\n            >\n              <span>{t('fields:toggleBlock')}</span>\n            </button>\n          )}\n\n          {dragHandleProps && (\n            <div\n              className={`${baseClass}__drag`}\n              {...dragHandleProps.attributes}\n              {...dragHandleProps.listeners}\n            >\n              <DragHandleIcon />\n            </div>\n          )}\n          {header ? (\n            <div\n              className={[\n                `${baseClass}__header-wrap`,\n                dragHandleProps && `${baseClass}__header-wrap--has-drag-handle`,\n              ]\n                .filter(Boolean)\n                .join(' ')}\n            >\n              {header}\n            </div>\n          ) : null}\n          <div className={`${baseClass}__actions-wrap`}>\n            {actions ? <div className={`${baseClass}__actions`}>{actions}</div> : null}\n            {!disableToggleIndicator && (\n              <div className={`${baseClass}__indicator`}>\n                <ChevronIcon direction={!isCollapsed ? 'up' : undefined} />\n              </div>\n            )}\n          </div>\n        </div>\n        <AnimateHeight height={isCollapsed ? 0 : 'auto'}>\n          <div className={`${baseClass}__content`}>{children}</div>\n        </AnimateHeight>\n        {AfterCollapsible}\n      </CollapsibleProvider>\n    </div>\n  )\n}\n"],"mappings":"AAAA;;AAAA,SAAAA,CAAA,IAAAC,EAAA;;AACA,OAAOC,KAAA,IAASC,QAAQ,QAAQ;AAIhC,SAASC,WAAW,QAAQ;AAC5B,SAASC,cAAc,QAAQ;AAC/B,SAASC,cAAc,QAAQ;AAC/B,OAAO;AACP,SAASC,aAAa,QAAQ;AAC9B,SAASC,mBAAmB,EAAEC,cAAc,QAAQ;AAEpD,MAAMC,SAAA,GAAY;AAElB,SAASF,mBAAmB,EAAEC,cAAc;AA2B5C,OAAO,MAAME,WAAA,GAA0CC,EAAA;EAAA,MAAAC,CAAA,GAAAZ,EAAA;EAAC;IAAAa,OAAA;IAAAC,gBAAA;IAAAC,QAAA;IAAAC,SAAA;IAAAC,gBAAA,EAAAC,EAAA;IAAAC,mBAAA,EAAAC,EAAA;IAAAC,sBAAA,EAAAC,EAAA;IAAAC,eAAA;IAAAC,MAAA;IAAAC,aAAA;IAAAC,WAAA,EAAAC,kBAAA;IAAAC;EAAA,IAAAjB,EAavD;EARC,MAAAM,gBAAA,GAAAC,EAA4B,KAAAW,SAAA,GAAT,SAAS,GAA5BX,EAA4B;EAC5B,MAAAC,mBAAA,GAAAC,EAA2B,KAAAS,SAAA,WAA3BT,EAA2B;EAC3B,MAAAC,sBAAA,GAAAC,EAA8B,KAAAO,SAAA,WAA9BP,EAA8B;EAO9B,OAAAQ,cAAA,EAAAC,iBAAA,IAA4C7B,QAAA,CAAS8B,OAAA,CAAQP,aAAA;EAC7D,OAAAQ,cAAA,EAAAC,iBAAA,IAA4ChC,QAAA,MAAS;EACrD;IAAAiC;EAAA,IAAgC3B,cAAA;EAChC;IAAA4B;EAAA,IAAc/B,cAAA;EAEd,MAAAqB,WAAA,GAAoB,OAAOC,kBAAA,KAAuB,YAAYA,kBAAA,GAAqBG,cAAA;EAAA,IAAAO,EAAA;EAAA,IAAAzB,CAAA,QAAAc,WAAA,IAAAd,CAAA,QAAAgB,QAAA;IAEvCS,EAAA,GAAAA,CAAA;MAAA,IACtC,OAAOT,QAAA,KAAa;QACjBA,QAAA,EAAUF,WAAA;MAAA;MAEjBK,iBAAA,EAAmBL,WAAA;IAAA;IACrBd,CAAA,MAAAc,WAAA;IAAAd,CAAA,MAAAgB,QAAA;IAAAhB,CAAA,MAAAyB,EAAA;EAAA;IAAAA,EAAA,GAAAzB,CAAA;EAAA;EALA,MAAA0B,iBAAA,GAA0BD,EAKA;EAOpB,MAAAE,EAAA,GAAAhB,eAAA,IAAmB,GAAAd,SAAA,mBAA+B;EAClD,MAAA+B,EAAA,GAAAd,WAAA,IAAe,GAAAjB,SAAA,aAAyB;EACxC,MAAAgC,EAAA,GAAAN,mBAAA,IAAuB,GAAA1B,SAAA,UAAsB;EAC7C,MAAAiC,EAAA,GAAAT,cAAA,KAAmBd,mBAAA,IAAuB,GAAAV,SAAA,WAAuB;EACjE,MAAAkC,EAAA,MAAAlC,SAAA,WAAuBQ,gBAAA,EAAkB;EAAA,IAAA2B,GAAA;EAAA,IAAAhC,CAAA,QAAAI,SAAA,IAAAJ,CAAA,QAAA2B,EAAA,IAAA3B,CAAA,QAAA4B,EAAA,IAAA5B,CAAA,QAAA6B,EAAA,IAAA7B,CAAA,QAAA8B,EAAA,IAAA9B,CAAA,QAAA+B,EAAA;IAPhCC,GAAA,IAAAnC,SAAA,EAETO,SAAA,EACAuB,EAAkD,EAClDC,EAAwC,EACxCC,EAA6C,EAC7CC,EAAiE,EACjEC,EAAyC,EAAAE,MAAA,CAAAb,OAEjC;IAAApB,CAAA,MAAAI,SAAA;IAAAJ,CAAA,MAAA2B,EAAA;IAAA3B,CAAA,MAAA4B,EAAA;IAAA5B,CAAA,MAAA6B,EAAA;IAAA7B,CAAA,MAAA8B,EAAA;IAAA9B,CAAA,MAAA+B,EAAA;IAAA/B,CAAA,MAAAgC,GAAA;EAAA;IAAAA,GAAA,GAAAhC,CAAA;EAAA;EATC,MAAAkC,GAAA,GAAAF,GASD,CAAAG,IAAA,CACF;EAIO,MAAAC,GAAA,MAAAvC,SAAA,gBAA4BU,mBAAA,GAAsB,qBAAqB,IAAI;EAAA,IAAA8B,GAAA;EAAA,IAAAC,GAAA;EAAA,IAAAtC,CAAA,SAAAuC,MAAA,CAAAC,GAAA;IACxEH,GAAA,GAAAA,CAAA,KAAMf,iBAAA,KAAkB;IACxBgB,GAAA,GAAAA,CAAA,KAAMhB,iBAAA,MAAkB;IAAAtB,CAAA,OAAAqC,GAAA;IAAArC,CAAA,OAAAsC,GAAA;EAAA;IAAAD,GAAA,GAAArC,CAAA;IAAAsC,GAAA,GAAAtC,CAAA;EAAA;EAAA,IAAAyC,GAAA;EAAA,IAAAzC,CAAA,SAAAE,gBAAA,IAAAF,CAAA,SAAAC,OAAA,IAAAD,CAAA,SAAAG,QAAA,IAAAH,CAAA,SAAAO,mBAAA,IAAAP,CAAA,SAAAS,sBAAA,IAAAT,CAAA,SAAAW,eAAA,IAAAX,CAAA,SAAAY,MAAA,IAAAZ,CAAA,SAAAc,WAAA,IAAAd,CAAA,SAAAwB,CAAA,IAAAxB,CAAA,SAAAkC,GAAA,IAAAlC,CAAA,SAAAoC,GAAA,IAAApC,CAAA,SAAA0B,iBAAA;IAjB5Ce,GAAA,GAAAC,IAAA,CAAC;MAAAtC,SAAA,EACY8B,GAUH;MAAA/B,QAAA,EAERwC,KAAA,CAAAhD,mBAAA;QAAAmB,WAAA;QAAA8B,MAAA,EAAuDlB,iBAAA;QAAAvB,QAAA,GACrDwC,KAAA,CAAC;UAAAvC,SAAA,EACYgC,GAA2E;UAAAS,YAAA,EACxER,GAAwB;UAAAS,YAAA,EACxBR,GAAwB;UAAAnC,QAAA,GAErC,CAACI,mBAAA,IACAmC,IAAA,CAAC;YAAAtC,SAAA,EACY,CACT,GAAAP,SAAA,UAAsB,EACtB,GAAAA,SAAA,aAAyBiB,WAAA,GAAc,cAAc,QAAQ,EAAAmB,MAAA,CAAAb,OAErD,EAAAe,IAAA,CACF;YAAAY,OAAA,EACCrB,iBAAA;YAAAsB,IAAA,EACJ;YAAA7C,QAAA,EAELuC,IAAA,CAAC;cAAAvC,QAAA,EAAMqB,CAAA,CAAE;YAAA,C;cAIZb,eAAA,IACC+B,IAAA,CAAC;YAAAtC,SAAA,EACY,GAAAP,SAAA,QAAoB;YAAA,GAC3Bc,eAAA,CAAAsC,UAAA;YAAA,GACAtC,eAAA,CAAAuC,SAAA;YAAA/C,QAAA,EAEJuC,IAAA,CAAAlD,cAAA,IAAC;UAAA,C,GAGJoB,MAAA,GACC8B,IAAA,CAAC;YAAAtC,SAAA,EACY,CACT,GAAAP,SAAA,eAA2B,EAC3Bc,eAAA,IAAmB,GAAAd,SAAA,gCAA4C,EAAAoC,MAAA,CAAAb,OAEvD,EAAAe,IAAA,CACF;YAAAhC,QAAA,EAEPS;UAAA,C,QAED,EACJ+B,KAAA,CAAC;YAAAvC,SAAA,EAAe,GAAAP,SAAA,gBAA4B;YAAAM,QAAA,GACzCF,OAAA,GAAUyC,IAAA,CAAC;cAAAtC,SAAA,EAAe,GAAAP,SAAA,WAAuB;cAAAM,QAAA,EAAGF;YAAA,C,QAAiB,EACrE,CAACQ,sBAAA,IACAiC,IAAA,CAAC;cAAAtC,SAAA,EAAe,GAAAP,SAAA,aAAyB;cAAAM,QAAA,EACvCuC,IAAA,CAAAnD,WAAA;gBAAA4D,SAAA,EAAwB,CAACrC,WAAA,GAAc,OAAAG;cAAO,C;;;YAKtDyB,IAAA,CAAAhD,aAAA;UAAA0D,MAAA,EAAuBtC,WAAA,OAAkB;UAAAX,QAAA,EACvCuC,IAAA,CAAC;YAAAtC,SAAA,EAAe,GAAAP,SAAA,WAAuB;YAAAM;UAAA,C;YAExCD,gBAAA;MAAA,C;;;;;;;;;;;;;;;;;;SAnELuC,G;CAuEJ","ignoreList":[]}

package/dist/elements/Collapsible/index.scss

@@ -0,0 +1,164 @@
+@import '../../scss/styles.scss';
+
+@layer payload-default {
+  .collapsible {
+    position: relative;
+    --toggle-pad-h: #{base(0.75)};
+    --toggle-pad-v: #{base(0.6)};
+
+    border-radius: $style-radius-m;
+
+    &__toggle-wrap {
+      position: relative;
+      padding: base(0.4) base(0.4) base(0.4) base(0.8);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      background: var(--theme-elevation-50);
+      line-height: base(1.2);
+      gap: base(0.2);
+      border-top-right-radius: $style-radius-m;
+      border-top-left-radius: $style-radius-m;
+      width: 100%;
+
+      &:not(.toggle-disabled):hover {
+        background: var(--theme-elevation-100);
+      }
+
+      &:has(.collapsible__drag) {
+        padding-inline-start: base(0.4);
+      }
+    }
+
+    &__drag {
+      display: flex;
+      opacity: 0.5;
+      top: var(--toggle-pad-v);
+      width: base(1.2);
+      height: base(1.2);
+      padding: base(0.1);
+
+      icon {
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    &__toggle {
+      @extend %btn-reset;
+      @extend %body;
+      text-align: left;
+      border-top-right-radius: $style-radius-m;
+      border-top-left-radius: $style-radius-m;
+      width: 100%;
+      height: 100%;
+      color: transparent;
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      &:not(.toggle-disabled) {
+        cursor: pointer;
+      }
+
+      span {
+        user-select: none;
+      }
+    }
+
+    &--style-default {
+      border: 1px solid var(--theme-elevation-200);
+      &:hover {
+        border: 1px solid var(--theme-elevation-300);
+      }
+
+      > .collapsible__toggle-wrap {
+        .row-label {
+          color: var(--theme-text);
+        }
+      }
+    }
+
+    &--style-error {
+      border: 1px solid var(--theme-error-400);
+      > .collapsible__toggle-wrap {
+        background-color: var(--theme-error-100);
+
+        &:hover {
+          background: var(--theme-error-150);
+        }
+
+        .row-label {
+          color: var(--theme-error-950);
+        }
+      }
+    }
+
+    &__header-wrap {
+      top: 0;
+      right: base(3);
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+      width: 100%;
+      overflow: hidden;
+      max-width: 100%;
+    }
+
+    &__header-wrap--has-drag-handle {
+      left: base(1);
+    }
+
+    &--collapsed {
+      .collapsible__toggle-wrap {
+        border-bottom-right-radius: $style-radius-m;
+        border-bottom-left-radius: $style-radius-m;
+      }
+    }
+
+    &__actions-wrap {
+      pointer-events: none;
+      display: flex;
+      gap: base(0.2);
+      margin-inline-end: base(0.2);
+    }
+
+    &__actions {
+      pointer-events: all;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: base(1.2);
+      height: base(1.2);
+
+      &.icon {
+        padding: base(0.1);
+      }
+    }
+
+    &__indicator {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: base(1.2);
+      height: base(1.2);
+
+      &.icon {
+        padding: base(0.1);
+      }
+    }
+
+    &__content {
+      background-color: var(--theme-elevation-0);
+      border-bottom-left-radius: $style-radius-m;
+      border-bottom-right-radius: $style-radius-m;
+      padding: var(--base);
+    }
+
+    @include small-break {
+      &__content {
+        padding: var(--gutter-h);
+      }
+    }
+  }
+}

package/dist/elements/Collapsible/provider.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+type ContextType = {
+    isCollapsed: boolean;
+    isVisible: boolean;
+    isWithinCollapsible: boolean;
+    toggle: () => void;
+};
+export declare const CollapsibleProvider: React.FC<{
+    children?: React.ReactNode;
+    isCollapsed?: boolean;
+    isWithinCollapsible?: boolean;
+    toggle: () => void;
+}>;
+export declare const useCollapsible: () => ContextType;
+export {};
+//# sourceMappingURL=provider.d.ts.map

package/dist/elements/Collapsible/provider.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.d.ts","sourceRoot":"","sources":["../../../src/elements/Collapsible/provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6B,MAAM,OAAO,CAAA;AAEjD,KAAK,WAAW,GAAG;IACjB,WAAW,EAAE,OAAO,CAAA;IACpB,SAAS,EAAE,OAAO,CAAA;IAClB,mBAAmB,EAAE,OAAO,CAAA;IAC5B,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,CAAA;AASD,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,EAAE,CAAC;IACzC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,MAAM,EAAE,MAAM,IAAI,CAAA;CACnB,CAaA,CAAA;AAED,eAAO,MAAM,cAAc,QAAO,WAA2B,CAAA"}

package/dist/elements/Collapsible/provider.js

@@ -0,0 +1,35 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { createContext, use } from 'react';
+const Context = /*#__PURE__*/createContext({
+  isCollapsed: undefined,
+  isVisible: undefined,
+  isWithinCollapsible: undefined,
+  toggle: () => {}
+});
+export const CollapsibleProvider = ({
+  children,
+  isCollapsed,
+  isWithinCollapsible = true,
+  toggle
+}) => {
+  const {
+    isCollapsed: parentIsCollapsed,
+    isVisible
+  } = useCollapsible();
+  const contextValue = React.useMemo(() => {
+    return {
+      isCollapsed,
+      isVisible: isVisible && !parentIsCollapsed,
+      isWithinCollapsible,
+      toggle
+    };
+  }, [isCollapsed, isWithinCollapsible, toggle, parentIsCollapsed, isVisible]);
+  return /*#__PURE__*/_jsx(Context, {
+    value: contextValue,
+    children: children
+  });
+};
+export const useCollapsible = () => use(Context);
+//# sourceMappingURL=provider.js.map

package/dist/elements/Collapsible/provider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"provider.js","names":["React","createContext","use","Context","isCollapsed","undefined","isVisible","isWithinCollapsible","toggle","CollapsibleProvider","children","parentIsCollapsed","useCollapsible","contextValue","useMemo","_jsx","value"],"sources":["../../../src/elements/Collapsible/provider.tsx"],"sourcesContent":["'use client'\nimport React, { createContext, use } from 'react'\n\ntype ContextType = {\n  isCollapsed: boolean\n  isVisible: boolean\n  isWithinCollapsible: boolean\n  toggle: () => void\n}\n\nconst Context = createContext({\n  isCollapsed: undefined,\n  isVisible: undefined,\n  isWithinCollapsible: undefined,\n  toggle: () => {},\n} as ContextType)\n\nexport const CollapsibleProvider: React.FC<{\n  children?: React.ReactNode\n  isCollapsed?: boolean\n  isWithinCollapsible?: boolean\n  toggle: () => void\n}> = ({ children, isCollapsed, isWithinCollapsible = true, toggle }) => {\n  const { isCollapsed: parentIsCollapsed, isVisible } = useCollapsible()\n\n  const contextValue = React.useMemo((): ContextType => {\n    return {\n      isCollapsed,\n      isVisible: isVisible && !parentIsCollapsed,\n      isWithinCollapsible,\n      toggle,\n    }\n  }, [isCollapsed, isWithinCollapsible, toggle, parentIsCollapsed, isVisible])\n\n  return <Context value={contextValue}>{children}</Context>\n}\n\nexport const useCollapsible = (): ContextType => use(Context)\n"],"mappings":"AAAA;;;AACA,OAAOA,KAAA,IAASC,aAAa,EAAEC,GAAG,QAAQ;AAS1C,MAAMC,OAAA,gBAAUF,aAAA,CAAc;EAC5BG,WAAA,EAAaC,SAAA;EACbC,SAAA,EAAWD,SAAA;EACXE,mBAAA,EAAqBF,SAAA;EACrBG,MAAA,EAAQA,CAAA,MAAO;AACjB;AAEA,OAAO,MAAMC,mBAAA,GAKRA,CAAC;EAAEC,QAAQ;EAAEN,WAAW;EAAEG,mBAAA,GAAsB,IAAI;EAAEC;AAAM,CAAE;EACjE,MAAM;IAAEJ,WAAA,EAAaO,iBAAiB;IAAEL;EAAS,CAAE,GAAGM,cAAA;EAEtD,MAAMC,YAAA,GAAeb,KAAA,CAAMc,OAAO,CAAC;IACjC,OAAO;MACLV,WAAA;MACAE,SAAA,EAAWA,SAAA,IAAa,CAACK,iBAAA;MACzBJ,mBAAA;MACAC;IACF;EACF,GAAG,CAACJ,WAAA,EAAaG,mBAAA,EAAqBC,MAAA,EAAQG,iBAAA,EAAmBL,SAAA,CAAU;EAE3E,oBAAOS,IAAA,CAACZ,OAAA;IAAQa,KAAA,EAAOH,YAAA;cAAeH;;AACxC;AAEA,OAAO,MAAME,cAAA,GAAiBA,CAAA,KAAmBV,GAAA,CAAIC,OAAA","ignoreList":[]}

package/dist/elements/ColumnSelector/index.d.ts

@@ -0,0 +1,7 @@
+import type { SanitizedCollectionConfig } from '@ruya.sa/payload';
+import React from 'react';
+export type Props = {
+    readonly collectionSlug: SanitizedCollectionConfig['slug'];
+};
+export declare const ColumnSelector: React.FC<Props>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/ColumnSelector/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/ColumnSelector/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,yBAAyB,EAAe,MAAM,kBAAkB,CAAA;AAG9E,OAAO,KAAyB,MAAM,OAAO,CAAA;AAO7C,MAAM,MAAM,KAAK,GAAG;IAClB,QAAQ,CAAC,cAAc,EAAE,yBAAyB,CAAC,MAAM,CAAC,CAAA;CAC3D,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CA4D1C,CAAA"}

package/dist/elements/ColumnSelector/index.js

@@ -0,0 +1,63 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fieldIsHiddenOrDisabled, fieldIsID } from '@ruya.sa/payload/shared';
+import React, { useId, useMemo } from 'react';
+import { FieldLabel } from '../../fields/FieldLabel/index.js';
+import { useEditDepth } from '../../providers/EditDepth/index.js';
+import { useTableColumns } from '../../providers/TableColumns/index.js';
+import { PillSelector } from '../PillSelector/index.js';
+export const ColumnSelector = ({
+  collectionSlug
+}) => {
+  const {
+    columns,
+    moveColumn,
+    toggleColumn
+  } = useTableColumns();
+  const uuid = useId();
+  const editDepth = useEditDepth();
+  const filteredColumns = useMemo(() => columns?.filter(col => !(fieldIsHiddenOrDisabled(col.field) && !fieldIsID(col.field)) && !col?.field?.admin?.disableListColumn), [columns]);
+  const pills = useMemo(() => {
+    return filteredColumns ? filteredColumns.map((col_0, i) => {
+      const {
+        accessor,
+        active,
+        field
+      } = col_0;
+      const label = 'labelWithPrefix' in field && field.labelWithPrefix !== undefined ? field.labelWithPrefix : 'label' in field && field.label !== undefined ? field.label : 'name' in field && field.name !== undefined ? field.name : undefined;
+      return {
+        name: accessor,
+        key: `${collectionSlug}-${accessor}-${i}${editDepth ? `-${editDepth}-` : ''}${uuid}`,
+        Label: /*#__PURE__*/_jsx(FieldLabel, {
+          label: label,
+          unstyled: true
+        }),
+        selected: active
+      };
+    }) : null;
+  }, [collectionSlug, editDepth, filteredColumns, uuid]);
+  if (!pills) {
+    return null;
+  }
+  return /*#__PURE__*/_jsx(PillSelector, {
+    draggable: {
+      onDragEnd: ({
+        moveFromIndex,
+        moveToIndex
+      }) => {
+        void moveColumn({
+          fromIndex: moveFromIndex,
+          toIndex: moveToIndex
+        });
+      }
+    },
+    onClick: ({
+      pill
+    }) => {
+      void toggleColumn(pill.name);
+    },
+    pills: pills
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["fieldIsHiddenOrDisabled","fieldIsID","React","useId","useMemo","FieldLabel","useEditDepth","useTableColumns","PillSelector","ColumnSelector","collectionSlug","columns","moveColumn","toggleColumn","uuid","editDepth","filteredColumns","filter","col","field","admin","disableListColumn","pills","map","i","accessor","active","label","labelWithPrefix","undefined","name","key","Label","_jsx","unstyled","selected","draggable","onDragEnd","moveFromIndex","moveToIndex","fromIndex","toIndex","onClick","pill"],"sources":["../../../src/elements/ColumnSelector/index.tsx"],"sourcesContent":["'use client'\nimport type { SanitizedCollectionConfig, StaticLabel } from '@ruya.sa/payload'\n\nimport { fieldIsHiddenOrDisabled, fieldIsID } from '@ruya.sa/payload/shared'\nimport React, { useId, useMemo } from 'react'\n\nimport { FieldLabel } from '../../fields/FieldLabel/index.js'\nimport { useEditDepth } from '../../providers/EditDepth/index.js'\nimport { useTableColumns } from '../../providers/TableColumns/index.js'\nimport { PillSelector, type SelectablePill } from '../PillSelector/index.js'\n\nexport type Props = {\n  readonly collectionSlug: SanitizedCollectionConfig['slug']\n}\n\nexport const ColumnSelector: React.FC<Props> = ({ collectionSlug }) => {\n  const { columns, moveColumn, toggleColumn } = useTableColumns()\n\n  const uuid = useId()\n  const editDepth = useEditDepth()\n\n  const filteredColumns = useMemo(\n    () =>\n      columns?.filter(\n        (col) =>\n          !(fieldIsHiddenOrDisabled(col.field) && !fieldIsID(col.field)) &&\n          !col?.field?.admin?.disableListColumn,\n      ),\n    [columns],\n  )\n\n  const pills: SelectablePill[] = useMemo(() => {\n    return filteredColumns\n      ? filteredColumns.map((col, i) => {\n          const { accessor, active, field } = col\n\n          const label =\n            'labelWithPrefix' in field && field.labelWithPrefix !== undefined\n              ? field.labelWithPrefix\n              : 'label' in field && field.label !== undefined\n                ? field.label\n                : 'name' in field && field.name !== undefined\n                  ? field.name\n                  : undefined\n\n          return {\n            name: accessor,\n            key: `${collectionSlug}-${accessor}-${i}${editDepth ? `-${editDepth}-` : ''}${uuid}`,\n            Label: <FieldLabel label={label as StaticLabel} unstyled />,\n            selected: active,\n          } as SelectablePill\n        })\n      : null\n  }, [collectionSlug, editDepth, filteredColumns, uuid])\n\n  if (!pills) {\n    return null\n  }\n\n  return (\n    <PillSelector\n      draggable={{\n        onDragEnd: ({ moveFromIndex, moveToIndex }) => {\n          void moveColumn({\n            fromIndex: moveFromIndex,\n            toIndex: moveToIndex,\n          })\n        },\n      }}\n      onClick={({ pill }) => {\n        void toggleColumn(pill.name)\n      }}\n      pills={pills}\n    />\n  )\n}\n"],"mappings":"AAAA;;;AAGA,SAASA,uBAAuB,EAAEC,SAAS,QAAQ;AACnD,OAAOC,KAAA,IAASC,KAAK,EAAEC,OAAO,QAAQ;AAEtC,SAASC,UAAU,QAAQ;AAC3B,SAASC,YAAY,QAAQ;AAC7B,SAASC,eAAe,QAAQ;AAChC,SAASC,YAAY,QAA6B;AAMlD,OAAO,MAAMC,cAAA,GAAkCA,CAAC;EAAEC;AAAc,CAAE;EAChE,MAAM;IAAEC,OAAO;IAAEC,UAAU;IAAEC;EAAY,CAAE,GAAGN,eAAA;EAE9C,MAAMO,IAAA,GAAOX,KAAA;EACb,MAAMY,SAAA,GAAYT,YAAA;EAElB,MAAMU,eAAA,GAAkBZ,OAAA,CACtB,MACEO,OAAA,EAASM,MAAA,CACNC,GAAA,IACC,EAAElB,uBAAA,CAAwBkB,GAAA,CAAIC,KAAK,KAAK,CAAClB,SAAA,CAAUiB,GAAA,CAAIC,KAAK,MAC5D,CAACD,GAAA,EAAKC,KAAA,EAAOC,KAAA,EAAOC,iBAAA,GAE1B,CAACV,OAAA,CAAQ;EAGX,MAAMW,KAAA,GAA0BlB,OAAA,CAAQ;IACtC,OAAOY,eAAA,GACHA,eAAA,CAAgBO,GAAG,CAAC,CAACL,KAAA,EAAKM,CAAA;MACxB,MAAM;QAAEC,QAAQ;QAAEC,MAAM;QAAEP;MAAK,CAAE,GAAGD,KAAA;MAEpC,MAAMS,KAAA,GACJ,qBAAqBR,KAAA,IAASA,KAAA,CAAMS,eAAe,KAAKC,SAAA,GACpDV,KAAA,CAAMS,eAAe,GACrB,WAAWT,KAAA,IAASA,KAAA,CAAMQ,KAAK,KAAKE,SAAA,GAClCV,KAAA,CAAMQ,KAAK,GACX,UAAUR,KAAA,IAASA,KAAA,CAAMW,IAAI,KAAKD,SAAA,GAChCV,KAAA,CAAMW,IAAI,GACVD,SAAA;MAEV,OAAO;QACLC,IAAA,EAAML,QAAA;QACNM,GAAA,EAAK,GAAGrB,cAAA,IAAkBe,QAAA,IAAYD,CAAA,GAAIT,SAAA,GAAY,IAAIA,SAAA,GAAY,GAAG,KAAKD,IAAA,EAAM;QACpFkB,KAAA,eAAOC,IAAA,CAAC5B,UAAA;UAAWsB,KAAA,EAAOA,KAAA;UAAsBO,QAAQ;;QACxDC,QAAA,EAAUT;MACZ;IACF,KACA;EACN,GAAG,CAAChB,cAAA,EAAgBK,SAAA,EAAWC,eAAA,EAAiBF,IAAA,CAAK;EAErD,IAAI,CAACQ,KAAA,EAAO;IACV,OAAO;EACT;EAEA,oBACEW,IAAA,CAACzB,YAAA;IACC4B,SAAA,EAAW;MACTC,SAAA,EAAWA,CAAC;QAAEC,aAAa;QAAEC;MAAW,CAAE;QACxC,KAAK3B,UAAA,CAAW;UACd4B,SAAA,EAAWF,aAAA;UACXG,OAAA,EAASF;QACX;MACF;IACF;IACAG,OAAA,EAASA,CAAC;MAAEC;IAAI,CAAE;MAChB,KAAK9B,YAAA,CAAa8B,IAAA,CAAKb,IAAI;IAC7B;IACAR,KAAA,EAAOA;;AAGb","ignoreList":[]}

package/dist/elements/Combobox/index.d.ts

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { PopupProps } from '../Popup/index.js';
+import './index.scss';
+/**
+ * @internal
+ * @experimental
+ */
+export type ComboboxEntry = {
+    Component: React.ReactNode;
+    name: string;
+};
+/**
+ * @internal
+ * @experimental
+ */
+export type ComboboxProps = {
+    entries: ComboboxEntry[];
+    /** Minimum number of entries required to show search */
+    minEntriesForSearch?: number;
+    onSelect?: (entry: ComboboxEntry) => void;
+    searchPlaceholder?: string;
+} & Omit<PopupProps, 'children' | 'render'>;
+/**
+ * A wrapper on top of Popup + PopupList.ButtonGroup that adds search functionality.
+ *
+ * @internal - this component may be removed or receive breaking changes in minor releases.
+ * @experimental
+ */
+export declare const Combobox: React.FC<ComboboxProps>;
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/Combobox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/elements/Combobox/index.tsx"],"names":[],"mappings":"AACA,OAAO,KAAoC,MAAM,OAAO,CAAA;AAExD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAA;AAGnD,OAAO,cAAc,CAAA;AAIrB;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,SAAS,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,aAAa,GAAG;IAC1B,OAAO,EAAE,aAAa,EAAE,CAAA;IACxB,wDAAwD;IACxD,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAA;IACzC,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B,GAAG,IAAI,CAAC,UAAU,EAAE,UAAU,GAAG,QAAQ,CAAC,CAAA;AAE3C;;;;;GAKG;AACH,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAmG5C,CAAA"}

package/dist/elements/Combobox/index.js

@@ -0,0 +1,96 @@
+'use client';
+
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useMemo, useRef, useState } from 'react';
+import { Popup, PopupList } from '../Popup/index.js';
+import './index.scss';
+const baseClass = 'combobox';
+/**
+ * A wrapper on top of Popup + PopupList.ButtonGroup that adds search functionality.
+ *
+ * @internal - this component may be removed or receive breaking changes in minor releases.
+ * @experimental
+ */
+export const Combobox = props => {
+  const {
+    entries,
+    minEntriesForSearch = 8,
+    onSelect,
+    onToggleClose,
+    onToggleOpen,
+    searchPlaceholder = 'Search...',
+    ...popupProps
+  } = props;
+  const [searchValue, setSearchValue] = useState('');
+  const isOpenRef = useRef(false);
+  const searchInputRef = useRef(null);
+  const filteredEntries = useMemo(() => {
+    if (!searchValue) {
+      return entries;
+    }
+    const search = searchValue.toLowerCase();
+    return entries.filter(entry => entry.name.toLowerCase().includes(search));
+  }, [entries, searchValue]);
+  const showSearch = entries.length >= minEntriesForSearch;
+  const hasResults = filteredEntries.length > 0;
+  const handleToggleOpen = React.useCallback(active => {
+    isOpenRef.current = active;
+    if (active && showSearch) {
+      setTimeout(() => {
+        searchInputRef.current?.focus();
+      }, 100);
+    }
+    onToggleOpen?.(active);
+  }, [showSearch, onToggleOpen]);
+  const handleToggleClose = React.useCallback(() => {
+    isOpenRef.current = false;
+    setSearchValue('');
+    onToggleClose?.();
+  }, [onToggleClose]);
+  return /*#__PURE__*/_jsx(Popup, {
+    ...popupProps,
+    className: `${baseClass} ${popupProps.className || ''}`,
+    onToggleClose: handleToggleClose,
+    onToggleOpen: handleToggleOpen,
+    render: ({
+      close
+    }) => /*#__PURE__*/_jsxs("div", {
+      className: `${baseClass}__content`,
+      children: [showSearch && /*#__PURE__*/_jsx("div", {
+        className: `${baseClass}__search-wrapper${!hasResults ? ` ${baseClass}__search-wrapper--no-results` : ''}`,
+        children: /*#__PURE__*/_jsx("input", {
+          "aria-label": searchPlaceholder,
+          className: `${baseClass}__search-input`,
+          onChange: e => setSearchValue(e.target.value),
+          placeholder: searchPlaceholder,
+          ref: searchInputRef,
+          type: "text",
+          value: searchValue
+        })
+      }), /*#__PURE__*/_jsx(PopupList.ButtonGroup, {
+        children: filteredEntries.map((entry_0, index) => {
+          const handleClick = () => {
+            if (onSelect) {
+              onSelect(entry_0);
+            }
+            close();
+          };
+          return /*#__PURE__*/_jsx("div", {
+            className: `${baseClass}__entry`,
+            onClick: handleClick,
+            onKeyDown: e_0 => {
+              if (e_0.key === 'Enter' || e_0.key === ' ') {
+                e_0.preventDefault();
+                handleClick();
+              }
+            },
+            role: "menuitem",
+            tabIndex: 0,
+            children: entry_0.Component
+          }, `${entry_0.name}-${index}`);
+        })
+      })]
+    })
+  });
+};
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["React","useMemo","useRef","useState","Popup","PopupList","baseClass","Combobox","props","entries","minEntriesForSearch","onSelect","onToggleClose","onToggleOpen","searchPlaceholder","popupProps","searchValue","setSearchValue","isOpenRef","searchInputRef","filteredEntries","search","toLowerCase","filter","entry","name","includes","showSearch","length","hasResults","handleToggleOpen","useCallback","active","current","setTimeout","focus","handleToggleClose","_jsx","className","render","close","_jsxs","onChange","e","target","value","placeholder","ref","type","ButtonGroup","map","index","handleClick","onClick","onKeyDown","key","preventDefault","role","tabIndex","Component"],"sources":["../../../src/elements/Combobox/index.tsx"],"sourcesContent":["'use client'\nimport React, { useMemo, useRef, useState } from 'react'\n\nimport type { PopupProps } from '../Popup/index.js'\n\nimport { Popup, PopupList } from '../Popup/index.js'\nimport './index.scss'\n\nconst baseClass = 'combobox'\n\n/**\n * @internal\n * @experimental\n */\nexport type ComboboxEntry = {\n  Component: React.ReactNode\n  name: string\n}\n\n/**\n * @internal\n * @experimental\n */\nexport type ComboboxProps = {\n  entries: ComboboxEntry[]\n  /** Minimum number of entries required to show search */\n  minEntriesForSearch?: number\n  onSelect?: (entry: ComboboxEntry) => void\n  searchPlaceholder?: string\n} & Omit<PopupProps, 'children' | 'render'>\n\n/**\n * A wrapper on top of Popup + PopupList.ButtonGroup that adds search functionality.\n *\n * @internal - this component may be removed or receive breaking changes in minor releases.\n * @experimental\n */\nexport const Combobox: React.FC<ComboboxProps> = (props) => {\n  const {\n    entries,\n    minEntriesForSearch = 8,\n    onSelect,\n    onToggleClose,\n    onToggleOpen,\n    searchPlaceholder = 'Search...',\n    ...popupProps\n  } = props\n  const [searchValue, setSearchValue] = useState('')\n  const isOpenRef = useRef(false)\n  const searchInputRef = useRef<HTMLInputElement>(null)\n\n  const filteredEntries = useMemo(() => {\n    if (!searchValue) {\n      return entries\n    }\n    const search = searchValue.toLowerCase()\n    return entries.filter((entry) => entry.name.toLowerCase().includes(search))\n  }, [entries, searchValue])\n\n  const showSearch = entries.length >= minEntriesForSearch\n  const hasResults = filteredEntries.length > 0\n\n  const handleToggleOpen = React.useCallback(\n    (active: boolean) => {\n      isOpenRef.current = active\n      if (active && showSearch) {\n        setTimeout(() => {\n          searchInputRef.current?.focus()\n        }, 100)\n      }\n      onToggleOpen?.(active)\n    },\n    [showSearch, onToggleOpen],\n  )\n\n  const handleToggleClose = React.useCallback(() => {\n    isOpenRef.current = false\n    setSearchValue('')\n    onToggleClose?.()\n  }, [onToggleClose])\n\n  return (\n    <Popup\n      {...popupProps}\n      className={`${baseClass} ${popupProps.className || ''}`}\n      onToggleClose={handleToggleClose}\n      onToggleOpen={handleToggleOpen}\n      render={({ close }) => (\n        <div className={`${baseClass}__content`}>\n          {showSearch && (\n            <div\n              className={`${baseClass}__search-wrapper${!hasResults ? ` ${baseClass}__search-wrapper--no-results` : ''}`}\n            >\n              <input\n                aria-label={searchPlaceholder}\n                className={`${baseClass}__search-input`}\n                onChange={(e) => setSearchValue(e.target.value)}\n                placeholder={searchPlaceholder}\n                ref={searchInputRef}\n                type=\"text\"\n                value={searchValue}\n              />\n            </div>\n          )}\n          <PopupList.ButtonGroup>\n            {filteredEntries.map((entry, index) => {\n              const handleClick = () => {\n                if (onSelect) {\n                  onSelect(entry)\n                }\n                close()\n              }\n\n              return (\n                <div\n                  className={`${baseClass}__entry`}\n                  key={`${entry.name}-${index}`}\n                  onClick={handleClick}\n                  onKeyDown={(e) => {\n                    if (e.key === 'Enter' || e.key === ' ') {\n                      e.preventDefault()\n                      handleClick()\n                    }\n                  }}\n                  role=\"menuitem\"\n                  tabIndex={0}\n                >\n                  {entry.Component}\n                </div>\n              )\n            })}\n          </PopupList.ButtonGroup>\n        </div>\n      )}\n    />\n  )\n}\n"],"mappings":"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","ignoreList":[]}