@j2-health/design-system 0.5.0 → 0.5.2

package/dist/src/components/select/Select.js

@@ -1,123 +1,120 @@
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Select as Select$1, Spin } from "antd";
-import { LoadingOutlined } from "@ant-design/icons";
-import { XCircleIcon, MagnifyingGlassIcon, CaretDownIcon } from "@phosphor-icons/react";
-import { useState } from "react";
 import { FormikField } from "../form/FormikField.js";
-const isGroupOption = (opt) => "options" in opt && Array.isArray(opt.options);
-const flattenOptions = (opts) => {
-  if (!opts) return [];
-  return opts.flatMap(
-    (o) => isGroupOption(o) ? flattenOptions(o.options) : [o]
-  );
-};
-const Select = (props) => /* @__PURE__ */ jsx(FormikField, { name: props.name, children: ({ field, form }) => /* @__PURE__ */ jsx(SelectControl, { props, field, form }) });
-const SelectControl = ({
-  props,
-  field,
-  form
-}) => {
-  var _a;
-  const [isFocused, setIsFocused] = useState(false);
-  const [isSearching, setIsSearching] = useState(false);
-  const helpers = form.getFieldHelpers(props.name);
-  const isMultiple = props.mode === "multiple";
-  const isSearchable = props.mode === "tags" || (props.showSearch ?? isMultiple);
-  const hasOptions = (((_a = props.options) == null ? void 0 : _a.length) ?? 0) > 0;
-  const currentValue = Array.isArray(field.value) ? field.value : [];
-  const showSelectAllFooter = isMultiple && !props.loading && !props.disabled && hasOptions && !isSearching;
-  const handleSearch = (value) => {
-    setIsSearching(value.length > 0);
-    const onSearch = typeof props.showSearch === "object" ? props.showSearch.onSearch ?? props.onSearch : props.onSearch;
-    onSearch == null ? void 0 : onSearch(value);
-  };
-  const handleToggleAll = () => {
-    var _a2, _b;
-    if (props.disabled) return;
-    if (currentValue.length === 0) {
-      const flat = flattenOptions(
-        props.options
-      );
-      const allOptions = flat.filter(
-        (opt) => opt.value !== void 0 && opt.value !== null && !opt.disabled
-      );
-      const payload = props.labelInValue ? allOptions.map((opt) => ({ value: opt.value, label: opt.label })) : allOptions.map((opt) => opt.value);
-      void helpers.setValue(payload);
-      (_a2 = props.onChange) == null ? void 0 : _a2.call(props, payload, allOptions);
-    } else {
-      void helpers.setValue([]);
-      (_b = props.onChange) == null ? void 0 : _b.call(props, [], []);
-    }
-  };
-  const dropdownRender = (menu) => {
-    if (props.loading) {
-      return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between px-3 py-1", children: [
-        /* @__PURE__ */ jsx("span", { children: "Loading..." }),
-        /* @__PURE__ */ jsx(Spin, { indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true }), size: "small" })
-      ] });
-    }
-    if (!props.options || props.options && props.options.length === 0) {
-      return /* @__PURE__ */ jsx("div", { className: "px-3 py-1", children: "No options" });
-    }
-    if (!showSelectAllFooter) return menu;
-    const label = currentValue.length === 0 ? "Select all" : "Clear all";
-    return /* @__PURE__ */ jsxs(Fragment, { children: [
-      menu,
-      /* @__PURE__ */ jsx("div", { className: "mt-1 pt-1 border-t border-j2-border-secondary", children: /* @__PURE__ */ jsx(
-        "button",
-        {
-          type: "button",
-          "aria-label": label,
-          title: label,
-          onMouseDown: (e) => e.preventDefault(),
-          onClick: handleToggleAll,
-          className: "w-full text-center font-semibold text-sm py-1.5 rounded cursor-pointer text-j2-primary hover:bg-j2-primary-bg-hover bg-transparent border-0",
-          children: label
-        }
-      ) })
-    ] });
-  };
-  return /* @__PURE__ */ jsx(
-    Select$1,
-    {
-      suffixIcon: props.loading ? /* @__PURE__ */ jsx(
-        Spin,
-        {
-          indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true }),
-          size: "small",
-          "data-testid": "loading-spinner"
-        }
-      ) : isSearchable && isFocused ? /* @__PURE__ */ jsx(MagnifyingGlassIcon, { size: 14, "data-testid": "magnifying-glass" }) : /* @__PURE__ */ jsx(CaretDownIcon, { size: 14, "data-testid": "caret-down" }),
-      ...props,
-      id: props.id ?? props.name,
-      value: field.value === "" || field.value === null ? void 0 : field.value,
-      onChange: (value, option) => {
-        var _a2;
-        void helpers.setValue(value);
-        (_a2 = props.onChange) == null ? void 0 : _a2.call(props, value, option);
-      },
-      popupRender: dropdownRender,
-      removeIcon: /* @__PURE__ */ jsx(XCircleIcon, { size: 12 }),
-      allowClear: props.allowClear ? { clearIcon: /* @__PURE__ */ jsx(XCircleIcon, { size: 14 }) } : false,
-      showSearch: typeof props.showSearch === "object" ? { ...props.showSearch, onSearch: handleSearch } : props.showSearch,
-      onSearch: isSearchable ? handleSearch : void 0,
-      onFocus: (event) => {
-        var _a2;
-        setIsFocused(true);
-        (_a2 = props.onFocus) == null ? void 0 : _a2.call(props, event);
-      },
-      onBlur: (event) => {
-        var _a2;
-        void helpers.setTouched(true);
-        setIsFocused(false);
-        setIsSearching(false);
-        (_a2 = props.onBlur) == null ? void 0 : _a2.call(props, event);
-      },
-      size: props.size || "large"
-    }
-  );
+/* empty css           */
+import { useState } from "react";
+import { Select, Spin } from "antd";
+import { CaretDownIcon, MagnifyingGlassIcon, XCircleIcon } from "@phosphor-icons/react";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { LoadingOutlined } from "@ant-design/icons";
+//#region src/components/select/Select.tsx
+var isGroupOption = (opt) => "options" in opt && Array.isArray(opt.options);
+var flattenOptions = (opts) => {
+	if (!opts) return [];
+	return opts.flatMap((o) => isGroupOption(o) ? flattenOptions(o.options) : [o]);
 };
