@charcoal-ui/react 6.0.0-rc.7 → 6.0.0-rc.8

package/dist/components/Modal/useTransitionPresence.cjs

@@ -0,0 +1,57 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_useIsomorphicLayoutEffect = require('../../_lib/useIsomorphicLayoutEffect.cjs');
+let react = require("react");
+
+//#region src/components/Modal/useTransitionPresence.ts
+const MODAL_TRANSITION_DURATION_MS = 400;
+/**
+* アニメーション終了時の状態遷移。
+* 途中で open/close が切り替わって state が既に進んでいた場合は何もしない
+*/
+function settle(state) {
+	if (state === "entering") return "entered";
+	if (state === "exiting") return "exited";
+	return state;
+}
+/**
+* CSS transition によるモーダルの開閉アニメーションを管理する。
+* exit アニメーションが終わるまで DOM をマウントしたままにする
+*
+* @param isOpen モーダルを開くべきか
+* @param enabled アニメーションを行うか（false なら即座にマウント・アンマウント）
+* @param backgroundRef 背景要素。マウント直後の layout flush に使う
+* @param dialogRef transform をアニメーションさせる要素（ダイアログ）
+*/
+function useTransitionPresence(isOpen, enabled, backgroundRef, dialogRef) {
+	const [state, setState] = (0, react.useState)("exited");
+	require_useIsomorphicLayoutEffect.useIsomorphicLayoutEffect(() => {
+		if (!enabled) setState(isOpen ? "entered" : "exited");
+		else if (isOpen) {
+			if (backgroundRef.current) backgroundRef.current.offsetHeight;
+			setState((s) => s === "exited" || s === "exiting" ? "entering" : s);
+		} else setState((s) => s === "exited" ? s : "exiting");
+	}, [
+		isOpen,
+		enabled,
+		backgroundRef
+	]);
+	const isAnimating = state === "entering" || state === "exiting";
+	(0, react.useEffect)(() => {
+		if (!isAnimating) return;
+		const timer = setTimeout(() => setState(settle), 400 + 100);
+		return () => clearTimeout(timer);
+	}, [isAnimating, state]);
+	const handleTransitionEnd = (0, react.useCallback)((e) => {
+		if (e.target === dialogRef.current && e.propertyName === "transform") setState(settle);
+	}, [dialogRef]);
+	return {
+		isPresent: enabled ? isOpen || state !== "exited" : isOpen,
+		animationState: state,
+		handleTransitionEnd
+	};
+}
+
+//#endregion
+exports.useTransitionPresence = useTransitionPresence;
+//# sourceMappingURL=useTransitionPresence.cjs.map

package/dist/components/Modal/useTransitionPresence.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransitionPresence.cjs","names":["useCallback","useEffect","useState","RefObject","TransitionEvent","useIsomorphicLayoutEffect","MODAL_TRANSITION_DURATION_MS","AnimationState","settle","state","useTransitionPresence","isOpen","enabled","backgroundRef","HTMLElement","dialogRef","setState","current","offsetHeight","s","isAnimating","timer","setTimeout","clearTimeout","handleTransitionEnd","e","isDialogSlide","target","propertyName","isPresent","animationState"],"sources":["../../../src/components/Modal/useTransitionPresence.ts"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useState,\n  RefObject,\n  TransitionEvent,\n} from 'react'\nimport { useIsomorphicLayoutEffect } from '../../_lib/useIsomorphicLayoutEffect'\n\n// index.css の transition-duration と一致させること\nexport const MODAL_TRANSITION_DURATION_MS = 400\n\ntype AnimationState = 'exited' | 'entering' | 'entered' | 'exiting'\n\n/**\n * アニメーション終了時の状態遷移。\n * 途中で open/close が切り替わって state が既に進んでいた場合は何もしない\n */\nfunction settle(state: AnimationState): AnimationState {\n  if (state === 'entering') return 'entered'\n  if (state === 'exiting') return 'exited'\n  return state\n}\n\n/**\n * CSS transition によるモーダルの開閉アニメーションを管理する。\n * exit アニメーションが終わるまで DOM をマウントしたままにする\n *\n * @param isOpen モーダルを開くべきか\n * @param enabled アニメーションを行うか（false なら即座にマウント・アンマウント）\n * @param backgroundRef 背景要素。マウント直後の layout flush に使う\n * @param dialogRef transform をアニメーションさせる要素（ダイアログ）\n */\nexport function useTransitionPresence(\n  isOpen: boolean,\n  enabled: boolean,\n  backgroundRef: RefObject<HTMLElement>,\n  dialogRef: RefObject<HTMLElement>,\n) {\n  // 開いた状態で初回マウントされた場合もアニメーションさせるため常に 'exited' から始める。\n  // enabled でない場合は下の layout effect が描画前に 'entered' へ進める\n  const [state, setState] = useState<AnimationState>('exited')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!enabled) {\n      setState(isOpen ? 'entered' : 'exited')\n    } else if (isOpen) {\n      // 閉じた状態のスタイルを確定させ、enter の transition が発火するようにする。\n      // dialogRef は子コンポーネントの passive effect で張られるためこの時点では\n      // まだ古い/null のことがあり、同じ commit で同期的に張られる背景要素を読む\n      if (backgroundRef.current) void backgroundRef.current.offsetHeight\n      setState((s) => (s === 'exited' || s === 'exiting' ? 'entering' : s))\n    } else {\n      setState((s) => (s === 'exited' ? s : 'exiting'))\n    }\n  }, [isOpen, enabled, backgroundRef])\n\n  // safety net: transitionend が来なくても（トランジションのキャンセル、\n  // reduced-motion、バックグラウンドタブ等）モーダルが永遠に残らないようにする\n  const isAnimating = state === 'entering' || state === 'exiting'\n  useEffect(() => {\n    if (!isAnimating) return\n    // transitionend と同時刻に発火して競合しないよう少し遅らせる\n    const timer = setTimeout(\n      () => setState(settle),\n      MODAL_TRANSITION_DURATION_MS + 100,\n    )\n    return () => clearTimeout(timer)\n  }, [isAnimating, state])\n\n  // 背景 div に付ける。ダイアログの transform の transitionend だけが\n  // 開閉アニメーションの終了を意味する（他のトランジションもバブルしてくるため絞り込む）。\n  // propertyName は index.css がアニメーションさせるプロパティと一致させること。\n  // なお enter 完了直後の close では、完了済み enter の transitionend が\n  // 'exiting' へ遷移した後に届いて exit アニメーションが省略される可能性が\n  // 理論上あるが、サブフレーム幅のレースで実害は見た目のみのため許容している\n  const handleTransitionEnd = useCallback(\n    (e: TransitionEvent<HTMLElement>) => {\n      const isDialogSlide =\n        e.target === dialogRef.current && e.propertyName === 'transform'\n      if (isDialogSlide) {\n        setState(settle)\n      }\n    },\n    [dialogRef],\n  )\n\n  return {\n    // enabled でないときは isOpen だけで即座にマウント・アンマウントする\n    // （state 経由にすると close 時に開いたツリーを丸ごと 1 回余計に描画する）\n    isPresent: enabled ? isOpen || state !== 'exited' : isOpen,\n    animationState: state,\n    handleTransitionEnd,\n  }\n}\n"],"mappings":";;;;;;AAUA,MAAaM,+BAA+B;;;;;AAQ5C,SAASE,OAAOC,OAAuC;CACrD,IAAIA,UAAU,YAAY,OAAO;CACjC,IAAIA,UAAU,WAAW,OAAO;CAChC,OAAOA;;;;;;;;;;;AAYT,SAAgBC,sBACdC,QACAC,SACAC,eACAE,WACA;CAGA,MAAM,CAACN,OAAOO,gCAAqC,SAAS;CAE5DX,kEAAgC;EAC9B,IAAI,CAACO,SACHI,SAASL,SAAS,YAAY,SAAS;OAClC,IAAIA,QAAQ;GAIjB,IAAIE,cAAcI,SAAS,AAAKJ,cAAcI,QAAQC;GACtDF,UAAUG,MAAOA,MAAM,YAAYA,MAAM,YAAY,aAAaA,EAAG;SAErEH,UAAUG,MAAOA,MAAM,WAAWA,IAAI,UAAW;IAElD;EAACR;EAAQC;EAASC;EAAc,CAAC;CAIpC,MAAMO,cAAcX,UAAU,cAAcA,UAAU;CACtDR,2BAAgB;EACd,IAAI,CAACmB,aAAa;EAElB,MAAMC,QAAQC,iBACNN,SAASR,OAAO,QACS,IAChC;EACD,aAAae,aAAaF,MAAM;IAC/B,CAACD,aAAaX,MAAM,CAAC;CAQxB,MAAMe,8CACHC,MAAoC;EAGnC,IADEA,EAAEE,WAAWZ,UAAUE,WAAWQ,EAAEG,iBAAiB,aAErDZ,SAASR,OAAO;IAGpB,CAACO,UACH,CAAC;CAED,OAAO;EAGLc,WAAWjB,UAAUD,UAAUF,UAAU,WAAWE;EACpDmB,gBAAgBrB;EAChBe;EACD"}

