@octanejs/select 0.1.1

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2022 Jed Watson
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,43 @@
+# @octanejs/select
+
+An Octane binding for [`react-select@5.10.2`](https://github.com/JedWatson/react-select/tree/052e864b4990a67c4ee416851c34d1eb7b58267b).
+
+## Installation
+
+```sh
+npm install @octanejs/select
+pnpm add @octanejs/select
+```
+
+The package preserves React Select's root, `base`, `async`, `animated`, `creatable`, and `async-creatable` entry points. Its default styles, component replacement contract, state management, asynchronous loading, creatable options, transitions, accessibility markup, keyboard/pointer/touch behavior, portals, and CSP nonce support are covered by executable React-oracle tests.
+
+```tsrx
+import Select from '@octanejs/select';
+
+const options = [
+	{ value: 'chocolate', label: 'Chocolate' },
+	{ value: 'strawberry', label: 'Strawberry' },
+	{ value: 'vanilla', label: 'Vanilla' },
+];
+
+export function FlavorPicker() {
+	return <Select options={options} />;
+}
+```
+
+The public API follows the pinned React package. Import optional variants through the equivalent subpaths:
+
+```ts
+import AsyncSelect from '@octanejs/select/async';
+import makeAnimated from '@octanejs/select/animated';
+import CreatableSelect from '@octanejs/select/creatable';
+import AsyncCreatableSelect from '@octanejs/select/async-creatable';
+```
+
+The animated entry point uses `@octanejs/transition-group`; consumers do not need to configure it separately.
+
+See [UPSTREAM.md](./UPSTREAM.md) for the exact source pin, public-surface crosswalk, retained upstream evidence, and verification commands.
+
+## License
+
+MIT. The pinned upstream notice is retained in [LICENSE](./LICENSE).

package/UPSTREAM.md

@@ -0,0 +1,66 @@
+# Upstream provenance
+
+This U1 audit targets the complete published `react-select` package, including
+all six JavaScript API entry points. It is not a proposal for an unstyled or
+headless subset.
+
+| Field | Pinned value |
+| --- | --- |
+| Package | `react-select@5.10.2` |
+| Supported upstream range | exactly `5.10.2` |
+| License | MIT |
+| npm integrity | `sha512-Z33nHdEFWq9tfnfVXaiM12rbJmk+QjFEztWLtmXqQhz6Al4UZZ9xc0wiatmGtUOCCnHN0WizL3tCMYRENX4rVQ==` |
+| npm SHA-1 | `8dffc69dfd7d74684d9613e6eb27204e3b99e127` |
+| Canonical tag object | `dd5ed998713af85f16c31c1f093d71d3c1e0e1bd` |
+| Canonical commit | `052e864b4990a67c4ee416851c34d1eb7b58267b` |
+| License SHA-256 | `d736dd18c7e53f88217fa2106c748f1a1687bb91d69a1f673fa685269402d784` |
+| Published files | 138 |
+| Published unpacked bytes | 725,500 |
+| Pristine React oracle | `react@16.14.0` and `react-dom@16.14.0` via `react-select-pristine-react` / `react-select-pristine-react-dom` |
+| Type oracle | `@types/react@19.2.17` and `@types/react-dom@19.2.3` (literal exact pins in `package.json`) for the required `tsc` lane against pinned `react-select@5.10.2` declarations |
+| Pristine Jest | `jest@25.5.4`, `jest-environment-jsdom@25.5.0`, `babel-jest@25.5.1` |
+| Pristine Testing Library | `@testing-library/react@12.1.4`, `@testing-library/jest-dom@6.9.1`, `@testing-library/user-event@10.4.1` |
+| Pristine Emotion | `@emotion/react@11.9.3`, `@emotion/jest@11.5.0`, `@emotion/cache@11.9.3` |
+
+The published API has root, `base`, `async`, `animated`, `creatable`, and
+`async-creatable` JavaScript entry points plus `package.json`. The canonical
+source boundary contains 61 files under `packages/select/src`, including
+five runtime test files, five snapshot artifacts, and 79 Jest cases at the
+pinned commit. The root package directly depends on `@emotion/react`,
+`@emotion/cache`, and `react-transition-group`.
+
+The MIT license permits copying, modifying, and distributing an Octane port as
+long as the copyright and permission notice are retained. The canonical package
+source, five Jest suites, five snapshots, package metadata, and license are
+preserved under `upstream/`. `upstream/SHA256SUMS` locks all 63 files
+byte-for-byte. Run `pnpm --filter @octanejs/select upstream:verify` to
+reject a changed, missing, or additional upstream artifact. The six public
+JavaScript entry points and all 20 runtime exports are tracked fail-closed in
+`audit/export-crosswalk.json`.
+
+## Public surface disposition
+
+| Entry point | Runtime exports | Octane disposition |
+| --- | --- | --- |
+| `react-select` | `default`, `NonceProvider`, `components`, `createFilter`, `defaultTheme`, `mergeStyles`, `useStateManager` | Ported and tested |
+| `react-select/base` | `default`, `defaultProps` | Ported and tested |
+| `react-select/async` | `default`, `useAsync` | Ported and tested |
+| `react-select/animated` | `default`, `Input`, `MultiValue`, `Placeholder`, `SingleValue`, `ValueContainer` | Ported and tested through `@octanejs/transition-group` |
+| `react-select/creatable` | `default`, `useCreatable` | Ported and tested |
+| `react-select/async-creatable` | `default` | Ported and tested |
+
+The paired fixtures in `typetests/upstream.ts` and `typetests/local.ts` compile the same consumer-shaped public types against all six entry points of the pinned React package and the Octane port. `audit/type-parity.json` inventories their assertion groups, runs an executable structural comparison under the permitted import-root transforms, and the control tests reject skipped files, deleted assertions, and removed `@ts-expect-error` markers. A separate cross-environment fixture adds exact or bidirectional structural checks for shared pure value/action contracts and selected non-renderer members: core props, async and creatable configuration, imperative methods, plus component, style, class-name, and accessibility key sets. It is intentionally not described as an exhaustive value-signature proof for every exported declaration. Browser fixtures have a dedicated typecheck project so Vite cannot hide invalid type-only imports. Renderer-owned types deliberately substitute `OctaneNode`, native DOM events, and Octane style objects for ReactNode, synthetic events, and Emotion CSS objects; these consumer-visible adaptations are recorded in `status.json`, `audit/react-parity.json`, and fail-closed in `audit/export-crosswalk.json`. The crosswalk is verified against the actual pinned package exports so a new or removed upstream runtime export fails the repository gate.
+
+## Upstream test disposition
+
+The five canonical Jest suites and their snapshots are retained verbatim under `upstream/src/__tests__`. The required pristine Jest lane (`execution.kind: "jest-full"`) executes them unchanged against the vendored React source with the pinned React 16.14.0, Jest 25.5.x, Testing Library, and Emotion stack recorded above. It verifies 255 passing Jest identities and five snapshots; the three canonical upstream skips are inventoried as individually justified `not-applicable` dispositions in `audit/adaptation.json` (they are not counted as adapted evidence). The `select` project's narrowly owned `tests/upstream/**` lane runs all 255 pristine identities one-for-one across all five suites, including all five adapted snapshots, with `verification: verified` and zero pending adaptations. The other Octane tests remain ordinary repo-authored differential, SSR, browser, verifier, and crosswalk evidence:
+
+| Retained suite | Executable Octane evidence |
+| --- | --- |
+| `Select.test.tsx` | 186 adapted cases plus full Select SSR and Chromium behavior, styles/components, accessibility, forms, keyboard, mouse, touch, focus, placement, portals, and multi-value navigation |
+| `StateManaged.test.tsx` | All 37 cases adapted plus controlled/uncontrolled precedence, transitions, and callbacks in SSR and Chromium |
+| `Async.test.tsx` | All 9 cases adapted plus initial SSR state and broader async behavior in Chromium |
+| `Creatable.test.tsx` | All 18 cases adapted plus creation metadata, delegated creation, option placement, and suppression differentials |
+| `AsyncCreatable.test.tsx` | All 5 cases adapted plus composed async/creatable public contract and export coverage |
+
+`audit/adapted-runtime.json` inventories only the adapted upstream lane. `audit/test-classifications.json` classifies every authored test under `tests/`, including the five adapted upstream suites, so a missing disposition cannot stay green. Run `pnpm --filter @octanejs/select test` to verify the vendored pin, fail-closed export crosswalk, pristine upstream suite, and Octane runtime lanes; run `pnpm --filter @octanejs/select typecheck` for paired type evidence.

package/package.json

@@ -0,0 +1,89 @@
+{
+  "name": "@octanejs/select",
+  "version": "0.1.1",
+  "license": "MIT",
+  "type": "module",
+  "description": "React Select bindings for the Octane renderer.",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/octanejs/octane.git",
+    "directory": "packages/select"
+  },
+  "main": "src/index.ts",
+  "module": "src/index.ts",
+  "types": "src/index.ts",
+  "files": [
+    "src",
+    "README.md",
+    "UPSTREAM.md"
+  ],
+  "exports": {
+    ".": "./src/index.ts",
+    "./base": "./src/base.ts",
+    "./async": "./src/async.tsrx",
+    "./animated": "./src/animated/index.ts",
+    "./creatable": "./src/creatable.tsrx",
+    "./async-creatable": "./src/async-creatable.tsrx"
+  },
+  "dependencies": {
+    "@emotion/cache": "11.9.3",
+    "@emotion/serialize": "1.1.0",
+    "@emotion/utils": "1.2.0",
+    "@floating-ui/dom": "1.8.0",
+    "memoize-one": "6.0.0",
+    "@octanejs/transition-group": "0.0.16"
+  },
+  "peerDependencies": {
+    "octane": "0.1.50"
+  },
+  "devDependencies": {
+    "@babel/core": "7.19.6",
+    "@babel/plugin-proposal-class-properties": "7.18.6",
+    "@babel/plugin-proposal-private-methods": "7.18.6",
+    "@babel/plugin-transform-runtime": "7.14.3",
+    "@babel/preset-env": "7.19.4",
+    "@babel/preset-react": "7.18.6",
+    "@babel/preset-typescript": "7.18.6",
+    "@babel/runtime": "7.19.4",
+    "@emotion/babel-plugin": "11.10.2",
+    "@emotion/jest": "11.5.0",
+    "@emotion/react": "11.9.3",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "12.1.4",
+    "@testing-library/user-event": "10.4.1",
+    "@types/react": "19.2.17",
+    "@types/react-dom": "19.2.3",
+    "@tsrx/react": "^0.2.61",
+    "babel-jest": "25.5.1",
+    "happy-dom": "^20.11.0",
+    "jest": "25.5.4",
+    "jest-environment-jsdom": "25.5.0",
+    "jest-in-case": "1.0.2",
+    "playwright": "^1.61.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "react-select": "5.10.2",
+    "react-select-pristine-react": "npm:react@16.14.0",
+    "react-select-pristine-react-dom": "npm:react-dom@16.14.0",
+    "use-isomorphic-layout-effect": "1.2.1",
+    "vite": "^8.1.5",
+    "vitest": "^4.1.10",
+    "octane": "0.1.50"
+  },
+  "engines": {
+    "node": ">=22.22.2"
+  },
+  "scripts": {
+    "test": "pnpm upstream:verify && pnpm crosswalk:verify && pnpm test:octane && pnpm test:pristine",
+    "test:octane": "vitest run --root ../.. --project select --project select-differential --project select-browser",
+    "test:pristine": "pnpm test:upstream",
+    "test:upstream": "jest --config tests/upstream-jest.config.cjs --rootDir upstream --runInBand --no-watchman",
+    "parity:inventory": "node ../../scripts/react-parity/react-select-runtime-inventory.mjs && node ../../scripts/react-parity/react-select-adaptation.mjs --write",
+    "typecheck": "tsrx-tsc --noEmit -p tsconfig.json && tsrx-tsc --noEmit -p tests/browser/tsconfig.json && tsrx-tsc --noEmit -p tests/upstream/tsconfig.json && tsrx-tsc --noEmit -p typetests/tsconfig.local.json && tsrx-tsc --noEmit -p typetests/tsconfig.compat.json && tsc --noEmit -p typetests/tsconfig.upstream.json",
+    "upstream:verify": "node scripts/verify-upstream.mjs",
+    "crosswalk:verify": "node scripts/verify-crosswalk.mjs"
+  }
+}