-export {
-  Select
+var Select$1 = (props) => /* @__PURE__ */ jsx(FormikField, {
+	name: props.name,
+	children: ({ field, form }) => /* @__PURE__ */ jsx(SelectControl, {
+		props,
+		field,
+		form
+	})
+});
+var SelectControl = ({ props, field, form }) => {
+	const [isFocused, setIsFocused] = useState(false);
+	const [isSearching, setIsSearching] = useState(false);
+	const helpers = form.getFieldHelpers(props.name);
+	const isMultiple = props.mode === "multiple";
+	const isSearchable = props.mode === "tags" || (props.showSearch ?? isMultiple);
+	const hasOptions = (props.options?.length ?? 0) > 0;
+	const currentValue = Array.isArray(field.value) ? field.value : [];
+	const showSelectAllFooter = isMultiple && !props.loading && !props.disabled && hasOptions && !isSearching;
+	const handleSearch = (value) => {
+		setIsSearching(value.length > 0);
+		(typeof props.showSearch === "object" ? props.showSearch.onSearch ?? props.onSearch : props.onSearch)?.(value);
+	};
+	const handleToggleAll = () => {
+		if (props.disabled) return;
+		if (currentValue.length === 0) {
+			const allOptions = flattenOptions(props.options).filter((opt) => opt.value !== void 0 && opt.value !== null && !opt.disabled);
+			const payload = props.labelInValue ? allOptions.map((opt) => ({
+				value: opt.value,
+				label: opt.label
+			})) : allOptions.map((opt) => opt.value);
+			helpers.setValue(payload);
+			props.onChange?.(payload, allOptions);
+		} else {
+			helpers.setValue([]);
+			props.onChange?.([], []);
+		}
+	};
+	const dropdownRender = (menu) => {
+		if (props.loading) return /* @__PURE__ */ jsxs("div", {
+			className: "flex items-center justify-between px-3 py-1",
+			children: [/* @__PURE__ */ jsx("span", { children: "Loading..." }), /* @__PURE__ */ jsx(Spin, {
+				indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true }),
+				size: "small"
+			})]
+		});
+		if (!props.options || props.options && props.options.length === 0) return /* @__PURE__ */ jsx("div", {
+			className: "px-3 py-1",
+			children: "No options"
+		});
+		if (!showSelectAllFooter) return menu;
+		const label = currentValue.length === 0 ? "Select all" : "Clear all";
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [menu, /* @__PURE__ */ jsx("div", {
+			className: "mt-1 pt-1 border-t border-j2-border-secondary",
+			children: /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": label,
+				title: label,
+				onMouseDown: (e) => e.preventDefault(),
+				onClick: handleToggleAll,
+				className: "w-full text-center font-semibold text-sm py-1.5 rounded cursor-pointer text-j2-primary hover:bg-j2-primary-bg-hover bg-transparent border-0",
+				children: label
+			})
+		})] });
+	};
+	return /* @__PURE__ */ jsx(Select, {
+		suffixIcon: props.loading ? /* @__PURE__ */ jsx(Spin, {
+			indicator: /* @__PURE__ */ jsx(LoadingOutlined, { spin: true }),
+			size: "small",
+			"data-testid": "loading-spinner"
+		}) : isSearchable && isFocused ? /* @__PURE__ */ jsx(MagnifyingGlassIcon, {
+			size: 14,
+			"data-testid": "magnifying-glass"
+		}) : /* @__PURE__ */ jsx(CaretDownIcon, {
+			size: 14,
+			"data-testid": "caret-down"
+		}),
+		...props,
+		id: props.id ?? props.name,
+		value: field.value === "" || field.value === null ? void 0 : field.value,
+		onChange: (value, option) => {
+			helpers.setValue(value);
+			props.onChange?.(value, option);
+		},
+		popupRender: dropdownRender,
+		removeIcon: /* @__PURE__ */ jsx(XCircleIcon, { size: 12 }),
+		allowClear: props.allowClear ? { clearIcon: /* @__PURE__ */ jsx(XCircleIcon, { size: 14 }) } : false,
+		showSearch: typeof props.showSearch === "object" ? {
+			...props.showSearch,
+			onSearch: handleSearch
+		} : props.showSearch,
+		onSearch: isSearchable ? handleSearch : void 0,
+		onFocus: (event) => {
+			setIsFocused(true);
+			props.onFocus?.(event);
+		},
+		onBlur: (event) => {
+			helpers.setTouched(true);
+			setIsFocused(false);
+			setIsSearching(false);
+			props.onBlur?.(event);
+		},
+		size: props.size || "large"
+	});
 };