package/dist/components/Modal/useTransitionPresence.js

@@ -0,0 +1,56 @@
+"use client";
+import { useIsomorphicLayoutEffect } from "../../_lib/useIsomorphicLayoutEffect.js";
+import { useCallback, useEffect, useState } from "react";
+
+//#region src/components/Modal/useTransitionPresence.ts
+const MODAL_TRANSITION_DURATION_MS = 400;
+/**
+* アニメーション終了時の状態遷移。
+* 途中で open/close が切り替わって state が既に進んでいた場合は何もしない
+*/
+function settle(state) {
+	if (state === "entering") return "entered";
+	if (state === "exiting") return "exited";
+	return state;
+}
+/**
+* CSS transition によるモーダルの開閉アニメーションを管理する。
+* exit アニメーションが終わるまで DOM をマウントしたままにする
+*
+* @param isOpen モーダルを開くべきか
+* @param enabled アニメーションを行うか（false なら即座にマウント・アンマウント）
+* @param backgroundRef 背景要素。マウント直後の layout flush に使う
+* @param dialogRef transform をアニメーションさせる要素（ダイアログ）
+*/
+function useTransitionPresence(isOpen, enabled, backgroundRef, dialogRef) {
+	const [state, setState] = useState("exited");
+	useIsomorphicLayoutEffect(() => {
+		if (!enabled) setState(isOpen ? "entered" : "exited");
+		else if (isOpen) {
+			if (backgroundRef.current) backgroundRef.current.offsetHeight;
+			setState((s) => s === "exited" || s === "exiting" ? "entering" : s);
+		} else setState((s) => s === "exited" ? s : "exiting");
+	}, [
+		isOpen,
+		enabled,
+		backgroundRef
+	]);
+	const isAnimating = state === "entering" || state === "exiting";
+	useEffect(() => {
+		if (!isAnimating) return;
+		const timer = setTimeout(() => setState(settle), 400 + 100);
+		return () => clearTimeout(timer);
+	}, [isAnimating, state]);
+	const handleTransitionEnd = useCallback((e) => {
+		if (e.target === dialogRef.current && e.propertyName === "transform") setState(settle);
+	}, [dialogRef]);
+	return {
+		isPresent: enabled ? isOpen || state !== "exited" : isOpen,
+		animationState: state,
+		handleTransitionEnd
+	};
+}
+
+//#endregion
+export { useTransitionPresence };
+//# sourceMappingURL=useTransitionPresence.js.map

package/dist/components/Modal/useTransitionPresence.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useTransitionPresence.js","names":["useCallback","useEffect","useState","RefObject","TransitionEvent","useIsomorphicLayoutEffect","MODAL_TRANSITION_DURATION_MS","AnimationState","settle","state","useTransitionPresence","isOpen","enabled","backgroundRef","HTMLElement","dialogRef","setState","current","offsetHeight","s","isAnimating","timer","setTimeout","clearTimeout","handleTransitionEnd","e","isDialogSlide","target","propertyName","isPresent","animationState"],"sources":["../../../src/components/Modal/useTransitionPresence.ts"],"sourcesContent":["import {\n  useCallback,\n  useEffect,\n  useState,\n  RefObject,\n  TransitionEvent,\n} from 'react'\nimport { useIsomorphicLayoutEffect } from '../../_lib/useIsomorphicLayoutEffect'\n\n// index.css の transition-duration と一致させること\nexport const MODAL_TRANSITION_DURATION_MS = 400\n\ntype AnimationState = 'exited' | 'entering' | 'entered' | 'exiting'\n\n/**\n * アニメーション終了時の状態遷移。\n * 途中で open/close が切り替わって state が既に進んでいた場合は何もしない\n */\nfunction settle(state: AnimationState): AnimationState {\n  if (state === 'entering') return 'entered'\n  if (state === 'exiting') return 'exited'\n  return state\n}\n\n/**\n * CSS transition によるモーダルの開閉アニメーションを管理する。\n * exit アニメーションが終わるまで DOM をマウントしたままにする\n *\n * @param isOpen モーダルを開くべきか\n * @param enabled アニメーションを行うか（false なら即座にマウント・アンマウント）\n * @param backgroundRef 背景要素。マウント直後の layout flush に使う\n * @param dialogRef transform をアニメーションさせる要素（ダイアログ）\n */\nexport function useTransitionPresence(\n  isOpen: boolean,\n  enabled: boolean,\n  backgroundRef: RefObject<HTMLElement>,\n  dialogRef: RefObject<HTMLElement>,\n) {\n  // 開いた状態で初回マウントされた場合もアニメーションさせるため常に 'exited' から始める。\n  // enabled でない場合は下の layout effect が描画前に 'entered' へ進める\n  const [state, setState] = useState<AnimationState>('exited')\n\n  useIsomorphicLayoutEffect(() => {\n    if (!enabled) {\n      setState(isOpen ? 'entered' : 'exited')\n    } else if (isOpen) {\n      // 閉じた状態のスタイルを確定させ、enter の transition が発火するようにする。\n      // dialogRef は子コンポーネントの passive effect で張られるためこの時点では\n      // まだ古い/null のことがあり、同じ commit で同期的に張られる背景要素を読む\n      if (backgroundRef.current) void backgroundRef.current.offsetHeight\n      setState((s) => (s === 'exited' || s === 'exiting' ? 'entering' : s))\n    } else {\n      setState((s) => (s === 'exited' ? s : 'exiting'))\n    }\n  }, [isOpen, enabled, backgroundRef])\n\n  // safety net: transitionend が来なくても（トランジションのキャンセル、\n  // reduced-motion、バックグラウンドタブ等）モーダルが永遠に残らないようにする\n  const isAnimating = state === 'entering' || state === 'exiting'\n  useEffect(() => {\n    if (!isAnimating) return\n    // transitionend と同時刻に発火して競合しないよう少し遅らせる\n    const timer = setTimeout(\n      () => setState(settle),\n      MODAL_TRANSITION_DURATION_MS + 100,\n    )\n    return () => clearTimeout(timer)\n  }, [isAnimating, state])\n\n  // 背景 div に付ける。ダイアログの transform の transitionend だけが\n  // 開閉アニメーションの終了を意味する（他のトランジションもバブルしてくるため絞り込む）。\n  // propertyName は index.css がアニメーションさせるプロパティと一致させること。\n  // なお enter 完了直後の close では、完了済み enter の transitionend が\n  // 'exiting' へ遷移した後に届いて exit アニメーションが省略される可能性が\n  // 理論上あるが、サブフレーム幅のレースで実害は見た目のみのため許容している\n  const handleTransitionEnd = useCallback(\n    (e: TransitionEvent<HTMLElement>) => {\n      const isDialogSlide =\n        e.target === dialogRef.current && e.propertyName === 'transform'\n      if (isDialogSlide) {\n        setState(settle)\n      }\n    },\n    [dialogRef],\n  )\n\n  return {\n    // enabled でないときは isOpen だけで即座にマウント・アンマウントする\n    // （state 経由にすると close 時に開いたツリーを丸ごと 1 回余計に描画する）\n    isPresent: enabled ? isOpen || state !== 'exited' : isOpen,\n    animationState: state,\n    handleTransitionEnd,\n  }\n}\n"],"mappings":";;;;;AAUA,MAAaM,+BAA+B;;;;;AAQ5C,SAASE,OAAOC,OAAuC;CACrD,IAAIA,UAAU,YAAY,OAAO;CACjC,IAAIA,UAAU,WAAW,OAAO;CAChC,OAAOA;;;;;;;;;;;AAYT,SAAgBC,sBACdC,QACAC,SACAC,eACAE,WACA;CAGA,MAAM,CAACN,OAAOO,YAAYd,SAAyB,SAAS;CAE5DG,gCAAgC;EAC9B,IAAI,CAACO,SACHI,SAASL,SAAS,YAAY,SAAS;OAClC,IAAIA,QAAQ;GAIjB,IAAIE,cAAcI,SAAS,AAAKJ,cAAcI,QAAQC;GACtDF,UAAUG,MAAOA,MAAM,YAAYA,MAAM,YAAY,aAAaA,EAAG;SAErEH,UAAUG,MAAOA,MAAM,WAAWA,IAAI,UAAW;IAElD;EAACR;EAAQC;EAASC;EAAc,CAAC;CAIpC,MAAMO,cAAcX,UAAU,cAAcA,UAAU;CACtDR,gBAAgB;EACd,IAAI,CAACmB,aAAa;EAElB,MAAMC,QAAQC,iBACNN,SAASR,OAAO,QACS,IAChC;EACD,aAAae,aAAaF,MAAM;IAC/B,CAACD,aAAaX,MAAM,CAAC;CAQxB,MAAMe,sBAAsBxB,aACzByB,MAAoC;EAGnC,IADEA,EAAEE,WAAWZ,UAAUE,WAAWQ,EAAEG,iBAAiB,aAErDZ,SAASR,OAAO;IAGpB,CAACO,UACH,CAAC;CAED,OAAO;EAGLc,WAAWjB,UAAUD,UAAUF,UAAU,WAAWE;EACpDmB,gBAAgBrB;EAChBe;EACD"}