package/src/accessibility-types.ts

@@ -0,0 +1,70 @@
+import type {
+	ActionMeta,
+	GroupBase,
+	InitialInputFocusedActionMeta,
+	OnChangeValue,
+	Options,
+	OptionsOrGroups,
+} from './types';
+
+export type OptionContext = 'menu' | 'value';
+export type GuidanceContext = 'menu' | 'input' | 'value';
+export type AriaSelection<Option, IsMulti extends boolean> =
+	| InitialInputFocusedActionMeta<Option, IsMulti>
+	| (ActionMeta<Option> & {
+			value: OnChangeValue<Option, IsMulti>;
+			option?: Option;
+			options?: Options<Option>;
+	  });
+
+export interface AriaGuidanceProps {
+	'aria-label': string | undefined;
+	context: GuidanceContext;
+	isSearchable: boolean;
+	isMulti: boolean;
+	isDisabled: boolean | null;
+	tabSelectsValue: boolean;
+	isInitialFocus: boolean;
+}
+
+export type AriaOnChangeProps<Option, IsMulti extends boolean> = AriaSelection<Option, IsMulti> & {
+	label: string;
+	labels: string[];
+	isDisabled: boolean | null;
+};
+
+export interface AriaOnFilterProps {
+	inputValue: string;
+	resultsMessage: string;
+}
+
+export interface AriaOnFocusProps<Option, Group extends GroupBase<Option>> {
+	context: OptionContext;
+	focused: Option;
+	isDisabled: boolean;
+	isSelected: boolean;
+	label: string;
+	options: OptionsOrGroups<Option, Group>;
+	selectValue: Options<Option>;
+	isAppleDevice: boolean;
+}
+
+export type AriaGuidance = (props: AriaGuidanceProps) => string;
+export type AriaOnChange<Option, IsMulti extends boolean> = (
+	props: AriaOnChangeProps<Option, IsMulti>,
+) => string;
+export type AriaOnFilter = (props: AriaOnFilterProps) => string;
+export type AriaOnFocus<Option, Group extends GroupBase<Option> = GroupBase<Option>> = (
+	props: AriaOnFocusProps<Option, Group>,
+) => string;
+
+export interface AriaLiveMessages<
+	Option,
+	IsMulti extends boolean,
+	Group extends GroupBase<Option>,
+> {
+	guidance?: (props: AriaGuidanceProps) => string;
+	onChange?: (props: AriaOnChangeProps<Option, IsMulti>) => string;
+	onFilter?: (props: AriaOnFilterProps) => string;
+	onFocus?: (props: AriaOnFocusProps<Option, Group>) => string;
+}

