@proef/common-ui 0.0.0-stage → 2.2.1

package/dist/esm/legacy/components/molecules/Modal/Modal.css

@@ -0,0 +1,54 @@
+.cui-modal-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  z-index: 1000;
+}
+.cui-modal-overlay .cui-modal-content {
+  color: var(--dark-blue);
+  background-color: white;
+  border-radius: 25px;
+  min-width: 500px;
+  max-width: 90%;
+  max-height: 90vh;
+  overflow-y: auto;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.cui-modal-overlay .cui-modal-content.cui-modal-sm {
+  min-width: 320px;
+  width: 400px;
+}
+.cui-modal-overlay .cui-modal-content.cui-modal-md {
+  width: 600px;
+}
+.cui-modal-overlay .cui-modal-content.cui-modal-lg {
+  width: 900px;
+}
+.cui-modal-overlay .cui-modal-content.cui-modal-xl {
+  width: 1200px;
+}
+.cui-modal-overlay .cui-modal-header {
+  padding: 1rem 1.5rem;
+  border-bottom: 1px solid var(--light-gray-01);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.cui-modal-overlay .cui-modal-title {
+  margin: 0;
+  font-size: 1.25rem;
+}
+.cui-modal-overlay .cui-modal-body {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: 2rem 2rem 2rem 2rem;
+}

package/dist/esm/legacy/components/molecules/Modal/Modal.js

@@ -0,0 +1,64 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconButtonThemeStyled } from "../../../styles/themes/ButtonThemes.js";
+import IconButton from "../../atoms/Button/variants/IconButton.js";
+import { faX } from "@fortawesome/free-solid-svg-icons";
+import { RemoveScroll } from "react-remove-scroll";
+import { forwardRef, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+import './Modal.css';/* empty css           */
+const Modal = forwardRef(
+  ({ title, onClose, modalOnly, size, children }, ref) => {
+    const modalRef = useRef(null);
+    const containerRef = ref || modalRef;
+    function closeModal() {
+      onClose();
+    }
+    const handleOverlayClick = (e) => {
+      if (e.target === e.currentTarget) {
+        closeModal();
+      }
+    };
+    useEffect(() => {
+      const handleEsc = (e) => {
+        if (e.key === "Escape") {
+          closeModal();
+        }
+      };
+      window.addEventListener("keydown", handleEsc);
+      return () => {
+        window.removeEventListener("keydown", handleEsc);
+      };
+    }, []);
+    const modalContent = /* @__PURE__ */ jsx(RemoveScroll, { children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "cui-modal-overlay",
+        onClick: handleOverlayClick,
+        ref: containerRef,
+        children: modalOnly ? children : /* @__PURE__ */ jsxs("div", { className: `cui-modal-content${size ? ` cui-modal-${size}` : ""}`, children: [
+          /* @__PURE__ */ jsxs("div", { className: "cui-modal-header", children: [
+            /* @__PURE__ */ jsx("h2", { className: "cui-modal-title", children: title }),
+            /* @__PURE__ */ jsx(
+              IconButton,
+              {
+                icon: faX,
+                onClick: closeModal,
+                theme: IconButtonThemeStyled
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx("div", { className: "cui-modal-body", children })
+        ] })
+      }
+    ) });
+    if (ref) {
+      return modalContent;
+    }
+    return createPortal(modalContent, document.body);
+  }
+);
+Modal.displayName = "Modal";
+export {
+  Modal as default
+};
+//# sourceMappingURL=Modal.js.map

package/dist/esm/legacy/components/molecules/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","sources":["../../../../../../src/legacy/components/molecules/Modal/Modal.tsx"],"sourcesContent":["import { IconButtonThemeStyled } from '../../../styles/themes/ButtonThemes'\r\nimport IconButton from '../../atoms/Button/variants/IconButton'\r\nimport { faX } from '@fortawesome/free-solid-svg-icons'\r\nimport { RemoveScroll } from 'react-remove-scroll'\r\nimport React, { PropsWithChildren, forwardRef, useRef, useEffect } from 'react'\r\nimport { createPortal } from 'react-dom'\r\nimport './Modal.scss'\r\n\r\n/**\r\n * Largura do modal.\r\n *\r\n * Sem `size` o modal mede-se pelo conteúdo (entre `min-width: 500px` e\r\n * `max-width: 90%`), que é o comportamento histórico — não se define um\r\n * default para não mexer na aparência dos portais que já o usam.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'xl'\r\n\r\ntype Props = PropsWithChildren<{\r\n  title: string\r\n  modalOnly?: boolean\r\n  onClose: () => void\r\n  /** Largura fixa. Omitir mantém a largura pelo conteúdo. */\r\n  size?: ModalSize\r\n}>\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nconst Modal = forwardRef<HTMLDivElement, Props>(\r\n  ({ title, onClose, modalOnly, size, children }, ref) => {\r\n    const modalRef = useRef<HTMLDivElement>(null)\r\n    const containerRef = ref || modalRef\r\n\r\n    function closeModal() {\r\n      onClose()\r\n    }\r\n\r\n    const handleOverlayClick = (e: React.MouseEvent<HTMLDivElement>) => {\r\n      if (e.target === e.currentTarget) {\r\n        closeModal()\r\n      }\r\n    }\r\n\r\n    useEffect(() => {\r\n      const handleEsc = (e: KeyboardEvent) => {\r\n        if (e.key === 'Escape') {\r\n          closeModal()\r\n        }\r\n      }\r\n      window.addEventListener('keydown', handleEsc)\r\n\r\n      return () => {\r\n        window.removeEventListener('keydown', handleEsc)\r\n      }\r\n    }, [])\r\n\r\n    // Create a portal to render the modal content\r\n    const modalContent = (\r\n      <RemoveScroll>\r\n        <div\r\n          className=\"cui-modal-overlay\"\r\n          onClick={handleOverlayClick}\r\n          ref={containerRef}\r\n        >\r\n          {modalOnly ? (\r\n            children\r\n          ) : (\r\n            <div className={`cui-modal-content${size ? ` cui-modal-${size}` : ''}`}>\r\n              <div className=\"cui-modal-header\">\r\n                <h2 className=\"cui-modal-title\">{title}</h2>\r\n                <IconButton\r\n                  icon={faX}\r\n                  onClick={closeModal}\r\n                  theme={IconButtonThemeStyled}\r\n                />\r\n              </div>\r\n              <div className=\"cui-modal-body\">{children}</div>\r\n            </div>\r\n          )}\r\n        </div>\r\n      </RemoveScroll>\r\n    )\r\n\r\n    // If a ref is provided, let the parent handle the portal rendering\r\n    if (ref) {\r\n      return modalContent\r\n    }\r\n\r\n    // Otherwise, create a portal to document.body\r\n    return createPortal(modalContent, document.body)\r\n  }\r\n)\r\n\r\nModal.displayName = 'Modal'\r\nexport default Modal\r\n"],"names":[],"mappings":";;;;;;;;AA2BA,MAAM,QAAQ;AAAA,EACZ,CAAC,EAAE,OAAO,SAAS,WAAW,MAAM,SAAA,GAAY,QAAQ;AACtD,UAAM,WAAW,OAAuB,IAAI;AAC5C,UAAM,eAAe,OAAO;AAE5B,aAAS,aAAa;AACpB,cAAA;AAAA,IACF;AAEA,UAAM,qBAAqB,CAAC,MAAwC;AAClE,UAAI,EAAE,WAAW,EAAE,eAAe;AAChC,mBAAA;AAAA,MACF;AAAA,IACF;AAEA,cAAU,MAAM;AACd,YAAM,YAAY,CAAC,MAAqB;AACtC,YAAI,EAAE,QAAQ,UAAU;AACtB,qBAAA;AAAA,QACF;AAAA,MACF;AACA,aAAO,iBAAiB,WAAW,SAAS;AAE5C,aAAO,MAAM;AACX,eAAO,oBAAoB,WAAW,SAAS;AAAA,MACjD;AAAA,IACF,GAAG,CAAA,CAAE;AAGL,UAAM,mCACH,cAAA,EACC,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAU;AAAA,QACV,SAAS;AAAA,QACT,KAAK;AAAA,QAEJ,UAAA,YACC,WAEA,qBAAC,OAAA,EAAI,WAAW,oBAAoB,OAAO,cAAc,IAAI,KAAK,EAAE,IAClE,UAAA;AAAA,UAAA,qBAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,YAAA,oBAAC,MAAA,EAAG,WAAU,mBAAmB,UAAA,OAAM;AAAA,YACvC;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,MAAM;AAAA,gBACN,SAAS;AAAA,gBACT,OAAO;AAAA,cAAA;AAAA,YAAA;AAAA,UACT,GACF;AAAA,UACA,oBAAC,OAAA,EAAI,WAAU,kBAAkB,SAAA,CAAS;AAAA,QAAA,EAAA,CAC5C;AAAA,MAAA;AAAA,IAAA,GAGN;AAIF,QAAI,KAAK;AACP,aAAO;AAAA,IACT;AAGA,WAAO,aAAa,cAAc,SAAS,IAAI;AAAA,EACjD;AACF;AAEA,MAAM,cAAc;"}

package/dist/esm/legacy/components/molecules/MultiTagPicker/MultiTagPicker.css

@@ -0,0 +1,97 @@
+.cui-multiTagPicker {
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+}
+
+.cui-multiTagPicker-container {
+  width: 100%;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: flex-start;
+}
+
+.cui-multiTagPicker-search {
+  flex-grow: 1;
+  width: 100%;
+  min-height: 32px;
+  max-height: 100px;
+  border-radius: 24px;
+  background-color: var(--light-gray-02);
+  border: solid rgba(0, 0, 0, 0.2) 1px;
+  padding: 5px 10px 5px 35px;
+  box-shadow: inset 0px 1px 1px rgb(194, 194, 194);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  overflow: auto;
+}
+.cui-multiTagPicker-search .pointer {
+  cursor: pointer;
+}
+
+.cui-multiTagPicker-search li {
+  min-width: fit-content;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  list-style-type: none;
+  background-color: var(--dark-blue);
+  border-radius: 15px;
+  color: var(--almost-white);
+  font-size: 15px;
+  padding: 7px 10px 7px 10px;
+}
+
+.cui-multiTagPicker-search input[type=text]:focus {
+  outline: none;
+}
+
+.cui-multiTagPicker-input {
+  border: none;
+  flex-grow: 1;
+  background: transparent;
+  height: 32px;
+}
+
+.cui-multiTagPicker-magnifier {
+  position: absolute;
+  top: 14px;
+  left: 14px;
+}
+
+.cui-multiTagPicker-no-options {
+  color: var(--dark-blue);
+  font-size: 13px;
+  text-align: center;
+  margin-top: 15px;
+}
+
+.cui-multiTagPicker-spinner {
+  margin-top: 20px;
+  flex: 1;
+}
+
+.cui-multiTagPicker-options-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  overflow: auto;
+  box-sizing: border-box;
+  margin-top: 10px;
+}
+
+.cui-multiTagPicker-options {
+  flex: 1;
+  width: 100%;
+  overflow-y: auto;
+  overflow-x: hidden;
+  box-sizing: border-box;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
+  gap: 10px;
+  align-content: start;
+  padding: 10px 10px 10px 0px;
+}

package/dist/esm/legacy/components/molecules/MultiTagPicker/MultiTagPicker.js

@@ -0,0 +1,113 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import InfiniteScroll from "react-infinite-scroll-component";
+import { faCircleMinus, faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Color } from "../../../constants/Colors.js";
+import Select from "../../atoms/MultiTagPickerTag/MultiTagPickerTag.js";
+import Spinner from "../../layout/Spinner/Spinner.js";
+import './MultiTagPicker.css';/* empty css                    */
+const MultiTagPicker = (props) => {
+  const {
+    placeholder,
+    noOptionsLabel,
+    searchInput,
+    editable,
+    loading,
+    optionsSelected,
+    options,
+    hasMoreItems,
+    handleRemoveItem,
+    handleInputChange,
+    handleInputKeyDown,
+    handleAddItem,
+    loadMore
+  } = props;
+  function handleInputKeyDownInner(event) {
+    event.preventDefault();
+    editable && handleInputKeyDown && handleInputKeyDown();
+  }
+  function handleInputChangeInner(event) {
+    editable && handleInputChange && handleInputChange(event.target.value);
+  }
+  const selectedIds = useMemo(
+    () => new Set(optionsSelected.map((o) => o.id)),
+    [optionsSelected]
+  );
+  const showSelected = optionsSelected.map((option) => /* @__PURE__ */ jsxs("li", { children: [
+    /* @__PURE__ */ jsx("p", { children: option.label }),
+    /* @__PURE__ */ jsx(
+      FontAwesomeIcon,
+      {
+        size: "sm",
+        icon: faCircleMinus,
+        className: `${editable && "pointer"}`,
+        color: "#F8F8F8",
+        onClick: () => editable && handleRemoveItem(option.id)
+      }
+    )
+  ] }, option.id));
+  return /* @__PURE__ */ jsxs("div", { className: "cui-multiTagPicker", children: [
+    /* @__PURE__ */ jsxs(
+      "form",
+      {
+        onSubmit: handleInputKeyDownInner,
+        className: "cui-multiTagPicker-container",
+        children: [
+          /* @__PURE__ */ jsx(
+            FontAwesomeIcon,
+            {
+              size: "1x",
+              icon: faMagnifyingGlass,
+              className: "cui-multiTagPicker-magnifier",
+              color: Color.MEDIUM_GRAY_01
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { className: "cui-multiTagPicker-search", children: [
+            showSelected,
+            " ",
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                className: "cui-multiTagPicker-input",
+                type: "text",
+                value: searchInput,
+                onChange: handleInputChangeInner,
+                placeholder: editable ? placeholder : "",
+                disabled: !editable || loading
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    options.length === 0 && !loading && /* @__PURE__ */ jsx("p", { className: "cui-multiTagPicker-no-options", children: noOptionsLabel }),
+    editable && (loading ? /* @__PURE__ */ jsx("div", { className: "cui-multiTagPicker-spinner", children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx("div", { className: "cui-multiTagPicker-options-container", children: /* @__PURE__ */ jsx(
+      InfiniteScroll,
+      {
+        dataLength: options.length,
+        next: () => loadMore && loadMore(),
+        hasMore: hasMoreItems,
+        className: "cui-multiTagPicker-options",
+        loader: /* @__PURE__ */ jsx("div", { className: "cui-multiTagPicker-spinner", children: /* @__PURE__ */ jsx(Spinner, {}) }),
+        children: options.map((option) => /* @__PURE__ */ jsx(
+          Select,
+          {
+            id: option.id,
+            label: option.label,
+            selected: selectedIds.has(option.id),
+            handleTagChange: (changedTo) => {
+              if (changedTo) handleAddItem(option);
+              else handleRemoveItem(option.id);
+            }
+          },
+          option.id
+        ))
+      }
+    ) }))
+  ] });
+};
+export {
+  MultiTagPicker as default
+};
+//# sourceMappingURL=MultiTagPicker.js.map

package/dist/esm/legacy/components/molecules/MultiTagPicker/MultiTagPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"MultiTagPicker.js","sources":["../../../../../../src/legacy/components/molecules/MultiTagPicker/MultiTagPicker.tsx"],"sourcesContent":["import React, { ChangeEvent, useMemo } from 'react'\r\nimport InfiniteScroll from 'react-infinite-scroll-component'\r\nimport {\r\n  faCircleMinus,\r\n  faMagnifyingGlass,\r\n} from '@fortawesome/free-solid-svg-icons'\r\nimport { FontAwesomeIcon } from '@fortawesome/react-fontawesome'\r\nimport { Color } from '../../../constants/Colors'\r\n\r\nimport MultiTagPickerTag from '../../atoms/MultiTagPickerTag/MultiTagPickerTag'\r\nimport Spinner from '../../layout/Spinner/Spinner'\r\nimport './MultiTagPicker.scss'\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface Option {\r\n  id: string\r\n  label: string\r\n}\r\n\r\nexport interface MultiTagPickerProps {\r\n  placeholder?: string\r\n  noOptionsLabel?: string\r\n  searchInput: string\r\n  editable: boolean\r\n  loading: boolean\r\n  optionsSelected: Option[]\r\n  options: Option[]\r\n  hasMoreItems: boolean\r\n\r\n  handleInputKeyDown?: () => void\r\n  handleInputChange?: (input: string) => void\r\n  handleRemoveItem: (itemId: string) => void\r\n  handleAddItem: (item: Option) => void\r\n  loadMore?: () => void\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nconst MultiTagPicker: React.FC<MultiTagPickerProps> = (\r\n  props: MultiTagPickerProps\r\n) => {\r\n  const {\r\n    placeholder,\r\n    noOptionsLabel,\r\n    searchInput,\r\n    editable,\r\n    loading,\r\n    optionsSelected,\r\n    options,\r\n    hasMoreItems,\r\n    handleRemoveItem,\r\n    handleInputChange,\r\n    handleInputKeyDown,\r\n    handleAddItem,\r\n    loadMore,\r\n  } = props\r\n\r\n  function handleInputKeyDownInner(event: React.FormEvent<HTMLFormElement>) {\r\n    event.preventDefault()\r\n    editable && handleInputKeyDown && handleInputKeyDown()\r\n  }\r\n\r\n  function handleInputChangeInner(event: ChangeEvent<HTMLInputElement>) {\r\n    editable && handleInputChange && handleInputChange(event.target.value)\r\n  }\r\n\r\n  const selectedIds = useMemo(\r\n    () => new Set(optionsSelected.map((o) => o.id)),\r\n    [optionsSelected]\r\n  )\r\n\r\n  const showSelected = optionsSelected.map((option: Option) => (\r\n    <li key={option.id}>\r\n      <p>{option.label}</p>\r\n      <FontAwesomeIcon\r\n        size=\"sm\"\r\n        icon={faCircleMinus}\r\n        className={`${editable && 'pointer'}`}\r\n        color=\"#F8F8F8\"\r\n        onClick={() => editable && handleRemoveItem(option.id)}\r\n      />\r\n    </li>\r\n  ))\r\n\r\n  return (\r\n    <div className=\"cui-multiTagPicker\">\r\n      <form\r\n        onSubmit={handleInputKeyDownInner}\r\n        className=\"cui-multiTagPicker-container\"\r\n      >\r\n        <FontAwesomeIcon\r\n          size=\"1x\"\r\n          icon={faMagnifyingGlass}\r\n          className=\"cui-multiTagPicker-magnifier\"\r\n          color={Color.MEDIUM_GRAY_01}\r\n        />\r\n        <div className=\"cui-multiTagPicker-search\">\r\n          {showSelected}{' '}\r\n          {/* Not using ul around the li to ensure the input is added nicely to the grid*/}\r\n          <input\r\n            className=\"cui-multiTagPicker-input\"\r\n            type=\"text\"\r\n            value={searchInput}\r\n            onChange={handleInputChangeInner}\r\n            placeholder={editable ? placeholder : ''}\r\n            disabled={!editable || loading}\r\n          />\r\n        </div>\r\n      </form>\r\n      {options.length === 0 && !loading && (\r\n        <p className=\"cui-multiTagPicker-no-options\">{noOptionsLabel}</p>\r\n      )}\r\n      {editable &&\r\n        (loading ? (\r\n          <div className=\"cui-multiTagPicker-spinner\">\r\n            <Spinner />\r\n          </div>\r\n        ) : (\r\n          <div className=\"cui-multiTagPicker-options-container\">\r\n            <InfiniteScroll\r\n              dataLength={options.length}\r\n              next={() => loadMore && loadMore()}\r\n              hasMore={hasMoreItems}\r\n              className=\"cui-multiTagPicker-options\"\r\n              loader={\r\n                <div className=\"cui-multiTagPicker-spinner\">\r\n                  <Spinner />\r\n                </div>\r\n              }\r\n            >\r\n              {options.map((option: Option) => (\r\n                <MultiTagPickerTag\r\n                  key={option.id}\r\n                  id={option.id}\r\n                  label={option.label}\r\n                  selected={selectedIds.has(option.id)}\r\n                  handleTagChange={(changedTo) => {\r\n                    if (changedTo) handleAddItem(option)\r\n                    else handleRemoveItem(option.id)\r\n                  }}\r\n                />\r\n              ))}\r\n            </InfiniteScroll>\r\n          </div>\r\n        ))}\r\n    </div>\r\n  )\r\n}\r\n\r\nexport default MultiTagPicker\r\n"],"names":["MultiTagPickerTag"],"mappings":";;;;;;;;;AAqCA,MAAM,iBAAgD,CACpD,UACG;AACH,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE;AAEJ,WAAS,wBAAwB,OAAyC;AACxE,UAAM,eAAA;AACN,gBAAY,sBAAsB,mBAAA;AAAA,EACpC;AAEA,WAAS,uBAAuB,OAAsC;AACpE,gBAAY,qBAAqB,kBAAkB,MAAM,OAAO,KAAK;AAAA,EACvE;AAEA,QAAM,cAAc;AAAA,IAClB,MAAM,IAAI,IAAI,gBAAgB,IAAI,CAAC,MAAM,EAAE,EAAE,CAAC;AAAA,IAC9C,CAAC,eAAe;AAAA,EAAA;AAGlB,QAAM,eAAe,gBAAgB,IAAI,CAAC,gCACvC,MAAA,EACC,UAAA;AAAA,IAAA,oBAAC,KAAA,EAAG,iBAAO,MAAA,CAAM;AAAA,IACjB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,MAAK;AAAA,QACL,MAAM;AAAA,QACN,WAAW,GAAG,YAAY,SAAS;AAAA,QACnC,OAAM;AAAA,QACN,SAAS,MAAM,YAAY,iBAAiB,OAAO,EAAE;AAAA,MAAA;AAAA,IAAA;AAAA,EACvD,KARO,OAAO,EAShB,CACD;AAED,SACE,qBAAC,OAAA,EAAI,WAAU,sBACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,UAAU;AAAA,QACV,WAAU;AAAA,QAEV,UAAA;AAAA,UAAA;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,MAAK;AAAA,cACL,MAAM;AAAA,cACN,WAAU;AAAA,cACV,OAAO,MAAM;AAAA,YAAA;AAAA,UAAA;AAAA,UAEf,qBAAC,OAAA,EAAI,WAAU,6BACZ,UAAA;AAAA,YAAA;AAAA,YAAc;AAAA,YAEf;AAAA,cAAC;AAAA,cAAA;AAAA,gBACC,WAAU;AAAA,gBACV,MAAK;AAAA,gBACL,OAAO;AAAA,gBACP,UAAU;AAAA,gBACV,aAAa,WAAW,cAAc;AAAA,gBACtC,UAAU,CAAC,YAAY;AAAA,cAAA;AAAA,YAAA;AAAA,UACzB,EAAA,CACF;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,IAED,QAAQ,WAAW,KAAK,CAAC,WACxB,oBAAC,KAAA,EAAE,WAAU,iCAAiC,UAAA,eAAA,CAAe;AAAA,IAE9D,aACE,UACC,oBAAC,OAAA,EAAI,WAAU,8BACb,UAAA,oBAAC,SAAA,EAAQ,EAAA,CACX,IAEA,oBAAC,OAAA,EAAI,WAAU,wCACb,UAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,YAAY,QAAQ;AAAA,QACpB,MAAM,MAAM,YAAY,SAAA;AAAA,QACxB,SAAS;AAAA,QACT,WAAU;AAAA,QACV,QACE,oBAAC,OAAA,EAAI,WAAU,8BACb,UAAA,oBAAC,WAAQ,GACX;AAAA,QAGD,UAAA,QAAQ,IAAI,CAAC,WACZ;AAAA,UAACA;AAAAA,UAAA;AAAA,YAEC,IAAI,OAAO;AAAA,YACX,OAAO,OAAO;AAAA,YACd,UAAU,YAAY,IAAI,OAAO,EAAE;AAAA,YACnC,iBAAiB,CAAC,cAAc;AAC9B,kBAAI,yBAAyB,MAAM;AAAA,kBAC9B,kBAAiB,OAAO,EAAE;AAAA,YACjC;AAAA,UAAA;AAAA,UAPK,OAAO;AAAA,QAAA,CASf;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAAA,GAEN;AAEJ;"}

package/dist/esm/legacy/components/molecules/PhotoAvatar/PhotoAvatar.js

@@ -0,0 +1,114 @@
+import { jsx } from "react/jsx-runtime";
+import { useRef, useState, useEffect } from "react";
+import * as MsalReact from "@azure/msal-react";
+import UserAvatar from "../UserAvatar/UserAvatar.js";
+const GRAPH = "https://graph.microsoft.com/v1.0";
+const SCOPE_PROPRIO = ["User.Read"];
+const SCOPE_OUTROS = ["User.ReadBasic.All"];
+async function getGraphToken(instance, account, scopes) {
+  try {
+    const res = await instance.acquireTokenSilent({ scopes, account });
+    return res.accessToken;
+  } catch (err) {
+    if (err?.name === "InteractionRequiredAuthError") {
+      const res = await instance.acquireTokenPopup({ scopes });
+      return res.accessToken;
+    }
+    throw err;
+  }
+}
+async function fetchPhotoBlob(token, base) {
+  for (const seg of ["/photos/240x240/$value", "/photo/$value"]) {
+    const resp = await fetch(`${GRAPH}${base}${seg}`, { headers: { Authorization: `Bearer ${token}` } });
+    if (resp.ok) return resp.blob();
+    if (resp.status === 404) continue;
+    return null;
+  }
+  return null;
+}
+async function fetchProfile(token, base) {
+  const resp = await fetch(`${GRAPH}${base}?$select=displayName,mail,userPrincipalName,jobTitle,department,companyName`, {
+    headers: { Authorization: `Bearer ${token}` }
+  });
+  if (!resp.ok) return null;
+  const d = await resp.json();
+  return {
+    name: d.displayName,
+    email: d.mail ?? d.userPrincipalName,
+    company: d.companyName,
+    department: d.department,
+    jobTitle: d.jobTitle
+  };
+}
+const photoCache = /* @__PURE__ */ new Map();
+const profileCache = /* @__PURE__ */ new Map();
+function PhotoAvatar({ oid, name, email, className = "", showCard = false, getToken }) {
+  const { instance, accounts } = MsalReact.useMsal();
+  const account = instance.getActiveAccount() ?? accounts[0];
+  const accountKey = account?.homeAccountId ?? null;
+  const getTokenRef = useRef(getToken);
+  getTokenRef.current = getToken;
+  const accountRef = useRef(account);
+  accountRef.current = account;
+  const temGetToken = Boolean(getToken);
+  const cacheKey = temGetToken ? "self" : oid ?? accountKey ?? "me";
+  const [url, setUrl] = useState(() => photoCache.get(cacheKey) ?? null);
+  const [profile, setProfile] = useState(() => profileCache.get(cacheKey) ?? null);
+  useEffect(() => {
+    if (!temGetToken && !accountKey) return void 0;
+    let cancelled = false;
+    const cachedPhoto = photoCache.get(cacheKey);
+    const cachedProfile = profileCache.get(cacheKey);
+    if (cachedPhoto !== void 0 && (!showCard || cachedProfile !== void 0)) {
+      setUrl(cachedPhoto);
+      if (cachedProfile) setProfile(cachedProfile);
+      return void 0;
+    }
+    const resolve = async () => {
+      const fornecer = getTokenRef.current;
+      if (fornecer) return { token: await fornecer(), base: "/me" };
+      const conta = accountRef.current;
+      const selfOid = conta.idTokenClaims?.oid;
+      const base = !oid || selfOid && selfOid === oid ? "/me" : `/users/${oid}`;
+      const scopes = base === "/me" ? SCOPE_PROPRIO : SCOPE_OUTROS;
+      const token = await getGraphToken(instance, conta, scopes);
+      return { token, base };
+    };
+    resolve().then(async ({ token, base }) => {
+      const blob = await fetchPhotoBlob(token, base);
+      const objectUrl = blob ? URL.createObjectURL(blob) : null;
+      photoCache.set(cacheKey, objectUrl);
+      if (!cancelled) setUrl(objectUrl);
+      if (showCard) {
+        const prof = await fetchProfile(token, base);
+        profileCache.set(cacheKey, prof);
+        if (!cancelled && prof) setProfile(prof);
+      }
+    }).catch(() => {
+      photoCache.set(cacheKey, null);
+      if (showCard) profileCache.set(cacheKey, null);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [cacheKey, accountKey, temGetToken, showCard, oid, instance]);
+  return /* @__PURE__ */ jsx(
+    UserAvatar,
+    {
+      name: name ?? profile?.name,
+      email: email ?? profile?.email,
+      company: profile?.company,
+      department: profile?.department,
+      jobTitle: profile?.jobTitle,
+      photo: url,
+      className: `rounded-full ${className}`,
+      showCard
+    }
+  );
+}
+export {
+  SCOPE_OUTROS,
+  SCOPE_PROPRIO,
+  PhotoAvatar as default
+};
+//# sourceMappingURL=PhotoAvatar.js.map

package/dist/esm/legacy/components/molecules/PhotoAvatar/PhotoAvatar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhotoAvatar.js","sources":["../../../../../../src/legacy/components/molecules/PhotoAvatar/PhotoAvatar.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react'\r\n// O MSAL é peer opcional: numa app sem ele, o bundler troca-o por um módulo vazio, e\r\n// imports com nome (useMsal, InteractionRequiredAuthError) partiam o build dessa app.\r\nimport * as MsalReact from '@azure/msal-react'\r\nimport type { IPublicClientApplication, AccountInfo } from '@azure/msal-browser'\r\nimport UserAvatar from '../UserAvatar/UserAvatar'\r\n\r\nconst GRAPH = 'https://graph.microsoft.com/v1.0'\r\n\r\n// `User.Read` so da acesso ao proprio utilizador. Para a foto ou o perfil de\r\n// OUTRA pessoa (`/users/<oid>`) e preciso `User.ReadBasic.All`, que a App\r\n// Registration da app consumidora tem de ter com consentimento de\r\n// administrador. Pedir `User.Read` para terceiros arrisca um 403, com o avatar\r\n// a cair nas iniciais sem nada que explique porque.\r\nexport const SCOPE_PROPRIO = ['User.Read']\r\nexport const SCOPE_OUTROS = ['User.ReadBasic.All']\r\n\r\nasync function getGraphToken(\r\n  instance: IPublicClientApplication,\r\n  account: AccountInfo,\r\n  scopes: string[]\r\n): Promise<string> {\r\n  try {\r\n    const res = await instance.acquireTokenSilent({ scopes, account })\r\n    return res.accessToken\r\n  } catch (err) {\r\n    if ((err as { name?: string } | null)?.name === 'InteractionRequiredAuthError') {\r\n      const res = await instance.acquireTokenPopup({ scopes })\r\n      return res.accessToken\r\n    }\r\n    throw err\r\n  }\r\n}\r\n\r\n/** Busca a foto (240×240, fallback /photo). null se 404/erro. */\r\nasync function fetchPhotoBlob(token: string, base: string): Promise<Blob | null> {\r\n  for (const seg of ['/photos/240x240/$value', '/photo/$value']) {\r\n    const resp = await fetch(`${GRAPH}${base}${seg}`, { headers: { Authorization: `Bearer ${token}` } })\r\n    if (resp.ok) return resp.blob()\r\n    if (resp.status === 404) continue\r\n    return null\r\n  }\r\n  return null\r\n}\r\n\r\nexport interface GraphProfile {\r\n  name?: string | null\r\n  email?: string | null\r\n  company?: string | null\r\n  department?: string | null\r\n  jobTitle?: string | null\r\n}\r\n\r\n/** Perfil p/ o cartão de hover (mesmo token User.Read). null se erro. */\r\nasync function fetchProfile(token: string, base: string): Promise<GraphProfile | null> {\r\n  const resp = await fetch(`${GRAPH}${base}?$select=displayName,mail,userPrincipalName,jobTitle,department,companyName`, {\r\n    headers: { Authorization: `Bearer ${token}` },\r\n  })\r\n  if (!resp.ok) return null\r\n  const d = (await resp.json()) as Record<string, string | null>\r\n  return {\r\n    name: d.displayName,\r\n    email: d.mail ?? d.userPrincipalName,\r\n    company: d.companyName,\r\n    department: d.department,\r\n    jobTitle: d.jobTitle,\r\n  }\r\n}\r\n\r\ninterface Props {\r\n  oid?: string | null\r\n  name?: string | null\r\n  email?: string | null\r\n  className?: string\r\n  /** Passa para UserAvatar: cartão de detalhes em hover. Default: off. */\r\n  showCard?: boolean\r\n  /**\r\n   * Fornece um token do Graph (scope `User.Read`) usando o MSAL DA APP.\r\n   * PREFERIR isto: evita o `useMsal` interno, que pode ler um `MsalContext`\r\n   * diferente quando o bundler duplica o `@azure/msal-react` (→ account null →\r\n   * sem foto). Com `getToken`, a foto do próprio (/me) resolve sempre.\r\n   * Ex.: `getToken={() => msalInstance.acquireTokenSilent({scopes:['User.Read'],account}).then(r=>r.accessToken)}`\r\n   */\r\n  getToken?: () => Promise<string>\r\n}\r\n\r\n// Cache em memória (evita refetch entre montagens).\r\n//\r\n// Guarda o OBJECT URL já criado, não o Blob. Com o Blob, cada passagem pelo\r\n// efeito criava um URL novo, o que mudava o estado e disparava outro render —\r\n// e outra passagem. Era um ciclo infinito, visível como a foto a alternar com\r\n// as iniciais.\r\n//\r\n// O URL nunca é revogado: é uma imagem para toda a sessão, partilhada por\r\n// todas as montagens com a mesma chave. Revogá-la ao desmontar partia as que\r\n// ficavam a usá-la.\r\nconst photoCache = new Map<string, string | null>()\r\nconst profileCache = new Map<string, GraphProfile | null>()\r\n\r\n/**\r\n * Avatar com a foto real do MS Graph. Fallback: iniciais (UserAvatar).\r\n * Token: via `getToken` (recomendado) ou, em alternativa, via `useMsal` interno.\r\n * Peers: @azure/msal-react, @azure/msal-browser.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\nexport default function PhotoAvatar({ oid, name, email, className = '', showCard = false, getToken }: Props) {\r\n  const { instance, accounts } = MsalReact.useMsal()\r\n  const account = instance.getActiveAccount() ?? accounts[0]\r\n\r\n  // O MSAL reconstrói o objeto da conta a cada chamada, por isso ele nunca\r\n  // serve como dependência do efeito: fazia-o correr em todos os renders. A\r\n  // identidade estável é o homeAccountId.\r\n  const accountKey = account?.homeAccountId ?? null\r\n\r\n  // O getToken é quase sempre uma arrow inline na app, logo também muda a cada\r\n  // render. Fica numa ref, fora das dependências; o que importa é se existe.\r\n  const getTokenRef = useRef(getToken)\r\n  getTokenRef.current = getToken\r\n  const accountRef = useRef(account)\r\n  accountRef.current = account\r\n  const temGetToken = Boolean(getToken)\r\n\r\n  const cacheKey = temGetToken ? 'self' : oid ?? accountKey ?? 'me'\r\n\r\n  // Arranca já com o que estiver em cache, para não piscar as iniciais ao\r\n  // mudar de página.\r\n  const [url, setUrl] = useState<string | null>(() => photoCache.get(cacheKey) ?? null)\r\n  const [profile, setProfile] = useState<GraphProfile | null>(() => profileCache.get(cacheKey) ?? null)\r\n\r\n  useEffect(() => {\r\n    if (!temGetToken && !accountKey) return undefined\r\n    let cancelled = false\r\n\r\n    const cachedPhoto = photoCache.get(cacheKey)\r\n    const cachedProfile = profileCache.get(cacheKey)\r\n    if (cachedPhoto !== undefined && (!showCard || cachedProfile !== undefined)) {\r\n      setUrl(cachedPhoto)\r\n      if (cachedProfile) setProfile(cachedProfile)\r\n      return undefined\r\n    }\r\n\r\n    // Token + base do Graph resolvidos 1x, reutilizados p/ foto e perfil.\r\n    const resolve = async (): Promise<{ token: string; base: string }> => {\r\n      const fornecer = getTokenRef.current\r\n      if (fornecer) return { token: await fornecer(), base: '/me' }\r\n      const conta = accountRef.current!\r\n      const selfOid = (conta.idTokenClaims as { oid?: string } | undefined)?.oid\r\n      // A base decide-se ANTES do token, porque e ela que determina o scope.\r\n      const base = !oid || (selfOid && selfOid === oid) ? '/me' : `/users/${oid}`\r\n      const scopes = base === '/me' ? SCOPE_PROPRIO : SCOPE_OUTROS\r\n      const token = await getGraphToken(instance, conta, scopes)\r\n      return { token, base }\r\n    }\r\n\r\n    resolve()\r\n      .then(async ({ token, base }) => {\r\n        const blob = await fetchPhotoBlob(token, base)\r\n        const objectUrl = blob ? URL.createObjectURL(blob) : null\r\n        photoCache.set(cacheKey, objectUrl)\r\n        if (!cancelled) setUrl(objectUrl)\r\n        // Perfil só quando há cartão de hover (evita chamada Graph extra).\r\n        if (showCard) {\r\n          const prof = await fetchProfile(token, base)\r\n          profileCache.set(cacheKey, prof)\r\n          if (!cancelled && prof) setProfile(prof)\r\n        }\r\n      })\r\n      .catch(() => {\r\n        photoCache.set(cacheKey, null)\r\n        if (showCard) profileCache.set(cacheKey, null)\r\n      })\r\n\r\n    return () => {\r\n      cancelled = true\r\n    }\r\n  }, [cacheKey, accountKey, temGetToken, showCard, oid, instance])\r\n\r\n  // Redondo por default (a app pode sobrepor a forma no className, ex: rounded-none).\r\n  return (\r\n    <UserAvatar\r\n      name={name ?? profile?.name}\r\n      email={email ?? profile?.email}\r\n      company={profile?.company}\r\n      department={profile?.department}\r\n      jobTitle={profile?.jobTitle}\r\n      photo={url}\r\n      className={`rounded-full ${className}`}\r\n      showCard={showCard}\r\n    />\r\n  )\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/esm/legacy/components/molecules/SeletorPesquisa/SeletorPesquisa.js

@@ -0,0 +1,116 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useMemo } from "react";
+function SeletorPesquisa({
+  opcoes,
+  valor,
+  onChange,
+  onTextoLivre,
+  aCarregar = false,
+  erro = false,
+  maximo = 20,
+  labels,
+  icone
+}) {
+  const [pesquisa, setPesquisa] = useState("");
+  const [aberto, setAberto] = useState(false);
+  const caixa = useRef(null);
+  useEffect(() => {
+    if (!aberto) return;
+    const aoClicarFora = (e) => {
+      if (!caixa.current?.contains(e.target)) setAberto(false);
+    };
+    const aoEscape = (e) => {
+      if (e.key === "Escape") setAberto(false);
+    };
+    document.addEventListener("mousedown", aoClicarFora);
+    document.addEventListener("keydown", aoEscape);
+    return () => {
+      document.removeEventListener("mousedown", aoClicarFora);
+      document.removeEventListener("keydown", aoEscape);
+    };
+  }, [aberto]);
+  const escolhida = useMemo(
+    () => opcoes.find((o) => o.valor === valor) ?? null,
+    [opcoes, valor]
+  );
+  const resultados = useMemo(() => {
+    const q = pesquisa.trim().toLowerCase();
+    if (!q) return opcoes.slice(0, maximo);
+    return opcoes.filter((o) => `${o.titulo} ${o.contexto ?? ""}`.toLowerCase().includes(q)).slice(0, maximo);
+  }, [opcoes, pesquisa, maximo]);
+  if (valor && escolhida) {
+    return /* @__PURE__ */ jsxs("div", { className: "cui-seletor-pesquisa flex items-center justify-between gap-3 border border-slate-200 bg-white px-3 py-2 rounded-lg dark:bg-slate-800 dark:border-slate-700", children: [
+      /* @__PURE__ */ jsxs("span", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("span", { className: "block truncate font-semibold text-proef-navy dark:text-slate-100", children: escolhida.titulo }),
+        escolhida.contexto && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-slate-500 dark:text-slate-400", children: escolhida.contexto })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => onChange(null),
+          "aria-label": labels.limpar,
+          className: "shrink-0 px-1 text-slate-400 hover:text-proef-navy dark:hover:text-white",
+          children: "×"
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "cui-seletor-pesquisa relative", ref: caixa, children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 border border-slate-200 bg-white px-3 py-2 rounded-lg dark:bg-slate-800 dark:border-slate-700", children: [
+      icone,
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          value: pesquisa,
+          onChange: (e) => {
+            setPesquisa(e.target.value);
+            setAberto(true);
+          },
+          onFocus: () => setAberto(true),
+          placeholder: labels.placeholder,
+          className: "w-full bg-transparent text-sm outline-none"
+        }
+      )
+    ] }),
+    aberto && /* @__PURE__ */ jsxs("div", { className: "absolute z-20 mt-1 max-h-72 w-full overflow-auto border border-slate-200 bg-white shadow-xl rounded-xl dark:bg-slate-900 dark:border-slate-700", children: [
+      aCarregar && /* @__PURE__ */ jsx("p", { className: "px-3 py-2 text-sm text-slate-400", children: labels.aCarregar }),
+      erro && /* @__PURE__ */ jsx("p", { className: "px-3 py-2 text-sm text-red-600", children: labels.erro }),
+      resultados.map((opcao) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            onChange(opcao.valor);
+            setPesquisa("");
+            setAberto(false);
+          },
+          className: "block w-full px-3 py-2 text-left hover:bg-slate-50 dark:hover:bg-slate-800",
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "block truncate text-sm font-medium text-proef-navy dark:text-slate-100", children: opcao.titulo }),
+            opcao.contexto && /* @__PURE__ */ jsx("span", { className: "block truncate text-xs text-slate-500 dark:text-slate-400", children: opcao.contexto })
+          ]
+        },
+        opcao.valor
+      )),
+      !aCarregar && !erro && resultados.length === 0 && /* @__PURE__ */ jsx("p", { className: "px-3 py-2 text-sm text-slate-400", children: labels.semResultados }),
+      onTextoLivre && pesquisa.trim().length > 1 && /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          onClick: () => {
+            onTextoLivre(pesquisa.trim());
+            setPesquisa("");
+            setAberto(false);
+          },
+          className: "block w-full border-t border-slate-100 px-3 py-2 text-left text-sm text-slate-600 hover:bg-slate-50 dark:border-slate-800 dark:text-slate-300 dark:hover:bg-slate-800",
+          children: labels.textoLivre ? labels.textoLivre(pesquisa.trim()) : pesquisa.trim()
+        }
+      )
+    ] })
+  ] });
+}
+export {
+  SeletorPesquisa as default
+};
+//# sourceMappingURL=SeletorPesquisa.js.map

package/dist/esm/legacy/components/molecules/SeletorPesquisa/SeletorPesquisa.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SeletorPesquisa.js","sources":["../../../../../../src/legacy/components/molecules/SeletorPesquisa/SeletorPesquisa.tsx"],"sourcesContent":["import React, { useEffect, useMemo, useRef, useState, type ReactNode } from 'react'\r\n\r\n/**\r\n * Seletor com pesquisa, para listas grandes vindas de outro sistema.\r\n *\r\n * Difere do `SearchSelect` em três coisas que o tornavam inutilizável nesses\r\n * casos: cada opção pode ter uma **segunda linha** (contexto — projeto, cliente,\r\n * plano), a pesquisa corre sobre esse contexto e não só sobre o título, e pode\r\n * aceitar **texto livre** quando o que a pessoa quer não está na lista.\r\n *\r\n * Fecha ao clicar fora e com Escape. Parece detalhe, mas dentro de um modal uma\r\n * lista que não fecha tapa o resto do formulário.\r\n * @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy.\r\n */\r\n\r\nexport interface OpcaoPesquisa {\r\n  valor: string\r\n  titulo: string\r\n  /** Segunda linha: contexto que distingue homónimos. Também é pesquisável. */\r\n  contexto?: string\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport interface SeletorPesquisaProps {\r\n  opcoes: OpcaoPesquisa[]\r\n  /** Opção escolhida (`valor`), ou null. */\r\n  valor: string | null\r\n  onChange: (valor: string | null) => void\r\n  /**\r\n   * Permite escolher o que foi escrito, mesmo sem estar na lista. Recebe o\r\n   * texto; quem usa decide o que fazer com ele.\r\n   */\r\n  onTextoLivre?: (texto: string) => void\r\n  aCarregar?: boolean\r\n  erro?: boolean\r\n  /** Máximo de opções mostradas — listas longas tornam o painel inútil. */\r\n  maximo?: number\r\n  labels: {\r\n    placeholder: string\r\n    semResultados: string\r\n    aCarregar: string\r\n    erro: string\r\n    limpar: string\r\n    /** Recebe o texto escrito, ex: `Registar sem tarefa: \"{texto}\"`. */\r\n    textoLivre?: (texto: string) => string\r\n  }\r\n  /** Ícone opcional à esquerda do campo. */\r\n  icone?: ReactNode\r\n}\r\n\r\n/** @deprecated Legacy — não usar em código novo. Ver Storybook › Legacy. */\r\nexport default function SeletorPesquisa({\r\n  opcoes,\r\n  valor,\r\n  onChange,\r\n  onTextoLivre,\r\n  aCarregar = false,\r\n  erro = false,\r\n  maximo = 20,\r\n  labels,\r\n  icone,\r\n}: SeletorPesquisaProps) {\r\n  const [pesquisa, setPesquisa] = useState('')\r\n  const [aberto, setAberto] = useState(false)\r\n  const caixa = useRef<HTMLDivElement>(null)\r\n\r\n  useEffect(() => {\r\n    if (!aberto) return\r\n    const aoClicarFora = (e: MouseEvent) => {\r\n      if (!caixa.current?.contains(e.target as Node)) setAberto(false)\r\n    }\r\n    const aoEscape = (e: KeyboardEvent) => {\r\n      if (e.key === 'Escape') setAberto(false)\r\n    }\r\n    // `mousedown` e não `click`: fecha antes de o alvo reagir.\r\n    document.addEventListener('mousedown', aoClicarFora)\r\n    document.addEventListener('keydown', aoEscape)\r\n    return () => {\r\n      document.removeEventListener('mousedown', aoClicarFora)\r\n      document.removeEventListener('keydown', aoEscape)\r\n    }\r\n  }, [aberto])\r\n\r\n  const escolhida = useMemo(\r\n    () => opcoes.find((o) => o.valor === valor) ?? null,\r\n    [opcoes, valor]\r\n  )\r\n\r\n  const resultados = useMemo(() => {\r\n    const q = pesquisa.trim().toLowerCase()\r\n    if (!q) return opcoes.slice(0, maximo)\r\n    return opcoes\r\n      .filter((o) => `${o.titulo} ${o.contexto ?? ''}`.toLowerCase().includes(q))\r\n      .slice(0, maximo)\r\n  }, [opcoes, pesquisa, maximo])\r\n\r\n  if (valor && escolhida) {\r\n    return (\r\n      <div className=\"cui-seletor-pesquisa flex items-center justify-between gap-3 border border-slate-200 bg-white px-3 py-2 rounded-lg dark:bg-slate-800 dark:border-slate-700\">\r\n        <span className=\"min-w-0\">\r\n          <span className=\"block truncate font-semibold text-proef-navy dark:text-slate-100\">{escolhida.titulo}</span>\r\n          {escolhida.contexto && (\r\n            <span className=\"block truncate text-xs text-slate-500 dark:text-slate-400\">{escolhida.contexto}</span>\r\n          )}\r\n        </span>\r\n        <button\r\n          type=\"button\"\r\n          onClick={() => onChange(null)}\r\n          aria-label={labels.limpar}\r\n          className=\"shrink-0 px-1 text-slate-400 hover:text-proef-navy dark:hover:text-white\"\r\n        >\r\n          ×\r\n        </button>\r\n      </div>\r\n    )\r\n  }\r\n\r\n  return (\r\n    <div className=\"cui-seletor-pesquisa relative\" ref={caixa}>\r\n      <div className=\"flex items-center gap-2 border border-slate-200 bg-white px-3 py-2 rounded-lg dark:bg-slate-800 dark:border-slate-700\">\r\n        {icone}\r\n        <input\r\n          value={pesquisa}\r\n          onChange={(e) => {\r\n            setPesquisa(e.target.value)\r\n            setAberto(true)\r\n          }}\r\n          onFocus={() => setAberto(true)}\r\n          placeholder={labels.placeholder}\r\n          className=\"w-full bg-transparent text-sm outline-none\"\r\n        />\r\n      </div>\r\n\r\n      {aberto && (\r\n        <div className=\"absolute z-20 mt-1 max-h-72 w-full overflow-auto border border-slate-200 bg-white shadow-xl rounded-xl dark:bg-slate-900 dark:border-slate-700\">\r\n          {aCarregar && <p className=\"px-3 py-2 text-sm text-slate-400\">{labels.aCarregar}</p>}\r\n          {erro && <p className=\"px-3 py-2 text-sm text-red-600\">{labels.erro}</p>}\r\n\r\n          {resultados.map((opcao) => (\r\n            <button\r\n              key={opcao.valor}\r\n              type=\"button\"\r\n              onClick={() => {\r\n                onChange(opcao.valor)\r\n                setPesquisa('')\r\n                setAberto(false)\r\n              }}\r\n              className=\"block w-full px-3 py-2 text-left hover:bg-slate-50 dark:hover:bg-slate-800\"\r\n            >\r\n              <span className=\"block truncate text-sm font-medium text-proef-navy dark:text-slate-100\">\r\n                {opcao.titulo}\r\n              </span>\r\n              {opcao.contexto && (\r\n                <span className=\"block truncate text-xs text-slate-500 dark:text-slate-400\">{opcao.contexto}</span>\r\n              )}\r\n            </button>\r\n          ))}\r\n\r\n          {!aCarregar && !erro && resultados.length === 0 && (\r\n            <p className=\"px-3 py-2 text-sm text-slate-400\">{labels.semResultados}</p>\r\n          )}\r\n\r\n          {onTextoLivre && pesquisa.trim().length > 1 && (\r\n            <button\r\n              type=\"button\"\r\n              onClick={() => {\r\n                onTextoLivre(pesquisa.trim())\r\n                setPesquisa('')\r\n                setAberto(false)\r\n              }}\r\n              className=\"block w-full border-t border-slate-100 px-3 py-2 text-left text-sm text-slate-600 hover:bg-slate-50 dark:border-slate-800 dark:text-slate-300 dark:hover:bg-slate-800\"\r\n            >\r\n              {labels.textoLivre ? labels.textoLivre(pesquisa.trim()) : pesquisa.trim()}\r\n            </button>\r\n          )}\r\n        </div>\r\n      )}\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":"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"}