package/dist/components/MultiSelect/context.cjs

@@ -0,0 +1,19 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+
+//#region src/components/MultiSelect/context.ts
+const MultiSelectGroupContext = (0, react.createContext)({
+	name: void 0,
+	selected: [],
+	disabled: false,
+	readonly: false,
+	invalid: false,
+	onChange() {
+		throw new Error("Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?");
+	}
+});
+
+//#endregion
+exports.MultiSelectGroupContext = MultiSelectGroupContext;
+//# sourceMappingURL=context.cjs.map

package/dist/components/MultiSelect/context.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.cjs","names":["createContext","MultiSelectGroupContext","name","selected","disabled","readonly","invalid","onChange","value","undefined","Error"],"sources":["../../../src/components/MultiSelect/context.ts"],"sourcesContent":["import { createContext } from 'react'\n\ntype MultiSelectGroupContext = {\n  name: string\n  selected: string[]\n  disabled: boolean\n  readonly: boolean\n  invalid: boolean\n  onChange: ({ value, selected }: { value: string; selected: boolean }) => void\n}\n\nexport const MultiSelectGroupContext = createContext<MultiSelectGroupContext>({\n  name: undefined as never,\n  selected: [],\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  onChange() {\n    throw new Error(\n      'Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?',\n    )\n  },\n})\n"],"mappings":";;;;;AAWA,MAAaC,mDAAiE;CAC5EC,MAAMO;CACNN,UAAU,EAAE;CACZC,UAAU;CACVC,UAAU;CACVC,SAAS;CACTC,WAAW;EACT,MAAM,IAAIG,MACR,gGACD;;CAEJ,CAAC"}

package/dist/components/MultiSelect/context.js

@@ -0,0 +1,18 @@
+"use client";
+import { createContext } from "react";
+
+//#region src/components/MultiSelect/context.ts
+const MultiSelectGroupContext = createContext({
+	name: void 0,
+	selected: [],
+	disabled: false,
+	readonly: false,
+	invalid: false,
+	onChange() {
+		throw new Error("Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?");
+	}
+});
+
+//#endregion
+export { MultiSelectGroupContext };
+//# sourceMappingURL=context.js.map

package/dist/components/MultiSelect/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","names":["createContext","MultiSelectGroupContext","name","selected","disabled","readonly","invalid","onChange","value","undefined","Error"],"sources":["../../../src/components/MultiSelect/context.ts"],"sourcesContent":["import { createContext } from 'react'\n\ntype MultiSelectGroupContext = {\n  name: string\n  selected: string[]\n  disabled: boolean\n  readonly: boolean\n  invalid: boolean\n  onChange: ({ value, selected }: { value: string; selected: boolean }) => void\n}\n\nexport const MultiSelectGroupContext = createContext<MultiSelectGroupContext>({\n  name: undefined as never,\n  selected: [],\n  disabled: false,\n  readonly: false,\n  invalid: false,\n  onChange() {\n    throw new Error(\n      'Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?',\n    )\n  },\n})\n"],"mappings":";;;;AAWA,MAAaC,0BAA0BD,cAAuC;CAC5EE,MAAMO;CACNN,UAAU,EAAE;CACZC,UAAU;CACVC,UAAU;CACVC,SAAS;CACTC,WAAW;EACT,MAAM,IAAIG,MACR,gGACD;;CAEJ,CAAC"}

package/dist/components/MultiSelect/index2.cjs

@@ -0,0 +1,97 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+const require_useClassNames = require('../../_lib/useClassNames.cjs');
+const require_context = require('./context.cjs');
+const require_index = require('../Icon/index.cjs');
+require('./index.cjs');
+let react = require("react");
+react = require_runtime.__toESM(react);
+let react_jsx_runtime = require("react/jsx-runtime");
+let warning = require("warning");
+warning = require_runtime.__toESM(warning);
+
+//#region src/components/MultiSelect/index.tsx
+const MultiSelect = (0, react.forwardRef)(function MultiSelectInner({ value, disabled = false, onChange, variant = "default", className, children }, ref) {
+	const { name, selected, disabled: parentDisabled, readonly, invalid, onChange: parentOnChange } = (0, react.useContext)(require_context.MultiSelectGroupContext);
+	(0, warning.default)(name !== void 0, `"name" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`);
+	const isSelected = selected.includes(value);
+	const isDisabled = disabled || parentDisabled || readonly;
+	const handleChange = (0, react.useCallback)((event) => {
+		if (!(event.currentTarget instanceof HTMLInputElement)) return;
+		if (onChange) onChange({
+			value,
+			selected: event.currentTarget.checked
+		});
+		parentOnChange({
+			value,
+			selected: event.currentTarget.checked
+		});
+	}, [
+		onChange,
+		parentOnChange,
+		value
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("label", {
+		"aria-disabled": isDisabled,
+		className: require_useClassNames.useClassNames("charcoal-multi-select", className),
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+				className: "charcoal-multi-select-input",
+				name,
+				value,
+				type: "checkbox",
+				checked: isSelected,
+				disabled: isDisabled,
+				onChange: handleChange,
+				"data-overlay": variant === "overlay",
+				"aria-invalid": invalid,
+				ref
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "charcoal-multi-select-overlay",
+				"data-overlay": variant === "overlay",
+				"aria-invalid": invalid,
+				"aria-hidden": true,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.default, {
+					name: "24/Check",
+					fixedSize: 16
+				})
+			}),
+			Boolean(children) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "charcoal-multi-select-label",
+				children
+			})
+		]
+	});
+});
+var MultiSelect_default = (0, react.memo)(MultiSelect);
+function MultiSelectGroup({ className, style, name, label, selected, onChange, disabled = false, readonly = false, invalid = false, children }) {
+	const handleChange = (0, react.useCallback)((payload) => {
+		const index = selected.indexOf(payload.value);
+		if (payload.selected) {
+			if (index < 0) onChange([...selected, payload.value]);
+		} else if (index >= 0) onChange([...selected.slice(0, index), ...selected.slice(index + 1)]);
+	}, [onChange, selected]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_context.MultiSelectGroupContext.Provider, {
+		value: {
+			name,
+			selected: Array.from(new Set(selected)),
+			disabled,
+			readonly,
+			invalid,
+			onChange: handleChange
+		},
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className,
+			style,
+			"aria-label": label,
+			"data-testid": "SelectGroup",
+			children
+		})
+	});
+}
+
+//#endregion
+exports.MultiSelectGroup = MultiSelectGroup;
+exports.default = MultiSelect_default;
+//# sourceMappingURL=index2.cjs.map