package/src/animated/component-element.ts

@@ -0,0 +1,5 @@
+export function asComponentElement<Component extends (...args: never[]) => unknown>(
+	value: unknown,
+): ReturnType<Component> {
+	return value as ReturnType<Component>;
+}

package/src/animated/index.ts

@@ -0,0 +1,32 @@
+import memoize from 'memoize-one';
+import { defaultComponents, type SelectComponentsGeneric } from '../components.tsrx';
+import { animatedInput } from './input.tsrx';
+import { animatedMultiValue } from './multi-value.tsrx';
+import { animatedPlaceholder } from './placeholder.tsrx';
+import { animatedSingleValue } from './single-value.tsrx';
+import { animatedValueContainer } from './value-container.tsrx';
+
+function makeAnimated(
+	externalComponents: Partial<SelectComponentsGeneric> = {},
+): Partial<SelectComponentsGeneric> {
+	const components = defaultComponents({ components: externalComponents });
+	const { Input, MultiValue, Placeholder, SingleValue, ValueContainer, ...rest } = components;
+	return {
+		Input: animatedInput(Input),
+		MultiValue: animatedMultiValue(MultiValue),
+		Placeholder: animatedPlaceholder(Placeholder),
+		SingleValue: animatedSingleValue(SingleValue),
+		ValueContainer: animatedValueContainer(ValueContainer),
+		...rest,
+	};
+}
+
+const AnimatedComponents = makeAnimated();
+
+export const Input = AnimatedComponents.Input;
+export const MultiValue = AnimatedComponents.MultiValue;
+export const Placeholder = AnimatedComponents.Placeholder;
+export const SingleValue = AnimatedComponents.SingleValue;
+export const ValueContainer = AnimatedComponents.ValueContainer;
+
+export default memoize(makeAnimated);