-//# sourceMappingURL=Select.js.map
+//#endregion
+export { Select$1 as Select };
+
+//# sourceMappingURL=Select.js.map

package/dist/src/components/select/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Select as AntDSelect, Spin } from 'antd'\nimport { LoadingOutlined } from '@ant-design/icons'\nimport type {\n  SelectProps as AntDSelectProps,\n  DefaultOptionType,\n} from 'antd/es/select'\nimport {\n  CaretDownIcon,\n  MagnifyingGlassIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport { useState } from 'react'\nimport type { FieldProps } from 'formik'\nimport { FormikField } from '../form/FormikField'\n\ntype SelectProps = Expand<AntDSelectProps> & {\n  name: string\n}\n\ntype GroupOption = { label?: React.ReactNode; options: DefaultOptionType[] }\n\nconst isGroupOption = (\n  opt: DefaultOptionType | GroupOption\n): opt is GroupOption =>\n  'options' in opt && Array.isArray((opt as GroupOption).options)\n\nconst flattenOptions = (\n  opts: (DefaultOptionType | GroupOption)[] | undefined\n): DefaultOptionType[] => {\n  if (!opts) return []\n  return opts.flatMap((o) =>\n    isGroupOption(o) ? flattenOptions(o.options) : [o]\n  )\n}\n\nexport const Select = (props: SelectProps) => (\n  <FormikField name={props.name}>\n    {({ field, form }) => (\n      <SelectControl props={props} field={field} form={form} />\n    )}\n  </FormikField>\n)\n\nconst SelectControl = ({\n  props,\n  field,\n  form,\n}: { props: SelectProps } & Pick<FieldProps, 'field' | 'form'>) => {\n  const [isFocused, setIsFocused] = useState(false)\n  const [isSearching, setIsSearching] = useState(false)\n  const helpers = form.getFieldHelpers(props.name)\n\n  const isMultiple = props.mode === 'multiple'\n  const isSearchable = props.mode === 'tags' || (props.showSearch ?? isMultiple)\n  const hasOptions = (props.options?.length ?? 0) > 0\n  const currentValue: unknown[] = Array.isArray(field.value) ? field.value : []\n  const showSelectAllFooter =\n    isMultiple &&\n    !props.loading &&\n    !props.disabled &&\n    hasOptions &&\n    !isSearching\n\n  const handleSearch = (value: string) => {\n    setIsSearching(value.length > 0)\n    const onSearch =\n      typeof props.showSearch === 'object'\n        ? (props.showSearch.onSearch ?? props.onSearch)\n        : props.onSearch\n    onSearch?.(value)\n  }\n\n  const handleToggleAll = () => {\n    if (props.disabled) return\n\n    if (currentValue.length === 0) {\n      const flat = flattenOptions(\n        props.options as (DefaultOptionType | GroupOption)[] | undefined\n      )\n      const allOptions = flat.filter(\n        (opt) => opt.value !== undefined && opt.value !== null && !opt.disabled\n      )\n      // antd's labelInValue mode expects values shaped as { value, label }\n      // rather than raw scalars; mirror that contract so the field state\n      // and downstream onChange payload match what consumers expect.\n      const payload = props.labelInValue\n        ? allOptions.map((opt) => ({ value: opt.value, label: opt.label }))\n        : allOptions.map((opt) => opt.value as string | number)\n      void helpers.setValue(payload)\n      props.onChange?.(payload, allOptions)\n    } else {\n      void helpers.setValue([])\n      props.onChange?.([], [])\n    }\n  }\n\n  const dropdownRender = (menu: React.ReactElement): React.ReactElement => {\n    if (props.loading) {\n      return (\n        <div className=\"flex items-center justify-between px-3 py-1\">\n          <span>Loading...</span>\n          <Spin indicator={<LoadingOutlined spin />} size=\"small\" />\n        </div>\n      )\n    }\n\n    if (!props.options || (props.options && props.options.length === 0)) {\n      return <div className=\"px-3 py-1\">No options</div>\n    }\n\n    if (!showSelectAllFooter) return menu\n\n    const label = currentValue.length === 0 ? 'Select all' : 'Clear all'\n\n    return (\n      <>\n        {menu}\n        <div className=\"mt-1 pt-1 border-t border-j2-border-secondary\">\n          <button\n            type=\"button\"\n            aria-label={label}\n            title={label}\n            onMouseDown={(e) => e.preventDefault()}\n            onClick={handleToggleAll}\n            className=\"w-full text-center font-semibold text-sm py-1.5 rounded cursor-pointer text-j2-primary hover:bg-j2-primary-bg-hover bg-transparent border-0\"\n          >\n            {label}\n          </button>\n        </div>\n      </>\n    )\n  }\n\n  return (\n    <AntDSelect\n      suffixIcon={\n        props.loading ? (\n          <Spin\n            indicator={<LoadingOutlined spin />}\n            size=\"small\"\n            data-testid=\"loading-spinner\"\n          />\n        ) : isSearchable && isFocused ? (\n          <MagnifyingGlassIcon size={14} data-testid=\"magnifying-glass\" />\n        ) : (\n          <CaretDownIcon size={14} data-testid=\"caret-down\" />\n        )\n      }\n      {...props}\n      id={props.id ?? props.name}\n      value={\n        field.value === '' || field.value === null ? undefined : field.value\n      }\n      onChange={(value, option) => {\n        void helpers.setValue(value)\n        props.onChange?.(value, option)\n      }}\n      popupRender={dropdownRender}\n      removeIcon={<XCircleIcon size={12} />}\n      allowClear={\n        props.allowClear ? { clearIcon: <XCircleIcon size={14} /> } : false\n      }\n      showSearch={\n        typeof props.showSearch === 'object'\n          ? { ...props.showSearch, onSearch: handleSearch }\n          : props.showSearch\n      }\n      onSearch={isSearchable ? handleSearch : undefined}\n      onFocus={(event) => {\n        setIsFocused(true)\n        props.onFocus?.(event)\n      }}\n      onBlur={(event) => {\n        void helpers.setTouched(true)\n        setIsFocused(false)\n        setIsSearching(false)\n        props.onBlur?.(event)\n      }}\n      size={props.size || 'large'}\n    />\n  )\n}\n"],"names":["_a","AntDSelect"],"mappings":"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"}
+{"version":3,"file":"Select.js","names":["Select","_Fragment","AntDSelect"],"sources":["../../../../src/components/select/Select.tsx"],"sourcesContent":["import * as React from 'react'\nimport { Select as AntDSelect, Spin } from 'antd'\nimport { LoadingOutlined } from '@ant-design/icons'\nimport type {\n  SelectProps as AntDSelectProps,\n  DefaultOptionType,\n} from 'antd/es/select'\nimport {\n  CaretDownIcon,\n  MagnifyingGlassIcon,\n  XCircleIcon,\n} from '@phosphor-icons/react'\nimport { useState } from 'react'\nimport type { FieldProps } from 'formik'\nimport { FormikField } from '../form/FormikField'\nimport './Select.css'\n\ntype SelectProps = Expand<AntDSelectProps> & {\n  name: string\n}\n\ntype GroupOption = { label?: React.ReactNode; options: DefaultOptionType[] }\n\nconst isGroupOption = (\n  opt: DefaultOptionType | GroupOption\n): opt is GroupOption =>\n  'options' in opt && Array.isArray((opt as GroupOption).options)\n\nconst flattenOptions = (\n  opts: (DefaultOptionType | GroupOption)[] | undefined\n): DefaultOptionType[] => {\n  if (!opts) return []\n  return opts.flatMap((o) =>\n    isGroupOption(o) ? flattenOptions(o.options) : [o]\n  )\n}\n\nexport const Select = (props: SelectProps) => (\n  <FormikField name={props.name}>\n    {({ field, form }) => (\n      <SelectControl props={props} field={field} form={form} />\n    )}\n  </FormikField>\n)\n\nconst SelectControl = ({\n  props,\n  field,\n  form,\n}: { props: SelectProps } & Pick<FieldProps, 'field' | 'form'>) => {\n  const [isFocused, setIsFocused] = useState(false)\n  const [isSearching, setIsSearching] = useState(false)\n  const helpers = form.getFieldHelpers(props.name)\n\n  const isMultiple = props.mode === 'multiple'\n  const isSearchable = props.mode === 'tags' || (props.showSearch ?? isMultiple)\n  const hasOptions = (props.options?.length ?? 0) > 0\n  const currentValue: unknown[] = Array.isArray(field.value) ? field.value : []\n  const showSelectAllFooter =\n    isMultiple &&\n    !props.loading &&\n    !props.disabled &&\n    hasOptions &&\n    !isSearching\n\n  const handleSearch = (value: string) => {\n    setIsSearching(value.length > 0)\n    const onSearch =\n      typeof props.showSearch === 'object'\n        ? (props.showSearch.onSearch ?? props.onSearch)\n        : props.onSearch\n    onSearch?.(value)\n  }\n\n  const handleToggleAll = () => {\n    if (props.disabled) return\n\n    if (currentValue.length === 0) {\n      const flat = flattenOptions(\n        props.options as (DefaultOptionType | GroupOption)[] | undefined\n      )\n      const allOptions = flat.filter(\n        (opt) => opt.value !== undefined && opt.value !== null && !opt.disabled\n      )\n      // antd's labelInValue mode expects values shaped as { value, label }\n      // rather than raw scalars; mirror that contract so the field state\n      // and downstream onChange payload match what consumers expect.\n      const payload = props.labelInValue\n        ? allOptions.map((opt) => ({ value: opt.value, label: opt.label }))\n        : allOptions.map((opt) => opt.value as string | number)\n      void helpers.setValue(payload)\n      props.onChange?.(payload, allOptions)\n    } else {\n      void helpers.setValue([])\n      props.onChange?.([], [])\n    }\n  }\n\n  const dropdownRender = (menu: React.ReactElement): React.ReactElement => {\n    if (props.loading) {\n      return (\n        <div className=\"flex items-center justify-between px-3 py-1\">\n          <span>Loading...</span>\n          <Spin indicator={<LoadingOutlined spin />} size=\"small\" />\n        </div>\n      )\n    }\n\n    if (!props.options || (props.options && props.options.length === 0)) {\n      return <div className=\"px-3 py-1\">No options</div>\n    }\n\n    if (!showSelectAllFooter) return menu\n\n    const label = currentValue.length === 0 ? 'Select all' : 'Clear all'\n\n    return (\n      <>\n        {menu}\n        <div className=\"mt-1 pt-1 border-t border-j2-border-secondary\">\n          <button\n            type=\"button\"\n            aria-label={label}\n            title={label}\n            onMouseDown={(e) => e.preventDefault()}\n            onClick={handleToggleAll}\n            className=\"w-full text-center font-semibold text-sm py-1.5 rounded cursor-pointer text-j2-primary hover:bg-j2-primary-bg-hover bg-transparent border-0\"\n          >\n            {label}\n          </button>\n        </div>\n      </>\n    )\n  }\n\n  return (\n    <AntDSelect\n      suffixIcon={\n        props.loading ? (\n          <Spin\n            indicator={<LoadingOutlined spin />}\n            size=\"small\"\n            data-testid=\"loading-spinner\"\n          />\n        ) : isSearchable && isFocused ? (\n          <MagnifyingGlassIcon size={14} data-testid=\"magnifying-glass\" />\n        ) : (\n          <CaretDownIcon size={14} data-testid=\"caret-down\" />\n        )\n      }\n      {...props}\n      id={props.id ?? props.name}\n      value={\n        field.value === '' || field.value === null ? undefined : field.value\n      }\n      onChange={(value, option) => {\n        void helpers.setValue(value)\n        props.onChange?.(value, option)\n      }}\n      popupRender={dropdownRender}\n      removeIcon={<XCircleIcon size={12} />}\n      allowClear={\n        props.allowClear ? { clearIcon: <XCircleIcon size={14} /> } : false\n      }\n      showSearch={\n        typeof props.showSearch === 'object'\n          ? { ...props.showSearch, onSearch: handleSearch }\n          : props.showSearch\n      }\n      onSearch={isSearchable ? handleSearch : undefined}\n      onFocus={(event) => {\n        setIsFocused(true)\n        props.onFocus?.(event)\n      }}\n      onBlur={(event) => {\n        void helpers.setTouched(true)\n        setIsFocused(false)\n        setIsSearching(false)\n        props.onBlur?.(event)\n      }}\n      size={props.size || 'large'}\n    />\n  )\n}\n"],"mappings":"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"}