package/dist/components/MultiSelect/index2.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.cjs","names":["ChangeEvent","useCallback","useContext","forwardRef","memo","React","warning","MultiSelectGroupContext","Icon","useClassNames","MultiSelectProps","PropsWithChildren","value","disabled","variant","className","onChange","payload","selected","MultiSelect","HTMLInputElement","MultiSelectInner","children","ref","name","parentDisabled","readonly","invalid","parentOnChange","undefined","isSelected","includes","isDisabled","handleChange","event","currentTarget","checked","classNames","Boolean","MultiSelectGroupProps","style","CSSProperties","label","MultiSelectGroup","index","indexOf","slice","Array","from","Set"],"sources":["../../../src/components/MultiSelect/index.tsx"],"sourcesContent":["import { ChangeEvent, useCallback, useContext, forwardRef, memo } from 'react'\nimport * as React from 'react'\nimport warning from 'warning'\n\nimport { MultiSelectGroupContext } from './context'\nimport Icon from '../Icon'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport './index.css'\n\nexport type MultiSelectProps = React.PropsWithChildren<{\n  value: string\n  disabled?: boolean\n  variant?: 'default' | 'overlay'\n  className?: string\n  onChange?: (payload: { value: string; selected: boolean }) => void\n}>\n\nconst MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(\n  function MultiSelectInner(\n    {\n      value,\n      disabled = false,\n      onChange,\n      variant = 'default',\n      className,\n      children,\n    },\n    ref,\n  ) {\n    const {\n      name,\n      selected,\n      disabled: parentDisabled,\n      readonly,\n      invalid,\n      onChange: parentOnChange,\n    } = useContext(MultiSelectGroupContext)\n\n    warning(\n      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n      name !== undefined,\n      `\"name\" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`,\n    )\n\n    const isSelected = selected.includes(value)\n    const isDisabled = disabled || parentDisabled || readonly\n\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => {\n        if (!(event.currentTarget instanceof HTMLInputElement)) {\n          return\n        }\n        if (onChange) onChange({ value, selected: event.currentTarget.checked })\n        parentOnChange({ value, selected: event.currentTarget.checked })\n      },\n      [onChange, parentOnChange, value],\n    )\n    const classNames = useClassNames('charcoal-multi-select', className)\n    return (\n      <label aria-disabled={isDisabled} className={classNames}>\n        <input\n          className=\"charcoal-multi-select-input\"\n          name={name}\n          value={value}\n          type=\"checkbox\"\n          checked={isSelected}\n          disabled={isDisabled}\n          onChange={handleChange}\n          data-overlay={variant === 'overlay'}\n          aria-invalid={invalid}\n          ref={ref}\n        />\n        <div\n          className=\"charcoal-multi-select-overlay\"\n          data-overlay={variant === 'overlay'}\n          aria-invalid={invalid}\n          aria-hidden\n        >\n          <Icon name=\"24/Check\" fixedSize={16} />\n        </div>\n        {Boolean(children) && (\n          <div className=\"charcoal-multi-select-label\">{children}</div>\n        )}\n      </label>\n    )\n  },\n)\n\nexport default memo(MultiSelect)\n\nexport type MultiSelectGroupProps = React.PropsWithChildren<{\n  className?: string\n  style?: React.CSSProperties\n  name: string\n  label: string\n  selected: string[]\n  onChange: (selected: string[]) => void\n  disabled?: boolean\n  readonly?: boolean\n  invalid?: boolean\n}>\n\nexport function MultiSelectGroup({\n  className,\n  style,\n  name,\n  label,\n  selected,\n  onChange,\n  disabled = false,\n  readonly = false,\n  invalid = false,\n  children,\n}: MultiSelectGroupProps) {\n  const handleChange = useCallback(\n    (payload: { value: string; selected: boolean }) => {\n      const index = selected.indexOf(payload.value)\n\n      if (payload.selected) {\n        if (index < 0) {\n          onChange([...selected, payload.value])\n        }\n      } else {\n        if (index >= 0) {\n          onChange([...selected.slice(0, index), ...selected.slice(index + 1)])\n        }\n      }\n    },\n    [onChange, selected],\n  )\n\n  return (\n    <MultiSelectGroupContext.Provider\n      value={{\n        name,\n        selected: Array.from(new Set(selected)),\n        disabled,\n        readonly,\n        invalid,\n        onChange: handleChange,\n      }}\n    >\n      <div\n        className={className}\n        style={style}\n        aria-label={label}\n        data-testid=\"SelectGroup\"\n      >\n        {children}\n      </div>\n    </MultiSelectGroupContext.Provider>\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAMmB,oCACJ,SAASE,iBACP,EACET,OACAC,WAAW,OACXG,UACAF,UAAU,WACVC,WACAO,YAEFC,KACA;CACA,MAAM,EACJC,MACAN,UACAL,UAAUY,gBACVC,UACAC,SACAX,UAAUY,yCACGrB,wCAAwB;CAEvCD,qBAEEkB,SAASK,QACT,iGACD;CAED,MAAMC,aAAaZ,SAASa,SAASnB,MAAM;CAC3C,MAAMoB,aAAanB,YAAYY,kBAAkBC;CAEjD,MAAMO,uCACHC,UAAyC;EACxC,IAAI,EAAEA,MAAMC,yBAAyBf,mBACnC;EAEF,IAAIJ,UAAUA,SAAS;GAAEJ;GAAOM,UAAUgB,MAAMC,cAAcC;GAAS,CAAC;EACxER,eAAe;GAAEhB;GAAOM,UAAUgB,MAAMC,cAAcC;GAAS,CAAC;IAElE;EAACpB;EAAUY;EAAgBhB;EAC7B,CAAC;CAED,OACE,4CAAC,SAAD;EAAO,iBAAeoB;EAAY,WAFjBvB,oCAAc,yBAAyBM,UAED;YAAvD;GACE,2CAAC,SAAD;IACE,WAAU;IACJS;IACCZ;IACP,MAAK;IACL,SAASkB;IACT,UAAUE;IACV,UAAUC;IACV,gBAAcnB,YAAY;IAC1B,gBAAca;IACTJ;IAAI;GAEX,2CAAC,OAAD;IACE,WAAU;IACV,gBAAcT,YAAY;IAC1B,gBAAca;IACd;cAEA,2CAAC,uBAAD;KAAM,MAAK;KAAW,WAAW;KAAG;IACjC;GACJW,QAAQhB,SAAS,IAChB,2CAAC,OAAD;IAAK,WAAU;IAA+BA;IAC/C;GACK;;EAGb;AAED,0CAAoBH,YAAY;AAchC,SAAgBwB,iBAAiB,EAC/B5B,WACAyB,OACAhB,MACAkB,OACAxB,UACAF,UACAH,WAAW,OACXa,WAAW,OACXC,UAAU,OACVL,YACwB;CACxB,MAAMW,uCACHhB,YAAkD;EACjD,MAAM2B,QAAQ1B,SAAS2B,QAAQ5B,QAAQL,MAAM;EAE7C,IAAIK,QAAQC,UACV;OAAI0B,QAAQ,GACV5B,SAAS,CAAC,GAAGE,UAAUD,QAAQL,MAAM,CAAC;SAGxC,IAAIgC,SAAS,GACX5B,SAAS,CAAC,GAAGE,SAAS4B,MAAM,GAAGF,MAAM,EAAE,GAAG1B,SAAS4B,MAAMF,QAAQ,EAAE,CAAC,CAAC;IAI3E,CAAC5B,UAAUE,SACb,CAAC;CAED,OACE,2CAAC,wCAAwB,UAAzB;EACE,OAAO;GACLM;GACAN,UAAU6B,MAAMC,KAAK,IAAIC,IAAI/B,SAAS,CAAC;GACvCL;GACAa;GACAC;GACAX,UAAUiB;GACX;YAED,2CAAC,OAAD;GACalB;GACJyB;GACP,cAAYE;GACZ,eAAY;GAEXpB;GACE;EAC4B"}

package/dist/components/MultiSelect/index2.js

@@ -0,0 +1,93 @@
+"use client";
+import { useClassNames } from "../../_lib/useClassNames.js";
+import { MultiSelectGroupContext } from "./context.js";
+import Icon from "../Icon/index.js";
+/* empty css      */
+import { forwardRef, memo, useCallback, useContext } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import warning from "warning";
+
+//#region src/components/MultiSelect/index.tsx
+const MultiSelect = forwardRef(function MultiSelectInner({ value, disabled = false, onChange, variant = "default", className, children }, ref) {
+	const { name, selected, disabled: parentDisabled, readonly, invalid, onChange: parentOnChange } = useContext(MultiSelectGroupContext);
+	warning(name !== void 0, `"name" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`);
+	const isSelected = selected.includes(value);
+	const isDisabled = disabled || parentDisabled || readonly;
+	const handleChange = useCallback((event) => {
+		if (!(event.currentTarget instanceof HTMLInputElement)) return;
+		if (onChange) onChange({
+			value,
+			selected: event.currentTarget.checked
+		});
+		parentOnChange({
+			value,
+			selected: event.currentTarget.checked
+		});
+	}, [
+		onChange,
+		parentOnChange,
+		value
+	]);
+	return /* @__PURE__ */ jsxs("label", {
+		"aria-disabled": isDisabled,
+		className: useClassNames("charcoal-multi-select", className),
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				className: "charcoal-multi-select-input",
+				name,
+				value,
+				type: "checkbox",
+				checked: isSelected,
+				disabled: isDisabled,
+				onChange: handleChange,
+				"data-overlay": variant === "overlay",
+				"aria-invalid": invalid,
+				ref
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: "charcoal-multi-select-overlay",
+				"data-overlay": variant === "overlay",
+				"aria-invalid": invalid,
+				"aria-hidden": true,
+				children: /* @__PURE__ */ jsx(Icon, {
+					name: "24/Check",
+					fixedSize: 16
+				})
+			}),
+			Boolean(children) && /* @__PURE__ */ jsx("div", {
+				className: "charcoal-multi-select-label",
+				children
+			})
+		]
+	});
+});
+var MultiSelect_default = memo(MultiSelect);
+function MultiSelectGroup({ className, style, name, label, selected, onChange, disabled = false, readonly = false, invalid = false, children }) {
+	const handleChange = useCallback((payload) => {
+		const index = selected.indexOf(payload.value);
+		if (payload.selected) {
+			if (index < 0) onChange([...selected, payload.value]);
+		} else if (index >= 0) onChange([...selected.slice(0, index), ...selected.slice(index + 1)]);
+	}, [onChange, selected]);
+	return /* @__PURE__ */ jsx(MultiSelectGroupContext.Provider, {
+		value: {
+			name,
+			selected: Array.from(new Set(selected)),
+			disabled,
+			readonly,
+			invalid,
+			onChange: handleChange
+		},
+		children: /* @__PURE__ */ jsx("div", {
+			className,
+			style,
+			"aria-label": label,
+			"data-testid": "SelectGroup",
+			children
+		})
+	});
+}
+
+//#endregion
+export { MultiSelectGroup, MultiSelect_default as default };
+//# sourceMappingURL=index2.js.map

