plass-ui 1.8.1 → 1.9.0
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/CHANGELOG.md +34 -0
- package/dist/components/bar-chart/PlBarChart.js +1 -1
- package/dist/components/checkbox/PlCheckbox.js +1 -1
- package/dist/components/combobox/PlCombobox.d.ts +61 -8
- package/dist/components/combobox/PlCombobox.js +1 -1
- package/dist/components/combobox/index.d.ts +1 -1
- package/dist/components/navigation-menu/PlNavigationMenu.js +1 -1
- package/dist/components/pagination/PlPagination.js +1 -1
- package/dist/components/radio-group/PlRadioGroup.js +1 -1
- package/dist/components/stat/PlStat.js +1 -1
- package/dist/components/switch/PlSwitch.js +1 -1
- package/dist/internal/chart-frame.js +1 -1
- package/dist/internal/chart.d.ts +15 -0
- package/dist/internal/chart.js +1 -1
- package/dist/internal/form.d.ts +10 -7
- package/dist/internal/notch.d.ts +2 -1
- package/dist/internal/notch.js +1 -1
- package/dist/internal/styles.js +1 -1
- package/dist/styles.css +1 -1
- package/dist/types.d.ts +1 -1
- package/package.json +4 -4
package/CHANGELOG.md
CHANGED
|
@@ -4,6 +4,40 @@
|
|
|
4
4
|
|
|
5
5
|
## vNext (2026--)
|
|
6
6
|
|
|
7
|
+
## 1.9.0 (2026-11-02)
|
|
8
|
+
|
|
9
|
+
### Fixed
|
|
10
|
+
|
|
11
|
+
- **An invalid field has a red edge at rest.** The edge stayed neutral until the pointer or the focus reached the field, and a `solid` or a `ghost` field had none at all, so only the message said anything was wrong. This holds for `PlTextField`, `PlNumberField`, `PlSelect`, `PlCombobox`, `PlOtpField` and the date and time pickers, in all three variants, for the `invalid` prop and for a `PlForm` error alike.
|
|
12
|
+
- **A reference line's label stays clear of the data.** A label sat on the plot, where a line of data could run straight through it. It now sits past the end of the line, or above it on a horizontal chart, and the plot gives up the room. A long label is cut.
|
|
13
|
+
- **A `PlPagination` fits a phone.** The row of pages ran out of a narrow box. It now goes onto a second line.
|
|
14
|
+
- **A `PlNavigationMenu` fits a phone.** A row of items wider than its box ran out of it. It now wraps.
|
|
15
|
+
- **A `PlStat` keeps its figure whole.** A figure and a change wider than the card ran out of it. The change now goes under the figure.
|
|
16
|
+
- **A horizontal `PlBarChart` shows the whole of its longest value.** A bar that reached the end of the plot had its value cut off at the edge of the chart. The plot now keeps room for it.
|
|
17
|
+
|
|
18
|
+
## 1.8.2 (2026-10-09)
|
|
19
|
+
|
|
20
|
+
### Breaking changes
|
|
21
|
+
|
|
22
|
+
- **Escape no longer empties a `PlCombobox` whose list is closed.** One stray Escape took every chip off a `multiple` field, or the chosen value off a single one, and a caller could not stop it. The value now stays, and the key goes on to whatever the field sits in, so a `PlModal` round the field closes. Escape on an open list still closes it and lets go of the query. Pass `clearOnEscape` to have Escape empty the field as before.
|
|
23
|
+
- **`PlCombobox` calls `onValueChange`, `onInputValueChange` and `onOpenChange` with Base UI's event details as a second argument.** A caller could not tell what had changed the value, so an Escape and a press of the clear button looked the same. The second argument, typed `PlComboboxChangeEventDetails`, carries the `reason` (`'item-press'`, `'chip-remove-press'`, `'clear-press'`, `'escape-key'` and the rest) and the DOM `event`, and its `cancel()` turns the change away, so the field keeps what it held. A handler that takes one argument is unchanged. A test that checks a call with `toHaveBeenCalledWith(value)` now needs `expect.anything()` after the value.
|
|
24
|
+
|
|
25
|
+
### Added
|
|
26
|
+
|
|
27
|
+
- **`PlCombobox` takes `filter`, so a list a server has already searched is shown as it came.** Base UI filtered every row again by its label, so a row the server matched on another spelling, such as a city found by its English name and labelled in its own language, was hidden. `filter={null}` keeps every row as `items` gives it, and a function decides which rows a query keeps. The row that offers what was typed always stays.
|
|
28
|
+
- **`PlCombobox` takes `autoHighlight`.** The first row lit up only as the query changed and was not a setting. `true` stays the default, and now lights the first of the rows that arrive after the query changed as well, so a list a server fills a moment later is taken from with Enter. `'always'` also lights the first row whenever the open list has rows and none is lit, as when it opens with nothing typed, and `false` lights nothing until an arrow key or the pointer does.
|
|
29
|
+
- **A `multiple` `PlCombobox` takes a readonly array as `value` and `defaultValue`.** A caller holding the chosen values in a readonly array, or one written `as const`, had to copy it before handing it in, since TypeScript refused it for the mutable array the props asked for. The field never writes into it, and Base UI 1.9.0 takes one as it is.
|
|
30
|
+
- **A `PlComboboxOption` takes `content`, which its row draws in place of the label.** A row could only show its label, so a thumbnail or a second line had nowhere to go. The label is still what is filtered, written into the input and put on the chip.
|
|
31
|
+
|
|
32
|
+
### Changed
|
|
33
|
+
|
|
34
|
+
- **`plass-ui` depends on `@base-ui/react` `^1.9.0`.** The fixes in Base UI 1.9.0 reach these components: a `PlCombobox` lights the first of the rows that arrive after the query changed and leaves no stale focus on a chip once the input has it back, a `PlSlider` ends a drag on `pointercancel` and `touchcancel`, and a `PlToastProvider` keeps a toast's timer paused through overlapping interactions. Base UI 1.9.0 also builds the filtering it adds to its menu into every menu, so a page with a `PlMenu` or a `PlContextMenu` grows by about 9 kB gzipped whether or not anything filters.
|
|
35
|
+
- **Enter on a `PlCombobox` list with no rows keeps the list open and the query in the input.** A list still waiting for its rows, or matching nothing, closed on Enter, which emptied the query in a `multiple` field and put the chosen label back in a single one, so the reader had to type the query again. Enter there now does nothing, and a form round the field is not sent with the list open. A list with rows and none lit still closes on Enter and lets the form be sent.
|
|
36
|
+
|
|
37
|
+
### Fixed
|
|
38
|
+
|
|
39
|
+
- **A chosen `PlCombobox` value keeps its label once `items` no longer lists it.** A chip, and the text of a single field, read the label off the current `items`, so in a list a server answers, a value the latest query did not find was shown by its value, such as `prague` for Praha. The field now keeps the label each chosen value was last listed with, including one taken from a list that the next query emptied in the same press.
|
|
40
|
+
|
|
7
41
|
## 1.8.1 (2026-10-09)
|
|
8
42
|
|
|
9
43
|
### Breaking changes
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{CartesianChart as r,markTransitionClasses as l}from"../../internal/chart-frame.js";import{barBandRatio as o,
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as t from"react";import{CartesianChart as r,markTransitionClasses as l}from"../../internal/chart-frame.js";import{barBandRatio as o,barLabelRoom as s,barMaxThickness as i,barPath as n,barRadius as c,chartFontSizes as u,dimmedByHover as d,labelledPoints as m,markGap as h,rankCategories as f,stackToFull as v,writeChartValue as x}from"../../internal/chart.js";import{useDefaults as p,useLocale as b}from"../../internal/defaults.js";import{useLabels as g}from"../../internal/labels.js";export function PlBarChart({orientation:a="vertical",stacked:l=!1,rounded:n=!0,barSize:c,valueLabels:d="none",valueLabelColor:m="series",sort:h="none",maxCategories:y,otherLabel:z,series:k,categories:M,yAxis:j,format:L,locale:C,size:B,density:P,...S}){const A=p(),N=B??A.size??"md",W=P??A.density??"default",w=b(C),F="horizontal"===a,I="full"===l,O=g(),R=z??O.chartOther,Z=t.useMemo(()=>f(k,M,{sort:h,max:y,other:R}),[k,M,h,y,R]),$=t.useMemo(()=>I?v(Z.series,e=>x(e,L,w)):Z.series,[Z.series,I,L,w]);return e(r,{...S,series:$,categories:Z.categories,format:L,locale:C,size:N,density:W,horizontal:F,stacked:!1!==l,yAxis:I?{min:0,max:100,tickFormat:e=>`${e}%`,...j}:j,includeZero:!0,bandRatio:o[W],headroom:"none"===d?0:F?s($,e=>x(e,L,w),u[N]):12,children:a=>e(Bars,{context:a,stacked:!1!==l,rounded:n,barSize:c??i[N],valueLabels:d,valueLabelColor:m,size:N})})}function Bars({context:t,stacked:r,rounded:o,barSize:s,valueLabels:i,valueLabelColor:f,size:v}){const{values:x,visible:p,colors:b,hovered:g,activeIndex:y,plot:z,band:k,horizontal:M,valuePx:j,categoryPx:L,zeroPx:C,format:B}=t,P=x.map((e,a)=>({one:e,index:a})).filter(e=>p[e.index]),S=r?1:Math.max(1,P.length),A=Math.min(s,Math.max(1,(k.band-h*(S-1))/S)),N=A*S+h*(S-1),W=[],w=[],F=u[v];return a("g",{children:[P.map(({one:t,index:s},u)=>{const v=b[s],x=d(g,s,p),k=m(t,i);return e("g",{opacity:x?.28:1,className:l,children:t.map((t,s)=>{if(null===t.value)return null;const i=L(s),d=r?0:u*(A+h)-N/2+A/2,m=r?t.value>=0?W[s]??0:w[s]??0:0,x=j(m),p=j(m+t.value);r&&(t.value>=0?W[s]=m+t.value:w[s]=m+t.value);const b=r&&0!==m?h:0,g=Math.abs(p-x)-b;if(g<=0)return null;const C=p<x,P=s===y,S=M?n(Math.min(x,p)+(C?0:b),z.top+i+d-A/2,g,A,o&&!r?c:o?c/2:0,t.value>=0?"right":"left"):n(z.left+i+d-A/2,Math.min(x,p)+(C?0:b),A,g,o&&!r?c:o?c/2:0,t.value>=0?"up":"down");return a("g",{children:[e("path",{d:S,fill:t.color??v,opacity:P?1:.92,className:l}),k(s)?e("text",{x:M?p+(t.value>=0?5:-5):z.left+i+d,y:M?z.top+i+d:t.value>=0?p-5:p+F+2,textAnchor:M?t.value>=0?"start":"end":"middle",dominantBaseline:M?"central":void 0,fontSize:F,fontWeight:600,fill:"ink"===f?"var(--plass-fg)":t.color??v,className:"tabular-nums",children:t.label??B(t.value)}):null]},s)})},s)}),e("line",M?{x1:C,x2:C,y1:z.top,y2:z.top+z.height,stroke:"var(--plass-chart-baseline)",strokeWidth:1}:{x1:z.left,x2:z.left+z.width,y1:C,y2:C,stroke:"var(--plass-chart-baseline)",strokeWidth:1})]})}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{useDisabled as t
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{useDisabled as t}from"../../internal/form.js";import{useDefaults as o}from"../../internal/defaults.js";import{Checkbox as l}from"@base-ui/react/checkbox";import{Field as n}from"@base-ui/react/field";import{controlSlots as i,cx as s,fieldDescriptionClasses as d,focusRingClasses as c,forcedCheckedClasses as p,forcedDisabledCheckedClasses as h,glassClasses as m,hasContent as f,metaTextClasses as u,tickRadiusClasses as b,tickRowTextClasses as k,tickSizeClasses as g,transitionClasses as x}from"../../internal/styles.js";const v=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","plass-fill [--p-fill-edge:1px]",x,c].join(" "),j=/* @__PURE__ */["forced-colors:data-[indeterminate]:[background-color:Highlight]","forced-colors:data-[indeterminate]:[border-color:Highlight]","forced-colors:data-[indeterminate]:[color:HighlightText]"].join(" "),N=/* @__PURE__ */[m,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[--p-fill-on:1] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105","data-[indeterminate]:[--p-fill-on:1] data-[indeterminate]:text-(--p-on-solid)","data-[indeterminate]:[border-color:transparent]",p,j].join(" "),y=/* @__PURE__ */[m,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[--p-fill-on:1] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]","data-[indeterminate]:[--p-fill-on:1] data-[indeterminate]:text-(--p-on-solid)","data-[indeterminate]:[border-color:transparent]",p,j].join(" "),C=/* @__PURE__ */[m,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[--p-fill-on:1] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]","data-[indeterminate]:[--p-fill-on:1] data-[indeterminate]:text-(--p-on-solid)","data-[indeterminate]:[border-color:transparent]",h,"forced-colors:data-[indeterminate]:[background-color:GrayText]","forced-colors:data-[indeterminate]:[color:Canvas]"].join(" "),M=/* @__PURE__ */["flex size-[70%] items-center justify-center","[&_path]:[stroke-dasharray:1] [&_path]:[stroke-dashoffset:0]","[&_path]:[transition:stroke-dashoffset_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[&_path]:[transition-duration:0ms]","data-[unchecked]:[&_path]:[stroke-dashoffset:1]"].join(" ");function CheckMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2 6.2 4.6 8.8 10 3.4",pathLength:1,stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})}function DashMark(){return e("svg",{viewBox:"0 0 12 12",fill:"none","aria-hidden":"true",className:"size-full",children:e("path",{d:"M2.5 6h7",pathLength:1,stroke:"currentColor",strokeWidth:"2",strokeLinecap:"round"})})}export const PlCheckbox=/* @__PURE__ */r.forwardRef(function PlCheckbox({size:r,color:c,label:p,description:h,error:m,invalid:x,disabled:j=!1,readOnly:_=!1,className:w,classNames:L,style:z,"aria-label":B,"aria-labelledby":D,...H},R){const O=o(),P=t(j),T=r??O.size??"md",W=c??O.color??"primary",E=f(m),G=x??E,I=G?"danger":W,$=s(v,g[T],b[T],P?C:_?y:N,L?.control);return a(n.Root,{disabled:P,invalid:G,className:["inline-flex flex-col gap-1 align-top",w??""].filter(Boolean).join(" "),style:{...i(I,0,"solid"),...z},children:[a("div",{className:`flex items-start gap-2 ${k[T]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(l.Root,{ref:R,className:$,disabled:P,readOnly:_,"aria-label":B,"aria-labelledby":D,...H,children:e(l.Indicator,{keepMounted:!0,className:M,children:H.indeterminate?e(DashMark,{}):e(CheckMark,{})})})}),p||h?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[p?e(n.Label,{className:s(P?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",L?.label),children:p}):null,h?e(n.Description,{className:s(d(T),L?.description),children:h}):null]}):null]}),e(n.Error,E?{match:!0,className:s(u[T],"text-(--p-accent)",L?.error),children:m}:{className:s(u[T],"text-(--p-accent)",L?.error)})]})});
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { Combobox as BaseUICombobox } from '@base-ui/react/combobox';
|
|
2
3
|
import type { PlassElevation, PlassFieldClassNames, PlassHotKeys, PlassFieldLabelPlacement, PlassStyleProps } from '../../types.js';
|
|
3
4
|
/**
|
|
4
5
|
* What a combobox's value may be — the same two types a PlSelect submits, and
|
|
@@ -16,14 +17,35 @@ export interface PlComboboxOption {
|
|
|
16
17
|
*
|
|
17
18
|
* A `string` rather than a `ReactNode`, which is the one place this differs
|
|
18
19
|
* from PlSelect: the label is typed against by the filter and written into a
|
|
19
|
-
* text input, and neither of those can be done to an element.
|
|
20
|
+
* text input, and neither of those can be done to an element. `content` is
|
|
21
|
+
* where a row draws more than that.
|
|
20
22
|
*/
|
|
21
23
|
label?: string;
|
|
24
|
+
/**
|
|
25
|
+
* What the row draws in place of its label: a thumbnail, a glyph, a second
|
|
26
|
+
* line. The label is still what is filtered, written into the input and put
|
|
27
|
+
* on the chip, and the content's text is what a screen reader reads for the
|
|
28
|
+
* row, so keep the label's words in it.
|
|
29
|
+
*/
|
|
30
|
+
content?: React.ReactNode;
|
|
22
31
|
/** Unavailable, but still listed — the option exists, it just cannot be picked. */
|
|
23
32
|
disabled?: boolean;
|
|
24
33
|
}
|
|
25
34
|
/** One value, or an array of them, depending on `multiple`. */
|
|
26
35
|
type Selection<Multiple extends boolean | undefined> = Multiple extends true ? PlComboboxValue[] : PlComboboxValue | null;
|
|
36
|
+
/**
|
|
37
|
+
* What a caller hands in, which with `multiple` may be a readonly array: the
|
|
38
|
+
* field never writes into it, and Base UI takes one as it is.
|
|
39
|
+
*/
|
|
40
|
+
type HeldSelection<Multiple extends boolean | undefined> = Multiple extends true ? readonly PlComboboxValue[] : PlComboboxValue | null;
|
|
41
|
+
/**
|
|
42
|
+
* What caused a change, handed to `onValueChange`, `onInputValueChange` and
|
|
43
|
+
* `onOpenChange` as their second argument. It is Base UI's own: `reason` names
|
|
44
|
+
* the cause (`'item-press'`, `'chip-remove-press'`, `'clear-press'`,
|
|
45
|
+
* `'escape-key'` and the rest), `event` is the DOM event behind it, and
|
|
46
|
+
* `cancel()` turns the change away, so the field keeps what it held.
|
|
47
|
+
*/
|
|
48
|
+
export type PlComboboxChangeEventDetails = BaseUICombobox.Root.ChangeEventDetails;
|
|
27
49
|
export interface PlComboboxProps<Multiple extends boolean | undefined = false> extends PlassStyleProps, Omit<React.ComponentPropsWithoutRef<'div'>, 'color' | 'defaultValue' | 'children'> {
|
|
28
50
|
/** @default 'glass' */
|
|
29
51
|
variant?: PlassStyleProps['variant'];
|
|
@@ -52,12 +74,42 @@ export interface PlComboboxProps<Multiple extends boolean | undefined = false> e
|
|
|
52
74
|
*/
|
|
53
75
|
multiple?: Multiple;
|
|
54
76
|
/** The chosen value. Use with `onValueChange` for a controlled combobox. */
|
|
55
|
-
value?:
|
|
77
|
+
value?: HeldSelection<Multiple> | null;
|
|
56
78
|
/** The initially chosen value, for an uncontrolled combobox. */
|
|
57
|
-
defaultValue?:
|
|
58
|
-
|
|
79
|
+
defaultValue?: HeldSelection<Multiple> | null;
|
|
80
|
+
/** Called with the new value, and with what caused the change. */
|
|
81
|
+
onValueChange?: (value: Selection<Multiple>, eventDetails: PlComboboxChangeEventDetails) => void;
|
|
59
82
|
/** Called as the text in the input changes — the filter query, not the value. */
|
|
60
|
-
onInputValueChange?: (inputValue: string) => void;
|
|
83
|
+
onInputValueChange?: (inputValue: string, eventDetails: PlComboboxChangeEventDetails) => void;
|
|
84
|
+
/**
|
|
85
|
+
* Which rows a query keeps. Left out, a row stays while its label contains
|
|
86
|
+
* the query, compared in the runtime's locale. `null` keeps every row as
|
|
87
|
+
* `items` gives it, for a list a server has already searched, which may have
|
|
88
|
+
* matched a row on a spelling its label does not have.
|
|
89
|
+
*
|
|
90
|
+
* Receives the trimmed query, and is not asked about the row that offers
|
|
91
|
+
* what was typed: that row is the query itself, and always stays.
|
|
92
|
+
*/
|
|
93
|
+
filter?: ((option: PlComboboxOption, query: string) => boolean) | null;
|
|
94
|
+
/**
|
|
95
|
+
* Whether a row lights up on its own, so Enter takes it without an arrow key
|
|
96
|
+
* first. `true` lights the first row as the query changes, and the first of
|
|
97
|
+
* the rows that arrive after it, for a list filled after the reader stopped
|
|
98
|
+
* typing. `'always'` also lights the first row whenever the open list has
|
|
99
|
+
* rows and none is lit: as it opens with nothing typed, and once the pointer
|
|
100
|
+
* has left it. `false` lights nothing until an arrow key or the pointer
|
|
101
|
+
* does.
|
|
102
|
+
* @default true
|
|
103
|
+
*/
|
|
104
|
+
autoHighlight?: boolean | 'always';
|
|
105
|
+
/**
|
|
106
|
+
* Whether Escape with the list closed empties the field. Off by default, so
|
|
107
|
+
* a stray Escape cannot take every chip off, and the key goes on to whatever
|
|
108
|
+
* the field sits in, such as a modal. Escape on an open list closes it
|
|
109
|
+
* either way.
|
|
110
|
+
* @default false
|
|
111
|
+
*/
|
|
112
|
+
clearOnEscape?: boolean;
|
|
61
113
|
/**
|
|
62
114
|
* Whether a value the list does not contain may be committed.
|
|
63
115
|
*
|
|
@@ -129,7 +181,8 @@ export interface PlComboboxProps<Multiple extends boolean | undefined = false> e
|
|
|
129
181
|
open?: boolean;
|
|
130
182
|
/** Whether the popup starts open. */
|
|
131
183
|
defaultOpen?: boolean;
|
|
132
|
-
|
|
184
|
+
/** Called as the popup opens or closes, and with what caused it. */
|
|
185
|
+
onOpenChange?: (open: boolean, eventDetails: PlComboboxChangeEventDetails) => void;
|
|
133
186
|
/** Accessible name of the button that opens the list. @default 'Open' */
|
|
134
187
|
openLabel?: string;
|
|
135
188
|
/** Accessible name of the clear button. @default 'Clear' */
|
|
@@ -154,7 +207,7 @@ export interface PlComboboxProps<Multiple extends boolean | undefined = false> e
|
|
|
154
207
|
*
|
|
155
208
|
* With `multiple` the chosen values become PlChips inside the field and the
|
|
156
209
|
* input goes on filtering after each one. A row taken from a filtered list
|
|
157
|
-
* closes the list and empties the text, which is how Base UI
|
|
210
|
+
* closes the list and empties the text, which is how Base UI behaves,
|
|
158
211
|
* and a row taken with nothing typed leaves the list open for the next one.
|
|
159
212
|
*
|
|
160
213
|
* Base UI owns everything hard about this: the filtering and its collator, the
|
|
@@ -162,5 +215,5 @@ export interface PlComboboxProps<Multiple extends boolean | undefined = false> e
|
|
|
162
215
|
* navigation across both the list and the chips, and the hidden input that makes
|
|
163
216
|
* the whole thing submit with a form.
|
|
164
217
|
*/
|
|
165
|
-
export declare function PlCombobox<Multiple extends boolean | undefined = false>({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, allowCustom, customLabel, clearable, emptyMessage: emptyMessageProp, limit, placeholder, label, labelPlacement: labelPlacementProp, description, error, invalid, startIcon, fullWidth, disabled: disabledProp, readOnly, required, name, open, defaultOpen, onOpenChange, openLabel: openLabelProp, clearLabel: clearLabelProp, removeLabel: removeLabelProp, inputRef, id, className, hotKeys, classNames, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: PlComboboxProps<Multiple>): React.JSX.Element;
|
|
218
|
+
export declare function PlCombobox<Multiple extends boolean | undefined = false>({ variant, size: sizeProp, color: colorProp, density: densityProp, elevation, items, multiple, value, defaultValue, onValueChange, onInputValueChange, filter, autoHighlight, clearOnEscape, allowCustom, customLabel, clearable, emptyMessage: emptyMessageProp, limit, placeholder, label, labelPlacement: labelPlacementProp, description, error, invalid, startIcon, fullWidth, disabled: disabledProp, readOnly, required, name, open, defaultOpen, onOpenChange, openLabel: openLabelProp, clearLabel: clearLabelProp, removeLabel: removeLabelProp, inputRef, id, className, hotKeys, classNames, style, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, ...props }: PlComboboxProps<Multiple>): React.JSX.Element;
|
|
166
219
|
export {};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{FadedContext as t,controlNaming as
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as l from"react";import{FadedContext as t,controlNaming as n,useDisabled as s}from"../../internal/form.js";import{useDefaults as r,useRuntimeLocale as o}from"../../internal/defaults.js";import{useLabels as i}from"../../internal/labels.js";import{Combobox as c}from"@base-ui/react/combobox";import{Field as d}from"@base-ui/react/field";import{PlChip as m}from"../chip/PlChip.js";import{CheckIcon as u,ChevronIcon as p,CloseIcon as h,PlusIcon as f}from"../../internal/icons.js";import{hotKeyHandler as b}from"../../internal/keys.js";import{useFieldLight as g}from"../../internal/glow.js";import{FieldNotch as v,floatControlClassName as y,notchShellStyle as x,resolveNotch as w}from"../../internal/notch.js";import{chipRemoveClasses as C,controlHeightClasses as N,controlTextLeadingClasses as j,cx as L,disabledClasses as S,fieldDescriptionClasses as I,fieldReadOnlyClasses as O,fieldRestClasses as z,fieldSlots as k,focusWithinRingClasses as M,forcedHighlightedClasses as P,gapClasses as R,glassClasses as _,hasContent as E,iconClasses as V,metaTextClasses as A,paddingXClasses as F,radiusClasses as D,stackGapClasses as T,surfaceSlots as $,targetClasses as q,transitionClasses as H}from"../../internal/styles.js";const K=/* @__PURE__ */["relative flex w-full cursor-text items-center","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",H,V].join(" "),G=M,W={xs:"min-h-6 py-0",sm:"min-h-8 py-0.5",md:"min-h-10 py-1",lg:"min-h-12 py-1.5",xl:"min-h-14 py-2"},B=/* @__PURE__ */[_,"max-h-[min(20rem,var(--available-height))] overflow-y-auto overscroll-contain","w-[var(--anchor-width)] border bg-(--plass-glass-press) p-1","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none]","[transition:opacity_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),J=/* @__PURE__ */["relative flex cursor-pointer items-center gap-2 select-none","rounded-(--plass-radius-xs) py-1.5 pe-2 ps-7",H,"data-[highlighted]:bg-(--p-soft-hover) data-[highlighted]:text-(--p-accent)",P,"data-[selected]:font-semibold data-[selected]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","[outline:none]"].join(" "),Q=/* @__PURE__ */["inline-flex h-[1lh] shrink-0 cursor-pointer items-center justify-center p-0","rounded-(--plass-radius-xs) text-(--plass-muted-fg)","[transition:color_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","enabled:hover:text-(--p-accent)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:[outline-offset:1px]","disabled:cursor-not-allowed"].join(" "),U=/* @__PURE__ */L(q,Q),X=[],Y=new Map;function labelsOf(e,a,l){const t=new Map;for(const n of a){const a=l.get(n)?.label??e.get(n);void 0!==a&&t.set(n,a)}return t.size===e.size&&[...t].every(([a,l])=>e.get(a)===l)?e:0===t.size?Y:t}function ShownRows({countRef:e}){const a=c.useFilteredItems().length;return l.useEffect(()=>{e.current=a},[e,a]),null}function toArray(e){return null==e?X:Array.isArray(e)?e:[e]}export function PlCombobox({variant:M="glass",size:P,color:_,density:V,elevation:q=0,items:H,multiple:X,value:Z,defaultValue:ee,onValueChange:ae,onInputValueChange:le,filter:te,autoHighlight:ne=!0,clearOnEscape:se=!1,allowCustom:re=!0,customLabel:oe,clearable:ie=!1,emptyMessage:ce,limit:de,placeholder:me,label:ue,labelPlacement:pe,description:he,error:fe,invalid:be,startIcon:ge,fullWidth:ve=!1,disabled:ye=!1,readOnly:xe=!1,required:we=!1,name:Ce,open:Ne,defaultOpen:je,onOpenChange:Le,openLabel:Se,clearLabel:Ie,removeLabel:Oe,inputRef:ze,id:ke,className:Me,hotKeys:Pe,classNames:Re,style:_e,"aria-label":Ee,"aria-labelledby":Ve,...Ae}){const Fe=r(),De=o(void 0),Te=s(ye),$e=i(),qe=Se??$e.open,He=Ie??$e.clear,Ke=ce??$e.empty,Ge=Oe??$e.removeItem,We=P??Fe.size??"md",Be=_??Fe.color??"primary",Je=V??Fe.density??"default",Qe=pe??Fe.labelPlacement??"top",{notched:Ue,float:Xe}=w(Qe,ue,E(ge)),Ye=E(fe),Ze=be??Ye,ea=Ze?"danger":Be,aa=!0===X,la=l.useMemo(()=>H.map(e=>({value:e.value,label:e.label??String(e.value),content:e.content,disabled:e.disabled,option:e})),[H]),ta=l.useMemo(()=>te?(e,a)=>void 0===e.option||te(e.option,a):te,[te]),[na,sa]=l.useState(()=>toArray(ee)),ra=void 0===Z?na:toArray(Z),[oa,ia]=l.useState(""),ca=l.useMemo(()=>new Map(la.map(e=>[e.value,e])),[la]),[da,ma]=l.useState(Y),ua=labelsOf(da,ra,ca);ua!==da&&ma(ua);const pa=l.useCallback(e=>ca.get(e)??{value:e,label:ua.get(e)??String(e),custom:!ua.has(e)},[ca,ua]),ha=l.useCallback(e=>ua.get(e)??String(e),[ua]),fa=oa.trim(),ba=fa.toLocaleLowerCase(De),ga=""===fa||la.some(e=>e.label.toLocaleLowerCase(De)===ba||String(e.value).toLocaleLowerCase(De)===ba)||ra.some(e=>String(e).toLocaleLowerCase(De)===ba||ua.get(e)?.toLocaleLowerCase(De)===ba),va=!re||xe||Te||ga?null:fa,ya=l.useMemo(()=>null===va?la:[...la,{value:va,label:va,custom:!0}],[la,va]),xa=l.useMemo(()=>c.createItems(ya,{getValue:e=>e.value,getLabel:e=>e.label}),[ya]),wa=aa?ra:ra[0]??null;function refusesEscape(e){return!se&&"escape-key"===e.reason&&(e.cancel(),e.allowPropagation(),!0)}const Ca=l.useRef(0),Na=!Te&&!xe,ja=g(Na),La=L(K,Ue?"":G,j[We],D[We],R[We],aa?W[We]:N[We],`${F[Je][We]} pe-1.5`,Te?S[M]:xe?O[M]:z[M],Na?"plass-glow":""),Sa=/* @__PURE__ */["min-w-0 flex-1 self-stretch bg-transparent p-0 [font:inherit] text-inherit","[outline:none]","placeholder:text-(--plass-muted-fg)","caret-(--p-accent) selection:bg-(--p-soft-press)","disabled:cursor-not-allowed"].join(" "),renderInput=a=>e(c.Input,{ref:ze,placeholder:Xe?me||" ":me,...n(Ee,Ve),onKeyDown:b(Pe,void 0),className:L(Sa,aa&&"min-w-16",aa&&a&&"ms-1.5",Xe&&!a&&y)}),Ia=e(d.Label,{className:L(A[We],"font-semibold",Te?"text-(--plass-muted-fg)":"text-(--plass-fg)",Re?.label),children:ue});return a(d.Root,{disabled:Te,invalid:Ze,className:L("flex-col align-top",T[We],ve?"flex w-full":"inline-flex",Me),style:{...k(ea,q),..._e},...Ae,children:[E(ue)&&!Ue?Ia:null,a(c.Root,{id:ke,name:Ce,items:xa,multiple:aa,value:wa,filter:ta,onValueChange:(e,a)=>{if(refusesEscape(a))return;const l=toArray(e);0===l.length&&0===ra.length||function commit(e,a){ae?.(aa?e:e[0]??null,a),a.isCanceled||(void 0===Z&&sa(e),ma(labelsOf(ua,[...ra,...e],ca)))}(l,a)},onInputValueChange:(e,a)=>{refusesEscape(a)||(le?.(e,a),a.isCanceled||ia(e))},open:Ne,defaultOpen:je,onOpenChange:(e,a)=>{!e&&function holdsOpen(e){const{event:a}=e;return!("none"!==e.reason||"keydown"!==a.type||"Enter"!==a.key||Ca.current>0||(e.cancel(),a.preventDefault(),0))}(a)||Le?.(e,a)},autoHighlight:ne,itemToStringLabel:ha,itemToStringValue:String,limit:de,locale:De,disabled:Te,readOnly:xe,required:we,children:[e(ShownRows,{countRef:Ca}),e(v,{notched:Ue,size:We,density:Je,variant:M,disabled:Te,readOnly:xe,float:Xe,label:Ia,children:a(c.InputGroup,{style:Ue?x:void 0,...ja,className:L(La,Re?.control),children:[ge?e("span",{className:"flex h-[1lh] shrink-0 items-center text-(--plass-muted-fg)",children:ge}):null,aa?e(c.Chips,{className:"flex min-w-0 flex-1 flex-wrap items-center gap-1",children:e(t.Provider,{value:Te,children:e(c.Value,{children:t=>a(l.Fragment,{children:[t.map(pa).map(a=>e(c.Chip,{render:e(m,{variant:"glass",size:We,color:ea,density:"compact",disabled:Te,endIcon:xe||Te?null:e(c.ChipRemove,{"aria-label":Ge(a.label),className:C,children:e(h,{})})}),children:a.label},String(a.value))),renderInput(t.length>0)]})})})}):renderInput(!1),!ie||xe||Te?null:e(c.Clear,{"aria-label":He,className:U,children:e(h,{})}),e(c.Trigger,{"aria-label":qe,"aria-labelledby":void 0,className:Q,children:e(c.Icon,{className:L("flex items-center","[transition:rotate_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[popup-open]:rotate-180"),children:e(p,{})})})]})}),e(c.Portal,{children:e(c.Positioner,{className:"plass-portal z-(--plass-z-portal) [outline:none]",sideOffset:6,children:a(c.Popup,{className:L(B,D[We],j[We]),style:$(ea,3),children:[e(c.Empty,{className:"px-2 py-1.5 text-(--plass-muted-fg) empty:hidden",children:Ke}),e(c.List,{children:t=>e(c.Item,{value:t.value,disabled:t.disabled,className:J,children:t.custom?a(l.Fragment,{children:[e("span",{className:"absolute start-1.5 flex size-4 items-center justify-center text-(--p-accent) [&_svg]:size-4",children:e(f,{})}),e("span",{className:"truncate",children:oe?oe(t.label):$e.addCustom(t.label)})]}):a(l.Fragment,{children:[e(c.ItemIndicator,{className:"absolute start-1.5 flex size-4 items-center justify-center",children:e(u,{})}),E(t.content)?e("span",{className:"min-w-0 flex-1",children:t.content}):e("span",{className:"truncate",children:t.label})]})},`${t.custom?"custom:":""}${String(t.value)}`)})]})})})]}),he?e(d.Description,{className:L(I(We),Re?.description),children:he}):null,e(d.Error,Ye?{match:!0,className:L(A[We],"text-(--p-accent)",Re?.error),children:fe}:{className:L(A[We],"text-(--p-accent)",Re?.error)})]})}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { PlCombobox } from './PlCombobox.js';
|
|
2
|
-
export type { PlComboboxOption, PlComboboxProps, PlComboboxValue } from './PlCombobox.js';
|
|
2
|
+
export type { PlComboboxChangeEventDetails, PlComboboxOption, PlComboboxProps, PlComboboxValue } from './PlCombobox.js';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as n from"react";import{useDefaults as r}from"../../internal/defaults.js";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{ChevronIcon as o}from"../../internal/icons.js";import{safeRel as s}from"../../internal/link.js";import{controlHeightClasses as l,controlTextClasses as d,controlTextLeadingClasses as p,cx as c,focusRingClasses as u,focusRingInsetClasses as m,gapClasses as f,glassClasses as h,hasContent as g,iconClasses as v,metaTextClasses as y,paddingXClasses as b,radiusClasses as x,surfaceSlots as w,transitionClasses as N}from"../../internal/styles.js";const j=/* @__PURE__ */n.createContext({size:"md",density:"default",orientation:"horizontal"}),P=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center p-0","whitespace-nowrap font-medium leading-none no-underline","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",N,v,u,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","aria-[current=page]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35] data-[disabled]:hover:bg-transparent"].join(" "),F=/* @__PURE__ */[h,"relative border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none] overflow-hidden","w-(--p-panel-w) h-(--p-panel-h)","[transition-duration:var(--plass-duration)] [transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),k=/* @__PURE__ */["[transition-property:opacity,width,height]","in-data-[instant]:[transition-property:opacity]"].join(" "),z=/* @__PURE__ */["plass-portal z-(--plass-z-portal) [outline:none]","w-(--p-panel-w) h-(--p-panel-h)","[transition-duration:var(--plass-duration)] [transition-timing-function:var(--plass-ease)]"].join(" "),C=/* @__PURE__ */["[transition-property:top,left,right,bottom]","motion-reduce:[transition-property:none] data-[instant]:[transition-property:none]"].join(" "),S=/* @__PURE__ */new Set(["width","height","top","left","right","bottom"]),M=/* @__PURE__ */["flex min-w-0 cursor-pointer items-start no-underline","text-(--plass-fg) bg-transparent",N,v,"hover:bg-(--p-soft)",m].join(" "),A={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const PlNavigationMenuLink=/* @__PURE__ */n.forwardRef(function PlNavigationMenuLink({href:a,title:r,description:o,startIcon:l,className:d,children:u,target:m,rel:h,render:v,...w},N){const{size:P,density:F}=n.useContext(j);return t(i.Link,{ref:N,render:v,href:a,target:m,rel:s(m,h),className:c(M,x[P],f[P],b[F][P],"py-2",d),...w,children:[g(l)?e("span",{className:c("flex h-[1lh] shrink-0 items-center",p[P]),children:l}):null,t("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:c("font-medium",p[P]),children:r}),g(o)?e("span",{className:c("text-(--plass-muted-fg)",y[P]),children:o}):null,u]})]})});export function PlNavigationMenuItem({label:r,href:p,target:u,rel:m,render:h,startIcon:v,value:y,disabled:w=!1,active:N=!1,columns:F=1,children:k,className:z,style:C}){const{size:S,density:M,orientation:L}=n.useContext(j),R=(void 0!==p||void 0!==h)&&!g(k),I=c(P,"vertical"===L&&"w-full",l[S],d[S],f[S],b[M][S],x[S],z);return e(i.Item,{value:y,children:R?t(i.Link,{render:w?void 0:h,href:w?void 0:p,target:u,rel:s(u,m),"aria-current":N?"page":void 0,role:w?"link":void 0,"aria-disabled":w||void 0,"data-disabled":w?"":void 0,className:I,style:C,children:[g(v)?v:null,r]}):t(a,{children:[t(i.Trigger,{disabled:w,...w?{tabIndex:-1}:{},className:I,style:C,children:[g(v)?v:null,r,e(i.Icon,{className:c("flex items-center","vertical"===L?"-rotate-90 rtl:rotate-90":"[transition:rotate_var(--plass-duration)_var(--plass-ease)] motion-reduce:[transition-duration:0ms] data-[popup-open]:rotate-180"),children:e(o,{})})]}),e(i.Content,{keepMounted:!0,className:c("grid w-max max-w-[calc(var(--available-width)-2px)] gap-1 [&[hidden]]:hidden",A[S]),style:F>1?{gridTemplateColumns:`repeat(${F}, minmax(0, 1fr))`}:void 0,children:k})]})})}export const PlNavigationMenu=/* @__PURE__ */n.forwardRef(function PlNavigationMenu({size:a,color:o,density:s,orientation:l="horizontal",value:d,defaultValue:p,onValueChange:u,delay:m,closeDelay:h,sideOffset:g=8,className:v,style:y,children:b,...N},P){const M=r(),A=a??M.size??"md",L=o??M.color??"primary",R=s??M.density??"default",I=n.useMemo(()=>({size:A,density:R,orientation:l}),[A,R,l]),[V,O]=n.useState(p??null),T=void 0!==d?d:V,[W,q]=n.useState(T),[E,$]=n.useState(!1);W!==T&&(q(T),$(null!==T&&null!==W));const[D,_]=n.useState(null),[B,G]=n.useState(null),H=n.useRef(null),J=n.useCallback(()=>{const e=H.current;if(!D||!e||!B)return;const t=getComputedStyle(B),a=Number.parseFloat(t.width),n=Number.parseFloat(t.height);if(!(a>0&&n>0))return;const r=getComputedStyle(e),i=Number.parseFloat(r.borderLeftWidth)+Number.parseFloat(r.borderRightWidth),o=Number.parseFloat(r.borderTopWidth)+Number.parseFloat(r.borderBottomWidth);D.style.setProperty("--p-panel-w",`${a+i}px`),D.style.setProperty("--p-panel-h",`${n+o}px`)},[D,B]);return n.useLayoutEffect(()=>{null!==T&&J()},[T,J]),n.useEffect(()=>{if(!B||"undefined"==typeof ResizeObserver)return;let e=0;const t=new ResizeObserver(()=>{cancelAnimationFrame(e),e=requestAnimationFrame(J)});return t.observe(B),()=>{cancelAnimationFrame(e),t.disconnect()}},[B,J]),n.useEffect(()=>{const e=H.current;if(!E||!D||!e)return;const t=[D,e];let a=0;const settle=()=>{for(const e of t)getComputedStyle(e).getPropertyValue("width");t.some(e=>e.getAnimations().some(e=>e instanceof CSSTransition&&S.has(e.transitionProperty)&&"finished"!==e.playState))?a=requestAnimationFrame(settle):$(!1)};return a=requestAnimationFrame(settle),()=>{cancelAnimationFrame(a)}},[E,D]),e(j.Provider,{value:I,children:t(i.Root,{ref:P,orientation:l,value:d,defaultValue:p,onValueChange:e=>{void 0===d&&O(e),u?.(e)},delay:m,closeDelay:h,className:v,style:{...w(L,3),...y},...N,children:[e(i.List,{className:c("m-0 flex list-none items-center p-0","vertical"===l?"flex-col items-stretch":"flex-row",f[A]),children:b}),e(i.Portal,{keepMounted:!0,children:e(i.Positioner,{ref:_,className:c(z,E?C:"[transition-property:none]"),side:"vertical"===l?"inline-end":"bottom",align:"vertical"===l?"start":"center",sideOffset:g,collisionPadding:12,children:e(i.Popup,{ref:H,className:c(F,E?k:"[transition-property:opacity]",x[A]),children:e(i.Viewport,{ref:G,className:"w-max"})})})})]})})});
|
|
1
|
+
"use client";import{jsx as e,jsxs as t,Fragment as a}from"react/jsx-runtime";import*as n from"react";import{useDefaults as r}from"../../internal/defaults.js";import{NavigationMenu as i}from"@base-ui/react/navigation-menu";import{ChevronIcon as o}from"../../internal/icons.js";import{safeRel as s}from"../../internal/link.js";import{controlHeightClasses as l,controlTextClasses as d,controlTextLeadingClasses as p,cx as c,focusRingClasses as u,focusRingInsetClasses as m,gapClasses as f,glassClasses as h,hasContent as g,iconClasses as v,metaTextClasses as y,paddingXClasses as b,radiusClasses as x,surfaceSlots as w,transitionClasses as N}from"../../internal/styles.js";const j=/* @__PURE__ */n.createContext({size:"md",density:"default",orientation:"horizontal"}),P=/* @__PURE__ */["inline-flex shrink-0 cursor-pointer select-none items-center justify-center p-0","whitespace-nowrap font-medium leading-none no-underline","text-(--plass-fg) bg-transparent","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]",N,v,u,"hover:bg-(--p-soft)","data-[popup-open]:bg-(--p-soft-hover) data-[popup-open]:text-(--p-accent)","aria-[current=page]:text-(--p-accent)","data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50","data-[disabled]:saturate-[0.35] data-[disabled]:hover:bg-transparent"].join(" "),F=/* @__PURE__ */[h,"relative border text-(--plass-fg) bg-(--plass-glass-press)","[border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]","[outline:none] overflow-hidden","w-(--p-panel-w) h-(--p-panel-h)","[transition-duration:var(--plass-duration)] [transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","data-[starting-style]:opacity-0 data-[ending-style]:opacity-0"].join(" "),k=/* @__PURE__ */["[transition-property:opacity,width,height]","in-data-[instant]:[transition-property:opacity]"].join(" "),z=/* @__PURE__ */["plass-portal z-(--plass-z-portal) [outline:none]","w-(--p-panel-w) h-(--p-panel-h)","[transition-duration:var(--plass-duration)] [transition-timing-function:var(--plass-ease)]"].join(" "),C=/* @__PURE__ */["[transition-property:top,left,right,bottom]","motion-reduce:[transition-property:none] data-[instant]:[transition-property:none]"].join(" "),S=/* @__PURE__ */new Set(["width","height","top","left","right","bottom"]),M=/* @__PURE__ */["flex min-w-0 cursor-pointer items-start no-underline","text-(--plass-fg) bg-transparent",N,v,"hover:bg-(--p-soft)",m].join(" "),A={xs:"p-1",sm:"p-1.5",md:"p-2",lg:"p-2.5",xl:"p-3"};export const PlNavigationMenuLink=/* @__PURE__ */n.forwardRef(function PlNavigationMenuLink({href:a,title:r,description:o,startIcon:l,className:d,children:u,target:m,rel:h,render:v,...w},N){const{size:P,density:F}=n.useContext(j);return t(i.Link,{ref:N,render:v,href:a,target:m,rel:s(m,h),className:c(M,x[P],f[P],b[F][P],"py-2",d),...w,children:[g(l)?e("span",{className:c("flex h-[1lh] shrink-0 items-center",p[P]),children:l}):null,t("span",{className:"flex min-w-0 flex-col gap-0.5",children:[e("span",{className:c("font-medium",p[P]),children:r}),g(o)?e("span",{className:c("text-(--plass-muted-fg)",y[P]),children:o}):null,u]})]})});export function PlNavigationMenuItem({label:r,href:p,target:u,rel:m,render:h,startIcon:v,value:y,disabled:w=!1,active:N=!1,columns:F=1,children:k,className:z,style:C}){const{size:S,density:M,orientation:L}=n.useContext(j),R=(void 0!==p||void 0!==h)&&!g(k),I=c(P,"vertical"===L&&"w-full",l[S],d[S],f[S],b[M][S],x[S],z);return e(i.Item,{value:y,children:R?t(i.Link,{render:w?void 0:h,href:w?void 0:p,target:u,rel:s(u,m),"aria-current":N?"page":void 0,role:w?"link":void 0,"aria-disabled":w||void 0,"data-disabled":w?"":void 0,className:I,style:C,children:[g(v)?v:null,r]}):t(a,{children:[t(i.Trigger,{disabled:w,...w?{tabIndex:-1}:{},className:I,style:C,children:[g(v)?v:null,r,e(i.Icon,{className:c("flex items-center","vertical"===L?"-rotate-90 rtl:rotate-90":"[transition:rotate_var(--plass-duration)_var(--plass-ease)] motion-reduce:[transition-duration:0ms] data-[popup-open]:rotate-180"),children:e(o,{})})]}),e(i.Content,{keepMounted:!0,className:c("grid w-max max-w-[calc(var(--available-width)-2px)] gap-1 [&[hidden]]:hidden",A[S]),style:F>1?{gridTemplateColumns:`repeat(${F}, minmax(0, 1fr))`}:void 0,children:k})]})})}export const PlNavigationMenu=/* @__PURE__ */n.forwardRef(function PlNavigationMenu({size:a,color:o,density:s,orientation:l="horizontal",value:d,defaultValue:p,onValueChange:u,delay:m,closeDelay:h,sideOffset:g=8,className:v,style:y,children:b,...N},P){const M=r(),A=a??M.size??"md",L=o??M.color??"primary",R=s??M.density??"default",I=n.useMemo(()=>({size:A,density:R,orientation:l}),[A,R,l]),[V,O]=n.useState(p??null),T=void 0!==d?d:V,[W,q]=n.useState(T),[E,$]=n.useState(!1);W!==T&&(q(T),$(null!==T&&null!==W));const[D,_]=n.useState(null),[B,G]=n.useState(null),H=n.useRef(null),J=n.useCallback(()=>{const e=H.current;if(!D||!e||!B)return;const t=getComputedStyle(B),a=Number.parseFloat(t.width),n=Number.parseFloat(t.height);if(!(a>0&&n>0))return;const r=getComputedStyle(e),i=Number.parseFloat(r.borderLeftWidth)+Number.parseFloat(r.borderRightWidth),o=Number.parseFloat(r.borderTopWidth)+Number.parseFloat(r.borderBottomWidth);D.style.setProperty("--p-panel-w",`${a+i}px`),D.style.setProperty("--p-panel-h",`${n+o}px`)},[D,B]);return n.useLayoutEffect(()=>{null!==T&&J()},[T,J]),n.useEffect(()=>{if(!B||"undefined"==typeof ResizeObserver)return;let e=0;const t=new ResizeObserver(()=>{cancelAnimationFrame(e),e=requestAnimationFrame(J)});return t.observe(B),()=>{cancelAnimationFrame(e),t.disconnect()}},[B,J]),n.useEffect(()=>{const e=H.current;if(!E||!D||!e)return;const t=[D,e];let a=0;const settle=()=>{for(const e of t)getComputedStyle(e).getPropertyValue("width");t.some(e=>e.getAnimations().some(e=>e instanceof CSSTransition&&S.has(e.transitionProperty)&&"finished"!==e.playState))?a=requestAnimationFrame(settle):$(!1)};return a=requestAnimationFrame(settle),()=>{cancelAnimationFrame(a)}},[E,D]),e(j.Provider,{value:I,children:t(i.Root,{ref:P,orientation:l,value:d,defaultValue:p,onValueChange:e=>{void 0===d&&O(e),u?.(e)},delay:m,closeDelay:h,className:v,style:{...w(L,3),...y},...N,children:[e(i.List,{className:c("m-0 flex list-none flex-wrap items-center p-0","vertical"===l?"flex-col items-stretch":"flex-row",f[A]),children:b}),e(i.Portal,{keepMounted:!0,children:e(i.Positioner,{ref:_,className:c(z,E?C:"[transition-property:none]"),side:"vertical"===l?"inline-end":"bottom",align:"vertical"===l?"start":"center",sideOffset:g,collisionPadding:12,children:e(i.Popup,{ref:H,className:c(F,E?k:"[transition-property:opacity]",x[A]),children:e(i.Viewport,{ref:G,className:"w-max"})})})})]})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{useDisabled as t}from"../../internal/form.js";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as i}from"../../internal/labels.js";import{PlButton as l}from"../button/PlButton.js";import{ChevronIcon as o}from"../../internal/icons.js";import{controlTextClasses as s,gapClasses as m,srOnlyClasses as c}from"../../internal/styles.js";function range(e,a){return Array.from({length:Math.max(0,a-e+1)},(a,n)=>e+n)}function DoubleChevronIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const u={xs:"h-6 min-w-6",sm:"h-8 min-w-8",md:"h-10 min-w-10",lg:"h-12 min-w-12",xl:"h-14 min-w-14"},d={backgroundImage:"none"};export const PlPagination=/* @__PURE__ */n.forwardRef(function PlPagination({variant:h="ghost",size:f,color:p,density:g,elevation:b=0,count:x,page:v,defaultPage:y=1,onPageChange:j,siblingCount:M=1,boundaryCount:
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as n from"react";import{useDisabled as t}from"../../internal/form.js";import{useDefaults as r}from"../../internal/defaults.js";import{useLabels as i}from"../../internal/labels.js";import{PlButton as l}from"../button/PlButton.js";import{ChevronIcon as o}from"../../internal/icons.js";import{controlTextClasses as s,gapClasses as m,srOnlyClasses as c}from"../../internal/styles.js";function range(e,a){return Array.from({length:Math.max(0,a-e+1)},(a,n)=>e+n)}function DoubleChevronIcon(){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",children:e("path",{d:"m7.5 4.5 3.5 3.5-3.5 3.5M3.5 4.5 7 8l-3.5 3.5",stroke:"currentColor",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"})})}const u={xs:"h-6 min-w-6",sm:"h-8 min-w-8",md:"h-10 min-w-10",lg:"h-12 min-w-12",xl:"h-14 min-w-14"},d={backgroundImage:"none"};export const PlPagination=/* @__PURE__ */n.forwardRef(function PlPagination({variant:h="ghost",size:f,color:p,density:g,elevation:b=0,count:x,page:v,defaultPage:y=1,onPageChange:j,siblingCount:M=1,boundaryCount:w=1,showEdges:N=!1,showArrows:L=!0,disabled:P=!1,getPageHref:k,renderLink:C,label:I,pageLabel:D,previousLabel:z,nextLabel:K,firstLabel:B,lastLabel:$,statusLabel:A,className:R,children:S,...W},E){const F=r(),H=t(P),q=i(),G=I??q.pagination,J=z??q.paginationPrevious,O=K??q.paginationNext,Q=B??q.paginationFirst,T=$??q.paginationLast,U=D??q.paginationPage,V=A??q.paginationStatus,X=f??F.size??"md",Y=p??F.color??"primary",Z=g??F.density??"compact",[_,ee]=n.useState(y),ae=Math.min(Math.max(v??_,1),Math.max(x,1));if(x<2)return null;const ne=function paginationRange(e,a,n,t){const r=range(1,Math.min(t,e)),i=range(Math.max(e-t+1,t+1),e),l=Math.max(Math.min(a-n,e-t-2*n-1),t+2),o=Math.min(Math.max(a+n,t+2*n+2),i.length>0?i[0]-2:e-1);return[...r,...l>t+2?["start-ellipsis"]:t+1<e-t?[t+1]:[],...range(l,o),...o<e-t-1?["end-ellipsis"]:e-t>t?[e-t]:[],...i]}(x,ae,M,w),te=ae<=1,re=ae>=x,linkProps=(a,n,t)=>{if(!k||H)return null;if(n)return{render:e("a",{role:"link"}),"aria-disabled":!0,tabIndex:0};const r=k(a);return{render:C?C(a,r):e("a",{href:r}),rel:t}},press=(e,a)=>{e.metaKey||e.ctrlKey||e.shiftKey||e.altKey||k&&!j||(e.preventDefault(),(e=>{const a=Math.min(Math.max(e,1),x);a!==ae&&(void 0===v&&ee(a),j?.(a))})(a))},stepper=(a,n,t,r,i,o,s)=>e("li",{className:"flex",children:e(l,{variant:h,size:X,color:Y,density:Z,elevation:b,disabled:H||r,focusableWhenDisabled:!H,"aria-label":n,startIcon:e("span",{className:`flex items-center ${i}`,children:o}),onClick:e=>press(e,t),...linkProps(t,r,s)})},a);return a("nav",{ref:E,"aria-label":G,className:["flex items-center",R??""].filter(Boolean).join(" "),...W,children:[a("ul",{role:"list",className:`m-0 flex list-none flex-wrap items-center p-0 ${m[X]}`,children:[N?stepper("first",Q,1,te,"rotate-180 rtl:rotate-0",e(DoubleChevronIcon,{})):null,L?stepper("previous",J,ae-1,te,"rotate-90 rtl:-rotate-90",e(o,{}),"prev"):null,ne.map((n,t)=>e("li","number"==typeof n?{className:"flex",children:a(l,{variant:n===ae?"solid":h,size:X,color:Y,density:Z,elevation:b,disabled:H,"aria-label":U(n),"aria-current":n===ae?"page":void 0,className:n===ae||"solid"===h?"tabular-nums [--p-fill-on:1]":"tabular-nums",style:d,onClick:e=>press(e,n),...linkProps(n,!1),children:[e("span",{"aria-hidden":"true",className:"plass-fill-layer"}),n]})}:{"aria-hidden":"true",className:["flex select-none items-center justify-center","text-(--plass-muted-fg)",s[X],u[X]].join(" "),children:"…"},`slot-${t}`)),L?stepper("next",O,ae+1,re,"-rotate-90 rtl:rotate-90",e(o,{}),"next"):null,N?stepper("last",T,x,re,"rtl:rotate-180",e(DoubleChevronIcon,{})):null]}),e("span",{className:c,"aria-live":"polite",children:V(ae,x)}),S]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{controlNaming as l,useDisabled as o
|
|
1
|
+
"use client";import{jsx as e,jsxs as a}from"react/jsx-runtime";import*as r from"react";import{controlNaming as l,useDisabled as o}from"../../internal/form.js";import{useDefaults as s}from"../../internal/defaults.js";import{Radio as t}from"@base-ui/react/radio";import{RadioGroup as i}from"@base-ui/react/radio-group";import{Field as n}from"@base-ui/react/field";import{controlSlots as d,cx as c,fieldDescriptionClasses as p,focusRingClasses as m,forcedCheckedClasses as f,forcedDisabledCheckedClasses as u,glassClasses as b,hasContent as h,metaTextClasses as x,tickDotClasses as g,tickRowTextClasses as y,tickSizeClasses as v,transitionClasses as N}from"../../internal/styles.js";const j=/* @__PURE__ */r.createContext({size:"md",color:"primary",readOnly:!1,disabled:!1}),k=/* @__PURE__ */["relative inline-flex shrink-0 items-center justify-center rounded-full border","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","plass-fill [--p-fill-edge:1px]",N,m].join(" "),R=/* @__PURE__ */[b,"cursor-pointer bg-(--plass-glass) [border-color:var(--plass-border)]","hover:bg-(--plass-glass-hover) hover:[border-color:var(--p-line)]","data-[checked]:[--p-fill-on:1] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent] data-[checked]:hover:brightness-105",f].join(" "),z=/* @__PURE__ */[b,"cursor-default bg-(--plass-glass) [border-color:var(--plass-border)]","saturate-[0.55]","data-[checked]:[--p-fill-on:1] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]",f].join(" "),w=/* @__PURE__ */[b,"cursor-not-allowed bg-(--plass-glass) [border-color:var(--plass-border)]","opacity-50 saturate-[0.35]","data-[checked]:[--p-fill-on:1] data-[checked]:text-(--p-on-solid)","data-[checked]:[border-color:transparent]",u].join(" "),O=/* @__PURE__ */["rounded-full bg-current","[transition-property:width,height]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");export const PlRadio=/* @__PURE__ */r.forwardRef(function PlRadio({label:l,description:o,disabled:s=!1,className:i,style:d,"aria-label":c,"aria-labelledby":p,...m},f){const u=r.useContext(j),b=m.readOnly??u.readOnly,h=s||u.disabled;return e(n.Root,{disabled:s,className:["flex flex-col",i??""].filter(Boolean).join(" "),style:d,children:a("div",{className:`flex items-start gap-2 ${y[u.size]}`,children:[e("span",{className:"flex h-[1lh] shrink-0 items-center",children:e(t.Root,{ref:f,className:[k,v[u.size],h?w:b?z:R].join(" "),disabled:s,"aria-label":c,"aria-labelledby":p,...m,children:e(t.Indicator,{keepMounted:!0,className:`${O} ${g[u.size]}`})})}),l||o?a("span",{className:"flex min-w-0 flex-col gap-0.5",children:[l?e(n.Label,{className:h?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",children:l}):null,o?e(n.Description,{className:`m-0 ${x[u.size]} text-(--plass-muted-fg)`,children:o}):null]}):null]})})});export const PlRadioGroup=/* @__PURE__ */r.forwardRef(function PlRadioGroup({size:t,color:m,orientation:f="vertical",label:u,description:b,error:g,invalid:y,disabled:v=!1,readOnly:N=!1,className:k,classNames:R,style:z,children:w,"aria-label":O,"aria-labelledby":P,...$},G){const B=s(),C=o(v),D=t??B.size??"md",L=m??B.color??"primary",M=h(g),E=y??M,I=E?"danger":L,q=r.useMemo(()=>({size:D,color:I,readOnly:N,disabled:C}),[D,I,N,C]);return e(j.Provider,{value:q,children:a(n.Root,{disabled:C,invalid:E,className:["flex flex-col gap-1.5",k??""].filter(Boolean).join(" "),style:{...d(I,0,"solid"),...z},children:[u?e(n.Label,{className:c(x[D],"font-semibold",C?"text-(--plass-muted-fg)":"text-(--plass-fg)",R?.label),children:u}):null,b?e(n.Description,{className:c(p(D),R?.description),children:b}):null,e(i,{ref:G,disabled:C,readOnly:N,className:c("flex","horizontal"===f?"flex-row flex-wrap gap-x-5 gap-y-2":"flex-col gap-2",R?.control),...l(O,P),...$,children:w}),e(n.Error,M?{match:!0,className:c(x[D],"text-(--p-accent)",R?.error),children:g}:{className:c(x[D],"text-(--p-accent)",R?.error)})]})})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as s from"react";import{PlSkeleton as
|
|
1
|
+
"use client";import{jsx as e,jsxs as t}from"react/jsx-runtime";import*as s from"react";import{PlSkeleton as l}from"../skeleton/PlSkeleton.js";import{useDefaults as n}from"../../internal/defaults.js";import{controlSlots as a,cx as r,hasContent as i,metaTextClasses as o,stackGapClasses as c}from"../../internal/styles.js";const d={xs:"text-xl",sm:"text-2xl",md:"text-3xl",lg:"text-4xl",xl:"text-5xl"};function formatChange(e){const t=Number.isInteger(e)?e.toFixed(0):e.toFixed(1);return`${e>0?"+":""}${t}%`}function Arrow({up:t}){return e("svg",{viewBox:"0 0 16 16",fill:"none","aria-hidden":"true",className:"size-[1em]",children:e("path",{d:t?"M8 12V4m0 0L4.5 7.5M8 4l3.5 3.5":"M8 4v8m0 0 3.5-3.5M8 12l-3.5-3.5",stroke:"currentColor",strokeWidth:"1.75",strokeLinecap:"round",strokeLinejoin:"round"})})}export const PlStat=/* @__PURE__ */s.forwardRef(function PlStat({label:s,value:m,description:u,icon:x,change:p,changeLabel:f,improvesWhen:h="up",loading:g=!1,size:v,color:N,density:b,className:j,style:y,children:M,...k},w){const z=n(),C=v??z.size??"md",L=N??z.color??"primary",P=b??z.density??"default",S=void 0===p?void 0:function roundChange(e){const t=Math.sign(e)*Math.round(10*Math.abs(e))/10;return 0===t?0:t}(p),A=void 0!==S&&0!==S,F=(S??0)>0,W=A&&("up"===h?F:!F),$=void 0!==p||i(f);return t("div",{ref:w,className:r("flex flex-col","compact"===P?"gap-0.5":c[C],j),style:{...a(L,0,"ghost"),...y},...k,children:[i(s)||i(x)?t("div",{className:r("flex items-center gap-1.5 text-(--plass-muted-fg)",o[C]),children:[i(x)?e("span",{"aria-hidden":"true",className:"flex items-center text-(--p-accent) [&_svg]:size-[1.15em]",children:x}):null,s]}):null,t("div",{className:"flex flex-wrap items-baseline gap-x-2 gap-y-0.5",children:[g?e(l,{shape:"line",size:C,color:L,width:"6ch"}):e("span",{className:r("font-semibold text-(--plass-fg) tabular-nums",d[C]),children:m}),$&&!g?t("span",{className:r("flex items-center gap-0.5 font-medium tabular-nums",o[C],A?W?"text-(--plass-success-accent)":"text-(--plass-danger-accent)":"text-(--plass-muted-fg)"),children:[A?e(Arrow,{up:F}):null,f??formatChange(S??0)]}):null]}),i(u)?e("div",{className:r("text-(--plass-muted-fg)",o[C]),children:u}):null,M]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as a,jsxs as e,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{useDisabled as
|
|
1
|
+
"use client";import{jsx as a,jsxs as e,Fragment as r}from"react/jsx-runtime";import*as t from"react";import{useDisabled as o}from"../../internal/form.js";import{useDefaults as l}from"../../internal/defaults.js";import{Switch as s}from"@base-ui/react/switch";import{Field as c}from"@base-ui/react/field";import{controlSlots as i,cx as n,fieldDescriptionClasses as d,focusRingClasses as h,hasContent as m,metaTextClasses as p,tickRowTextClasses as f}from"../../internal/styles.js";const u={xs:"h-3.5 w-6",sm:"h-4 w-7",md:"h-5 w-9",lg:"h-6 w-11",xl:"h-7 w-13"},b={xs:"data-[checked]:start-[calc(100%-0.75rem)]",sm:"data-[checked]:start-[calc(100%-0.875rem)]",md:"data-[checked]:start-[calc(100%-1.125rem)]",lg:"data-[checked]:start-[calc(100%-1.375rem)]",xl:"data-[checked]:start-[calc(100%-1.625rem)]"},g=/* @__PURE__ */["relative inline-flex shrink-0 rounded-full","[-webkit-tap-highlight-color:transparent] [touch-action:manipulation]","plass-fill","[transition-property:background-color,box-shadow,filter]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]",h].join(" "),x=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:CanvasText]","forced-colors:data-[checked]:[background-color:Highlight]"].join(" "),k=/* @__PURE__ */[x,"cursor-pointer bg-(--plass-track)","hover:brightness-[0.97] dark:hover:brightness-110","data-[checked]:[--p-fill-on:1]","data-[checked]:[box-shadow:var(--p-lift)] data-[checked]:hover:brightness-105"].join(" "),w=/* @__PURE__ */[x,"cursor-default bg-(--plass-track) saturate-[0.55]","data-[checked]:[--p-fill-on:1]","data-[checked]:shadow-none"].join(" "),j=/* @__PURE__ */["forced-colors:border forced-colors:[border-color:GrayText]","cursor-not-allowed bg-(--plass-track)","opacity-50 saturate-[0.35] shadow-none","data-[checked]:[--p-fill-on:1]"].join(" "),v=/* @__PURE__ */["absolute inset-y-0.5 start-0.5 aspect-square rounded-full bg-white","[box-shadow:0_1px_2px_rgb(20_40_90/0.25)]","forced-colors:[background-color:CanvasText] forced-colors:data-[checked]:[background-color:HighlightText]","[transition:inset-inline-start_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");export const PlSwitch=/* @__PURE__ */t.forwardRef(function PlSwitch({size:t,color:h,label:x,description:y,error:N,invalid:_,labelPlacement:T="end",disabled:P=!1,readOnly:R=!1,className:S,classNames:$,style:z,"aria-label":B,"aria-labelledby":C,...H},O){const q=l(),D=o(P),E=t??q.size??"md",F=h??q.color??"primary",G=m(N),L=_??G,A=L?"danger":F,I=a("span",{className:"flex h-[1lh] shrink-0 items-center",children:a(s.Root,{ref:O,className:n(g,u[E],D?j:R?w:k,$?.control),disabled:D,readOnly:R,"aria-label":B,"aria-labelledby":C,...H,children:a(s.Thumb,{className:`${v} ${b[E]}`})})}),J=x||y?e("span",{className:["flex min-w-0 flex-col gap-0.5","start"===T?"flex-1":""].filter(Boolean).join(" "),children:[x?a(c.Label,{className:n(D?"text-(--plass-muted-fg)":"cursor-pointer text-(--plass-fg)",$?.label),children:x}):null,y?a(c.Description,{className:n(d(E),$?.description),children:y}):null]}):null;return e(c.Root,{disabled:D,invalid:L,className:["inline-flex flex-col gap-1 align-top",S??""].filter(Boolean).join(" "),style:{...i(A,0,"solid"),...z},children:[a("div",{className:`flex items-start gap-2.5 ${f[E]}`,children:e(r,"start"===T?{children:[J,I]}:{children:[I,J]})}),a(c.Error,G?{match:!0,className:n(p[E],"text-(--p-accent)",$?.error),children:N}:{className:n(p[E],"text-(--p-accent)",$?.error)})]})});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
"use client";import{jsx as e,Fragment as t,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{PlBox as n}from"../components/box/PlBox.js";import{bandScale as i,categoryAt as s,categoryCount as r,categoriesAreDates as o,categoryExtent as d,chartFontSizes as c,compactNumber as u,extentOf as h,fitCategoryLabels as m,fitsLast as p,formatCategory as f,formatTimeTicks as x,lineDash as g,lineWidths as v,logScale as y,markerRadii as b,plotHeights as k,resolveColor as w,seriesColor as M,autoTickAngle as N,showsTick as z,textWidth as C,tickAngleOf as S,tickStride as A,tiltedDepth as $,tiltedPitch as P,tiltedRoom as j,tiltedStep as B,toValues as T,truncate as W,timeScale as _,valueScale as I,writeChartValue as D}from"./chart.js";import{useDefaults as E,useLocale as F}from"./defaults.js";import{usePlElementSize as K}from"../hooks/usePlElementSize.js";import{useLabels as H}from"./labels.js";import{layoutBox as L}from"./layout-box.js";import{textOf as R}from"./text.js";import{cx as V,glassClasses as Z,hasContent as O,metaTextClasses as U,srOnlyClasses as X,transitionClasses as Y}from"./styles.js";const q=[];function useMeasuredSize(e,t){const l=K(e);if(null!==l)return{width:l.width,height:l.height,guessed:!1};const a=void 0!==t&&Number.isFinite(t)&&t>0?t:0;return{width:a,height:null,guessed:a>0}}function givenHeight(e,t){return"number"==typeof e?e:void 0===e?t:null}export const markTransitionClasses=/* @__PURE__ */["[transition:opacity_var(--plass-duration)_var(--plass-ease),r_var(--plass-duration)_var(--plass-ease),scale_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");function entryKeys(e){const t=new Map,l=new Map;return e.map((e,a)=>{const n=e.id??null;if(null!==n){const e=l.get(n)??0;return l.set(n,e+1),`${n}#${e}@id`}const i=e.name??null;if(null===i)return String(a);const s=t.get(i)??0;return t.set(i,s+1),`${i}#${s}`})}function useVisibility(e,t){const l=entryKeys(e),[n,i]=a.useState(()=>{const t=new Set;return e.forEach((e,a)=>{e.hidden&&t.add(l[a])}),t});[...n].some(e=>!l.includes(e))&&i(new Set([...n].filter(e=>l.includes(e))));const[s,r]=a.useState(null),o=null!==s&&t?l.indexOf(s):-1;return null!==s&&-1===o&&r(null),{keys:l,visible:l.map(e=>!n.has(e)),hovered:-1===o?null:o,toggle:e=>{const t=l[e];void 0!==t&&i(e=>{const l=new Set(e);return l.has(t)?l.delete(t):l.add(t),l})},setHovered:e=>r(null===e?null:l[e]??null)}}const G={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse rtl:flex-row",right:"flex-row rtl:flex-row-reverse"},J={start:"justify-start",center:"justify-center",end:"justify-end"};function DashedRule({ink:t,size:l}){const a=v[l],n=16+a;return e("svg",{"aria-hidden":"true",width:n,height:10,viewBox:`0 0 ${n} 10`,className:"block shrink-0",children:e("line",{x1:a/2,x2:n-a/2,y1:5,y2:5,stroke:t,strokeWidth:a,strokeDasharray:g,strokeLinecap:"round"})})}function ChartLegendBar({series:n,colors:i,options:s,visibility:r,size:o,values:d,swatch:c,dashed:u}){const h=!1!==s.interactive,m="left"===s.side||"right"===s.side,p=H(),[f,x]=a.useState(!1),g=s.maxEntries,v=void 0!==g&&g>0&&n.length>g&&!f,y=v?n.slice(0,g):n,b=n.length-y.length,k=entryKeys(n);return l("ul",{className:V("m-0 flex list-none flex-wrap items-center gap-x-3 gap-y-1 p-0",m?"min-w-0 flex-col items-start":"",J[s.align??"center"],U[o]),children:[y.map((a,n)=>{const s=r.visible[n],m=null!==r.hovered&&r.hovered!==n,p=a.name??`${n+1}`,f=i[n],x=s?m?"opacity-55":"":"opacity-40",g=l(t,{children:[c?e("span",{"aria-hidden":"true",className:"flex size-2.5 shrink-0 items-center justify-center",children:c(n,f)}):u?.[n]?e(DashedRule,{ink:f,size:o}):e("span",{"aria-hidden":"true",className:`size-2.5 shrink-0 rounded-[0.1875rem] ${Y}`,style:{backgroundColor:f}}),e("span",{className:"min-w-0 truncate",children:p}),d?.[n]?e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:d[n]}):null]});return e("li",{className:"min-w-0",children:h?e("button",{type:"button","aria-pressed":s,onClick:()=>r.toggle(n),onPointerEnter:()=>r.setHovered(n),onPointerLeave:()=>r.setHovered(null),onFocus:()=>r.setHovered(n),onBlur:()=>r.setHovered(null),className:V("flex min-w-0 cursor-pointer items-center gap-1.5 rounded-(--plass-radius-xs)","px-1 py-0.5 text-(--plass-fg)","[transition-property:background-color,color,opacity]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-1",s?"":"line-through",x),children:g}):e("span",{className:V("flex min-w-0 items-center gap-1.5 px-1 py-0.5 text-(--plass-fg)",s?"":"line-through",x),children:g})},k[n])}),v||f?e("li",{className:"min-w-0",children:e("button",{type:"button","aria-expanded":f,onClick:()=>x(e=>!e),className:V("flex cursor-pointer items-center rounded-(--plass-radius-xs)","px-1 py-0.5 font-medium text-(--plass-muted-fg)","[transition-property:background-color,color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--plass-fg)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-1"),children:f?p.chartFewer:p.chartMore(b)})}):null]})}function ChartScaleLegend({steps:a,from:n,to:i,middle:s,align:r,vertical:o,size:d}){return e("div",{className:V("flex",o?"":J[r]),children:l("div",{className:V("grid grid-cols-[auto_auto_auto] items-center gap-x-2",U[d]),children:[e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:n}),e("span",{"aria-hidden":"true",className:V("flex h-2.5 overflow-hidden rounded-[0.1875rem]",o?"w-20":"w-24"),children:a.map(t=>e("span",{className:"h-full flex-1",style:{backgroundColor:t}},t))}),e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:i}),s?l(t,{children:[e("span",{}),e("span",{className:"text-center tabular-nums text-(--plass-muted-fg)",children:s}),e("span",{})]}):null]})})}function itemText(e){const a=e.label??e.formatted;return void 0===e.aside?a:l(t,{children:[a," (",e.aside,")"]})}function ChartTooltipPanel({heading:t,items:a,x:n,y:i,flip:s,size:r}){return l("div",{"data-plass-tooltip":"",className:V("pointer-events-none absolute z-10 max-w-56 min-w-24","rounded-(--plass-radius-sm) border p-2",Z,"bg-(--plass-glass-press) [border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]",U[r]),style:s?{right:`calc(100% - ${n}px + 10px)`,top:i}:{left:n+10,top:i},children:[e("div",{className:"mb-1 font-medium text-(--plass-fg)",children:t}),e("ul",{className:"m-0 flex list-none flex-col gap-0.5 p-0",children:a.map(t=>l("li",{className:"flex items-center gap-1.5",children:[e("span",{"aria-hidden":"true",className:"size-2 shrink-0 rounded-[0.125rem]",style:{backgroundColor:t.color}}),t.name?e("span",{className:"min-w-0 flex-1 truncate text-(--plass-muted-fg)",children:t.name}):null,e("span",{className:"ms-auto shrink-0 font-medium tabular-nums text-(--plass-fg)",children:itemText(t)})]},t.seriesIndex))})]})}function ChartStatus({heading:n,items:i}){return e("span",{role:"status","aria-live":"polite",className:X,children:0===i.length?null:l(t,{children:[O(n)?l(t,{children:[n,", "]}):null,i.map((e,t)=>l(a.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,itemText(e)]},e.seriesIndex))]})})}function chartTableName({label:e,"aria-label":t,"aria-labelledby":l}){return l?{labelledBy:l}:{caption:t??e}}const Q=/* @__PURE__ */a.memo(function ChartDataTable({id:t,caption:a,labelledBy:n,corner:i,categories:s,series:r,values:o,format:d,locale:c}){const u=entryKeys(r);return l("table",{id:t,className:X,"aria-labelledby":n,children:[a?e("caption",{children:a}):null,e("thead",{children:l("tr",{children:[e("th",{scope:"col",children:i??""}),r.map((t,l)=>e("th",{scope:"col",children:t.name??l+1},u[l]))]})}),e("tbody",{children:s.map((t,a)=>l("tr",{children:[e("th",{scope:"row",children:f(t,c)}),u.map((t,l)=>{const n=o[l]?.[a];return e("td",void 0!==n?.label?{children:n.label}:{children:null==n?.value?"":d(n.value)},t)})]},a))})]})});function ChartSurface({legend:t,legendSide:a,children:i,table:s,className:r,...o}){return l(n,{...o,className:V("relative flex gap-3",G[a],r??void 0),children:[e("div",{className:"relative min-w-0 flex-1",children:i}),t,s]})}function markKey(e,t){return`${e.key??t[e.series]??e.series}:${e.index}`}export function CartesianChart({series:n,categories:p,xAxis:g,yAxis:v,reference:w,horizontal:z=!1,stacked:A=!1,includeZero:P=!0,bandRatio:K=1,inset:Z=!1,headroom:O=0,markInset:Y=0,xScale:G="band",marks:J,markRadius:ee=24,table:te,summary:le,writeValue:ae,swatch:ne,stroked:ie=!1,scale:se,markTooltip:re,height:oe,initialWidth:de,format:ce,locale:ue,label:he,"aria-label":me,"aria-labelledby":pe,"aria-describedby":fe,legend:xe,tooltip:ge,empty:ve,size:ye,variant:be="ghost",padded:ke=!1,className:we,children:Me,...Ne}){const ze=E(),Ce=ye??ze.size??"md",Se=F(ue),Ae=a.useRef(null),{width:$e,height:Pe,guessed:je}=useMeasuredSize(Ae,de),Be=a.useRef({key:"",across:1,down:1}),Te=H(),We=a.useId(),_e=a.useId(),Ie=a.useId(),De=!1===xe?{interactive:!1}:!0===xe||void 0===xe?{}:xe,Ee=!0===xe||!1!==xe&&n.length>1,Fe=De.side??"bottom",Ke=useVisibility(n,Ee&&!1!==De.interactive),[He,Le]=a.useState(null),[Re,Ve]=a.useState(null),[Ze,Oe]=a.useState(null),Ue=a.useCallback(e=>ae?ae(e):D(e,ce,Se),[ae,ce,Se]),Xe=a.useMemo(()=>T(n),[n]),Ye=a.useMemo(()=>n.map((e,t)=>M(e,t)),[n]),qe=a.useMemo(()=>n.map(e=>!0===e.dashed),[n]),Ge=r(n),Je=a.useMemo(()=>Array.from({length:Ge},(e,t)=>s(t,p,Xe)),[Ge,p,Xe]),Qe=Xe.filter((e,t)=>Ke.visible[t]),et=h(Qe,A),tt=a.useMemo(()=>le??n.flatMap((e,t)=>{if(!Ke.visible[t])return[];const l=[...Xe[t]??[]].reverse().find(e=>null!==e.value),a=e.name??`${t+1}`;return void 0===l?[{name:a,said:null}]:[{name:a,said:l.label??Ue(l.value)}]}),[le,n,Xe,Ke.visible,Ue]),lt=givenHeight(oe,k[Ce]),at=c[Ce],nt=v,it=g,st=a.useMemo(()=>void 0===w?[]:Array.isArray(w)?w:[w],[w]),rt=se??("log"===nt?.scale?y(et,{min:nt.min,max:nt.max,tickCount:nt.tickCount}):I(et,{min:nt?.min,max:nt?.max,tickCount:nt?.tickCount,includeZero:P})),ot="value"===G?d(Qe,p):null,dt="value"===G&&o(Xe,p),ct="value"!==G?null:dt?_(ot,{min:it?.min,max:it?.max,tickCount:it?.tickCount}):"log"===it?.scale?y(ot,{min:it.min,max:it.max,tickCount:it.tickCount}):I(ot,{min:it?.min,max:it?.max,tickCount:it?.tickCount,includeZero:!1}),ut=ct&&"unit"in ct?x(ct.ticks,ct.unit,Se):null,ht=rt.ticks.map((e,t)=>nt?.tickFormat?R(nt.tickFormat(e,t)):Ue(e)),mt=it?.tickFormat,pt=a.useMemo(()=>Je.map((e,t)=>mt?R(mt(e,t)):f(e,Se)),[Je,mt,Se]),ft=ct?ct.ticks.map((e,t)=>mt?R(mt(dt?new Date(e):e,t)):ut?.[t]??u(e,Se)):pt,xt=ht.reduce((e,t)=>Math.max(e,C(t,at)),0),gt=at+6,vt=nt?.hidden?0:xt+10+(nt?.label?gt:0),yt=($e-(z?0:vt)-16)/Math.max(1,Ge),bt=lt??Pe??0,kt="function"==typeof Y?Y(bt):Y,wt=null!==ct,Mt=it?.tickAngle,Nt=z?0:"auto"===Mt?wt?0:N(ft,{slot:yt,fontSize:at}):S(Mt),zt=0!==Nt&&!it?.hidden,Ct=Math.max(3*at,.4*bt),St=a.useMemo(()=>zt?ft.map(e=>W(e,j(Ct,Nt,at),at)):m(ft,{horizontal:z,slot:yt,fontSize:at,ticks:wt}),[ft,zt,Ct,Nt,z,yt,at,wt]),At=a.useMemo(()=>St.reduce((e,t)=>Math.max(e,C(t,at)),0),[St,at]),$t=zt?B(At,Nt,at)+4:0,Pt=z?it?.hidden?0:At+10+(it?.label?gt:0):vt,jt=z?nt?.hidden?0:at+12+(nt?.label?gt:0):it?.hidden?0:(zt?$(At,Nt,at)+14:at+12)+(it?.label?gt:0),Bt=Math.max((z?it:nt)?.thickness??Pt,zt&&Nt<0?$t:0),Tt=(z?nt:it)?.thickness??jt,Wt=(z?12:zt?Nt>0?$t:12:ct?12:Math.max(8,St.length?At/2:8))+kt,_t=b[Ce]+4+O+kt,It={left:Bt+kt,top:_t,width:Math.max(0,$e-Bt-kt-Wt),height:Math.max(0,bt-_t-Tt-kt)},Dt=z?It.height:It.width,Et=i(Z?Math.max(1,Ge-1):Ge,Dt,K),Ft=a.useCallback(e=>Z?Ge<=1?Dt/2:Dt*e/(Ge-1):Et.centre(e),[Z,Ge,Dt,Et]),Kt=a.useCallback(e=>z?It.left+rt.fraction(e)*It.width:It.top+(1-rt.fraction(e))*It.height,[z,It.left,It.top,It.width,It.height,rt]),Ht=a.useCallback((e,t)=>z?{x:Kt(t),y:It.top+Ft(e)}:{x:It.left+Ft(e),y:Kt(t)},[z,Kt,Ft,It.left,It.top]),Lt=a.useCallback(e=>z?It.top+(1-(ct?.fraction(e)??0))*It.height:It.left+(ct?.fraction(e)??0)*It.width,[z,It.left,It.top,It.width,It.height,ct]),Rt=Kt(Math.min(Math.max(0,rt.min),rt.max)),Vt={plot:It,values:Xe,visible:Ke.visible,colors:Ye,dashed:qe,scale:rt,band:Et,horizontal:z,valuePx:Kt,categoryPx:Ft,point:Ht,categoryScale:ct,categoryValuePx:Lt,zeroPx:Rt,height:bt,categories:Je,format:Ue,size:Ce},Zt=!1===ge?{mode:"none"}:!0===ge||void 0===ge?{}:ge,Ot=Zt.mode??(J?"item":"index"),Ut=J??("nearest"===Ot?e=>function gridMarks(e,t){const l=[],a=b[e.size],n=[];return e.values.forEach((i,s)=>{const r=i.map((e,t)=>n[t]??0);t&&e.visible[s]&&i.forEach((e,t)=>{n[t]=(n[t]??0)+(e.value??0)}),e.visible[s]&&i.forEach((n,i)=>{if(null===n.value)return;const o=e.point(i,t?r[i]+n.value:n.value);l.push({series:s,index:i,x:o.x,y:o.y,r:a})})}),l}(e,A):void 0),Xt=Ut?Ut(Vt):q,Yt=null===Re?-1:Xt.findIndex(e=>markKey(e,Ke.keys)===Re),qt=-1===Yt?null:Xt[Yt],Gt=Ut?qt?qt.index:null:He,Jt=Ut?Xt.length:Ge,clearActive=()=>{Le(null),Ve(null),Oe(null)};(null!==He&&He>=Ge||null!==Re&&!qt)&&clearActive();const goTo=e=>{const t=null===e?null:Math.min(Jt-1,Math.max(0,e));if(Oe(null),Ut){const e=null===t?void 0:Xt[t];Ve(e?markKey(e,Ke.keys):null)}else Le(t)},step=e=>{goTo(((Ut?-1===Yt?null:Yt:He)??(e>0?-1:Jt))+e)},Qt=null===Gt?[]:n.flatMap((e,t)=>{if(!Ke.visible[t]||qt&&qt.series!==t)return[];const l=Xe[t]?.[Gt];return l&&null!==l.value?[{seriesIndex:t,name:e.name,color:l.color??Ye[t],value:l.value,formatted:Ue(l.value),label:l.label}]:[]}),el=qt&&re?re(qt):null,tl=el?el.items:"item"===Ot&&Qt.length>1&&null!==Ze?[Qt.reduce((e,t)=>Math.abs(Kt(t.value??0)-Ze)<Math.abs(Kt(e.value??0)-Ze)?t:e)]:Qt,ll=qt?Xe[qt.series]?.[qt.index]?.x??p?.[qt.index]??qt.index:void 0,al=qt?qt.x:z?Kt(tl[0]?.value??0):It.left+Ft(Gt??0),nl=qt?qt.y:z?It.top+Ft(Gt??0):It.top,il=qt?(qt.x-It.left)/Math.max(1,It.width)>.6:(z?rt.fraction(tl[0]?.value??0):Ft(Gt??0)/Math.max(1,Dt))>.6,sl={...Vt,hovered:Ke.hovered,activeIndex:Gt,marks:Xt,activeMark:qt},rl=0===Ge||null===et||"value"===G&&null===ot,ol=chartTableName({label:he,"aria-label":me,"aria-labelledby":pe});return l(ChartSurface,{...Ne,size:Ce,variant:be,padded:ke,className:we,legendSide:Fe,legend:Ee?e(ChartLegendBar,{series:n,colors:Ye,options:De,visibility:Ke,size:Ce,swatch:ne,dashed:ie?qe:void 0,values:De.showValue&&null!==Gt?n.map((e,t)=>{const l=Xe[t]?.[Gt]?.value;return null==l?void 0:Ue(l)}):void 0}):null,table:rl?null:te?.(We,ol)??e(Q,{id:We,...ol,corner:it?.label,categories:Je,series:n,values:Xe,format:Ue,locale:Se}),children:[l("div",{ref:Ae,role:"img",tabIndex:rl?void 0:0,"aria-labelledby":pe,"aria-label":me??he??Te.chart,"aria-describedby":V(fe,rl?Ie:_e),onPointerMove:e=>{if("none"===Ot)return;const t=((e,t)=>{const l=Ae.current;if(!l)return null;const a=l.getBoundingClientRect(),n=`${a.width} ${a.height} ${$e} ${Pe}`;let i=Be.current;return i.key!==n&&(i={key:n,across:L(l,!0).perPixel,down:L(l,!1).perPixel},Be.current=i),{x:(e-a.left)*i.across,y:(t-a.top)*i.down}})(e.clientX,e.clientY);if(Ut){const e=t?((e,t)=>{if(0===Xt.length)return null;let l=null,a=1/0,n=1/0;return Xt.forEach((i,s)=>{const r=Math.hypot(i.x-e,i.y-t),o=void 0===i.rx?Math.max(0,r-i.r):Math.hypot(Math.max(0,Math.abs(i.x-e)-i.rx),Math.max(0,Math.abs(i.y-t)-(i.ry??i.rx)));o<=ee&&(o<a||o===a&&r<n)&&(a=o,n=r,l=s)}),l})(t.x,t.y):null;Ve(null===e?null:markKey(Xt[e],Ke.keys))}else Le(t?((e,t)=>{if(0===Ge)return null;const l=z?t-It.top:e-It.left;if(l<-Et.step||l>Dt+Et.step)return null;const a=Z?Ge<=1?0:Math.round(l/Dt*(Ge-1)):Math.floor(l/Et.step);return Math.min(Ge-1,Math.max(0,a))})(t.x,t.y):null);var l,a;"item"!==Ot||Ut||Oe(t?(l=t.x,a=t.y,z?l:a):null)},onPointerLeave:clearActive,onKeyDown:"none"===Ot?void 0:e=>{const t=z?"ArrowDown":"ArrowRight",l=z?"ArrowUp":"ArrowLeft";if(e.key===t)step(1);else if(e.key===l)step(-1);else if("Home"===e.key)goTo(0);else if("End"===e.key)goTo(Jt-1);else{if("Escape"!==e.key||null===He&&null===Re)return;clearActive(),e.stopPropagation()}e.preventDefault()},onBlur:clearActive,className:V("relative w-full","rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2",je&&"overflow-hidden"),style:{height:lt??oe},children:[rl?e("div",{id:Ie,className:V("flex h-full items-center justify-center text-(--plass-muted-fg)",U[Ce]),children:ve??Te.empty}):$e>0&&(null!==lt||bt>0)?l("svg",{width:$e,height:bt||"100%",viewBox:`0 0 ${$e} ${bt}`,"aria-hidden":"true",className:"block overflow-visible",children:[e(ChartAxes,{plot:It,scale:rt,band:Et,horizontal:z,inset:Z,categoryPx:Ft,valuePx:Kt,tickTexts:ht,categoryTexts:St,categoryScale:ct,categoryValuePx:Lt,valueAxis:nt,categoryAxis:it,references:st,fontSize:at,zeroPx:Rt,tickAngle:zt?Nt:0,tickBand:zt?8+$(At,Nt,at):at+6}),null===Gt||Ut||"index"!==Ot||!1===Zt.crosshair?null:(()=>{const t=Ft(Gt);return e("line",z?{x1:It.left,x2:It.left+It.width,y1:It.top+t,y2:It.top+t,stroke:"var(--plass-chart-baseline)",strokeWidth:1}:{x1:It.left+t,x2:It.left+t,y1:It.top,y2:It.top+It.height,stroke:"var(--plass-chart-baseline)",strokeWidth:1})})(),Me(sl)]}):null,null!==Gt&&tl.length>0&&"none"!==Ot?Zt.render?e("div",{className:"pointer-events-none absolute z-10",style:il?{right:`calc(100% - ${al}px + 10px)`,top:nl}:{left:al+10,top:nl},children:Zt.render({index:el?.index??Gt,category:el?.category??ll??Je[Gt],items:el?.renderItems??tl})}):e(ChartTooltipPanel,{heading:el?el.heading:f(ll??Je[Gt],Se),items:tl,x:al,y:nl,flip:il,size:Ce}):null]}),rl?null:l("span",{id:_e,className:X,children:[tt.map((e,n)=>l(a.Fragment,{children:[n>0?", ":null,null===e.said?e.name:l(t,{children:[e.name," ",e.said]})]},n)),st.map((e,t)=>l(a.Fragment,{children:[", ",e.label?`${e.label} ${Ue(e.value)}`:Ue(e.value)]},`reference-${t}`))]}),"none"===Ot?null:e(ChartStatus,{heading:null===Gt?void 0:el?.heading??f(ll??Je[Gt],Se),items:tl})]})}function ChartAxes({plot:a,scale:n,horizontal:i,categoryPx:s,valuePx:r,tickTexts:o,categoryTexts:d,categoryScale:c,categoryValuePx:u,valueAxis:h,categoryAxis:m,references:f,fontSize:x,zeroPx:v,tickAngle:y,tickBand:b}){const k=!1!==h?.grid&&!h?.hidden,M=!m?.hidden&&(m?.grid??null!==c),categoryAlong=e=>c?u(c.ticks[e]):(i?a.top:a.left)+s(e),N=Math.max(...d.map(e=>C(e,x)),1),S=y?P(y,x):N+12,$=A(d.length,i?a.height:a.width,i?1.8*x:S),j=A(n.ticks.length,i?a.width:a.height,i?Math.max(...o.map(e=>C(e,x)),1)+16:2*x),B=d.length>1?Math.abs(categoryAlong(1)-categoryAlong(0)):a.width,T=n.ticks.length>1?Math.abs(r(n.ticks[1])-r(n.ticks[0])):a.height,W=d[d.length-1]??"",_=0!==y||p(d.length,$,B,i?1.8*x:C(W,x)),I=p(n.ticks.length,j,T,i?C(o[o.length-1]??"",x):1.6*x);return l("g",{children:[n.ticks.map((t,s)=>{const d=r(t),c=Math.abs(t)<1e-9;return l("g",{children:[k?e("line",i?{x1:d,x2:d,y1:a.top,y2:a.top+a.height,stroke:c?"var(--plass-chart-baseline)":"var(--plass-chart-grid)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:d,y2:d,stroke:c?"var(--plass-chart-baseline)":"var(--plass-chart-grid)",strokeWidth:1}):null,h?.hidden||!z(s,n.ticks.length,j,I)?null:e("text",i?{x:d,y:a.top+a.height+x+6,textAnchor:0===s?"start":s===n.ticks.length-1?"end":"middle",fontSize:x,fill:"var(--plass-muted-fg)",className:"tabular-nums",children:o[s]}:{x:a.left-8,y:d,textAnchor:"end",dominantBaseline:"central",fontSize:x,fill:"var(--plass-muted-fg)",className:"tabular-nums",children:o[s]})]},t)}),m?.hidden?null:l(t,{children:[e("line",i?{x1:v,x2:v,y1:a.top,y2:a.top+a.height,stroke:"var(--plass-chart-axis)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:v,y2:v,stroke:"var(--plass-chart-axis)",strokeWidth:1}),d.map((t,n)=>{const s=categoryAlong(n),r=z(n,d.length,$,_);if(!r&&(i||!M))return null;const o=s,u=a.top+a.height+8+x/2;return i?e("text",{x:a.left-8,y:s,textAnchor:"end",dominantBaseline:"central",fontSize:x,fill:"var(--plass-muted-fg)",className:c?"tabular-nums":void 0,children:t},n):l("g",{children:[M?e("line",{x1:s,x2:s,y1:a.top,y2:a.top+a.height,stroke:"var(--plass-chart-grid)",strokeWidth:1}):null,r?e("text",y?{x:o,y:u,transform:`rotate(${y} ${o} ${u})`,textAnchor:y<0?"end":"start",dominantBaseline:"central",fontSize:x,fill:"var(--plass-muted-fg)",className:c?"tabular-nums":void 0,children:t}:{x:s,y:a.top+a.height+x+6,textAnchor:c?0===n?"start":n===d.length-1?"end":"middle":"middle",fontSize:x,fill:"var(--plass-muted-fg)",className:c?"tabular-nums":void 0,children:t}):null]},n)})]}),f.map((t,n)=>{const s=r(t.value),o=t.color?w(t.color):"var(--plass-muted-fg)",d=!1===t.dashed?void 0:g;return l("g",{children:[e("line",i?{x1:s,x2:s,y1:a.top,y2:a.top+a.height,stroke:o,strokeWidth:1,strokeDasharray:d}:{x1:a.left,x2:a.left+a.width,y1:s,y2:s,stroke:o,strokeWidth:1,strokeDasharray:d}),t.label?e("text",{x:i?s:a.left+a.width,y:i?a.top+x:s-4,textAnchor:i?"middle":"end",fontSize:x,fontWeight:500,fill:o,children:t.label}):null]},n)}),h?.label?e("text",{x:i?a.left+a.width:a.left,y:i?a.top+a.height+b+x+6:a.top-8,textAnchor:i?"end":"start",fontSize:x,fill:"var(--plass-muted-fg)",fontWeight:500,children:h.label}):null,m?.label&&!i?e("text",{x:a.left+a.width,y:a.top+a.height+b+x+6,textAnchor:"end",fontSize:x,fill:"var(--plass-muted-fg)",fontWeight:500,children:m.label}):null]})}export{Q as ChartDataTable,ChartLegendBar,ChartScaleLegend,ChartStatus,ChartSurface,ChartTooltipPanel,chartTableName,entryKeys,givenHeight,useMeasuredSize,useVisibility};
|
|
1
|
+
"use client";import{jsx as e,Fragment as t,jsxs as l}from"react/jsx-runtime";import*as a from"react";import{PlBox as n}from"../components/box/PlBox.js";import{bandScale as i,categoryAt as s,categoryCount as r,categoriesAreDates as o,categoryExtent as d,chartFontSizes as c,compactNumber as u,extentOf as h,fitCategoryLabels as m,fitsLast as p,formatCategory as f,formatTimeTicks as x,lineDash as g,lineWidths as v,logScale as y,markerRadii as b,plotHeights as k,resolveColor as w,seriesColor as M,autoTickAngle as N,showsTick as z,referenceLabelRoom as C,textWidth as S,tickAngleOf as A,tickStride as $,tiltedDepth as P,tiltedPitch as j,tiltedRoom as B,tiltedStep as T,toValues as W,truncate as _,timeScale as I,valueScale as D,writeChartValue as E}from"./chart.js";import{useDefaults as F,useLocale as K}from"./defaults.js";import{usePlElementSize as R}from"../hooks/usePlElementSize.js";import{useLabels as H}from"./labels.js";import{layoutBox as L}from"./layout-box.js";import{textOf as V}from"./text.js";import{cx as Z,glassClasses as O,hasContent as U,metaTextClasses as X,srOnlyClasses as Y,transitionClasses as q}from"./styles.js";const G=[];function useMeasuredSize(e,t){const l=R(e);if(null!==l)return{width:l.width,height:l.height,guessed:!1};const a=void 0!==t&&Number.isFinite(t)&&t>0?t:0;return{width:a,height:null,guessed:a>0}}function givenHeight(e,t){return"number"==typeof e?e:void 0===e?t:null}export const markTransitionClasses=/* @__PURE__ */["[transition:opacity_var(--plass-duration)_var(--plass-ease),r_var(--plass-duration)_var(--plass-ease),scale_var(--plass-duration)_var(--plass-ease)]","motion-reduce:[transition-duration:0ms]"].join(" ");function entryKeys(e){const t=new Map,l=new Map;return e.map((e,a)=>{const n=e.id??null;if(null!==n){const e=l.get(n)??0;return l.set(n,e+1),`${n}#${e}@id`}const i=e.name??null;if(null===i)return String(a);const s=t.get(i)??0;return t.set(i,s+1),`${i}#${s}`})}function useVisibility(e,t){const l=entryKeys(e),[n,i]=a.useState(()=>{const t=new Set;return e.forEach((e,a)=>{e.hidden&&t.add(l[a])}),t});[...n].some(e=>!l.includes(e))&&i(new Set([...n].filter(e=>l.includes(e))));const[s,r]=a.useState(null),o=null!==s&&t?l.indexOf(s):-1;return null!==s&&-1===o&&r(null),{keys:l,visible:l.map(e=>!n.has(e)),hovered:-1===o?null:o,toggle:e=>{const t=l[e];void 0!==t&&i(e=>{const l=new Set(e);return l.has(t)?l.delete(t):l.add(t),l})},setHovered:e=>r(null===e?null:l[e]??null)}}const J={top:"flex-col-reverse",bottom:"flex-col",left:"flex-row-reverse rtl:flex-row",right:"flex-row rtl:flex-row-reverse"},Q={start:"justify-start",center:"justify-center",end:"justify-end"};function DashedRule({ink:t,size:l}){const a=v[l],n=16+a;return e("svg",{"aria-hidden":"true",width:n,height:10,viewBox:`0 0 ${n} 10`,className:"block shrink-0",children:e("line",{x1:a/2,x2:n-a/2,y1:5,y2:5,stroke:t,strokeWidth:a,strokeDasharray:g,strokeLinecap:"round"})})}function ChartLegendBar({series:n,colors:i,options:s,visibility:r,size:o,values:d,swatch:c,dashed:u}){const h=!1!==s.interactive,m="left"===s.side||"right"===s.side,p=H(),[f,x]=a.useState(!1),g=s.maxEntries,v=void 0!==g&&g>0&&n.length>g&&!f,y=v?n.slice(0,g):n,b=n.length-y.length,k=entryKeys(n);return l("ul",{className:Z("m-0 flex list-none flex-wrap items-center gap-x-3 gap-y-1 p-0",m?"min-w-0 flex-col items-start":"",Q[s.align??"center"],X[o]),children:[y.map((a,n)=>{const s=r.visible[n],m=null!==r.hovered&&r.hovered!==n,p=a.name??`${n+1}`,f=i[n],x=s?m?"opacity-55":"":"opacity-40",g=l(t,{children:[c?e("span",{"aria-hidden":"true",className:"flex size-2.5 shrink-0 items-center justify-center",children:c(n,f)}):u?.[n]?e(DashedRule,{ink:f,size:o}):e("span",{"aria-hidden":"true",className:`size-2.5 shrink-0 rounded-[0.1875rem] ${q}`,style:{backgroundColor:f}}),e("span",{className:"min-w-0 truncate",children:p}),d?.[n]?e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:d[n]}):null]});return e("li",{className:"min-w-0",children:h?e("button",{type:"button","aria-pressed":s,onClick:()=>r.toggle(n),onPointerEnter:()=>r.setHovered(n),onPointerLeave:()=>r.setHovered(null),onFocus:()=>r.setHovered(n),onBlur:()=>r.setHovered(null),className:Z("flex min-w-0 cursor-pointer items-center gap-1.5 rounded-(--plass-radius-xs)","px-1 py-0.5 text-(--plass-fg)","[transition-property:background-color,color,opacity]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-1",s?"":"line-through",x),children:g}):e("span",{className:Z("flex min-w-0 items-center gap-1.5 px-1 py-0.5 text-(--plass-fg)",s?"":"line-through",x),children:g})},k[n])}),v||f?e("li",{className:"min-w-0",children:e("button",{type:"button","aria-expanded":f,onClick:()=>x(e=>!e),className:Z("flex cursor-pointer items-center rounded-(--plass-radius-xs)","px-1 py-0.5 font-medium text-(--plass-muted-fg)","[transition-property:background-color,color]","[transition-duration:var(--plass-duration)]","[transition-timing-function:var(--plass-ease)]","motion-reduce:[transition-duration:0ms]","hover:bg-(--p-soft) hover:text-(--plass-fg)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-1"),children:f?p.chartFewer:p.chartMore(b)})}):null]})}function ChartScaleLegend({steps:a,from:n,to:i,middle:s,align:r,vertical:o,size:d}){return e("div",{className:Z("flex",o?"":Q[r]),children:l("div",{className:Z("grid grid-cols-[auto_auto_auto] items-center gap-x-2",X[d]),children:[e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:n}),e("span",{"aria-hidden":"true",className:Z("flex h-2.5 overflow-hidden rounded-[0.1875rem]",o?"w-20":"w-24"),children:a.map(t=>e("span",{className:"h-full flex-1",style:{backgroundColor:t}},t))}),e("span",{className:"shrink-0 tabular-nums text-(--plass-muted-fg)",children:i}),s?l(t,{children:[e("span",{}),e("span",{className:"text-center tabular-nums text-(--plass-muted-fg)",children:s}),e("span",{})]}):null]})})}function itemText(e){const a=e.label??e.formatted;return void 0===e.aside?a:l(t,{children:[a," (",e.aside,")"]})}function ChartTooltipPanel({heading:t,items:a,x:n,y:i,flip:s,size:r}){return l("div",{"data-plass-tooltip":"",className:Z("pointer-events-none absolute z-10 max-w-56 min-w-24","rounded-(--plass-radius-sm) border p-2",O,"bg-(--plass-glass-press) [border-color:var(--plass-glass-line)]","[box-shadow:var(--plass-shadow-3),var(--plass-gloss-glass)]",X[r]),style:s?{right:`calc(100% - ${n}px + 10px)`,top:i}:{left:n+10,top:i},children:[e("div",{className:"mb-1 font-medium text-(--plass-fg)",children:t}),e("ul",{className:"m-0 flex list-none flex-col gap-0.5 p-0",children:a.map(t=>l("li",{className:"flex items-center gap-1.5",children:[e("span",{"aria-hidden":"true",className:"size-2 shrink-0 rounded-[0.125rem]",style:{backgroundColor:t.color}}),t.name?e("span",{className:"min-w-0 flex-1 truncate text-(--plass-muted-fg)",children:t.name}):null,e("span",{className:"ms-auto shrink-0 font-medium tabular-nums text-(--plass-fg)",children:itemText(t)})]},t.seriesIndex))})]})}function ChartStatus({heading:n,items:i}){return e("span",{role:"status","aria-live":"polite",className:Y,children:0===i.length?null:l(t,{children:[U(n)?l(t,{children:[n,", "]}):null,i.map((e,t)=>l(a.Fragment,{children:[t>0?", ":null,e.name?`${e.name}: `:null,itemText(e)]},e.seriesIndex))]})})}function chartTableName({label:e,"aria-label":t,"aria-labelledby":l}){return l?{labelledBy:l}:{caption:t??e}}const ee=/* @__PURE__ */a.memo(function ChartDataTable({id:t,caption:a,labelledBy:n,corner:i,categories:s,series:r,values:o,format:d,locale:c}){const u=entryKeys(r);return l("table",{id:t,className:Y,"aria-labelledby":n,children:[a?e("caption",{children:a}):null,e("thead",{children:l("tr",{children:[e("th",{scope:"col",children:i??""}),r.map((t,l)=>e("th",{scope:"col",children:t.name??l+1},u[l]))]})}),e("tbody",{children:s.map((t,a)=>l("tr",{children:[e("th",{scope:"row",children:f(t,c)}),u.map((t,l)=>{const n=o[l]?.[a];return e("td",void 0!==n?.label?{children:n.label}:{children:null==n?.value?"":d(n.value)},t)})]},a))})]})});function ChartSurface({legend:t,legendSide:a,children:i,table:s,className:r,...o}){return l(n,{...o,className:Z("relative flex gap-3",J[a],r??void 0),children:[e("div",{className:"relative min-w-0 flex-1",children:i}),t,s]})}function markKey(e,t){return`${e.key??t[e.series]??e.series}:${e.index}`}export function CartesianChart({series:n,categories:p,xAxis:g,yAxis:v,reference:w,horizontal:z=!1,stacked:$=!1,includeZero:j=!0,bandRatio:R=1,inset:O=!1,headroom:U=0,markInset:q=0,xScale:J="band",marks:Q,markRadius:te=24,table:le,summary:ae,writeValue:ne,swatch:ie,stroked:se=!1,scale:re,markTooltip:oe,height:de,initialWidth:ce,format:ue,locale:he,label:me,"aria-label":pe,"aria-labelledby":fe,"aria-describedby":xe,legend:ge,tooltip:ve,empty:ye,size:be,variant:ke="ghost",padded:we=!1,className:Me,children:Ne,...ze}){const Ce=F(),Se=be??Ce.size??"md",Ae=K(he),$e=a.useRef(null),{width:Pe,height:je,guessed:Be}=useMeasuredSize($e,ce),Te=a.useRef({key:"",across:1,down:1}),We=H(),_e=a.useId(),Ie=a.useId(),De=a.useId(),Ee=!1===ge?{interactive:!1}:!0===ge||void 0===ge?{}:ge,Fe=!0===ge||!1!==ge&&n.length>1,Ke=Ee.side??"bottom",Re=useVisibility(n,Fe&&!1!==Ee.interactive),[He,Le]=a.useState(null),[Ve,Ze]=a.useState(null),[Oe,Ue]=a.useState(null),Xe=a.useCallback(e=>ne?ne(e):E(e,ue,Ae),[ne,ue,Ae]),Ye=a.useMemo(()=>W(n),[n]),qe=a.useMemo(()=>n.map((e,t)=>M(e,t)),[n]),Ge=a.useMemo(()=>n.map(e=>!0===e.dashed),[n]),Je=r(n),Qe=a.useMemo(()=>Array.from({length:Je},(e,t)=>s(t,p,Ye)),[Je,p,Ye]),et=Ye.filter((e,t)=>Re.visible[t]),tt=h(et,$),lt=a.useMemo(()=>ae??n.flatMap((e,t)=>{if(!Re.visible[t])return[];const l=[...Ye[t]??[]].reverse().find(e=>null!==e.value),a=e.name??`${t+1}`;return void 0===l?[{name:a,said:null}]:[{name:a,said:l.label??Xe(l.value)}]}),[ae,n,Ye,Re.visible,Xe]),at=givenHeight(de,k[Se]),nt=c[Se],it=v,st=g,rt=a.useMemo(()=>void 0===w?[]:Array.isArray(w)?w:[w],[w]),ot=re??("log"===it?.scale?y(tt,{min:it.min,max:it.max,tickCount:it.tickCount}):D(tt,{min:it?.min,max:it?.max,tickCount:it?.tickCount,includeZero:j})),dt="value"===J?d(et,p):null,ct="value"===J&&o(Ye,p),ut="value"!==J?null:ct?I(dt,{min:st?.min,max:st?.max,tickCount:st?.tickCount}):"log"===st?.scale?y(dt,{min:st.min,max:st.max,tickCount:st.tickCount}):D(dt,{min:st?.min,max:st?.max,tickCount:st?.tickCount,includeZero:!1}),ht=ut&&"unit"in ut?x(ut.ticks,ut.unit,Ae):null,mt=ot.ticks.map((e,t)=>it?.tickFormat?V(it.tickFormat(e,t)):Xe(e)),pt=st?.tickFormat,ft=a.useMemo(()=>Qe.map((e,t)=>pt?V(pt(e,t)):f(e,Ae)),[Qe,pt,Ae]),xt=ut?ut.ticks.map((e,t)=>pt?V(pt(ct?new Date(e):e,t)):ht?.[t]??u(e,Ae)):ft,gt=mt.reduce((e,t)=>Math.max(e,S(t,nt)),0),vt=nt+6,yt=it?.hidden?0:gt+10+(it?.label?vt:0),bt=(Pe-(z?0:yt)-16)/Math.max(1,Je),kt=at??je??0,wt="function"==typeof q?q(kt):q,Mt=null!==ut,Nt=st?.tickAngle,zt=z?0:"auto"===Nt?Mt?0:N(xt,{slot:bt,fontSize:nt}):A(Nt),Ct=0!==zt&&!st?.hidden,St=Math.max(3*nt,.4*kt),At=a.useMemo(()=>Ct?xt.map(e=>_(e,B(St,zt,nt),nt)):m(xt,{horizontal:z,slot:bt,fontSize:nt,ticks:Mt}),[xt,Ct,St,zt,z,bt,nt,Mt]),$t=a.useMemo(()=>At.reduce((e,t)=>Math.max(e,S(t,nt)),0),[At,nt]),Pt=Ct?T($t,zt,nt)+4:0,jt=z?st?.hidden?0:$t+10+(st?.label?vt:0):yt,Bt=z?it?.hidden?0:nt+12+(it?.label?vt:0):st?.hidden?0:(Ct?P($t,zt,nt)+14:nt+12)+(st?.label?vt:0),Tt=Math.max((z?st:it)?.thickness??jt,Ct&&zt<0?Pt:0),Wt=(z?it:st)?.thickness??Bt,_t=rt.flatMap(e=>e.label?[e.label]:[]),It=z?_t.length>0?nt+4:0:C(_t,Pe,nt),Dt=Math.max((z?12:Ct?zt>0?Pt:12:ut?12:Math.max(8,At.length?$t/2:8))+wt,z?0:It),Et=b[Se]+4+(z?It:U)+wt,Ft={left:Tt+wt,top:Et,width:Math.max(0,Pe-Tt-wt-Dt-(z?U:0)),height:Math.max(0,kt-Et-Wt-wt)},Kt=z?Ft.height:Ft.width,Rt=i(O?Math.max(1,Je-1):Je,Kt,R),Ht=a.useCallback(e=>O?Je<=1?Kt/2:Kt*e/(Je-1):Rt.centre(e),[O,Je,Kt,Rt]),Lt=a.useCallback(e=>z?Ft.left+ot.fraction(e)*Ft.width:Ft.top+(1-ot.fraction(e))*Ft.height,[z,Ft.left,Ft.top,Ft.width,Ft.height,ot]),Vt=a.useCallback((e,t)=>z?{x:Lt(t),y:Ft.top+Ht(e)}:{x:Ft.left+Ht(e),y:Lt(t)},[z,Lt,Ht,Ft.left,Ft.top]),Zt=a.useCallback(e=>z?Ft.top+(1-(ut?.fraction(e)??0))*Ft.height:Ft.left+(ut?.fraction(e)??0)*Ft.width,[z,Ft.left,Ft.top,Ft.width,Ft.height,ut]),Ot=Lt(Math.min(Math.max(0,ot.min),ot.max)),Ut={plot:Ft,values:Ye,visible:Re.visible,colors:qe,dashed:Ge,scale:ot,band:Rt,horizontal:z,valuePx:Lt,categoryPx:Ht,point:Vt,categoryScale:ut,categoryValuePx:Zt,zeroPx:Ot,height:kt,categories:Qe,format:Xe,size:Se},Xt=!1===ve?{mode:"none"}:!0===ve||void 0===ve?{}:ve,Yt=Xt.mode??(Q?"item":"index"),qt=Q??("nearest"===Yt?e=>function gridMarks(e,t){const l=[],a=b[e.size],n=[];return e.values.forEach((i,s)=>{const r=i.map((e,t)=>n[t]??0);t&&e.visible[s]&&i.forEach((e,t)=>{n[t]=(n[t]??0)+(e.value??0)}),e.visible[s]&&i.forEach((n,i)=>{if(null===n.value)return;const o=e.point(i,t?r[i]+n.value:n.value);l.push({series:s,index:i,x:o.x,y:o.y,r:a})})}),l}(e,$):void 0),Gt=qt?qt(Ut):G,Jt=null===Ve?-1:Gt.findIndex(e=>markKey(e,Re.keys)===Ve),Qt=-1===Jt?null:Gt[Jt],el=qt?Qt?Qt.index:null:He,tl=qt?Gt.length:Je,clearActive=()=>{Le(null),Ze(null),Ue(null)};(null!==He&&He>=Je||null!==Ve&&!Qt)&&clearActive();const goTo=e=>{const t=null===e?null:Math.min(tl-1,Math.max(0,e));if(Ue(null),qt){const e=null===t?void 0:Gt[t];Ze(e?markKey(e,Re.keys):null)}else Le(t)},step=e=>{goTo(((qt?-1===Jt?null:Jt:He)??(e>0?-1:tl))+e)},ll=null===el?[]:n.flatMap((e,t)=>{if(!Re.visible[t]||Qt&&Qt.series!==t)return[];const l=Ye[t]?.[el];return l&&null!==l.value?[{seriesIndex:t,name:e.name,color:l.color??qe[t],value:l.value,formatted:Xe(l.value),label:l.label}]:[]}),al=Qt&&oe?oe(Qt):null,nl=al?al.items:"item"===Yt&&ll.length>1&&null!==Oe?[ll.reduce((e,t)=>Math.abs(Lt(t.value??0)-Oe)<Math.abs(Lt(e.value??0)-Oe)?t:e)]:ll,il=Qt?Ye[Qt.series]?.[Qt.index]?.x??p?.[Qt.index]??Qt.index:void 0,sl=Qt?Qt.x:z?Lt(nl[0]?.value??0):Ft.left+Ht(el??0),rl=Qt?Qt.y:z?Ft.top+Ht(el??0):Ft.top,ol=Qt?(Qt.x-Ft.left)/Math.max(1,Ft.width)>.6:(z?ot.fraction(nl[0]?.value??0):Ht(el??0)/Math.max(1,Kt))>.6,dl={...Ut,hovered:Re.hovered,activeIndex:el,marks:Gt,activeMark:Qt},cl=0===Je||null===tt||"value"===J&&null===dt,ul=chartTableName({label:me,"aria-label":pe,"aria-labelledby":fe});return l(ChartSurface,{...ze,size:Se,variant:ke,padded:we,className:Me,legendSide:Ke,legend:Fe?e(ChartLegendBar,{series:n,colors:qe,options:Ee,visibility:Re,size:Se,swatch:ie,dashed:se?Ge:void 0,values:Ee.showValue&&null!==el?n.map((e,t)=>{const l=Ye[t]?.[el]?.value;return null==l?void 0:Xe(l)}):void 0}):null,table:cl?null:le?.(_e,ul)??e(ee,{id:_e,...ul,corner:st?.label,categories:Qe,series:n,values:Ye,format:Xe,locale:Ae}),children:[l("div",{ref:$e,role:"img",tabIndex:cl?void 0:0,"aria-labelledby":fe,"aria-label":pe??me??We.chart,"aria-describedby":Z(xe,cl?De:Ie),onPointerMove:e=>{if("none"===Yt)return;const t=((e,t)=>{const l=$e.current;if(!l)return null;const a=l.getBoundingClientRect(),n=`${a.width} ${a.height} ${Pe} ${je}`;let i=Te.current;return i.key!==n&&(i={key:n,across:L(l,!0).perPixel,down:L(l,!1).perPixel},Te.current=i),{x:(e-a.left)*i.across,y:(t-a.top)*i.down}})(e.clientX,e.clientY);if(qt){const e=t?((e,t)=>{if(0===Gt.length)return null;let l=null,a=1/0,n=1/0;return Gt.forEach((i,s)=>{const r=Math.hypot(i.x-e,i.y-t),o=void 0===i.rx?Math.max(0,r-i.r):Math.hypot(Math.max(0,Math.abs(i.x-e)-i.rx),Math.max(0,Math.abs(i.y-t)-(i.ry??i.rx)));o<=te&&(o<a||o===a&&r<n)&&(a=o,n=r,l=s)}),l})(t.x,t.y):null;Ze(null===e?null:markKey(Gt[e],Re.keys))}else Le(t?((e,t)=>{if(0===Je)return null;const l=z?t-Ft.top:e-Ft.left;if(l<-Rt.step||l>Kt+Rt.step)return null;const a=O?Je<=1?0:Math.round(l/Kt*(Je-1)):Math.floor(l/Rt.step);return Math.min(Je-1,Math.max(0,a))})(t.x,t.y):null);var l,a;"item"!==Yt||qt||Ue(t?(l=t.x,a=t.y,z?l:a):null)},onPointerLeave:clearActive,onKeyDown:"none"===Yt?void 0:e=>{const t=z?"ArrowDown":"ArrowRight",l=z?"ArrowUp":"ArrowLeft";if(e.key===t)step(1);else if(e.key===l)step(-1);else if("Home"===e.key)goTo(0);else if("End"===e.key)goTo(tl-1);else{if("Escape"!==e.key||null===He&&null===Ve)return;clearActive(),e.stopPropagation()}e.preventDefault()},onBlur:clearActive,className:Z("relative w-full","rounded-(--plass-radius-xs)","focus-visible:[outline:2px_solid_var(--p-ring)] focus-visible:outline-offset-2",Be&&"overflow-hidden"),style:{height:at??de},children:[cl?e("div",{id:De,className:Z("flex h-full items-center justify-center text-(--plass-muted-fg)",X[Se]),children:ye??We.empty}):Pe>0&&(null!==at||kt>0)?l("svg",{width:Pe,height:kt||"100%",viewBox:`0 0 ${Pe} ${kt}`,"aria-hidden":"true",className:"block overflow-visible",children:[e(ChartAxes,{plot:Ft,scale:ot,band:Rt,horizontal:z,inset:O,categoryPx:Ht,valuePx:Lt,tickTexts:mt,categoryTexts:At,categoryScale:ut,categoryValuePx:Zt,valueAxis:it,categoryAxis:st,references:rt,referenceRoom:It,fontSize:nt,zeroPx:Ot,tickAngle:Ct?zt:0,tickBand:Ct?8+P($t,zt,nt):nt+6}),null===el||qt||"index"!==Yt||!1===Xt.crosshair?null:(()=>{const t=Ht(el);return e("line",z?{x1:Ft.left,x2:Ft.left+Ft.width,y1:Ft.top+t,y2:Ft.top+t,stroke:"var(--plass-chart-baseline)",strokeWidth:1}:{x1:Ft.left+t,x2:Ft.left+t,y1:Ft.top,y2:Ft.top+Ft.height,stroke:"var(--plass-chart-baseline)",strokeWidth:1})})(),Ne(dl)]}):null,null!==el&&nl.length>0&&"none"!==Yt?Xt.render?e("div",{className:"pointer-events-none absolute z-10",style:ol?{right:`calc(100% - ${sl}px + 10px)`,top:rl}:{left:sl+10,top:rl},children:Xt.render({index:al?.index??el,category:al?.category??il??Qe[el],items:al?.renderItems??nl})}):e(ChartTooltipPanel,{heading:al?al.heading:f(il??Qe[el],Ae),items:nl,x:sl,y:rl,flip:ol,size:Se}):null]}),cl?null:l("span",{id:Ie,className:Y,children:[lt.map((e,n)=>l(a.Fragment,{children:[n>0?", ":null,null===e.said?e.name:l(t,{children:[e.name," ",e.said]})]},n)),rt.map((e,t)=>l(a.Fragment,{children:[", ",e.label?`${e.label} ${Xe(e.value)}`:Xe(e.value)]},`reference-${t}`))]}),"none"===Yt?null:e(ChartStatus,{heading:null===el?void 0:al?.heading??f(il??Qe[el],Ae),items:nl})]})}function ChartAxes({plot:a,scale:n,horizontal:i,categoryPx:s,valuePx:r,tickTexts:o,categoryTexts:d,categoryScale:c,categoryValuePx:u,valueAxis:h,categoryAxis:m,references:f,referenceRoom:x,fontSize:v,zeroPx:y,tickAngle:b,tickBand:k}){const M=!1!==h?.grid&&!h?.hidden,N=!m?.hidden&&(m?.grid??null!==c),categoryAlong=e=>c?u(c.ticks[e]):(i?a.top:a.left)+s(e),C=Math.max(...d.map(e=>S(e,v)),1),A=b?j(b,v):C+12,P=$(d.length,i?a.height:a.width,i?1.8*v:A),B=$(n.ticks.length,i?a.width:a.height,i?Math.max(...o.map(e=>S(e,v)),1)+16:2*v),T=d.length>1?Math.abs(categoryAlong(1)-categoryAlong(0)):a.width,W=n.ticks.length>1?Math.abs(r(n.ticks[1])-r(n.ticks[0])):a.height,I=d[d.length-1]??"",D=0!==b||p(d.length,P,T,i?1.8*v:S(I,v)),E=p(n.ticks.length,B,W,i?S(o[o.length-1]??"",v):1.6*v);return l("g",{children:[n.ticks.map((t,s)=>{const d=r(t),c=Math.abs(t)<1e-9;return l("g",{children:[M?e("line",i?{x1:d,x2:d,y1:a.top,y2:a.top+a.height,stroke:c?"var(--plass-chart-baseline)":"var(--plass-chart-grid)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:d,y2:d,stroke:c?"var(--plass-chart-baseline)":"var(--plass-chart-grid)",strokeWidth:1}):null,h?.hidden||!z(s,n.ticks.length,B,E)?null:e("text",i?{x:d,y:a.top+a.height+v+6,textAnchor:0===s?"start":s===n.ticks.length-1?"end":"middle",fontSize:v,fill:"var(--plass-muted-fg)",className:"tabular-nums",children:o[s]}:{x:a.left-8,y:d,textAnchor:"end",dominantBaseline:"central",fontSize:v,fill:"var(--plass-muted-fg)",className:"tabular-nums",children:o[s]})]},t)}),m?.hidden?null:l(t,{children:[e("line",i?{x1:y,x2:y,y1:a.top,y2:a.top+a.height,stroke:"var(--plass-chart-axis)",strokeWidth:1}:{x1:a.left,x2:a.left+a.width,y1:y,y2:y,stroke:"var(--plass-chart-axis)",strokeWidth:1}),d.map((t,n)=>{const s=categoryAlong(n),r=z(n,d.length,P,D);if(!r&&(i||!N))return null;const o=s,u=a.top+a.height+8+v/2;return i?e("text",{x:a.left-8,y:s,textAnchor:"end",dominantBaseline:"central",fontSize:v,fill:"var(--plass-muted-fg)",className:c?"tabular-nums":void 0,children:t},n):l("g",{children:[N?e("line",{x1:s,x2:s,y1:a.top,y2:a.top+a.height,stroke:"var(--plass-chart-grid)",strokeWidth:1}):null,r?e("text",b?{x:o,y:u,transform:`rotate(${b} ${o} ${u})`,textAnchor:b<0?"end":"start",dominantBaseline:"central",fontSize:v,fill:"var(--plass-muted-fg)",className:c?"tabular-nums":void 0,children:t}:{x:s,y:a.top+a.height+v+6,textAnchor:c?0===n?"start":n===d.length-1?"end":"middle":"middle",fontSize:v,fill:"var(--plass-muted-fg)",className:c?"tabular-nums":void 0,children:t}):null]},n)})]}),f.map((t,n)=>{const s=r(t.value),o=t.color?w(t.color):"var(--plass-muted-fg)",d=!1===t.dashed?void 0:g;return l("g",{children:[e("line",i?{x1:s,x2:s,y1:a.top,y2:a.top+a.height,stroke:o,strokeWidth:1,strokeDasharray:d}:{x1:a.left,x2:a.left+a.width,y1:s,y2:s,stroke:o,strokeWidth:1,strokeDasharray:d}),t.label?e("text",{x:i?s:a.left+a.width+4,y:i?a.top-6:s,textAnchor:i?"middle":"start",dominantBaseline:i?void 0:"central",fontSize:v,fontWeight:500,fill:o,children:i?t.label:_(t.label,x-4,v)}):null]},n)}),h?.label?e("text",{x:i?a.left+a.width:a.left,y:i?a.top+a.height+k+v+6:a.top-8,textAnchor:i?"end":"start",fontSize:v,fill:"var(--plass-muted-fg)",fontWeight:500,children:h.label}):null,m?.label&&!i?e("text",{x:a.left+a.width,y:a.top+a.height+k+v+6,textAnchor:"end",fontSize:v,fill:"var(--plass-muted-fg)",fontWeight:500,children:m.label}):null]})}export{ee as ChartDataTable,ChartLegendBar,ChartScaleLegend,ChartStatus,ChartSurface,ChartTooltipPanel,chartTableName,entryKeys,givenHeight,useMeasuredSize,useVisibility};
|
package/dist/internal/chart.d.ts
CHANGED
|
@@ -437,6 +437,11 @@ export declare function showsTick(index: number, count: number, stride: number,
|
|
|
437
437
|
* only the inner halves can collide.
|
|
438
438
|
*/
|
|
439
439
|
export declare function fitsLast(count: number, stride: number, step: number, labelWidth: number): boolean;
|
|
440
|
+
/**
|
|
441
|
+
* How much room a horizontal bar chart keeps past the end of its axis, so the
|
|
442
|
+
* value written after its longest bar is not cut off at the edge of the chart.
|
|
443
|
+
*/
|
|
444
|
+
export declare function barLabelRoom(series: readonly PlassChartSeries[], write: (value: number) => string, fontSize: number): number;
|
|
440
445
|
/**
|
|
441
446
|
* Roughly how wide a string renders at a given font size.
|
|
442
447
|
*
|
|
@@ -449,6 +454,16 @@ export declare function fitsLast(count: number, stride: number, step: number, la
|
|
|
449
454
|
* anything CJK is close to a full em, so the widest character decides.
|
|
450
455
|
*/
|
|
451
456
|
export declare function textWidth(text: string, fontSize: number): number;
|
|
457
|
+
/**
|
|
458
|
+
* How far past the end of the plot the labels of its reference lines reach.
|
|
459
|
+
*
|
|
460
|
+
* Past the end rather than on the plot, which is the one place a word cannot
|
|
461
|
+
* land on a mark: data can pass through any corner of a plot, and a line of
|
|
462
|
+
* data through a word leaves neither readable. The rest of the band is `gap`
|
|
463
|
+
* away from the line. A long label is cut rather than given the chart, so the
|
|
464
|
+
* band stops at `maxShare` of the width.
|
|
465
|
+
*/
|
|
466
|
+
export declare function referenceLabelRoom(labels: readonly string[], width: number, fontSize: number, gap?: number, maxShare?: number): number;
|
|
452
467
|
/**
|
|
453
468
|
* A label cut to the room it has, with an ellipsis.
|
|
454
469
|
*
|