package/src/animated/input.tsrx

@@ -0,0 +1,24 @@
+import type { TransitionProps } from '@octanejs/transition-group';
+import type { InputProps } from '../components.tsrx';
+import { asComponentElement } from './component-element';
+
+type InputComponent = typeof import('../components.tsrx').Input;
+type AnimatedTransitionProps =
+	Pick<TransitionProps, 'in' | 'onExited' | 'appear' | 'enter' | 'exit'>;
+export type AnimatedInputProps = InputProps & AnimatedTransitionProps;
+
+export function animatedInput(WrappedComponent: InputComponent): InputComponent {
+	function AnimatedInput(props: AnimatedInputProps) {
+		const {
+			in: _in,
+			onExited: _onExited,
+			appear: _appear,
+			enter: _enter,
+			exit: _exit,
+			...inputProps
+		} = props;
+		return asComponentElement<InputComponent>(createElement(WrappedComponent, inputProps));
+	}
+	return AnimatedInput;
+}
+import { createElement } from 'octane';

package/src/animated/multi-value.tsrx

@@ -0,0 +1,23 @@
+import type { TransitionProps } from '@octanejs/transition-group';
+import type { MultiValueProps } from '../components.tsrx';
+import { Collapse } from './transitions.tsrx';
+import { asComponentElement } from './component-element';
+
+type MultiValueComponent = typeof import('../components.tsrx').MultiValue;
+type AnimatedTransitionProps = Pick<TransitionProps, 'in' | 'onExited'>;
+export type AnimatedMultiValueProps = MultiValueProps & AnimatedTransitionProps;
+
+export function animatedMultiValue(WrappedComponent: MultiValueComponent): MultiValueComponent {
+	function AnimatedMultiValue(props: AnimatedMultiValueProps) {
+		const { in: inProp, onExited, ...multiValueProps } = props;
+		return asComponentElement<MultiValueComponent>(
+			createElement(
+				Collapse,
+				{ in: inProp, onExited },
+				createElement(WrappedComponent, { cropWithEllipsis: inProp, ...multiValueProps }),
+			),
+		);
+	}
+	return AnimatedMultiValue;
+}
+import { createElement } from 'octane';

