@takashi145/react-multi-select-buttons 0.1.0 → 0.1.2

package/README.md

@@ -2,10 +2,12 @@
 
 Button-based multi-select components for React.
 
+![sample](https://github.com/user-attachments/assets/3f598c27-63aa-4930-8d14-d13476d58975)
+
 ## Installation
 
 ```bash
-npm install @takashi145/@takashi145/react-multi-select-buttons
+npm install @takashi145/react-multi-select-buttons
 ```
 
 ## Components

package/dist/index.js

@@ -1,220 +1,42 @@
-(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`.multi-select-picker{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;display:grid}.multi-select-picker__cell{min-width:0}.multi-select-picker__item{color:#111827;cursor:pointer;background:#fff;border:1px solid #d0d7de;border-radius:10px;justify-content:space-between;align-items:center;width:100%;min-height:44px;padding:10px 12px;display:flex}.multi-select-picker__item.is-selected{background:#eff6ff;border-color:#2563eb}.multi-select-picker__item:active{background:#f3f4f6;transform:scale(.96)}.multi-select-picker__item.is-disabled:active,.multi-select-picker__item.is-limit:active{background:#fff;transform:none}.multi-select-picker__item.is-disabled,.multi-select-picker__item.is-limit{cursor:not-allowed;opacity:.55}.multi-select-picker__label,.multi-select-picker__order{font:inherit}
-/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();import { useMemo as e } from "react";
-//#region \0rolldown/runtime.js
-var t = (e, t) => () => (t || e((t = { exports: {} }).exports, t), t.exports), n = /* @__PURE__ */ ((e) => typeof require < "u" ? require : typeof Proxy < "u" ? new Proxy(e, { get: (e, t) => (typeof require < "u" ? require : e)[t] }) : e)(function(e) {
-	if (typeof require < "u") return require.apply(this, arguments);
-	throw Error("Calling `require` for \"" + e + "\" in an environment that doesn't expose the `require` function. See https://rolldown.rs/in-depth/bundling-cjs#require-external-modules for more details.");
-}), r = /* @__PURE__ */ t(((e) => {
-	var t = Symbol.for("react.transitional.element"), n = Symbol.for("react.fragment");
-	function r(e, n, r) {
-		var i = null;
-		if (r !== void 0 && (i = "" + r), n.key !== void 0 && (i = "" + n.key), "key" in n) for (var a in r = {}, n) a !== "key" && (r[a] = n[a]);
-		else r = n;
-		return n = r.ref, {
-			$$typeof: t,
-			type: e,
-			key: i,
-			ref: n === void 0 ? null : n,
-			props: r
-		};
-	}
-	e.Fragment = n, e.jsx = r, e.jsxs = r;
-})), i = /* @__PURE__ */ t(((e) => {
-	process.env.NODE_ENV !== "production" && (function() {
-		function t(e) {
-			if (e == null) return null;
-			if (typeof e == "function") return e.$$typeof === k ? null : e.displayName || e.name || null;
-			if (typeof e == "string") return e;
-			switch (e) {
-				case v: return "Fragment";
-				case b: return "Profiler";
-				case y: return "StrictMode";
-				case w: return "Suspense";
-				case T: return "SuspenseList";
-				case O: return "Activity";
-			}
-			if (typeof e == "object") switch (typeof e.tag == "number" && console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."), e.$$typeof) {
-				case _: return "Portal";
-				case S: return e.displayName || "Context";
-				case x: return (e._context.displayName || "Context") + ".Consumer";
-				case C:
-					var n = e.render;
-					return e = e.displayName, e ||= (e = n.displayName || n.name || "", e === "" ? "ForwardRef" : "ForwardRef(" + e + ")"), e;
-				case E: return n = e.displayName || null, n === null ? t(e.type) || "Memo" : n;
-				case D:
-					n = e._payload, e = e._init;
-					try {
-						return t(e(n));
-					} catch {}
-			}
-			return null;
-		}
-		function r(e) {
-			return "" + e;
-		}
-		function i(e) {
-			try {
-				r(e);
-				var t = !1;
-			} catch {
-				t = !0;
-			}
-			if (t) {
-				t = console;
-				var n = t.error, i = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
-				return n.call(t, "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.", i), r(e);
-			}
-		}
-		function a(e) {
-			if (e === v) return "<>";
-			if (typeof e == "object" && e && e.$$typeof === D) return "<...>";
-			try {
-				var n = t(e);
-				return n ? "<" + n + ">" : "<...>";
-			} catch {
-				return "<...>";
-			}
-		}
-		function o() {
-			var e = A.A;
-			return e === null ? null : e.getOwner();
-		}
-		function s() {
-			return Error("react-stack-top-frame");
-		}
-		function c(e) {
-			if (j.call(e, "key")) {
-				var t = Object.getOwnPropertyDescriptor(e, "key").get;
-				if (t && t.isReactWarning) return !1;
-			}
-			return e.key !== void 0;
-		}
-		function l(e, t) {
-			function n() {
-				P || (P = !0, console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)", t));
-			}
-			n.isReactWarning = !0, Object.defineProperty(e, "key", {
-				get: n,
-				configurable: !0
-			});
-		}
-		function u() {
-			var e = t(this.type);
-			return F[e] || (F[e] = !0, console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")), e = this.props.ref, e === void 0 ? null : e;
-		}
-		function d(e, t, n, r, i, a) {
-			var o = n.ref;
-			return e = {
-				$$typeof: g,
-				type: e,
-				key: t,
-				props: n,
-				_owner: r
-			}, (o === void 0 ? null : o) === null ? Object.defineProperty(e, "ref", {
-				enumerable: !1,
-				value: null
-			}) : Object.defineProperty(e, "ref", {
-				enumerable: !1,
-				get: u
-			}), e._store = {}, Object.defineProperty(e._store, "validated", {
-				configurable: !1,
-				enumerable: !1,
-				writable: !0,
-				value: 0
-			}), Object.defineProperty(e, "_debugInfo", {
-				configurable: !1,
-				enumerable: !1,
-				writable: !0,
-				value: null
-			}), Object.defineProperty(e, "_debugStack", {
-				configurable: !1,
-				enumerable: !1,
-				writable: !0,
-				value: i
-			}), Object.defineProperty(e, "_debugTask", {
-				configurable: !1,
-				enumerable: !1,
-				writable: !0,
-				value: a
-			}), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
-		}
-		function f(e, n, r, a, s, u) {
-			var f = n.children;
-			if (f !== void 0) if (a) if (M(f)) {
-				for (a = 0; a < f.length; a++) p(f[a]);
-				Object.freeze && Object.freeze(f);
-			} else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");
-			else p(f);
-			if (j.call(n, "key")) {
-				f = t(e);
-				var m = Object.keys(n).filter(function(e) {
-					return e !== "key";
-				});
-				a = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", R[f + a] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error("A props object containing a \"key\" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />", a, f, m, f), R[f + a] = !0);
-			}
-			if (f = null, r !== void 0 && (i(r), f = "" + r), c(n) && (i(n.key), f = "" + n.key), "key" in n) for (var h in r = {}, n) h !== "key" && (r[h] = n[h]);
-			else r = n;
-			return f && l(r, typeof e == "function" ? e.displayName || e.name || "Unknown" : e), d(e, f, r, o(), s, u);
-		}
-		function p(e) {
-			m(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e && e.$$typeof === D && (e._payload.status === "fulfilled" ? m(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
-		}
-		function m(e) {
-			return typeof e == "object" && !!e && e.$$typeof === g;
-		}
-		var h = n("react"), g = Symbol.for("react.transitional.element"), _ = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), b = Symbol.for("react.profiler"), x = Symbol.for("react.consumer"), S = Symbol.for("react.context"), C = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), T = Symbol.for("react.suspense_list"), E = Symbol.for("react.memo"), D = Symbol.for("react.lazy"), O = Symbol.for("react.activity"), k = Symbol.for("react.client.reference"), A = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, j = Object.prototype.hasOwnProperty, M = Array.isArray, N = console.createTask ? console.createTask : function() {
-			return null;
-		};
-		h = { react_stack_bottom_frame: function(e) {
-			return e();
-		} };
-		var P, F = {}, I = h.react_stack_bottom_frame.bind(h, s)(), L = N(a(s)), R = {};
-		e.Fragment = v, e.jsx = function(e, t, n) {
-			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
-			return f(e, t, n, !1, r ? Error("react-stack-top-frame") : I, r ? N(a(e)) : L);
-		}, e.jsxs = function(e, t, n) {
-			var r = 1e4 > A.recentlyCreatedOwnerStacks++;
-			return f(e, t, n, !0, r ? Error("react-stack-top-frame") : I, r ? N(a(e)) : L);
-		};
-	})();
-})), a = (/* @__PURE__ */ t(((e, t) => {
-	process.env.NODE_ENV === "production" ? t.exports = r() : t.exports = i();
-})))();
-function o({ isSelected: e, isDisabled: t, isInteractive: n, onClick: r, label: i }) {
-	return /* @__PURE__ */ (0, a.jsx)("button", {
+(function(){try{if(typeof document<`u`){var e=document.createElement(`style`);e.appendChild(document.createTextNode(`@layer multi-select-picker{.multi-select-picker{grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px;display:grid}.multi-select-picker__cell{min-width:0}}.multi-select-picker__item{color:#111827;cursor:pointer;background:#fff;border:1px solid #d0d7de;border-radius:10px;justify-content:space-between;align-items:center;width:100%;min-height:44px;padding:10px 12px;display:flex}.multi-select-picker__item.is-selected{background:#eff6ff;border-color:#2563eb}.multi-select-picker__item:active{background:#f3f4f6;transform:scale(.96)}.multi-select-picker__item.is-disabled:active,.multi-select-picker__item.is-limit:active{background:#fff;transform:none}.multi-select-picker__item.is-disabled,.multi-select-picker__item.is-limit{cursor:not-allowed;opacity:.55}.multi-select-picker__label,.multi-select-picker__order{font:inherit}
+/*$vite$:1*/`)),document.head.appendChild(e)}}catch(e){console.error(`vite-plugin-css-injected-by-js`,e)}})();import { jsx as e } from "react/jsx-runtime";
+import { useMemo as t } from "react";
+//#region src/components/DefaultMultiSelectButton.tsx
+function n({ isSelected: t, isDisabled: n, isInteractive: r, onClick: i, label: a }) {
+	return /* @__PURE__ */ e("button", {
 		type: "button",
 		className: [
 			"multi-select-picker__item",
-			e ? "is-selected" : "",
-			t ? "is-disabled" : "",
-			!n && !t ? "is-limit" : ""
+			t ? "is-selected" : "",
+			n ? "is-disabled" : "",
+			!r && !n ? "is-limit" : ""
 		].filter(Boolean).join(" "),
-		onClick: r,
-		"aria-disabled": t,
-		"aria-pressed": e,
-		children: /* @__PURE__ */ (0, a.jsx)("span", {
+		onClick: i,
+		"aria-disabled": n,
+		"aria-pressed": t,
+		children: /* @__PURE__ */ e("span", {
 			className: "multi-select-picker__label",
-			children: i
+			children: a
 		})
 	});
 }
 //#endregion
 //#region src/utils/selection.ts
-function s(e, t) {
-	return c(e, t) >= 0;
+function r(e, t) {
+	return i(e, t) >= 0;
 }
-function c(e, t) {
+function i(e, t) {
 	return t.findIndex((t) => Object.is(e, t));
 }
-function l({ item: e, selectedItemKeys: t, selectedItems: n, maxSelection: r, isDisabled: i }) {
-	if (i) return {
+function a({ item: e, selectedItemKeys: t, selectedItems: n, maxSelection: r, isDisabled: a }) {
+	if (a) return {
 		type: "disabled",
 		nextSelectedItems: n
 	};
-	let a = c(e.key, t);
-	return a >= 0 ? {
+	let o = i(e.key, t);
+	return o >= 0 ? {
 		type: "deselected",
-		nextSelectedItems: n.filter((e, t) => t !== a)
+		nextSelectedItems: n.filter((e, t) => t !== o)
 	} : n.length >= r ? {
 		type: "limit",
 		nextSelectedItems: n
@@ -225,53 +47,53 @@ function l({ item: e, selectedItemKeys: t, selectedItems: n, maxSelection: r, is
 }
 //#endregion
 //#region src/hooks/useSelectablePicker.ts
-function u({ items: t, selectedItems: n, maxSelection: r, onChange: i, onSelectionLimitReached: a, onDisabledClick: o }) {
-	return e(() => {
-		d(t.map((e) => e.key), "items");
-		let e = n.map((e) => e.key);
-		return d(e, "selectedItems"), t.map((t, u) => {
-			let { key: d, value: f } = t, p = c(d, e), m = p >= 0, h = t.disabled ?? !1;
+function o({ items: e, selectedItems: n, maxSelection: o, onChange: c, onSelectionLimitReached: l, onDisabledClick: u }) {
+	return t(() => {
+		s(e.map((e) => e.key), "items");
+		let t = n.map((e) => e.key);
+		return s(t, "selectedItems"), e.map((e, s) => {
+			let { key: d, value: f } = e, p = i(d, t), m = p >= 0, h = e.disabled ?? !1;
 			return {
 				key: d,
-				index: u,
+				index: s,
 				renderParams: {
-					item: t,
+					item: e,
 					value: f,
 					isSelected: m,
 					isDisabled: h,
-					isInteractive: s(d, e) || !h && n.length < r,
+					isInteractive: r(d, t) || !h && n.length < o,
 					selectedOrder: m ? p + 1 : null,
 					onClick: () => {
-						let s = l({
-							item: t,
-							selectedItemKeys: e,
+						let r = a({
+							item: e,
+							selectedItemKeys: t,
 							selectedItems: n,
-							maxSelection: r,
+							maxSelection: o,
 							isDisabled: h
 						});
-						if (s.type === "disabled") {
-							o?.(t);
+						if (r.type === "disabled") {
+							u?.(e);
 							return;
 						}
-						if (s.type === "limit") {
-							a?.(t);
+						if (r.type === "limit") {
+							l?.(e);
 							return;
 						}
-						i(s.nextSelectedItems);
+						c(r.nextSelectedItems);
 					}
 				}
 			};
 		});
 	}, [
-		t,
-		r,
-		i,
+		e,
 		o,
-		a,
+		c,
+		u,
+		l,
 		n
 	]);
 }
-function d(e, t) {
+function s(e, t) {
 	let n = /* @__PURE__ */ new Set();
 	for (let r of e) {
 		if (n.has(r)) throw Error(`MultiSelectButtons received duplicate key in ${t}: ${String(r)}`);
@@ -280,50 +102,50 @@ function d(e, t) {
 }
 //#endregion
 //#region src/components/MultiSelectButtons.tsx
-function f(e) {
-	let { className: t, items: n, style: r, renderValue: i } = e, s = u(e);
-	return /* @__PURE__ */ (0, a.jsx)("div", {
-		className: ["multi-select-picker", t].filter(Boolean).join(" "),
-		style: r,
-		children: s.map(({ key: e, index: t, renderParams: r }) => /* @__PURE__ */ (0, a.jsx)("div", {
+function c(t) {
+	let { className: r, items: i, style: a, renderValue: s } = t, c = o(t);
+	return /* @__PURE__ */ e("div", {
+		className: ["multi-select-picker", r].filter(Boolean).join(" "),
+		style: a,
+		children: c.map(({ key: t, index: r, renderParams: a }) => /* @__PURE__ */ e("div", {
 			className: "multi-select-picker__cell",
-			children: i ? i(r) : /* @__PURE__ */ (0, a.jsx)(o, {
-				...r,
-				label: n[t]?.label ?? String(r.value)
+			children: s ? s(a) : /* @__PURE__ */ e(n, {
+				...a,
+				label: i[r]?.label ?? String(a.value)
 			})
-		}, e))
+		}, t))
 	});
 }
 //#endregion
 //#region src/components/NumberMultiSelectButtons.tsx
-function p({ min: t, max: n, step: r = 1, selectedValues: i, maxSelection: o, onChange: s, getValueLabel: c, isValueDisabled: l, renderValue: u, onSelectionLimitReached: d, onDisabledClick: p, className: m, style: h }) {
-	let g = e(() => {
+function l({ min: n, max: r, step: i = 1, selectedValues: a, maxSelection: o, onChange: s, getValueLabel: l, isValueDisabled: u, renderValue: d, onSelectionLimitReached: f, onDisabledClick: p, className: m, style: h }) {
+	let g = t(() => {
 		let e = [];
-		for (let i = t; i <= n; i += r) e.push({
-			key: i,
-			label: c?.(i, e.length) ?? String(i),
-			value: i,
-			disabled: l?.(i, e.length) ?? !1
+		for (let t = n; t <= r; t += i) e.push({
+			key: t,
+			label: l?.(t, e.length) ?? String(t),
+			value: t,
+			disabled: u?.(t, e.length) ?? !1
 		});
 		return e;
 	}, [
-		c,
 		l,
+		u,
+		r,
 		n,
-		t,
-		r
+		i
 	]);
-	return /* @__PURE__ */ (0, a.jsx)(f, {
+	return /* @__PURE__ */ e(c, {
 		items: g,
-		selectedItems: e(() => i.flatMap((e) => g.find((t) => Object.is(t.value, e)) ?? []), [g, i]),
+		selectedItems: t(() => a.flatMap((e) => g.find((t) => Object.is(t.value, e)) ?? []), [g, a]),
 		maxSelection: o,
 		onChange: (e) => s(e.map((e) => e.value)),
-		renderValue: u,
-		onSelectionLimitReached: (e) => d?.(e.value),
+		renderValue: d,
+		onSelectionLimitReached: (e) => f?.(e.value),
 		onDisabledClick: (e) => p?.(e.value),
 		className: m,
 		style: h
 	});
 }
 //#endregion
-export { f as MultiSelectButtons, p as NumberMultiSelectButtons };
+export { c as MultiSelectButtons, l as NumberMultiSelectButtons };

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@takashi145/react-multi-select-buttons",
-  "version": "0.1.0",
+  "version": "0.1.2",
   "description": "Button-based multi-select components for React.",
   "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/takashi145/react-multi-select-buttons"
+  },
+  "homepage": "https://github.com/takashi145/react-multi-select-buttons#readme",
   "type": "module",
   "files": [
     "dist"