react-animated-select 0.7.5 → 0.8.0

package/dist/utils.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx as i, jsxs as f } from "react/jsx-runtime";
+import { isValidElement as p, cloneElement as w } from "react";
+const C = {
+  XMark: ({ className: t = "", ...e }) => /* @__PURE__ */ i(
+    "svg",
+    {
+      className: t,
+      viewBox: "0 0 320 512",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      height: "1em",
+      width: "1em",
+      ...e,
+      children: /* @__PURE__ */ i("path", { d: "M310.6 361.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L160 301.3 54.6 406.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L114.7 256 9.4 150.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 210.7 265.4 105.4c12.5-12.5 32.8-12.5 45.3 0s12.5 32.8 0 45.3L205.3 256l105.3 105.4z" })
+    }
+  ),
+  ArrowUp: ({ className: t = "", ...e }) => /* @__PURE__ */ i(
+    "svg",
+    {
+      className: t,
+      viewBox: "0 0 448 512",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      height: "1em",
+      width: "1em",
+      ...e,
+      children: /* @__PURE__ */ i("path", { d: "M34.9 289.5l175.9-175.8c9.4-9.4 24.6-9.4 33.9 0L420.1 289.5c15.1 15.1 4.4 41-17 41H51.9c-21.4 0-32.1-25.9-17-41z" })
+    }
+  ),
+  Checkmark: ({ className: t = "", ...e }) => /* @__PURE__ */ i(
+    "svg",
+    {
+      className: t,
+      viewBox: "0 0 24 24",
+      fill: "currentColor",
+      "aria-hidden": "true",
+      height: "1em",
+      width: "1em",
+      ...e,
+      children: /* @__PURE__ */ i("path", { d: "M20.285 6.708a1 1 0 0 0-1.414-1.416l-9.192 9.192-4.243-4.244a1 1 0 1 0-1.414 1.416l5 5a1 1 0 0 0 1.414 0l9.849-9.948z" })
+    }
+  )
+}, $ = (t, e) => {
+  if (!t) return null;
+  const n = (r = {}) => ({
+    ...e,
+    ...r,
+    style: {
+      ...e?.style,
+      ...r?.style
+    }
+  });
+  return typeof t == "string" ? /* @__PURE__ */ i("img", { src: t, ...n(), className: m("rac-icon", e?.className), alt: "" }) : p(t) ? w(t, n(t.props)) : typeof t == "function" || typeof t == "object" && t.$$typeof ? /* @__PURE__ */ i(t, { ...n() }) : null;
+}, M = (t, e) => `${t}-${String(e).replace(/[^A-Za-z0-9-]/gu, (n) => `_${n.codePointAt(0).toString(36)}_`)}`, b = (t) => t ? "" : void 0, m = (t, e) => e ? `${t} ${e}` : t, L = (t, e, n) => t.jsx || (e && "original" in t ? e(t.original, { selected: n, disabled: !!t.disabled }) : null), j = /* @__PURE__ */ f("span", { className: "rac-dots", "aria-hidden": "true", children: [
+  /* @__PURE__ */ i("i", {}),
+  /* @__PURE__ */ i("i", {}),
+  /* @__PURE__ */ i("i", {})
+] }), v = (() => {
+  try {
+    return process.env.NODE_ENV !== "production";
+  } catch {
+    return !1;
+  }
+})(), d = /* @__PURE__ */ new Set(), z = (t, e) => {
+  !v || d.has(t) || (d.add(t), console.warn(`[react-animated-select] ${e}`));
+}, D = (t) => {
+  t?.stopPropagation(), t?.preventDefault();
+}, S = (t, e) => {
+  t?.currentTarget.contains(document.activeElement) && e.current?.focus();
+}, h = "(prefers-reduced-motion: reduce)", y = () => !!window.matchMedia?.(h).matches, N = (t) => {
+  const e = window.matchMedia?.(h);
+  return e?.addEventListener("change", t), () => e?.removeEventListener("change", t);
+}, A = (t, e, n, r, u, s) => {
+  if (!t || n === e.value) return;
+  const o = getComputedStyle(t), c = e.anim ? o.height : e.root;
+  e.anim?.cancel(), s && Object.assign(s.style, { height: `${n}px`, boxSizing: "border-box" }), e.root = o.height, s && Object.assign(s.style, { height: "", boxSizing: "" });
+  const g = !e.value || c === e.root || !t.animate || y();
+  if (e.value = n, e.anim = null, g) return;
+  const a = { overflow: "hidden", alignItems: "flex-start" }, l = e.anim = t.animate([{ ...a, height: c }, { ...a, height: e.root }], { duration: r, easing: u });
+  l.onfinish = () => {
+    e.anim === l && (e.anim = null);
+  };
+};
+export {
+  j as dots,
+  b as flag,
+  A as followHeight,
+  C as icons,
+  L as optionContent,
+  M as optionDomId,
+  y as reducedMotion,
+  S as refocus,
+  $ as renderIcon,
+  D as stopEvent,
+  z as warnOnce,
+  N as watchMotion,
+  m as withClass
+};