package/src/animated/placeholder.tsrx

@@ -0,0 +1,19 @@
+import type { PlaceholderProps } from '../components.tsrx';
+import { collapseDuration, Fade } from './transitions.tsrx';
+import { asComponentElement } from './component-element';
+
+type PlaceholderComponent = typeof import('../components.tsrx').Placeholder;
+
+export function animatedPlaceholder(WrappedComponent: PlaceholderComponent): PlaceholderComponent {
+	function AnimatedPlaceholder(props: PlaceholderProps) {
+		return asComponentElement<PlaceholderComponent>(
+			createElement(Fade, {
+				component: WrappedComponent as never,
+				duration: props.isMulti ? collapseDuration : 1,
+				...props,
+			}),
+		);
+	}
+	return AnimatedPlaceholder;
+}
+import { createElement } from 'octane';

package/src/animated/single-value.tsrx

@@ -0,0 +1,18 @@
+import type { SingleValueProps } from '../components.tsrx';
+import { Fade } from './transitions.tsrx';
+import { asComponentElement } from './component-element';
+
+type SingleValueComponent = typeof import('../components.tsrx').SingleValue;
+
+export function animatedSingleValue(WrappedComponent: SingleValueComponent): SingleValueComponent {
+	function AnimatedSingleValue(props: SingleValueProps) {
+		return asComponentElement<SingleValueComponent>(
+			createElement(Fade, {
+				component: WrappedComponent as never,
+				...props,
+			}),
+		);
+	}
+	return AnimatedSingleValue;
+}
+import { createElement } from 'octane';

package/src/animated/transitions.tsrx

