@coko/client/dist/ui/common/Select.js

Client side common code for coko apps

import { debounce as e } from "../../toolkit/funcs.js";
import { th as t } from "../../toolkit/themeHelper.js";
import "../../toolkit/index.js";
import n from "./Empty.js";
import { useEffect as r, useRef as i, useState as a } from "react";
import o, { css as s } from "styled-components";
import { jsx as c } from "react/jsx-runtime";
import { Select as l } from "antd";
//#region src/ui/common/Select.tsx
var u = o.span``, d = o(l)`
  width: 100%;

  &.ant-select-focused {
    outline: ${(e) => `${e.theme.lineWidth * 4}`}px solid
      ${t("colorPrimaryBorder")};
    outline-offset: 1px;
  }

  .ant-select-arrow {
    color: ${t("colorBorder")};
  }

  &.ant-select.ant-select-disabled > .ant-select-selector,
  &.ant-select-multiple.ant-select-disabled
    > .ant-select-selector
    .ant-select-selection-item-content {
    background-color: ${t("colorBackgroundHue")};
    color: ${(e) => `${e.theme.colorText}cc`};
  }
`, f = o.div`
  .ant-select-item-option-active {
    background-color: ${t("colorBackgroundHue")};
    outline: 2px solid ${t("colorPrimary")};
    outline-offset: -2px;

    &.ant-select-item-option-selected[role='option'][aria-selected='true'] {
      text-decoration: underline;
    }
  }

  .ant-select-item-option-selected[role='option'][aria-selected='true'] {
    background-color: ${t("colorPrimary")};
    color: ${t("colorTextReverse")};

    .ant-select-item-option-state {
      color: ${t("colorTextReverse")};
    }
  }

  .ant-select-item-option-content {
    /* outline: 2px solid ${t("colorPrimary")}; */
    ${(e) => e.$wrapOptionText && s`
        white-space: normal;
      `}
  }
`, p = /* @__PURE__ */ c("span", {
	role: "status",
	children: /* @__PURE__ */ c(n, {
		description: "No Data",
		image: n.PRESENTED_IMAGE_SIMPLE
	})
}), m = (t) => {
	let { async: n = !1, className: o, debounceTimeout: s = 500, filterOption: l, notFoundContent: m = p, onSearch: h, showSearch: g, id: _, isOpen: v = !1, virtual: y = !1, wrapOptionText: b = !1, ...x } = t, S = i(null), C = i({}), [w, T] = a(v), E = () => {
		let e = S.current?.querySelector("input[role=\"combobox\"]");
		e && (C.current = {
			"aria-controls": e.getAttribute("aria-controls"),
			"aria-owns": e.getAttribute("aria-owns"),
			"aria-activedescendant": e.getAttribute("aria-activedescendant")
		}, e.removeAttribute("aria-controls"), e.removeAttribute("aria-owns"), e.removeAttribute("aria-activedescendant"));
	};
	r(() => {
		(S.current?.querySelector(".ant-select"))?.removeAttribute("aria-required"), setTimeout(() => {
			E();
		}, 500);
	}, []), r(() => {
		let e = C.current;
		if (w && e) {
			let t = S.current?.querySelector("input[role=\"combobox\"]");
			if (!t) return;
			Object.keys(e).forEach((n) => {
				let r = e[n];
				r && t.setAttribute(n, r);
			}), C.current = null;
		}
	}, [w]);
	let D = (e) => {
		h?.(e);
	}, O = n ? e(D, s) : D;
	return /* @__PURE__ */ c(u, {
		className: o,
		ref: S,
		children: /* @__PURE__ */ c(d, {
			id: _,
			notFoundContent: !m && n ? null : m,
			onOpenChange: (e) => T(e),
			open: w,
			popupRender: (e) => /* @__PURE__ */ c(f, {
				$wrapOptionText: b,
				"data-testid": "select-dropdown",
				children: e
			}),
			showSearch: g || h ? {
				filterOption: n && !l ? !1 : l,
				onSearch: O
			} : !1,
			virtual: y,
			...x
		})
	});
};
//#endregion
export { m as default };