react-animated-select 0.8.0 → 0.8.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/base.css +1 -1
- package/dist/chip.cjs +1 -1
- package/dist/chip.css +1 -1
- package/dist/chip.js +81 -62
- package/dist/chipGeometry.cjs +1 -1
- package/dist/chipGeometry.js +31 -58
- package/dist/chipMotion.cjs +1 -0
- package/dist/chipMotion.js +85 -0
- package/dist/dropdownPosition.cjs +1 -1
- package/dist/dropdownPosition.js +86 -76
- package/dist/index.d.cts +13 -0
- package/dist/motion.cjs +1 -1
- package/dist/motion.js +88 -86
- package/dist/style.css +3 -3
- package/dist/theme.css +1 -1
- package/dist/trigger.cjs +1 -1
- package/dist/trigger.js +82 -77
- package/dist/useChipLayout.cjs +1 -1
- package/dist/useChipLayout.js +65 -66
- package/dist/useSelectBehavior.cjs +1 -1
- package/dist/useSelectBehavior.js +44 -46
- package/dist/utils.cjs +1 -1
- package/dist/utils.js +11 -11
- package/index.d.ts +13 -0
- package/package.json +1 -1
package/dist/base.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@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:not([aria-haspopup]){cursor:default}.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{min-width:0;max-width:calc(100% - .25px)
|
|
1
|
+
@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:not([aria-haspopup]){cursor:default}.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);box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center}.rac-title,.rac-pick{min-width:0;overflow-x:clip;white-space:nowrap;text-overflow:ellipsis}.rac-title{max-width:calc(100% - .25px)}.rac-value:has(.rac-pick){padding-block:calc((var(--rac-row) - 1lh) / 2)}.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{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:not([data-placement=top],[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-live{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}@media(any-pointer:coarse){.rac-clear{position:relative}.rac-arrow{pointer-events:none}.rac-clear:before{content:"";position:absolute;inset:min(0px,50% - 12px)}}.rac-options{box-sizing:border-box;z-index:2147483647;overflow:clip}.rac-options{opacity:var(--rac-visible, 1);transition:visibility 0s}.rac-options[data-offscreen]{visibility:hidden;transition:opacity var(--rac-duration) var(--rac-ease),visibility 0s var(--rac-duration)}.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}}}
|
package/dist/chip.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),t=require("react"),w=require("./state.cjs"),d=require("./utils.cjs"),M=require("./motion.cjs"),z=require("./trigger.cjs"),F=require("./chipGeometry.cjs"),J=require("./model.cjs"),K=require("./useChipLayout.cjs");;/* empty css */const L=(l,e)=>{const n=new Set(l.map(s=>s.id)),o=new Map(e.map(([s,f])=>[f.id,s])),c=e.filter(([,s])=>!n.has(s.id)),p=new Set(e.map(([s])=>s));return l.map(s=>{if(o.has(s.id))return[o.get(s.id),s];const f=c.findIndex(([,h])=>J.sameValue(h.original,s.original));if(f>=0)return[c.splice(f,1)[0][0],s];let u=s.id;for(;p.has(u);)u+="~";return p.add(u),[u,s]})},Q=l=>{const[e,n]=t.useState(()=>({chips:l,keyed:L(l,[])}));if(e.chips===l)return e.keyed;const o=L(l,e.keyed);return n({chips:l,keyed:o}),o},Z={position:"absolute",visibility:"hidden",pointerEvents:"none"},A=1,G=2,ee=600,se=10,Y=30,te=t.memo(function({element:e,deleting:n,locked:o,plain:c,last:p,chipStore:s,delGroup:f,settle:u}){const{selectRef:h,deleteInline:P,deleteAlways:g,icons:y,texts:k,valueAsOption:I,renderOption:S}=t.useContext(w.SelectConfigContext),m=!!y.remove,{setVisibility:E,setDeleting:T,removeOption:b}=t.useContext(w.SelectActionsContext),a=t.useRef({longPressTimer:null,longPress:!1,x:0,y:0}),v=t.useSyncExternalStore(s.subscribe,()=>{const{hoverId:r,swipedId:C}=s.get();return(r===e.id?A:0)|(C===e.id?G:0)},()=>0),N=!!(v&A),x=!!(v&G),O=t.useCallback(r=>{const{clientX:C,clientY:R}=r.touches[0];Object.assign(a.current,{x:C,y:R,longPress:!1}),clearTimeout(a.current.longPressTimer),m&&(a.current.longPressTimer=setTimeout(()=>{T(!0),a.current.longPress=!0,h.current?.focus(),E(!1),window.navigator.vibrate?.(50)},ee))},[m,T,E,h]),B=t.useCallback(r=>{const{clientX:C,clientY:R}=r.touches[0],D=a.current.x-C;Math.hypot(D,a.current.y-R)>se&&clearTimeout(a.current.longPressTimer),D>Y&&!x?s.set({hoverId:null,swipedId:e.id}):D<-Y&&x&&s.set({swipedId:null})},[e.id,x,s]),V=t.useCallback(r=>{clearTimeout(a.current.longPressTimer),a.current.longPress&&r.cancelable&&r.preventDefault(),a.current.longPress=!1},[]),H=t.useCallback(()=>s.set({hoverId:e.id,swipedId:null}),[e.id,s]),U=t.useCallback(()=>{s.get().hoverId===e.id&&s.set({hoverId:null})},[e.id,s]);t.useEffect(()=>()=>clearTimeout(a.current.longPressTimer),[]);const j=I&&!c?d.optionContent(e,S,!0):null,W=j?i.jsx("div",{className:"rac-option-jsx",children:j}):i.jsx("span",{className:c?"rac-pick":"rac-chip-text","data-last":d.flag(p),children:e.name||k.emptyOption}),q=t.useCallback(r=>{s.set({swipedId:null}),d.refocus(r,h),b(e.id),d.stopEvent(r)},[e.id,b,s,h]),X=t.useCallback(r=>{d.stopEvent(r),n&&q(r)},[n,q]),$=m&&!c&&(g||!o&&(N||x||n));return i.jsxs("div",{className:c?void 0:d.withClass("rac-chip",j&&e.className),style:j?e.style:void 0,"data-plain":d.flag(c),...!o&&{onTouchStart:O,onTouchMove:B,onTouchEnd:V,onTouchCancel:V,onMouseEnter:H,onMouseLeave:U,onClick:X},children:[W,i.jsx(M.Collapse,{"aria-label":`${k.remove} ${e.name??""}`.trim(),group:P&&!g&&!n?f:void 0,onEntered:u,onExited:u,onMouseDown:d.stopEvent,onClick:q,className:"rac-chip-del",disabled:o,tabIndex:-1,type:"button",in:$,as:"button",axis:"x",children:d.renderIcon(y.remove)})]})}),ne=t.memo(function({element:e,chipStore:n,settle:o,...c}){const p=t.useSyncExternalStore(n.subscribe,()=>n.get().breaks.includes(e.id),()=>!1);return i.jsxs(t.Fragment,{children:[i.jsx(M.Collapse,{className:"rac-chip-slot",onEntered:o,onExited:o,unmountOnExit:!1,"data-id":e.id,axis:"x",fade:!0,children:i.jsx(te,{element:e,chipStore:n,settle:o,...c})}),p&&i.jsx("div",{className:"rac-spacer"})]})});class oe extends t.Component{getSnapshotBeforeUpdate(e){const n=e.look!==this.props.look;return(n||e.chips!==this.props.chips||e.dress!==this.props.dress)&&this.props.take(n),null}componentDidUpdate(){}render(){return null}}const _=t.memo(function(e){const{selectedText:n,icons:o}=t.useContext(w.SelectConfigContext),{selectedIDs:c,deleting:p,active:s}=t.useContext(w.SelectStateContext),f=c.length>0&&!n,u=f?c:F.NONE,{chipStore:h,delGroup:P,valueRef:g,delIconRef:y,probe:k,settle:I,held:S,snapshot:m,look:E,dress:T,plain:b,wait:a}=K.default(u,e),v=Q(u);return i.jsxs("div",{className:"rac-value",ref:g,children:[i.jsx(oe,{chips:u,look:E,dress:T,take:m}),i.jsx(z.Title,{hidden:f,settle:I}),i.jsx(M.Presence,{hold:S,wait:a,children:v.map(([N,x],O)=>i.jsx(ne,{element:x,deleting:p,locked:!s,plain:b,last:b&&O===v.length-1,chipStore:h,delGroup:P,settle:I},N))}),k&&i.jsx("button",{type:"button",className:"rac-chip-del",tabIndex:-1,"aria-hidden":"true",ref:y,style:Z,children:d.renderIcon(o.remove)})]})}),re={Value:_};exports.ChipsValue=_;exports.chips=re;
|
package/dist/chip.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer rac.base,rac.theme;@layer rac.base{.rac-chip-slot{display:flex;align-items:center;max-width:100%}.rac-chip-text,.rac-chip>.rac-option-jsx{min-width:0;overflow-x:clip}.rac-chip-text{text-overflow:ellipsis}.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;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}.rac-chip-del:disabled{cursor:inherit}.rac-select:is([data-deleting],[data-inline-delete]) .rac-chip-del{position:relative}@media(any-pointer:coarse){.rac-chip-del:before{content:"";position:absolute;inset:min(0px,50% - 12px)}}.rac-spacer{flex-basis:100%;height:0;margin-inline-end:1px}}@layer rac.theme{.rac-chip{min-height:calc(var(--rac-row) - .5em);margin-block:.25em;margin-inline-end:.5em;padding-inline:.25em;border-radius:calc(var(--rac-radius) / 2);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{border-start-end-radius:inherit;border-end-end-radius:inherit;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}@keyframes rac-shake{0%{transform:rotate(0)}25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}to{transform:rotate(0)}}}
|
|
1
|
+
@layer rac.base,rac.theme;@layer rac.base{.rac-chip-slot{display:flex;align-items:center;max-width:100%}.rac-chip-text,.rac-chip>.rac-option-jsx{min-width:0;overflow-x:clip}.rac-chip-text{text-overflow:ellipsis}.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;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}.rac-chip-del:disabled{cursor:inherit}.rac-select:is([data-deleting],[data-inline-delete]) .rac-chip-del{position:relative}@media(any-pointer:coarse){.rac-chip-del:before{content:"";position:absolute;inset:min(0px,50% - 12px)}}.rac-chip-slot>[data-plain]{display:flex;flex-shrink:0;align-items:center;max-width:inherit}.rac-chip-slot [data-sep]:after{content:var(--rac-sep)}.rac-spacer{flex-basis:100%;height:0;margin-inline-end:1px}}@layer rac.theme{.rac-chip{min-height:calc(var(--rac-row) - .5em);margin-block:.25em;margin-inline-end:.5em;padding-inline:.25em;border-radius:calc(var(--rac-radius) / 2);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{border-start-end-radius:inherit;border-end-end-radius:inherit;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}@keyframes rac-shake{0%{transform:rotate(0)}25%{transform:rotate(-1deg)}75%{transform:rotate(1deg)}to{transform:rotate(0)}}}
|
package/dist/chip.js
CHANGED
|
@@ -1,75 +1,94 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsxs as
|
|
3
|
-
import { memo as
|
|
4
|
-
import { SelectConfigContext as
|
|
5
|
-
import { renderIcon as
|
|
6
|
-
import { Presence as
|
|
7
|
-
import { Title as
|
|
8
|
-
import { NONE as
|
|
9
|
-
import
|
|
2
|
+
import { jsxs as V, jsx as l } from "react/jsx-runtime";
|
|
3
|
+
import { memo as A, useContext as w, useState as Z, Component as ee, useSyncExternalStore as U, Fragment as se, useRef as te, useCallback as p, useEffect as ne } from "react";
|
|
4
|
+
import { SelectConfigContext as W, SelectStateContext as oe, SelectActionsContext as re } from "./state.js";
|
|
5
|
+
import { renderIcon as X, optionContent as ie, flag as Y, refocus as ce, stopEvent as L, withClass as ae } from "./utils.js";
|
|
6
|
+
import { Presence as le, Collapse as $ } from "./motion.js";
|
|
7
|
+
import { Title as de } from "./trigger.js";
|
|
8
|
+
import { NONE as ue } from "./chipGeometry.js";
|
|
9
|
+
import { sameValue as fe } from "./model.js";
|
|
10
|
+
import pe from "./useChipLayout.js";
|
|
10
11
|
import './chip.css';/* empty css */
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
12
|
+
const _ = (c, e) => {
|
|
13
|
+
const t = new Set(c.map((s) => s.id)), n = new Map(e.map(([s, d]) => [d.id, s])), r = e.filter(([, s]) => !t.has(s.id)), u = new Set(e.map(([s]) => s));
|
|
14
|
+
return c.map((s) => {
|
|
15
|
+
if (n.has(s.id)) return [n.get(s.id), s];
|
|
16
|
+
const d = r.findIndex(([, f]) => fe(f.original, s.original));
|
|
17
|
+
if (d >= 0) return [r.splice(d, 1)[0][0], s];
|
|
18
|
+
let a = s.id;
|
|
19
|
+
for (; u.has(a); ) a += "~";
|
|
20
|
+
return u.add(a), [a, s];
|
|
21
|
+
});
|
|
22
|
+
}, me = (c) => {
|
|
23
|
+
const [e, t] = Z(() => ({ chips: c, keyed: _(c, []) }));
|
|
24
|
+
if (e.chips === c) return e.keyed;
|
|
25
|
+
const n = _(c, e.keyed);
|
|
26
|
+
return t({ chips: c, keyed: n }), n;
|
|
27
|
+
}, he = { position: "absolute", visibility: "hidden", pointerEvents: "none" }, B = 1, G = 2, ve = 600, ge = 10, H = 30, xe = /* @__PURE__ */ A(function({ element: e, deleting: t, locked: n, plain: r, last: u, chipStore: s, delGroup: d, settle: a }) {
|
|
28
|
+
const { selectRef: f, deleteInline: P, deleteAlways: b, icons: y, texts: I, valueAsOption: C, renderOption: N } = w(W), h = !!y.remove, { setVisibility: E, setDeleting: T, removeOption: v } = w(re), i = te({ longPressTimer: null, longPress: !1, x: 0, y: 0 }), g = U(s.subscribe, () => {
|
|
29
|
+
const { hoverId: o, swipedId: x } = s.get();
|
|
30
|
+
return (o === e.id ? B : 0) | (x === e.id ? G : 0);
|
|
31
|
+
}, () => 0), O = !!(g & B), m = !!(g & G), D = p((o) => {
|
|
32
|
+
const { clientX: x, clientY: S } = o.touches[0];
|
|
33
|
+
Object.assign(i.current, { x, y: S, longPress: !1 }), clearTimeout(i.current.longPressTimer), h && (i.current.longPressTimer = setTimeout(() => {
|
|
34
|
+
T(!0), i.current.longPress = !0, f.current?.focus(), E(!1), window.navigator.vibrate?.(50);
|
|
35
|
+
}, ve));
|
|
36
|
+
}, [h, T, E, f]), z = p((o) => {
|
|
37
|
+
const { clientX: x, clientY: S } = o.touches[0], M = i.current.x - x;
|
|
38
|
+
Math.hypot(M, i.current.y - S) > ge && clearTimeout(i.current.longPressTimer), M > H && !m ? s.set({ hoverId: null, swipedId: e.id }) : M < -H && m && s.set({ swipedId: null });
|
|
39
|
+
}, [e.id, m, s]), j = p((o) => {
|
|
40
|
+
clearTimeout(i.current.longPressTimer), i.current.longPress && o.cancelable && o.preventDefault(), i.current.longPress = !1;
|
|
41
|
+
}, []), F = p(() => s.set({ hoverId: e.id, swipedId: null }), [e.id, s]), J = p(() => {
|
|
26
42
|
s.get().hoverId === e.id && s.set({ hoverId: null });
|
|
27
43
|
}, [e.id, s]);
|
|
28
|
-
|
|
29
|
-
const
|
|
30
|
-
s.set({ swipedId: null }),
|
|
31
|
-
}, [e.id,
|
|
32
|
-
|
|
33
|
-
}, [
|
|
34
|
-
return /* @__PURE__ */
|
|
44
|
+
ne(() => () => clearTimeout(i.current.longPressTimer), []);
|
|
45
|
+
const k = C && !r ? ie(e, N, !0) : null, K = k ? /* @__PURE__ */ l("div", { className: "rac-option-jsx", children: k }) : /* @__PURE__ */ l("span", { className: r ? "rac-pick" : "rac-chip-text", "data-last": Y(u), children: e.name || I.emptyOption }), R = p((o) => {
|
|
46
|
+
s.set({ swipedId: null }), ce(o, f), v(e.id), L(o);
|
|
47
|
+
}, [e.id, v, s, f]), q = p((o) => {
|
|
48
|
+
L(o), t && R(o);
|
|
49
|
+
}, [t, R]), Q = h && !r && (b || !n && (O || m || t));
|
|
50
|
+
return /* @__PURE__ */ V(
|
|
35
51
|
"div",
|
|
36
52
|
{
|
|
37
|
-
className:
|
|
38
|
-
style:
|
|
39
|
-
|
|
53
|
+
className: r ? void 0 : ae("rac-chip", k && e.className),
|
|
54
|
+
style: k ? e.style : void 0,
|
|
55
|
+
"data-plain": Y(r),
|
|
56
|
+
...!n && { onTouchStart: D, onTouchMove: z, onTouchEnd: j, onTouchCancel: j, onMouseEnter: F, onMouseLeave: J, onClick: q },
|
|
40
57
|
children: [
|
|
41
|
-
|
|
42
|
-
/* @__PURE__ */
|
|
43
|
-
|
|
58
|
+
K,
|
|
59
|
+
/* @__PURE__ */ l(
|
|
60
|
+
$,
|
|
44
61
|
{
|
|
45
|
-
"aria-label": `${
|
|
46
|
-
group:
|
|
47
|
-
|
|
48
|
-
|
|
62
|
+
"aria-label": `${I.remove} ${e.name ?? ""}`.trim(),
|
|
63
|
+
group: P && !b && !t ? d : void 0,
|
|
64
|
+
onEntered: a,
|
|
65
|
+
onExited: a,
|
|
66
|
+
onMouseDown: L,
|
|
67
|
+
onClick: R,
|
|
49
68
|
className: "rac-chip-del",
|
|
50
|
-
disabled:
|
|
69
|
+
disabled: n,
|
|
51
70
|
tabIndex: -1,
|
|
52
71
|
type: "button",
|
|
53
|
-
in:
|
|
72
|
+
in: Q,
|
|
54
73
|
as: "button",
|
|
55
74
|
axis: "x",
|
|
56
|
-
children:
|
|
75
|
+
children: X(y.remove)
|
|
57
76
|
}
|
|
58
77
|
)
|
|
59
78
|
]
|
|
60
79
|
}
|
|
61
80
|
);
|
|
62
|
-
}),
|
|
63
|
-
const u =
|
|
64
|
-
return /* @__PURE__ */
|
|
65
|
-
/* @__PURE__ */
|
|
66
|
-
u && /* @__PURE__ */
|
|
81
|
+
}), be = /* @__PURE__ */ A(function({ element: e, chipStore: t, settle: n, ...r }) {
|
|
82
|
+
const u = U(t.subscribe, () => t.get().breaks.includes(e.id), () => !1);
|
|
83
|
+
return /* @__PURE__ */ V(se, { children: [
|
|
84
|
+
/* @__PURE__ */ l($, { className: "rac-chip-slot", onEntered: n, onExited: n, unmountOnExit: !1, "data-id": e.id, axis: "x", fade: !0, children: /* @__PURE__ */ l(xe, { element: e, chipStore: t, settle: n, ...r }) }),
|
|
85
|
+
u && /* @__PURE__ */ l("div", { className: "rac-spacer" })
|
|
67
86
|
] });
|
|
68
87
|
});
|
|
69
|
-
class
|
|
88
|
+
class ye extends ee {
|
|
70
89
|
getSnapshotBeforeUpdate(e) {
|
|
71
|
-
const
|
|
72
|
-
return (
|
|
90
|
+
const t = e.look !== this.props.look;
|
|
91
|
+
return (t || e.chips !== this.props.chips || e.dress !== this.props.dress) && this.props.take(t), null;
|
|
73
92
|
}
|
|
74
93
|
componentDidUpdate() {
|
|
75
94
|
}
|
|
@@ -77,18 +96,18 @@ class fe extends F {
|
|
|
77
96
|
return null;
|
|
78
97
|
}
|
|
79
98
|
}
|
|
80
|
-
const
|
|
81
|
-
const { selectedText:
|
|
82
|
-
return /* @__PURE__ */
|
|
83
|
-
/* @__PURE__ */
|
|
84
|
-
/* @__PURE__ */
|
|
85
|
-
/* @__PURE__ */
|
|
86
|
-
([
|
|
99
|
+
const Ie = /* @__PURE__ */ A(function(e) {
|
|
100
|
+
const { selectedText: t, icons: n } = w(W), { selectedIDs: r, deleting: u, active: s } = w(oe), d = r.length > 0 && !t, a = d ? r : ue, { chipStore: f, delGroup: P, valueRef: b, delIconRef: y, probe: I, settle: C, held: N, snapshot: h, look: E, dress: T, plain: v, wait: i } = pe(a, e), g = me(a);
|
|
101
|
+
return /* @__PURE__ */ V("div", { className: "rac-value", ref: b, children: [
|
|
102
|
+
/* @__PURE__ */ l(ye, { chips: a, look: E, dress: T, take: h }),
|
|
103
|
+
/* @__PURE__ */ l(de, { hidden: d, settle: C }),
|
|
104
|
+
/* @__PURE__ */ l(le, { hold: N, wait: i, children: g.map(
|
|
105
|
+
([O, m], D) => /* @__PURE__ */ l(be, { element: m, deleting: u, locked: !s, plain: v, last: v && D === g.length - 1, chipStore: f, delGroup: P, settle: C }, O)
|
|
87
106
|
) }),
|
|
88
|
-
|
|
107
|
+
I && /* @__PURE__ */ l("button", { type: "button", className: "rac-chip-del", tabIndex: -1, "aria-hidden": "true", ref: y, style: he, children: X(n.remove) })
|
|
89
108
|
] });
|
|
90
|
-
}),
|
|
109
|
+
}), Se = { Value: Ie };
|
|
91
110
|
export {
|
|
92
|
-
|
|
93
|
-
|
|
111
|
+
Ie as ChipsValue,
|
|
112
|
+
Se as chips
|
|
94
113
|
};
|
package/dist/chipGeometry.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const h="rac-chip-slot",g="rac-chip-del",u=[],m=e=>Array.from(e.children).filter(n=>n.classList.contains(h)),N=(e,n)=>e.length===n.length&&e.every((t,o)=>t===n[o]),y=(e,n=t=>t.getBoundingClientRect())=>{const t=[];let o=-1/0;for(const i of e){const c=n(i);c.top>=o-1&&(t.push([]),o=c.bottom),t.at(-1).push(i),o=Math.max(o,c.bottom)}return t},b=(e,n,t,o,i,c)=>{const r=e.cloneNode(!0),{height:E,paddingInlineEnd:O}=getComputedStyle(e),S=i?"":`height: ${E}; min-height: 0;`;r.style.cssText=`visibility: hidden; pointer-events: none; ${S} padding-inline-end: calc(${O} + ${t}px)`,r.querySelectorAll(`:scope > :not(.${h})`).forEach(s=>s.remove()),o&&m(r).forEach(s=>o.has(s.dataset.id)||s.remove()),t&&r.querySelectorAll(`.${g}`).forEach(s=>s.remove()),c&&r.querySelectorAll(`.${g}`).forEach(s=>{s.style.position="relative"});const f=m(r);f.forEach(s=>i?.has(s.dataset.id)&&(s.style.minWidth=`${i.get(s.dataset.id)}px`));const d=new Map(f.map((s,a)=>[s.dataset.id,a]));n?.slice(1).forEach((s,a)=>{const k=Math.min(...s.map(l=>d.get(l)??1/0)),p=Math.max(...n[a].map(l=>d.get(l)??-1).filter(l=>l<k));p>=0&&f[p].after(Object.assign(document.createElement("div"),{className:"rac-spacer"}))}),e.style.position="absolute",e.after(r),r.getAnimations?.({subtree:!0}).forEach(s=>s.effect?.getComputedTiming().endTime<1/0&&s.finish());const $=y(f).map(s=>s.map(a=>a.dataset.id)),x=r.offsetHeight;return r.remove(),e.style.position="",{rows:$,fit:x}},w=(e,n)=>{const t=n?n.slice(0,-1).map(i=>i.at(-1)):u,{breaks:o}=e.get();return N(o,t)?o:t},v=(e,n,t,o)=>w(e,o&&t.length?b(n,null,o,new Set(t.map(i=>i.id))).rows:null),A=(e,n,t)=>{const{rows:o,fit:i}=b(n,t.rows,t.wide?0:t.reserve,null,t.floor,t.wide);Object.assign(t,{rows:o,fit:t.floor?i:null}),e.set({held:!0,breaks:w(e,o)})},M=e=>e?.size?y([...e.keys()],n=>e.get(n).line).map(n=>n.map(t=>t.dataset.id)):null;exports.NONE=u;exports.freeze=A;exports.restBreaks=v;exports.slotsOf=m;exports.snapRows=M;
|
package/dist/chipGeometry.js
CHANGED
|
@@ -1,64 +1,37 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
let
|
|
2
|
+
const g = "rac-chip-slot", p = "rac-chip-del", k = [], h = (e) => Array.from(e.children).filter((n) => n.classList.contains(g)), A = (e, n) => e.length === n.length && e.every((t, o) => t === n[o]), u = (e, n = (t) => t.getBoundingClientRect()) => {
|
|
3
|
+
const t = [];
|
|
4
|
+
let o = -1 / 0;
|
|
5
5
|
for (const i of e) {
|
|
6
|
-
const
|
|
7
|
-
|
|
6
|
+
const a = n(i);
|
|
7
|
+
a.top >= o - 1 && (t.push([]), o = a.bottom), t.at(-1).push(i), o = Math.max(o, a.bottom);
|
|
8
8
|
}
|
|
9
|
-
return
|
|
10
|
-
},
|
|
11
|
-
const
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
l.forEach((r) => o?.has(r.dataset.id) && Object.assign(g(r)?.style ?? {}, { minWidth: o.get(r.dataset.id), boxSizing: "border-box" }));
|
|
15
|
-
const b = new Map(l.map((r, c) => [r.dataset.id, c]));
|
|
16
|
-
n?.slice(1).forEach((r, c) => {
|
|
17
|
-
const M = Math.min(...r.map((d) => b.get(d) ?? 1 / 0)), u = Math.max(...n[c].map((d) => b.get(d) ?? -1).filter((d) => d < M));
|
|
18
|
-
u >= 0 && l[u].after(Object.assign(document.createElement("div"), { className: "rac-spacer" }));
|
|
19
|
-
}), e.style.position = "absolute", e.after(s), s.getAnimations?.({ subtree: !0 }).forEach((r) => r.effect?.getComputedTiming().endTime < 1 / 0 && r.finish());
|
|
20
|
-
const z = I(l).map((r) => r.map((c) => c.dataset.id)), L = s.offsetHeight;
|
|
21
|
-
return s.remove(), e.style.position = "", { rows: z, fit: L };
|
|
22
|
-
}, S = (e, n) => {
|
|
23
|
-
const t = n ? n.slice(0, -1).map((o) => o.at(-1)) : R, { breaks: i } = e.get();
|
|
24
|
-
return B(i, t) ? i : t;
|
|
25
|
-
}, W = (e, n, t, i) => S(e, i && t.length ? O(n, null, i, new Set(t.map((o) => o.id))).rows : null), v = (e, n, t) => {
|
|
26
|
-
const { rows: i, fit: o } = O(n, t.rows, t.reserve, null, t.floor);
|
|
27
|
-
Object.assign(t, { rows: i, fit: t.floor ? o : null }), e.set({ held: !0, breaks: S(e, i) });
|
|
28
|
-
}, k = (e, n) => new Map(m(e).map((t) => {
|
|
29
|
-
const { left: i, top: o } = t.getBoundingClientRect(), s = n && g(t);
|
|
30
|
-
return [t, { left: i, top: o, label: s ? A(s) : null }];
|
|
31
|
-
})), F = (e, n, t, i) => {
|
|
32
|
-
if (!e.animate) return;
|
|
33
|
-
e.getAnimations().forEach((h) => h.id === f && h.cancel());
|
|
34
|
-
const o = e.getBoundingClientRect(), s = n.left - o.left, a = n.top - o.top;
|
|
35
|
-
(Math.abs(s) > 0.5 || Math.abs(a) > 0.5) && e.animate([{ transform: `translate(${s}px, ${a}px)` }, { transform: "none" }], { id: f, duration: t, easing: i });
|
|
36
|
-
}, A = (e) => {
|
|
37
|
-
const n = getComputedStyle(e), t = (...i) => `${i.reduce((o, s) => o + parseFloat(n[s]), 0)}px`;
|
|
38
|
-
return n.boxSizing === "border-box" ? { width: n.width, height: n.height } : {
|
|
39
|
-
width: t("width", "paddingLeft", "paddingRight", "borderLeftWidth", "borderRightWidth"),
|
|
40
|
-
height: t("height", "paddingTop", "paddingBottom", "borderTopWidth", "borderBottomWidth")
|
|
41
|
-
};
|
|
42
|
-
}, N = (e) => {
|
|
43
|
-
const n = [];
|
|
44
|
-
e.forEach(({ label: i }, o) => {
|
|
45
|
-
const s = i && o.isConnected && g(o);
|
|
46
|
-
!s?.animate || w(o, (a) => a.id !== f) || (s.getAnimations().forEach((a) => a.id === p && a.cancel()), n.push({ id: o.dataset.id, el: s, from: i }));
|
|
9
|
+
return t;
|
|
10
|
+
}, y = (e, n, t, o, i, a) => {
|
|
11
|
+
const c = e.cloneNode(!0), { height: E, paddingInlineEnd: b } = getComputedStyle(e), x = i ? "" : `height: ${E}; min-height: 0;`;
|
|
12
|
+
c.style.cssText = `visibility: hidden; pointer-events: none; ${x} padding-inline-end: calc(${b} + ${t}px)`, c.querySelectorAll(`:scope > :not(.${g})`).forEach((s) => s.remove()), o && h(c).forEach((s) => o.has(s.dataset.id) || s.remove()), t && c.querySelectorAll(`.${p}`).forEach((s) => s.remove()), a && c.querySelectorAll(`.${p}`).forEach((s) => {
|
|
13
|
+
s.style.position = "relative";
|
|
47
14
|
});
|
|
48
|
-
const
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
15
|
+
const f = h(c);
|
|
16
|
+
f.forEach((s) => i?.has(s.dataset.id) && (s.style.minWidth = `${i.get(s.dataset.id)}px`));
|
|
17
|
+
const m = new Map(f.map((s, r) => [s.dataset.id, r]));
|
|
18
|
+
n?.slice(1).forEach((s, r) => {
|
|
19
|
+
const S = Math.min(...s.map((l) => m.get(l) ?? 1 / 0)), d = Math.max(...n[r].map((l) => m.get(l) ?? -1).filter((l) => l < S));
|
|
20
|
+
d >= 0 && f[d].after(Object.assign(document.createElement("div"), { className: "rac-spacer" }));
|
|
21
|
+
}), e.style.position = "absolute", e.after(c), c.getAnimations?.({ subtree: !0 }).forEach((s) => s.effect?.getComputedTiming().endTime < 1 / 0 && s.finish());
|
|
22
|
+
const $ = u(f).map((s) => s.map((r) => r.dataset.id)), O = c.offsetHeight;
|
|
23
|
+
return c.remove(), e.style.position = "", { rows: $, fit: O };
|
|
24
|
+
}, w = (e, n) => {
|
|
25
|
+
const t = n ? n.slice(0, -1).map((i) => i.at(-1)) : k, { breaks: o } = e.get();
|
|
26
|
+
return A(o, t) ? o : t;
|
|
27
|
+
}, v = (e, n, t, o) => w(e, o && t.length ? y(n, null, o, new Set(t.map((i) => i.id))).rows : null), I = (e, n, t) => {
|
|
28
|
+
const { rows: o, fit: i } = y(n, t.rows, t.wide ? 0 : t.reserve, null, t.floor, t.wide);
|
|
29
|
+
Object.assign(t, { rows: o, fit: t.floor ? i : null }), e.set({ held: !0, breaks: w(e, o) });
|
|
30
|
+
}, L = (e) => e?.size ? u([...e.keys()], (n) => e.get(n).line).map((n) => n.map((t) => t.dataset.id)) : null;
|
|
53
31
|
export {
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
v as
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
j as resize,
|
|
60
|
-
N as resizesOf,
|
|
61
|
-
W as restBreaks,
|
|
62
|
-
m as slotsOf,
|
|
63
|
-
k as snapOf
|
|
32
|
+
k as NONE,
|
|
33
|
+
I as freeze,
|
|
34
|
+
v as restBreaks,
|
|
35
|
+
h as slotsOf,
|
|
36
|
+
L as snapRows
|
|
64
37
|
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F=require("./chipGeometry.cjs"),y="rac-flip",u="rac-resize",z="rac-dress",q="rac-chip-slot",W="rac-chip-del",C={overflow:"hidden",textOverflow:"clip",boxSizing:"border-box",minWidth:"0px",maxWidth:"none",minHeight:"0px",maxHeight:"none"},L={boxSizing:"border-box",minHeight:"0px",maxHeight:"none"},x=t=>t.firstElementChild,B=t=>x(t)?.firstElementChild,I=(t,o)=>!!t?.getAnimations?.().some(e=>e.constructor===Animation&&o(e)),E=(t,o)=>I(t,e=>e.playState==="running"&&o(e)),$=t=>F.slotsOf(t).some(o=>[x(o),B(o)].some(e=>E(e,s=>s.id===u))),k=(t,o)=>Array.from(t.children).some(e=>E(e,s=>s.id!==y))||$(t)||!!o&&Array.from(t.querySelectorAll(`.${W}`)).some(e=>E(e,()=>!0)),G=(t,o)=>new Map(F.slotsOf(t).map(e=>{const{left:s,top:i,width:n}=e.getBoundingClientRect(),r=o&&B(e);return[e,{left:s,top:i,width:n,line:{top:e.offsetTop,bottom:e.offsetTop+e.offsetHeight},label:r?R(r):null,dress:r?j(x(e),r):null}]})),K=(t,o,e,s)=>{if(!t.animate)return;t.getAnimations().forEach(d=>d.id===y&&d.cancel());const i=t.getBoundingClientRect(),n=o.left-i.left,r=o.top-i.top;(Math.abs(n)>.5||Math.abs(r)>.5)&&t.animate([{transform:`translate(${n}px, ${r}px)`},{transform:"none"}],{id:y,duration:e,easing:s})},R=t=>{const o=getComputedStyle(t),{marginLeft:e,marginRight:s}=o,i=o.boxSizing==="border-box",n=(...d)=>`${d.reduce((c,h)=>c+parseFloat(o[h]),0)}px`;return{width:i?o.width:n("width","paddingLeft","paddingRight","borderLeftWidth","borderRightWidth"),height:i?o.height:n("height","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth"),marginLeft:e,marginRight:s}},M=["paddingLeft","paddingRight","paddingTop","paddingBottom","marginLeft","marginRight","marginTop","marginBottom","backgroundColor","borderTopLeftRadius","borderTopRightRadius","borderBottomLeftRadius","borderBottomRightRadius"],j=(t,o)=>{const e=getComputedStyle(t),{content:s,opacity:i}=getComputedStyle(o,"::after");return{box:Object.fromEntries(M.map(n=>[n,e[n]])),height:R(t).height,sep:/^["']/.test(s)?{content:s,opacity:+i}:null}},S=(t,o)=>t!==o&&!(Math.abs(parseFloat(t)-parseFloat(o))<=.5),D=t=>{delete t.dataset.sep,t.style.removeProperty("--rac-sep")},N=t=>{const o=[];return t.forEach(({label:e,dress:s,width:i},n)=>{const r=e&&n.isConnected&&B(n),d=x(n);!r?.animate||I(n,c=>c.id!==y)||(d.getAnimations({subtree:!0}).forEach(c=>c.id===u?c.cancel():c.transitionProperty&&c.finish()),D(r),o.push({id:n.dataset.id,width:i,el:r,from:e,chip:d,was:s}))}),o.map(e=>{const s=R(e.el),i=j(e.chip,e.el),n=Object.keys(s).some(c=>S(e.from[c],s[c])),r=M.some(c=>S(e.was.box[c],i.box[c])),d=!e.was.sep!=!i.sep||Math.abs((e.was.sep?.opacity??0)-(i.sep?.opacity??0))>.01;return{...e,to:s,now:i,sized:n,dressed:r,fade:d}}).filter(e=>e.sized||e.dressed||e.fade)},Z=(t,o,e,s)=>{const i=()=>{t.forEach(n=>n.kept?.splice(0).forEach(r=>{r.cancel(),D(n.el)})),s()};t.forEach(n=>{const{el:r,from:d,to:c,chip:h,was:a,now:p,sized:m,dressed:g,fade:b}=n,f=b&&!p.sep,O=(P,v,w)=>{const T=P.animate(v,{id:u,duration:o,easing:e,pseudoElement:w,fill:f?"forwards":"none"});T.onfinish=i,f&&(n.kept??=[]).push(T)};m&&O(r,[{...C,...d},{...C,...c}]),g&&O(h,[{...L,...a.box,height:a.height},{...L,...p.box,height:p.height}]),b&&(f&&(r.dataset.sep="",r.style.setProperty("--rac-sep",a.sep.content)),O(r,[{opacity:a.sep?.opacity??0},{opacity:p.sep?.opacity??0}],"::after"))})},H=(t,{paddingTop:o,paddingBottom:e}=getComputedStyle(t))=>({paddingTop:o,paddingBottom:e}),J=(t,o,e,s)=>{t.getAnimations().forEach(n=>n.id===u&&n.cancel());const i=H(t);o&&(S(o.paddingTop,i.paddingTop)||S(o.paddingBottom,i.paddingBottom))&&t.animate([o,i],{id:u,duration:e,easing:s})},Q=["marginInlineStart","marginInlineEnd","marginBlockStart","marginBlockEnd","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth"],l=t=>`${t}px`,A=t=>{const o=t.parentElement.getBoundingClientRect(),e=t.getBoundingClientRect(),s=getComputedStyle(t),[i,n,r,d,...c]=Q.map(a=>parseFloat(s[a])||0),h=s.direction==="rtl"?o.right-e.right:e.left-o.left;return{ms:i,me:n,mbs:r,mbe:d,inner:s.boxSizing==="border-box"?0:c.reduce((a,p)=>a+p,0),start:h,top:e.top-o.top,width:e.width,height:e.height}},U=(t,o)=>{const e=(n,r,d,c,h)=>({position:"relative",marginInlineStart:l(n),marginInlineEnd:l(r),marginBlockStart:l(d),marginBlockEnd:l(c),height:l(h-t.inner)}),s=t.ms+o.start-t.start,i=t.mbs+o.top-t.top;return[e(t.ms,t.me,t.mbs,t.mbe,t.height),e(s,-t.width-s,i,t.height+t.mbs+t.mbe-o.height-i,o.height)]},V=t=>{const[o,e]=t.frames,s=t.effect.getComputedTiming().progress??0;return Object.fromEntries(Object.keys(e).map(i=>[i,i==="position"?e[i]:l(parseFloat(o[i])+(parseFloat(e[i])-parseFloat(o[i]))*s)]))},X=(t,o,e,s,i)=>{const n=Array.from(t.querySelectorAll(`.${q} .${W}`)).filter(a=>a.animate).map(a=>{const p=a.getAnimations().find(g=>g.id===z),m=p?.frames?V(p):null;return p?.cancel(),{el:a,now:m,busy:E(a,()=>!0)}}),r=n.filter(a=>!a.busy),d=r.map(({el:a})=>A(a));r.forEach(({el:a})=>{a.style.position=o?"absolute":"relative"});const c=r.map(({el:a})=>A(a));r.forEach(({el:a})=>{a.style.position=""});const h=(a,p)=>{const m=a.animate(p,{id:z,duration:e,easing:s,fill:"backwards"});return m.onfinish=i,m};n.forEach(({el:a,busy:p})=>p&&!o&&h(a,[{position:"relative"},{position:"relative"}])),r.forEach(({el:a,now:p},m)=>{const[g,b]=U(o?d[m]:c[m],o?c[m]:d[m]),f=[p??(o?b:g),o?g:b];h(a,f).frames=f})};exports.flip=K;exports.isBusy=k;exports.isResizing=$;exports.padOf=H;exports.repad=J;exports.resize=Z;exports.resizesOf=N;exports.shift=X;exports.snapOf=G;
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { slotsOf as F } from "./chipGeometry.js";
|
|
3
|
+
const y = "rac-flip", u = "rac-resize", C = "rac-dress", P = "rac-chip-slot", W = "rac-chip-del", L = { overflow: "hidden", textOverflow: "clip", boxSizing: "border-box", minWidth: "0px", maxWidth: "none", minHeight: "0px", maxHeight: "none" }, z = { boxSizing: "border-box", minHeight: "0px", maxHeight: "none" }, S = (t) => t.firstElementChild, R = (t) => S(t)?.firstElementChild, I = (t, o) => !!t?.getAnimations?.().some((e) => e.constructor === Animation && o(e)), E = (t, o) => I(t, (e) => e.playState === "running" && o(e)), v = (t) => F(t).some((o) => [S(o), R(o)].some((e) => E(e, (s) => s.id === u))), Z = (t, o) => Array.from(t.children).some((e) => E(e, (s) => s.id !== y)) || v(t) || !!o && Array.from(t.querySelectorAll(`.${W}`)).some((e) => E(e, () => !0)), J = (t, o) => new Map(F(t).map((e) => {
|
|
4
|
+
const { left: s, top: i, width: n } = e.getBoundingClientRect(), r = o && R(e);
|
|
5
|
+
return [e, { left: s, top: i, width: n, line: { top: e.offsetTop, bottom: e.offsetTop + e.offsetHeight }, label: r ? O(r) : null, dress: r ? D(S(e), r) : null }];
|
|
6
|
+
})), Q = (t, o, e, s) => {
|
|
7
|
+
if (!t.animate) return;
|
|
8
|
+
t.getAnimations().forEach((d) => d.id === y && d.cancel());
|
|
9
|
+
const i = t.getBoundingClientRect(), n = o.left - i.left, r = o.top - i.top;
|
|
10
|
+
(Math.abs(n) > 0.5 || Math.abs(r) > 0.5) && t.animate([{ transform: `translate(${n}px, ${r}px)` }, { transform: "none" }], { id: y, duration: e, easing: s });
|
|
11
|
+
}, O = (t) => {
|
|
12
|
+
const o = getComputedStyle(t), { marginLeft: e, marginRight: s } = o, i = o.boxSizing === "border-box", n = (...d) => `${d.reduce((c, h) => c + parseFloat(o[h]), 0)}px`;
|
|
13
|
+
return { width: i ? o.width : n("width", "paddingLeft", "paddingRight", "borderLeftWidth", "borderRightWidth"), height: i ? o.height : n("height", "paddingTop", "paddingBottom", "borderTopWidth", "borderBottomWidth"), marginLeft: e, marginRight: s };
|
|
14
|
+
}, $ = ["paddingLeft", "paddingRight", "paddingTop", "paddingBottom", "marginLeft", "marginRight", "marginTop", "marginBottom", "backgroundColor", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius"], D = (t, o) => {
|
|
15
|
+
const e = getComputedStyle(t), { content: s, opacity: i } = getComputedStyle(o, "::after");
|
|
16
|
+
return { box: Object.fromEntries($.map((n) => [n, e[n]])), height: O(t).height, sep: /^["']/.test(s) ? { content: s, opacity: +i } : null };
|
|
17
|
+
}, x = (t, o) => t !== o && !(Math.abs(parseFloat(t) - parseFloat(o)) <= 0.5), H = (t) => {
|
|
18
|
+
delete t.dataset.sep, t.style.removeProperty("--rac-sep");
|
|
19
|
+
}, U = (t) => {
|
|
20
|
+
const o = [];
|
|
21
|
+
return t.forEach(({ label: e, dress: s, width: i }, n) => {
|
|
22
|
+
const r = e && n.isConnected && R(n), d = S(n);
|
|
23
|
+
!r?.animate || I(n, (c) => c.id !== y) || (d.getAnimations({ subtree: !0 }).forEach((c) => c.id === u ? c.cancel() : c.transitionProperty && c.finish()), H(r), o.push({ id: n.dataset.id, width: i, el: r, from: e, chip: d, was: s }));
|
|
24
|
+
}), o.map((e) => {
|
|
25
|
+
const s = O(e.el), i = D(e.chip, e.el), n = Object.keys(s).some((c) => x(e.from[c], s[c])), r = $.some((c) => x(e.was.box[c], i.box[c])), d = !e.was.sep != !i.sep || Math.abs((e.was.sep?.opacity ?? 0) - (i.sep?.opacity ?? 0)) > 0.01;
|
|
26
|
+
return { ...e, to: s, now: i, sized: n, dressed: r, fade: d };
|
|
27
|
+
}).filter((e) => e.sized || e.dressed || e.fade);
|
|
28
|
+
}, V = (t, o, e, s) => {
|
|
29
|
+
const i = () => {
|
|
30
|
+
t.forEach((n) => n.kept?.splice(0).forEach((r) => {
|
|
31
|
+
r.cancel(), H(n.el);
|
|
32
|
+
})), s();
|
|
33
|
+
};
|
|
34
|
+
t.forEach((n) => {
|
|
35
|
+
const { el: r, from: d, to: c, chip: h, was: a, now: p, sized: m, dressed: g, fade: b } = n, f = b && !p.sep, B = (M, j, w) => {
|
|
36
|
+
const T = M.animate(j, { id: u, duration: o, easing: e, pseudoElement: w, fill: f ? "forwards" : "none" });
|
|
37
|
+
T.onfinish = i, f && (n.kept ??= []).push(T);
|
|
38
|
+
};
|
|
39
|
+
m && B(r, [{ ...L, ...d }, { ...L, ...c }]), g && B(h, [{ ...z, ...a.box, height: a.height }, { ...z, ...p.box, height: p.height }]), b && (f && (r.dataset.sep = "", r.style.setProperty("--rac-sep", a.sep.content)), B(r, [{ opacity: a.sep?.opacity ?? 0 }, { opacity: p.sep?.opacity ?? 0 }], "::after"));
|
|
40
|
+
});
|
|
41
|
+
}, k = (t, { paddingTop: o, paddingBottom: e } = getComputedStyle(t)) => ({ paddingTop: o, paddingBottom: e }), X = (t, o, e, s) => {
|
|
42
|
+
t.getAnimations().forEach((n) => n.id === u && n.cancel());
|
|
43
|
+
const i = k(t);
|
|
44
|
+
o && (x(o.paddingTop, i.paddingTop) || x(o.paddingBottom, i.paddingBottom)) && t.animate([o, i], { id: u, duration: e, easing: s });
|
|
45
|
+
}, q = ["marginInlineStart", "marginInlineEnd", "marginBlockStart", "marginBlockEnd", "paddingTop", "paddingBottom", "borderTopWidth", "borderBottomWidth"], l = (t) => `${t}px`, A = (t) => {
|
|
46
|
+
const o = t.parentElement.getBoundingClientRect(), e = t.getBoundingClientRect(), s = getComputedStyle(t), [i, n, r, d, ...c] = q.map((a) => parseFloat(s[a]) || 0), h = s.direction === "rtl" ? o.right - e.right : e.left - o.left;
|
|
47
|
+
return { ms: i, me: n, mbs: r, mbe: d, inner: s.boxSizing === "border-box" ? 0 : c.reduce((a, p) => a + p, 0), start: h, top: e.top - o.top, width: e.width, height: e.height };
|
|
48
|
+
}, G = (t, o) => {
|
|
49
|
+
const e = (n, r, d, c, h) => ({ position: "relative", marginInlineStart: l(n), marginInlineEnd: l(r), marginBlockStart: l(d), marginBlockEnd: l(c), height: l(h - t.inner) }), s = t.ms + o.start - t.start, i = t.mbs + o.top - t.top;
|
|
50
|
+
return [e(t.ms, t.me, t.mbs, t.mbe, t.height), e(s, -t.width - s, i, t.height + t.mbs + t.mbe - o.height - i, o.height)];
|
|
51
|
+
}, K = (t) => {
|
|
52
|
+
const [o, e] = t.frames, s = t.effect.getComputedTiming().progress ?? 0;
|
|
53
|
+
return Object.fromEntries(Object.keys(e).map((i) => [i, i === "position" ? e[i] : l(parseFloat(o[i]) + (parseFloat(e[i]) - parseFloat(o[i])) * s)]));
|
|
54
|
+
}, Y = (t, o, e, s, i) => {
|
|
55
|
+
const n = Array.from(t.querySelectorAll(`.${P} .${W}`)).filter((a) => a.animate).map((a) => {
|
|
56
|
+
const p = a.getAnimations().find((g) => g.id === C), m = p?.frames ? K(p) : null;
|
|
57
|
+
return p?.cancel(), { el: a, now: m, busy: E(a, () => !0) };
|
|
58
|
+
}), r = n.filter((a) => !a.busy), d = r.map(({ el: a }) => A(a));
|
|
59
|
+
r.forEach(({ el: a }) => {
|
|
60
|
+
a.style.position = o ? "absolute" : "relative";
|
|
61
|
+
});
|
|
62
|
+
const c = r.map(({ el: a }) => A(a));
|
|
63
|
+
r.forEach(({ el: a }) => {
|
|
64
|
+
a.style.position = "";
|
|
65
|
+
});
|
|
66
|
+
const h = (a, p) => {
|
|
67
|
+
const m = a.animate(p, { id: C, duration: e, easing: s, fill: "backwards" });
|
|
68
|
+
return m.onfinish = i, m;
|
|
69
|
+
};
|
|
70
|
+
n.forEach(({ el: a, busy: p }) => p && !o && h(a, [{ position: "relative" }, { position: "relative" }])), r.forEach(({ el: a, now: p }, m) => {
|
|
71
|
+
const [g, b] = G(o ? d[m] : c[m], o ? c[m] : d[m]), f = [p ?? (o ? b : g), o ? g : b];
|
|
72
|
+
h(a, f).frames = f;
|
|
73
|
+
});
|
|
74
|
+
};
|
|
75
|
+
export {
|
|
76
|
+
Q as flip,
|
|
77
|
+
Z as isBusy,
|
|
78
|
+
v as isResizing,
|
|
79
|
+
k as padOf,
|
|
80
|
+
X as repad,
|
|
81
|
+
V as resize,
|
|
82
|
+
U as resizesOf,
|
|
83
|
+
Y as shift,
|
|
84
|
+
J as snapOf
|
|
85
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const
|
|
1
|
+
"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const h=require("react"),L=(t,o,i)=>{Math.abs(i)>.5&&(t.style[o]=`${parseFloat(t.style[o])+i}px`)},Y=(t,o,i,g,n)=>{const l=t.getBoundingClientRect(),a=getComputedStyle(t);L(t,"left",o-l.left+parseFloat(a.marginLeft)),g?L(t,"bottom",l.bottom+parseFloat(a.marginBottom)-i+n):L(t,"top",i+n-l.top+parseFloat(a.marginTop))},_=(t,o)=>{t&&t.dataset.placement!==(o?"top":"bottom")&&(t.dataset.placement=o?"top":"bottom")},P=()=>typeof IntersectionObserver<"u",S=(t,o,i=window.innerHeight-t.bottom)=>i<o&&t.top>i,U=t=>{const o=[],{body:i,documentElement:g}=t.ownerDocument;for(let n=t.parentElement;n&&n!==i&&n!==g;n=n.parentElement)getComputedStyle(n).overflowY!=="visible"&&o.push(n);return o},D=(t,o)=>{let i=-1/0,g=1/0;for(const l of o){const a=l.getBoundingClientRect();i=Math.max(i,a.top+l.clientTop),g=Math.min(g,a.top+l.clientTop+l.clientHeight)}const n=l=>Math.min(Math.max(l,i),g);return{pin:n,ratio:t.height?+((n(t.bottom)-n(t.top))/t.height).toFixed(3):1}},V=({selectRef:t,panelRef:o,open:i,frozen:g,offset:n,onFlip:l})=>{const a=h.useRef(0),O=h.useRef(null),$=h.useRef(g),A=h.useRef(l);h.useLayoutEffect(()=>{$.current=g,A.current=l});const H=h.useCallback(e=>[t.current,o.current].forEach(c=>_(c,e)),[t,o]),v=h.useCallback(e=>{const c=t.current;if(!c||!e)return;e.scrollHeight&&(a.current=e.scrollHeight);const u=c.getBoundingClientRect(),d=e.dataset.placement,s=a.current,{pin:b,ratio:p}=D(u,O.current??=U(c)),w=d==="top"?u.top-n>=s:window.innerHeight-u.bottom-n>=s;let m=d&&($.current||w||p<1)?d==="top":S(u,s);d&&m!==(d==="top")&&(A.current?.(),m=d==="top"),H(m);const f=b(m?u.top:u.bottom);e.style.width=`${u.width}px`,e.style.left=`${u.left+window.scrollX}px`,e.style.top=m?"auto":`${f+window.scrollY+n}px`,e.style.bottom=m?`${window.innerHeight-f-window.scrollY+n}px`:"auto",Y(e,u.left,f,m,n),p<1?e.style.setProperty("--rac-visible",p):e.style.removeProperty("--rac-visible"),e.toggleAttribute("data-offscreen",p===0)},[t,n,H]),T=h.useCallback(e=>{e&&i&&v(e.parentElement)},[v,i]),j=h.useCallback(e=>{e?.removeAttribute("data-placement"),v(e)},[v]);return h.useEffect(()=>{const e=t.current;if(i||!e||!P())return;a.current||=parseFloat(getComputedStyle(e).getPropertyValue("--rac-list-max-height"))||250;const c={fits:!0,lower:!1},u=(s,b,p)=>{const w=new IntersectionObserver(([{boundingClientRect:m,rootBounds:f}])=>{f&&(p(m,f),H(!c.fits&&c.lower))},{rootMargin:s,threshold:b});return w.observe(e),w},d=[u(`0px 0px ${-a.current}px 0px`,[0,1],(s,b)=>{c.fits=s.bottom<=b.bottom}),u("0px 0px -50% 0px",[0,.5,1],(s,b)=>{c.lower=s.top+s.bottom>2*b.bottom})];return()=>d.forEach(s=>s.disconnect())},[i,t,H]),h.useLayoutEffect(()=>{const e=t.current;if(!i||!e)return;const c=e.ownerDocument,u=o.current;let d=0,s=0,b="",p=null;const w=()=>{const r=e.getBoundingClientRect(),E=o.current?.getBoundingClientRect()??r,F=S(r,a.current),M=a.current+n,{pin:C,ratio:x}=D(r,O.current??[]),z=o.current?.dataset.placement==="top";return[r.left-E.left,z?C(r.top)-E.bottom:C(r.bottom)-E.top,x,r.width,window.innerHeight,o.current?.scrollHeight,F,r.top>=M,window.innerHeight-r.bottom>=M].join()},m=()=>{if(p?.disconnect(),!P())return;const r=e.getBoundingClientRect(),{clientWidth:E,clientHeight:F}=c.documentElement,M=[r.top,E-r.right,F-r.bottom,r.left].map(x=>`${-Math.floor(x)}px`).join(" ");let C=!1;p=new IntersectionObserver(([x])=>{C&&x.intersectionRatio<1&&y(),C=x.intersectionRatio===1},{root:c,rootMargin:M,threshold:1}),p.observe(e)},f=()=>w()===b?!1:(v(o.current),b=w(),!0),I=()=>{if(d=0,f())s=0;else if(++s>1)return m();d=requestAnimationFrame(I)},y=()=>{s=0,d||=requestAnimationFrame(I)};v(o.current),b=w(),m(),window.addEventListener("scroll",y,{capture:!0,passive:!0}),window.addEventListener("resize",y);const k=typeof ResizeObserver<"u"&&new ResizeObserver(y);k&&[e,o.current].forEach(r=>r&&k.observe(r));const q=({target:r})=>!e.contains(r)&&!o.current?.contains(r),B=typeof MutationObserver<"u"&&new MutationObserver(r=>{r.some(q)&&f()&&y()});return B&&B.observe(c.body,{subtree:!0,childList:!0,attributes:!0,characterData:!0}),()=>{cancelAnimationFrame(d),window.removeEventListener("scroll",y,{capture:!0}),window.removeEventListener("resize",y);for(const r of[k,B,p])r&&r.disconnect();u?.removeAttribute("data-placement"),O.current=null}},[i,v,n,t,o]),[T,j]};exports.default=V;
|