@@ -0,0 +1,90 @@
+import { useEffect, useRef, useState, type OctaneNode } from 'octane';
+import { Transition, type TransitionStatus } from '@octanejs/transition-group';
+
+type Component<Props> = (props: Props) => OctaneNode;
+
+interface FadeProps<Props> {
+	component: Component<Props>;
+	duration?: number;
+	in?: boolean;
+	onExited?: (node?: Element) => void;
+}
+
+export function Fade<Props extends Record<string, unknown>>(props: FadeProps<Props> & Props) @{
+	const {
+		component: Tag,
+		duration = 1,
+		in: inProp,
+		onExited: _onExited,
+		innerProps: rawConsumerInnerProps,
+		...componentProps
+	} = props;
+	const nodeRef = useRef<HTMLElement | null>(null);
+	const transition: Partial<Record<TransitionStatus, Record<string, string | number>>> = {
+		entering: { opacity: 0 },
+		entered: { opacity: 1, transition: `opacity ${duration}ms` },
+		exiting: { opacity: 0 },
+		exited: { opacity: 0 },
+	};
+	const consumerInnerProps = rawConsumerInnerProps as Record<string, unknown> | undefined;
+	const consumerStyle = (consumerInnerProps?.style ?? {}) as Record<string, unknown>;
+
+	<Transition mountOnEnter unmountOnExit in={inProp} timeout={duration} nodeRef={nodeRef}>
+		{(status: TransitionStatus) => <Tag
+			{...componentProps as unknown as Props}
+			innerProps={{
+				...consumerInnerProps,
+				style: { ...consumerStyle, ...transition[status] },
+				ref: nodeRef,
+			}}
+		/>}
+	</Transition>
+}
+
+export const collapseDuration = 260;
+
+interface CollapseProps {
+	children?: OctaneNode;
+	in?: boolean;
+	onExited?: (node?: Element) => void;
+}
+
+export function Collapse(props: CollapseProps) @{
+	const ref = useRef<HTMLDivElement | null>(null);
+	const [width, setWidth] = useState<number | 'auto'>('auto');
+
+	useEffect(() => {
+		const element = ref.current;
+		if (!element) return;
+		const frame = window.requestAnimationFrame(
+			() => setWidth(element.getBoundingClientRect().width),
+		);
+		return () => window.cancelAnimationFrame(frame);
+	}, []);
+
+	const styleFor = (status: TransitionStatus) => {
+		if (status === 'exiting') {
+			return { width: 0, transition: `width ${collapseDuration}ms ease-out` };
+		}
+		if (status === 'exited') return { width: 0 };
+		return { width };
+	};
+
+	<Transition
+		enter={false}
+		mountOnEnter
+		unmountOnExit
+		in={props.in}
+		onExited={() => {
+			if (ref.current) props.onExited?.(ref.current);
+		}}
+		timeout={collapseDuration}
+		nodeRef={ref}
+	>
+		{(status: TransitionStatus) =>
+			<div
+				ref={ref}
+				style={{ overflow: 'hidden', whiteSpace: 'nowrap', ...styleFor(status) }}
+			>{props.children}</div>}
+	</Transition>
+}

package/src/animated/value-container.tsrx