package/dist/components/MultiSelect/index2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index2.js","names":["ChangeEvent","useCallback","useContext","forwardRef","memo","React","warning","MultiSelectGroupContext","Icon","useClassNames","MultiSelectProps","PropsWithChildren","value","disabled","variant","className","onChange","payload","selected","MultiSelect","HTMLInputElement","MultiSelectInner","children","ref","name","parentDisabled","readonly","invalid","parentOnChange","undefined","isSelected","includes","isDisabled","handleChange","event","currentTarget","checked","classNames","Boolean","MultiSelectGroupProps","style","CSSProperties","label","MultiSelectGroup","index","indexOf","slice","Array","from","Set"],"sources":["../../../src/components/MultiSelect/index.tsx"],"sourcesContent":["import { ChangeEvent, useCallback, useContext, forwardRef, memo } from 'react'\nimport * as React from 'react'\nimport warning from 'warning'\n\nimport { MultiSelectGroupContext } from './context'\nimport Icon from '../Icon'\nimport { useClassNames } from '../../_lib/useClassNames'\nimport './index.css'\n\nexport type MultiSelectProps = React.PropsWithChildren<{\n  value: string\n  disabled?: boolean\n  variant?: 'default' | 'overlay'\n  className?: string\n  onChange?: (payload: { value: string; selected: boolean }) => void\n}>\n\nconst MultiSelect = forwardRef<HTMLInputElement, MultiSelectProps>(\n  function MultiSelectInner(\n    {\n      value,\n      disabled = false,\n      onChange,\n      variant = 'default',\n      className,\n      children,\n    },\n    ref,\n  ) {\n    const {\n      name,\n      selected,\n      disabled: parentDisabled,\n      readonly,\n      invalid,\n      onChange: parentOnChange,\n    } = useContext(MultiSelectGroupContext)\n\n    warning(\n      // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition\n      name !== undefined,\n      `\"name\" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`,\n    )\n\n    const isSelected = selected.includes(value)\n    const isDisabled = disabled || parentDisabled || readonly\n\n    const handleChange = useCallback(\n      (event: ChangeEvent<HTMLInputElement>) => {\n        if (!(event.currentTarget instanceof HTMLInputElement)) {\n          return\n        }\n        if (onChange) onChange({ value, selected: event.currentTarget.checked })\n        parentOnChange({ value, selected: event.currentTarget.checked })\n      },\n      [onChange, parentOnChange, value],\n    )\n    const classNames = useClassNames('charcoal-multi-select', className)\n    return (\n      <label aria-disabled={isDisabled} className={classNames}>\n        <input\n          className=\"charcoal-multi-select-input\"\n          name={name}\n          value={value}\n          type=\"checkbox\"\n          checked={isSelected}\n          disabled={isDisabled}\n          onChange={handleChange}\n          data-overlay={variant === 'overlay'}\n          aria-invalid={invalid}\n          ref={ref}\n        />\n        <div\n          className=\"charcoal-multi-select-overlay\"\n          data-overlay={variant === 'overlay'}\n          aria-invalid={invalid}\n          aria-hidden\n        >\n          <Icon name=\"24/Check\" fixedSize={16} />\n        </div>\n        {Boolean(children) && (\n          <div className=\"charcoal-multi-select-label\">{children}</div>\n        )}\n      </label>\n    )\n  },\n)\n\nexport default memo(MultiSelect)\n\nexport type MultiSelectGroupProps = React.PropsWithChildren<{\n  className?: string\n  style?: React.CSSProperties\n  name: string\n  label: string\n  selected: string[]\n  onChange: (selected: string[]) => void\n  disabled?: boolean\n  readonly?: boolean\n  invalid?: boolean\n}>\n\nexport function MultiSelectGroup({\n  className,\n  style,\n  name,\n  label,\n  selected,\n  onChange,\n  disabled = false,\n  readonly = false,\n  invalid = false,\n  children,\n}: MultiSelectGroupProps) {\n  const handleChange = useCallback(\n    (payload: { value: string; selected: boolean }) => {\n      const index = selected.indexOf(payload.value)\n\n      if (payload.selected) {\n        if (index < 0) {\n          onChange([...selected, payload.value])\n        }\n      } else {\n        if (index >= 0) {\n          onChange([...selected.slice(0, index), ...selected.slice(index + 1)])\n        }\n      }\n    },\n    [onChange, selected],\n  )\n\n  return (\n    <MultiSelectGroupContext.Provider\n      value={{\n        name,\n        selected: Array.from(new Set(selected)),\n        disabled,\n        readonly,\n        invalid,\n        onChange: handleChange,\n      }}\n    >\n      <div\n        className={className}\n        style={style}\n        aria-label={label}\n        data-testid=\"SelectGroup\"\n      >\n        {children}\n      </div>\n    </MultiSelectGroupContext.Provider>\n  )\n}\n"],"mappings":";;;;;;;;;;AAiBA,MAAMmB,cAAchB,WAClB,SAASkB,iBACP,EACET,OACAC,WAAW,OACXG,UACAF,UAAU,WACVC,WACAO,YAEFC,KACA;CACA,MAAM,EACJC,MACAN,UACAL,UAAUY,gBACVC,UACAC,SACAX,UAAUY,mBACR1B,WAAWK,wBAAwB;CAEvCD,QAEEkB,SAASK,QACT,iGACD;CAED,MAAMC,aAAaZ,SAASa,SAASnB,MAAM;CAC3C,MAAMoB,aAAanB,YAAYY,kBAAkBC;CAEjD,MAAMO,eAAehC,aAClBiC,UAAyC;EACxC,IAAI,EAAEA,MAAMC,yBAAyBf,mBACnC;EAEF,IAAIJ,UAAUA,SAAS;GAAEJ;GAAOM,UAAUgB,MAAMC,cAAcC;GAAS,CAAC;EACxER,eAAe;GAAEhB;GAAOM,UAAUgB,MAAMC,cAAcC;GAAS,CAAC;IAElE;EAACpB;EAAUY;EAAgBhB;EAC7B,CAAC;CAED,OACE,qBAAC,SAAD;EAAO,iBAAeoB;EAAY,WAFjBvB,cAAc,yBAAyBM,UAED;YAAvD;GACE,oBAAC,SAAD;IACE,WAAU;IACJS;IACCZ;IACP,MAAK;IACL,SAASkB;IACT,UAAUE;IACV,UAAUC;IACV,gBAAcnB,YAAY;IAC1B,gBAAca;IACTJ;IAAI;GAEX,oBAAC,OAAD;IACE,WAAU;IACV,gBAAcT,YAAY;IAC1B,gBAAca;IACd;cAEA,oBAAC,MAAD;KAAM,MAAK;KAAW,WAAW;KAAG;IACjC;GACJW,QAAQhB,SAAS,IAChB,oBAAC,OAAD;IAAK,WAAU;IAA+BA;IAC/C;GACK;;EAGb;AAED,0BAAelB,KAAKe,YAAY;AAchC,SAAgBwB,iBAAiB,EAC/B5B,WACAyB,OACAhB,MACAkB,OACAxB,UACAF,UACAH,WAAW,OACXa,WAAW,OACXC,UAAU,OACVL,YACwB;CACxB,MAAMW,eAAehC,aAClBgB,YAAkD;EACjD,MAAM2B,QAAQ1B,SAAS2B,QAAQ5B,QAAQL,MAAM;EAE7C,IAAIK,QAAQC,UACV;OAAI0B,QAAQ,GACV5B,SAAS,CAAC,GAAGE,UAAUD,QAAQL,MAAM,CAAC;SAGxC,IAAIgC,SAAS,GACX5B,SAAS,CAAC,GAAGE,SAAS4B,MAAM,GAAGF,MAAM,EAAE,GAAG1B,SAAS4B,MAAMF,QAAQ,EAAE,CAAC,CAAC;IAI3E,CAAC5B,UAAUE,SACb,CAAC;CAED,OACE,oBAAC,wBAAwB,UAAzB;EACE,OAAO;GACLM;GACAN,UAAU6B,MAAMC,KAAK,IAAIC,IAAI/B,SAAS,CAAC;GACvCL;GACAa;GACAC;GACAX,UAAUiB;GACX;YAED,oBAAC,OAAD;GACalB;GACJyB;GACP,cAAYE;GACZ,eAAY;GAEXpB;GACE;EAC4B"}

package/dist/components/Pagination/PaginationContext.cjs

@@ -0,0 +1,16 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+
+//#region src/components/Pagination/PaginationContext.ts
+const PaginationContext = (0, react.createContext)(null);
+function usePaginationContext() {
+	const context = (0, react.useContext)(PaginationContext);
+	if (context == null) throw new Error("Pagination components must be used within a Pagination component");
+	return context;
+}
+
+//#endregion
+exports.PaginationContext = PaginationContext;
+exports.usePaginationContext = usePaginationContext;
+//# sourceMappingURL=PaginationContext.cjs.map

package/dist/components/Pagination/PaginationContext.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationContext.cjs","names":["createContext","useContext","Size","PageRangeDisplayed","LinkComponentProps","href","className","children","React","ReactNode","PaginationContextValue","ElementType","page","pageCount","size","isLinkMode","makeUrl","LinkComponent","T","makeClickHandler","value","linkProps","Omit","ComponentPropsWithoutRef","PaginationContext","usePaginationContext","context","Error"],"sources":["../../../src/components/Pagination/PaginationContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport type Size = 'S' | 'M'\n\nexport type PageRangeDisplayed = 5 | 7\n\nexport type LinkComponentProps = {\n  href: string\n  className?: string\n  children?: React.ReactNode\n}\n\nexport type PaginationContextValue<T extends React.ElementType = 'a'> = {\n  page: number\n  pageCount: number\n  size: Size\n  isLinkMode: boolean\n  makeUrl?: (page: number) => string\n  LinkComponent: T\n  makeClickHandler: (value: number) => () => void\n  linkProps?: Omit<React.ComponentPropsWithoutRef<T>, 'href' | 'children'>\n}\n\nexport const PaginationContext = createContext<PaginationContextValue<\n  React.ElementType<LinkComponentProps>\n> | null>(null)\n\nexport function usePaginationContext<\n  T extends React.ElementType = 'a',\n>(): PaginationContextValue<T> {\n  const context = useContext(PaginationContext)\n  if (context == null) {\n    throw new Error(\n      'Pagination components must be used within a Pagination component',\n    )\n  }\n  return context as PaginationContextValue<T>\n}\n"],"mappings":";;;;;AAuBA,MAAawB,6CAEH,KAAK;AAEf,SAAgBC,uBAEe;CAC7B,MAAMC,gCAAqBF,kBAAkB;CAC7C,IAAIE,WAAW,MACb,MAAM,IAAIC,MACR,mEACD;CAEH,OAAOD"}

package/dist/components/Pagination/PaginationContext.js

@@ -0,0 +1,14 @@
+"use client";
+import { createContext, useContext } from "react";
+
+//#region src/components/Pagination/PaginationContext.ts
+const PaginationContext = createContext(null);
+function usePaginationContext() {
+	const context = useContext(PaginationContext);
+	if (context == null) throw new Error("Pagination components must be used within a Pagination component");
+	return context;
+}
+
+//#endregion
+export { PaginationContext, usePaginationContext };
+//# sourceMappingURL=PaginationContext.js.map

package/dist/components/Pagination/PaginationContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PaginationContext.js","names":["createContext","useContext","Size","PageRangeDisplayed","LinkComponentProps","href","className","children","React","ReactNode","PaginationContextValue","ElementType","page","pageCount","size","isLinkMode","makeUrl","LinkComponent","T","makeClickHandler","value","linkProps","Omit","ComponentPropsWithoutRef","PaginationContext","usePaginationContext","context","Error"],"sources":["../../../src/components/Pagination/PaginationContext.ts"],"sourcesContent":["import { createContext, useContext } from 'react'\n\nexport type Size = 'S' | 'M'\n\nexport type PageRangeDisplayed = 5 | 7\n\nexport type LinkComponentProps = {\n  href: string\n  className?: string\n  children?: React.ReactNode\n}\n\nexport type PaginationContextValue<T extends React.ElementType = 'a'> = {\n  page: number\n  pageCount: number\n  size: Size\n  isLinkMode: boolean\n  makeUrl?: (page: number) => string\n  LinkComponent: T\n  makeClickHandler: (value: number) => () => void\n  linkProps?: Omit<React.ComponentPropsWithoutRef<T>, 'href' | 'children'>\n}\n\nexport const PaginationContext = createContext<PaginationContextValue<\n  React.ElementType<LinkComponentProps>\n> | null>(null)\n\nexport function usePaginationContext<\n  T extends React.ElementType = 'a',\n>(): PaginationContextValue<T> {\n  const context = useContext(PaginationContext)\n  if (context == null) {\n    throw new Error(\n      'Pagination components must be used within a Pagination component',\n    )\n  }\n  return context as PaginationContextValue<T>\n}\n"],"mappings":";;;;AAuBA,MAAawB,oBAAoBxB,cAEvB,KAAK;AAEf,SAAgByB,uBAEe;CAC7B,MAAMC,UAAUzB,WAAWuB,kBAAkB;CAC7C,IAAIE,WAAW,MACb,MAAM,IAAIC,MACR,mEACD;CAEH,OAAOD"}

package/dist/components/Pagination/helper.cjs

@@ -0,0 +1,63 @@
+"use client";
+const require_runtime = require('../../_virtual/_rolldown/runtime.cjs');
+let react = require("react");
+let warning = require("warning");
+warning = require_runtime.__toESM(warning, 1);
+let react_compiler_runtime = require("react-compiler-runtime");
+
+//#region src/components/Pagination/helper.ts
+function usePaginationWindow(page, pageCount, t0) {
+	"use memo";
+	const $ = (0, react_compiler_runtime.c)(8);
+	if ($[0] !== "ba14feb6736cfb4c0d0d38e25b9e21619705224ad19f5dc886004a78f422b93d") {
+		for (let $i = 0; $i < 8; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "ba14feb6736cfb4c0d0d38e25b9e21619705224ad19f5dc886004a78f422b93d";
+	}
+	const pageRangeDisplayed = t0 === void 0 ? 7 : t0;
+	if (process.env.NODE_ENV !== "production") {
+		(0, warning.default)((page | 0) === page, `\`page\` must be integer (${page})`);
+		(0, warning.default)((pageCount | 0) === pageCount, `\`pageCount\` must be integer (${pageCount})`);
+		(0, warning.default)(pageRangeDisplayed === 5 || pageRangeDisplayed === 7, `\`pageRangeDisplayed\` must be 5 or 7 (${pageRangeDisplayed})`);
+	}
+	const visibleLastPage = Math.min(pageCount, Math.max(page + Math.floor(pageRangeDisplayed / 2), pageRangeDisplayed));
+	let t1;
+	if (visibleLastPage <= pageRangeDisplayed) {
+		let t2;
+		if ($[1] !== visibleLastPage) {
+			t2 = Array.from({ length: 1 + visibleLastPage - 1 }, _temp);
+			$[1] = visibleLastPage;
+			$[2] = t2;
+		} else t2 = $[2];
+		t1 = t2;
+	} else {
+		const start = visibleLastPage - (pageRangeDisplayed - 1) + 2;
+		let t2;
+		if ($[3] !== start || $[4] !== visibleLastPage) {
+			let t3;
+			if ($[6] !== start) {
+				t3 = (__0, i_0) => start + i_0;
+				$[6] = start;
+				$[7] = t3;
+			} else t3 = $[7];
+			t2 = [
+				1,
+				"...",
+				...Array.from({ length: 1 + visibleLastPage - start }, t3)
+			];
+			$[3] = start;
+			$[4] = visibleLastPage;
+			$[5] = t2;
+		} else t2 = $[5];
+		t1 = t2;
+	}
+	const window = t1;
+	(0, react.useDebugValue)(window);
+	return window;
+}
+function _temp(_, i) {
+	return 1 + i;
+}
+
+//#endregion
+exports.usePaginationWindow = usePaginationWindow;
+//# sourceMappingURL=helper.cjs.map

package/dist/components/Pagination/helper.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.cjs","names":["useDebugValue","warning","PageRangeDisplayed","usePaginationWindow","page","pageCount","t0","$","_c","$i","Symbol","for","pageRangeDisplayed","undefined","process","env","NODE_ENV","visibleLastPage","Math","min","max","floor","t1","t2","Array","from","length","_temp","start","t3","__0","i_0","i","const","window","_"],"sources":["../../../src/components/Pagination/helper.ts"],"sourcesContent":["import { useDebugValue } from 'react'\nimport warning from 'warning'\nimport type { PageRangeDisplayed } from './PaginationContext'\n\nexport function usePaginationWindow(\n  page: number,\n  pageCount: number,\n  pageRangeDisplayed: PageRangeDisplayed = 7,\n) {\n  'use memo'\n  // ページャーのリンク生成例:\n  //\n  //     < [ 1 ] [*2*] [ 3 ] [ 4 ] [ 5 ] [ 6 ] [ 7 ] >\n  //\n  //     < [ 1 ] [ 2 ] [ 3 ] [*4*] [ 5 ] [ 6 ] [ 7 ] >\n  //\n  //     < [ 1 ]  ...  [ 4 ] [*5*] [ 6 ] [ 7 ] [ 8 ] >\n  //\n  //     < [ 1 ]  ...  [ 99 ] [*100*] [ 101 ] [ 102 ] [ 103 ] >\n  //\n  //     < [ 1 ]  ...  [ 99 ] [ 100 ] [ 101 ] [ 102 ] [*103*]\n  //\n  //       [*1*] [ 2 ] >\n  //\n  // デザインの意図: 前後移動時のカーソル移動を最小限にする。\n\n  if (process.env.NODE_ENV !== 'production') {\n    warning((page | 0) === page, `\\`page\\` must be integer (${page})`)\n    warning(\n      (pageCount | 0) === pageCount,\n      `\\`pageCount\\` must be integer (${pageCount})`,\n    )\n    warning(\n      pageRangeDisplayed === 5 || pageRangeDisplayed === 7,\n      `\\`pageRangeDisplayed\\` must be 5 or 7 (${pageRangeDisplayed})`,\n    )\n  }\n\n  const visibleFirstPage = 1\n  const visibleLastPage = Math.min(\n    pageCount,\n    Math.max(page + Math.floor(pageRangeDisplayed / 2), pageRangeDisplayed),\n  )\n\n  const window = (() => {\n    if (visibleLastPage <= pageRangeDisplayed) {\n      // 表示範囲が1-7ページなら省略は無い。\n      return Array.from(\n        { length: 1 + visibleLastPage - visibleFirstPage },\n        (_, i) => visibleFirstPage + i,\n      )\n    } else {\n      const start = visibleLastPage - (pageRangeDisplayed - 1) + 2\n      // 表示範囲が1-7ページを超えるなら、\n      // - 1ページ目は固定で表示する\n      // - 2ページ目から現在のページの直前までは省略する\n      return [\n        visibleFirstPage,\n        '...' as const,\n        ...Array.from(\n          { length: 1 + visibleLastPage - start },\n          (_, i) => start + i,\n        ),\n      ]\n    }\n  })()\n\n  useDebugValue(window)\n\n  return window\n}\n"],"mappings":";;;;;;;;AAIA,SAAOG,oBAAAC,MAAAC,WAAAC,IAAA;AAAA;CAAA,MAAAC,kCAAA,EAAA;CAAA,IAAAA,EAAA,OAAA,oEAAA;EAAA,KAAA,IAAAE,KAAA,GAAAA,KAAA,GAAAA,MAAA,GAAAF,EAAAE,MAAAC,OAAAC,IAAA,4BAAA;EAAAJ,EAAA,KAAA;;CAGL,MAAAK,qBAAAN,OAAAO,SAAA,IAAAP;CAmBA,IAAIQ,QAAOC,IAAIC,aAAc,cAAY;EACvCf,sBAASG,OAAO,OAAOA,MAAM,6BAA6BA,KAAI,GAAI;EAClEH,sBACGI,YAAY,OAAOA,WACpB,kCAAkCA,UAAS,GAC5C;EACDJ,qBACEW,uBAAuB,KAAKA,uBAAuB,GACnD,0CAA0CA,mBAAkB,GAC7D;;CAIH,MAAAK,kBAAwBC,KAAIC,IAC1Bd,WACAa,KAAIE,IAAKhB,OAAOc,KAAIG,MAAOT,qBAAqB,EAAE,EAAEA,mBACtD,CAAC;CAAA,IAAAU;CAGC,IAAIL,mBAAmBL,oBAAkB;EAAA,IAAAW;EAAA,IAAAhB,EAAA,OAAAU,iBAAA;GAEhCM,KAAAC,MAAKC,KACV,EAAAC,QAAU,IAAIT,kBAVK,GAU+B,EAClDU,MACD;GAAApB,EAAA,KAAAU;GAAAV,EAAA,KAAAgB;SAAAA,KAAAhB,EAAA;EAHDe,KAAOC;QAGN;EAED,MAAAK,QAAcX,mBAAmBL,qBAAqB,KAAK;EAAC,IAAAW;EAAA,IAAAhB,EAAA,OAAAqB,SAAArB,EAAA,OAAAU,iBAAA;GAAA,IAAAY;GAAA,IAAAtB,EAAA,OAAAqB,OAAA;IASxDC,MAAAC,KAAAC,QAAUH,QAAQI;IAACzB,EAAA,KAAAqB;IAAArB,EAAA,KAAAsB;UAAAA,KAAAtB,EAAA;GALhBgB,KAAA;IAlBc;IAoBnB;IAAc,GACXC,MAAKC,KACN,EAAAC,QAAU,IAAIT,kBAAkBW,OAAO,EACvCC,GACD;IACF;GAAAtB,EAAA,KAAAqB;GAAArB,EAAA,KAAAU;GAAAV,EAAA,KAAAgB;SAAAA,KAAAhB,EAAA;EAPDe,KAAOC;;CAZX,MAAAW,SAAeZ;CAuBftB,yBAAckC,OAAO;CAAA,OAEdA;;AAjEF,SAAAP,MAAAQ,GAAAH,GAAA;CAAA,OAkCoB,IAWUA"}

package/dist/components/Pagination/helper.js

@@ -0,0 +1,61 @@
+"use client";
+import { useDebugValue } from "react";
+import warning from "warning";
+import { c } from "react-compiler-runtime";
+
+//#region src/components/Pagination/helper.ts
+function usePaginationWindow(page, pageCount, t0) {
+	"use memo";
+	const $ = c(8);
+	if ($[0] !== "ba14feb6736cfb4c0d0d38e25b9e21619705224ad19f5dc886004a78f422b93d") {
+		for (let $i = 0; $i < 8; $i += 1) $[$i] = Symbol.for("react.memo_cache_sentinel");
+		$[0] = "ba14feb6736cfb4c0d0d38e25b9e21619705224ad19f5dc886004a78f422b93d";
+	}
+	const pageRangeDisplayed = t0 === void 0 ? 7 : t0;
+	if (process.env.NODE_ENV !== "production") {
+		warning((page | 0) === page, `\`page\` must be integer (${page})`);
+		warning((pageCount | 0) === pageCount, `\`pageCount\` must be integer (${pageCount})`);
+		warning(pageRangeDisplayed === 5 || pageRangeDisplayed === 7, `\`pageRangeDisplayed\` must be 5 or 7 (${pageRangeDisplayed})`);
+	}
+	const visibleLastPage = Math.min(pageCount, Math.max(page + Math.floor(pageRangeDisplayed / 2), pageRangeDisplayed));
+	let t1;
+	if (visibleLastPage <= pageRangeDisplayed) {
+		let t2;
+		if ($[1] !== visibleLastPage) {
+			t2 = Array.from({ length: 1 + visibleLastPage - 1 }, _temp);
+			$[1] = visibleLastPage;
+			$[2] = t2;
+		} else t2 = $[2];
+		t1 = t2;
+	} else {
+		const start = visibleLastPage - (pageRangeDisplayed - 1) + 2;
+		let t2;
+		if ($[3] !== start || $[4] !== visibleLastPage) {
+			let t3;
+			if ($[6] !== start) {
+				t3 = (__0, i_0) => start + i_0;
+				$[6] = start;
+				$[7] = t3;
+			} else t3 = $[7];
+			t2 = [
+				1,
+				"...",
+				...Array.from({ length: 1 + visibleLastPage - start }, t3)
+			];
+			$[3] = start;
+			$[4] = visibleLastPage;
+			$[5] = t2;
+		} else t2 = $[5];
+		t1 = t2;
+	}
+	const window = t1;
+	useDebugValue(window);
+	return window;
+}
+function _temp(_, i) {
+	return 1 + i;
+}
+
+//#endregion
+export { usePaginationWindow };
+//# sourceMappingURL=helper.js.map

package/dist/components/Pagination/helper.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helper.js","names":["useDebugValue","warning","PageRangeDisplayed","usePaginationWindow","page","pageCount","t0","$","_c","$i","Symbol","for","pageRangeDisplayed","undefined","process","env","NODE_ENV","visibleLastPage","Math","min","max","floor","t1","t2","Array","from","length","_temp","start","t3","__0","i_0","i","const","window","_"],"sources":["../../../src/components/Pagination/helper.ts"],"sourcesContent":["import { useDebugValue } from 'react'\nimport warning from 'warning'\nimport type { PageRangeDisplayed } from './PaginationContext'\n\nexport function usePaginationWindow(\n  page: number,\n  pageCount: number,\n  pageRangeDisplayed: PageRangeDisplayed = 7,\n) {\n  'use memo'\n  // ページャーのリンク生成例:\n  //\n  //     < [ 1 ] [*2*] [ 3 ] [ 4 ] [ 5 ] [ 6 ] [ 7 ] >\n  //\n  //     < [ 1 ] [ 2 ] [ 3 ] [*4*] [ 5 ] [ 6 ] [ 7 ] >\n  //\n  //     < [ 1 ]  ...  [ 4 ] [*5*] [ 6 ] [ 7 ] [ 8 ] >\n  //\n  //     < [ 1 ]  ...  [ 99 ] [*100*] [ 101 ] [ 102 ] [ 103 ] >\n  //\n  //     < [ 1 ]  ...  [ 99 ] [ 100 ] [ 101 ] [ 102 ] [*103*]\n  //\n  //       [*1*] [ 2 ] >\n  //\n  // デザインの意図: 前後移動時のカーソル移動を最小限にする。\n\n  if (process.env.NODE_ENV !== 'production') {\n    warning((page | 0) === page, `\\`page\\` must be integer (${page})`)\n    warning(\n      (pageCount | 0) === pageCount,\n      `\\`pageCount\\` must be integer (${pageCount})`,\n    )\n    warning(\n      pageRangeDisplayed === 5 || pageRangeDisplayed === 7,\n      `\\`pageRangeDisplayed\\` must be 5 or 7 (${pageRangeDisplayed})`,\n    )\n  }\n\n  const visibleFirstPage = 1\n  const visibleLastPage = Math.min(\n    pageCount,\n    Math.max(page + Math.floor(pageRangeDisplayed / 2), pageRangeDisplayed),\n  )\n\n  const window = (() => {\n    if (visibleLastPage <= pageRangeDisplayed) {\n      // 表示範囲が1-7ページなら省略は無い。\n      return Array.from(\n        { length: 1 + visibleLastPage - visibleFirstPage },\n        (_, i) => visibleFirstPage + i,\n      )\n    } else {\n      const start = visibleLastPage - (pageRangeDisplayed - 1) + 2\n      // 表示範囲が1-7ページを超えるなら、\n      // - 1ページ目は固定で表示する\n      // - 2ページ目から現在のページの直前までは省略する\n      return [\n        visibleFirstPage,\n        '...' as const,\n        ...Array.from(\n          { length: 1 + visibleLastPage - start },\n          (_, i) => start + i,\n        ),\n      ]\n    }\n  })()\n\n  useDebugValue(window)\n\n  return window\n}\n"],"mappings":";;;;;;AAIA,SAAOG,oBAAAC,MAAAC,WAAAC,IAAA;AAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAD,EAAA,OAAA,oEAAA;EAAA,KAAA,IAAAE,KAAA,GAAAA,KAAA,GAAAA,MAAA,GAAAF,EAAAE,MAAAC,OAAAC,IAAA,4BAAA;EAAAJ,EAAA,KAAA;;CAGL,MAAAK,qBAAAN,OAAAO,SAAA,IAAAP;CAmBA,IAAIQ,QAAOC,IAAIC,aAAc,cAAY;EACvCf,SAASG,OAAO,OAAOA,MAAM,6BAA6BA,KAAI,GAAI;EAClEH,SACGI,YAAY,OAAOA,WACpB,kCAAkCA,UAAS,GAC5C;EACDJ,QACEW,uBAAuB,KAAKA,uBAAuB,GACnD,0CAA0CA,mBAAkB,GAC7D;;CAIH,MAAAK,kBAAwBC,KAAIC,IAC1Bd,WACAa,KAAIE,IAAKhB,OAAOc,KAAIG,MAAOT,qBAAqB,EAAE,EAAEA,mBACtD,CAAC;CAAA,IAAAU;CAGC,IAAIL,mBAAmBL,oBAAkB;EAAA,IAAAW;EAAA,IAAAhB,EAAA,OAAAU,iBAAA;GAEhCM,KAAAC,MAAKC,KACV,EAAAC,QAAU,IAAIT,kBAVK,GAU+B,EAClDU,MACD;GAAApB,EAAA,KAAAU;GAAAV,EAAA,KAAAgB;SAAAA,KAAAhB,EAAA;EAHDe,KAAOC;QAGN;EAED,MAAAK,QAAcX,mBAAmBL,qBAAqB,KAAK;EAAC,IAAAW;EAAA,IAAAhB,EAAA,OAAAqB,SAAArB,EAAA,OAAAU,iBAAA;GAAA,IAAAY;GAAA,IAAAtB,EAAA,OAAAqB,OAAA;IASxDC,MAAAC,KAAAC,QAAUH,QAAQI;IAACzB,EAAA,KAAAqB;IAAArB,EAAA,KAAAsB;UAAAA,KAAAtB,EAAA;GALhBgB,KAAA;IAlBc;IAoBnB;IAAc,GACXC,MAAKC,KACN,EAAAC,QAAU,IAAIT,kBAAkBW,OAAO,EACvCC,GACD;IACF;GAAAtB,EAAA,KAAAqB;GAAArB,EAAA,KAAAU;GAAAV,EAAA,KAAAgB;SAAAA,KAAAhB,EAAA;EAPDe,KAAOC;;CAZX,MAAAW,SAAeZ;CAuBftB,cAAckC,OAAO;CAAA,OAEdA;;AAjEF,SAAAP,MAAAQ,GAAAH,GAAA;CAAA,OAkCoB,IAWUA"}