package/index.d.ts

@@ -1,4 +1,7 @@
-import {FC, FunctionComponent, ReactNode, CSSProperties, ElementType, Ref, FocusEvent, AriaAttributes} from 'react'
+import {FC, FunctionComponent, ReactNode, CSSProperties, ElementType, Ref, FocusEvent, KeyboardEvent, AriaAttributes} from 'react'
+
+/** Live region message: a template with {label} / {n}, or a function for plural forms. */
+export type LiveText = string | ((value: string | number) => string)
 
 export interface SelectTexts {
     empty: string
@@ -13,7 +16,21 @@ export interface SelectTexts {
     invalidOption: string
     disabledOption: string
     emptyGroup: string
+    /** State word in a group header's accessible name. Default `'expanded'`. */
+    groupOpen: string
+    /** State word in a group header's accessible name. Default `'collapsed'`. */
+    groupClosed: string
     list: string
+    /** Validation bubble text of an empty required Select; default: the browser's own. */
+    required?: string
+    /** Default `'Removed {label}'`. */
+    removed?: LiveText
+    /** Default `'Selection cleared'`. */
+    cleared?: LiveText
+    /** Default `'{n} selected'`. */
+    selected?: LiveText
+    /** Default `'{n} more options loaded'`. */
+    loaded?: LiveText
 }
 
 export type SelectIcon = ElementType | string | ReactNode | null | false
@@ -32,9 +49,13 @@ export interface SelectProps extends AriaAttributes {
     ref?: Ref<HTMLDivElement>
     children?: ReactNode
 
+    /** A dictionary's values are the options, keys ignored; a key named name/label/id/value makes it one option, options/group a group. Array items take no className/style (use <Option/>). */
     options?: any[] | Record<string, any>
+    /** undefined = uncontrolled; keep one mode, clear a controlled Select with null / [] (a switch warns in dev). */
     value?: any
+    /** Initial value of an uncontrolled Select; also the target of form.reset(), in both modes, with or without name. */
     defaultValue?: any
+    /** value: an array item as given (an object stays the whole object), an <Option/> as its `value`; a controlled value must have the shape of its source. */
     onChange?: (value: any, ids: any) => void
     multiple?: boolean
     childrenFirst?: boolean
@@ -46,11 +67,17 @@ export interface SelectProps extends AriaAttributes {
 
     open?: boolean
     onOpenChange?: (open: boolean) => void
+    /** false: no panel, a tag list: role="group" without the combobox ARIA, never opens, no arrow; chip deletion and clear keep working. Default true. */
+    popup?: boolean
     onFocus?: (e: FocusEvent<HTMLDivElement>) => void
     onBlur?: (e: FocusEvent<HTMLDivElement>) => void
+    /** Runs before the Select handles a key; event.preventDefault() makes the Select skip it. */
+    onKeyDown?: (event: KeyboardEvent<HTMLDivElement>) => void
 
     id?: string
     name?: string
+    /** Id of the owner <form>, like <select form="id">: submits and resets with it even when placed outside. */
+    form?: string
     required?: boolean
 
     hasMore?: boolean

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-animated-select",
-  "version": "0.7.5",
+  "version": "0.8.0",
   "type": "module",
   "author": {
     "name": "l1nway",
@@ -39,20 +39,20 @@
     "prepublishOnly": "npm run build"
   },
   "main": "./dist/index.cjs",
-  "module": "./dist/index.es.js",
+  "module": "./dist/index.js",
   "types": "./index.d.ts",
   "exports": {
     ".": {
       "import": {
         "types": "./index.d.ts",
-        "default": "./dist/index.es.js"
+        "default": "./dist/index.js"
       },
       "require": {
         "types": "./dist/index.d.cts",
         "default": "./dist/index.cjs"
       }
     },
-    "./style.css": "./dist/index.css",
+    "./style.css": "./dist/style.css",
     "./package.json": "./package.json"
   },
   "sideEffects": [

package/dist/index.css

@@ -1 +0,0 @@
-@layer rac.base,rac.theme;@property --rac-list-max-height{syntax: "<length>"; inherits: true; initial-value: 250px;}@layer rac.base{:root{--rac-row: 2em}.rac-select,.rac-options{--rac-duration-fast: calc(var(--rac-duration) * .5)}@media(prefers-reduced-motion:reduce){.rac-select,.rac-options{--rac-duration: 1ms !important}.rac-dots i{animation:none}}.rac-select{position:relative;display:flex;align-items:center;box-sizing:border-box;min-width:0;max-width:100%;cursor:pointer}.rac-select[aria-busy=true]{cursor:progress}.rac-select[aria-disabled=true]{cursor:not-allowed}.rac-select[aria-disabled=true][aria-busy=true]{cursor:wait}.rac-value{flex:1;min-width:0;min-height:var(--rac-row);display:flex;flex-wrap:wrap;align-items:center}.rac-title{max-width:calc(100% - .25px);white-space:nowrap}.rac-title,.rac-chip-text{min-width:0;overflow-x:clip;text-overflow:ellipsis}.rac-dots{display:inline-flex;gap:.17em;margin-inline-start:.25em}.rac-dots i{width:.25em;height:.25em;border-radius:50%;background:currentColor;animation:rac-blink 1.4s infinite both}.rac-dots i:nth-child(2){animation-delay:.2s}.rac-dots i:nth-child(3){animation-delay:.4s}.rac-clear,.rac-arrow{display:grid;place-items:center;align-self:center}.rac-clear,.rac-chip-del{padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}.rac-arrow,.rac-group-arrow{transition:rotate var(--rac-duration) var(--rac-ease)}.rac-select[data-placement=bottom]:not([aria-expanded=true]) .rac-arrow,.rac-select[data-placement=top][aria-expanded=true] .rac-arrow{rotate:180deg}.rac-icon{height:1em}.rac-input{position:absolute;inset:0;box-sizing:border-box;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;pointer-events:none}.rac-chip-slot{display:flex;align-items:center;max-width:100%}.rac-chip{position:relative;display:inline-flex;flex-shrink:0;align-items:center;box-sizing:border-box;max-width:inherit;white-space:nowrap;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;touch-action:pan-y}.rac-chip-del{position:absolute;flex-shrink:0;inset-inline-end:0;height:100%;display:grid;align-items:center}.rac-chip-del:disabled{cursor:inherit}.rac-select:is([data-deleting],[data-inline-delete]) .rac-chip-del{position:relative}.rac-spacer{flex-basis:100%;height:0;margin-inline-end:1px}.rac-options{box-sizing:border-box;z-index:2147483647}.rac-list{max-height:var(--rac-list-max-height);overflow-x:hidden;overflow-y:auto;scrollbar-gutter:stable;scroll-behavior:smooth}.rac-option{display:flex;justify-content:space-between;align-items:center;overflow-wrap:anywhere;cursor:pointer}.rac-option[aria-disabled=true]{cursor:not-allowed}.rac-option[data-error]{cursor:default}.rac-option[data-loading]{justify-content:start;align-items:baseline;cursor:wait}.rac-check{position:relative;display:flex;justify-content:center;align-items:center}.rac-check[data-default]{width:1em;height:1em;border:1px solid}.rac-checkmark{position:absolute;width:auto;height:1em;opacity:0;scale:0;transition:opacity var(--rac-duration) var(--rac-ease),scale var(--rac-duration) var(--rac-ease)}.rac-option[aria-selected=true] .rac-checkmark{opacity:1;scale:1}.rac-group{display:flex;justify-content:space-between;align-items:center;cursor:pointer}.rac-group[data-disabled]{cursor:not-allowed}.rac-group-arrow{display:grid}.rac-group[data-open]>.rac-group-arrow{rotate:180deg}@keyframes rac-blink{0%{opacity:.2}20%{opacity:1}to{opacity:.2}}}@layer rac.base,rac.theme;@layer rac.theme{:root{--rac-bg: color-mix(in srgb, Canvas 98%, CanvasText 2%);--rac-fg: CanvasText;--rac-danger: #e7000b;--rac-success: #4caf50}.rac-select,.rac-options{--rac-tint-1: color-mix(in srgb, var(--rac-fg) 5%, var(--rac-bg));--rac-tint-2: color-mix(in srgb, var(--rac-fg) 10%, var(--rac-bg));--rac-tint-3: color-mix(in srgb, var(--rac-fg) 20%, var(--rac-bg));--rac-muted: color-mix(in srgb, var(--rac-fg) 55%, var(--rac-bg))}.rac-select{padding:0 .5em;border:2px solid var(--rac-bg);background-color:var(--rac-bg);color:var(--rac-fg);transition:background-color var(--rac-duration) var(--rac-ease),border-color var(--rac-duration) var(--rac-ease),opacity var(--rac-duration) var(--rac-ease)}.rac-select:not([aria-disabled=true]):hover{background-color:var(--rac-tint-1)}.rac-select:not([aria-disabled=true],[data-error]):hover{border-color:var(--rac-tint-1)}.rac-select[aria-disabled=true]{opacity:.75}.rac-select[data-error]{border-color:var(--rac-danger)}.rac-select[aria-busy=true]:after{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(90deg,transparent,var(--rac-muted),transparent) 0 100% / 40% 2px no-repeat;animation:rac-busy 1.5s ease-in-out infinite;pointer-events:none}@media(prefers-reduced-motion:reduce){.rac-select[aria-busy=true]:after{animation:none;background-size:100% 2px}}:is(.rac-title,.rac-option)[data-bool=true]{color:var(--rac-success)}:is(.rac-title,.rac-option)[data-bool=false]{color:var(--rac-danger)}.rac-chip{min-height:calc(var(--rac-row) - .5em);margin-block:.25em;margin-inline-end:.5em;padding-inline:.25em;line-height:normal;background-color:var(--rac-tint-2);transition:background-color var(--rac-duration-fast) var(--rac-ease)}@media(hover:hover){.rac-chip:hover{background-color:var(--rac-tint-3)}}.rac-select[data-deleting] .rac-chip{background-color:color-mix(in srgb,var(--rac-danger) 15%,var(--rac-bg));animation:rac-shake .3s infinite}@media(prefers-reduced-motion:reduce){.rac-select[data-deleting] .rac-chip{animation:none}}.rac-chip-del{background-color:color-mix(in srgb,var(--rac-danger) 30%,var(--rac-bg));transition:color var(--rac-duration) var(--rac-ease),background-color var(--rac-duration) var(--rac-ease)}.rac-chip-del:hover{color:var(--rac-danger)}.rac-select:is([data-deleting],[data-inline-delete]) .rac-chip-del{background-color:transparent}.rac-list{background-color:var(--rac-bg);color:var(--rac-fg);scrollbar-color:var(--rac-tint-2) var(--rac-tint-1);scrollbar-width:thin;scroll-padding-block:.5em}.rac-option{gap:.5em;padding:.5em;transition:background-color var(--rac-duration-fast) var(--rac-ease)}.rac-option[data-highlighted]{background-color:var(--rac-tint-2)}.rac-option[aria-selected=true]{background-color:var(--rac-tint-3)}.rac-option[aria-selected=true][data-highlighted]{background-color:color-mix(in srgb,var(--rac-fg) 30%,var(--rac-bg))}.rac-option[aria-disabled=true]{color:var(--rac-muted)}.rac-option[data-invalid]{color:var(--rac-danger)}.rac-option[data-loading]{gap:0;color:var(--rac-muted)}.rac-option[data-error]{color:var(--rac-danger)}.rac-check{margin-inline-end:.2em}.rac-check[data-default]{border-color:var(--rac-muted)}.rac-group{padding:.5em;font-size:1.25em;font-weight:700;transition:background-color var(--rac-duration-fast) var(--rac-ease)}.rac-group[data-highlighted]{background-color:var(--rac-tint-2)}.rac-group[data-disabled]{color:var(--rac-muted)}.rac-group-items{padding-inline-start:1em}@keyframes rac-busy{0%{background-position-x:-100%}to{background-position-x:200%}}@keyframes rac-shake{0%{transform:rotate(0)}25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}to{transform:rotate(0)}}}