@@ -0,0 +1,96 @@
+import {
+	Children,
+	cloneElement,
+	createElement,
+	Fragment,
+	isValidElement,
+	useEffect,
+	useState,
+} from 'octane';
+import { TransitionGroup } from '@octanejs/transition-group';
+import type { ValueContainerProps } from '../components.tsrx';
+import { markInspectableValueChildren } from '../animated-registry.ts';
+import { asComponentElement } from './component-element';
+
+type ValueContainerComponent = typeof import('../components.tsrx').ValueContainer;
+
+function flattenKeyedChildren(children: unknown): unknown[] {
+	const flattened: unknown[] = [];
+	for (const child of Children.toArray(children)) {
+		if (isValidElement(child) && child.type === Fragment) {
+			for (const innerChild of Children.toArray(child.props.children)) {
+				flattened.push(
+					isValidElement(innerChild)
+						? cloneElement(innerChild, {
+								key: JSON.stringify([child.key, innerChild.key]),
+							})
+						: innerChild,
+				);
+			}
+			continue;
+		}
+		flattened.push(child);
+	}
+	return flattened;
+}
+
+export function animatedValueContainer(
+	WrappedComponent: ValueContainerComponent,
+): ValueContainerComponent {
+	function AnimatedValueContainer(props: ValueContainerProps) {
+		return asComponentElement<ValueContainerComponent>(
+			createElement(props.isMulti ? MultiValueContainer : TransitionGroup, {
+				component: WrappedComponent,
+				...props,
+				children: flattenKeyedChildren(props.children),
+			}),
+		);
+	}
+	return markInspectableValueChildren(AnimatedValueContainer);
+}
+
+interface MultiValueContainerProps extends ValueContainerProps {
+	component: ValueContainerComponent;
+}
+
+function MultiValueContainer(props: MultiValueContainerProps) @{
+	const { component, children, ...containerProps } = props;
+	const [displayFlex, setDisplayFlex] = useState(
+		props.isMulti && props.selectProps.controlShouldRenderValue && props.hasValue,
+	);
+	const [removingValue, setRemovingValue] = useState(false);
+
+	useEffect(() => {
+		if (props.hasValue && !displayFlex) setDisplayFlex(true);
+	}, [props.hasValue, displayFlex]);
+
+	useEffect(() => {
+		if (removingValue && !props.hasValue && displayFlex) setDisplayFlex(false);
+		setRemovingValue(false);
+	}, [removingValue, props.hasValue, displayFlex]);
+
+	const selectComponents = props.selectProps.components as Record<string, unknown>;
+	const mappedChildren = Children.toArray(children).map((child) => {
+		if (!isValidElement(child) || child.type !== selectComponents.MultiValue) {
+			if (isValidElement(child) && child.type === selectComponents.Placeholder && displayFlex) {
+				return null;
+			}
+			return child;
+		}
+		return cloneElement(child, { onExited: () => setRemovingValue(true) });
+	});
+	const innerProps = {
+		...props.innerProps,
+		style: {
+			...(props.innerProps?.style ?? {}) as Record<string, unknown>,
+			display: props.isMulti && props.hasValue || displayFlex ? 'flex' : 'grid',
+		},
+	};
+
+	<TransitionGroup
+		component={component}
+		{...containerProps}
+		innerProps={innerProps}
+		children={mappedChildren}
+	/>
+}

package/src/animated-registry.ts

@@ -0,0 +1,10 @@
+const inspectableValueChildren = Symbol.for('octane.react-select.inspectable-value-children');
+
+export function markInspectableValueChildren<T extends Function>(component: T): T {
+	Object.defineProperty(component, inspectableValueChildren, { value: true });
+	return component;
+}
+
+export function needsInspectableValueChildren(component: Function): boolean {
+	return (component as unknown as Record<PropertyKey, unknown>)[inspectableValueChildren] === true;
+}

package/src/async-creatable.tsrx

@@ -0,0 +1,30 @@
+import { Select, type SelectProps } from './select.tsrx';
+import { useAsync, type AsyncProps } from './use-async.tsrx';
+import {
+	useCreatable,
+	type CreatableAdditionalProps,
+	type CreatableBaseProps,
+} from './use-creatable.tsrx';
+import { useStateManager } from './use-state-manager.tsrx';
+import type { StateManagerProps } from './use-state-manager.tsrx';
+import type { GroupBase } from './types';
+
+export type AsyncCreatableProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>> =
+	AsyncProps<Option, IsMulti, Group> & CreatableAdditionalProps<Option, Group> & StateManagerProps<
+		Option,
+		IsMulti,
+		Group
+	>;
+
+function AsyncCreatableSelect<
+	Option = unknown,
+	IsMulti extends boolean = false,
+	Group extends GroupBase<Option> = GroupBase<Option>,
+>(props: AsyncCreatableProps<Option, IsMulti, Group>) @{
+	const asyncProps = useAsync<Option, IsMulti, Group>(props);
+	const stateProps = useStateManager<Option, IsMulti, Group>(asyncProps);
+	const creatableProps = useCreatable(stateProps as CreatableBaseProps<Option, IsMulti, Group>);
+	<Select {...creatableProps as SelectProps<Option, IsMulti, Group>} />
+}
+
+export default AsyncCreatableSelect;