@entifix/react-controls 0.20.1 → 0.20.2
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.
|
@@ -1,8 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
interface QuantityInputBase {
|
|
2
2
|
/** What is being counted; names the spinbutton and both of its buttons. */
|
|
3
3
|
label: string;
|
|
4
|
-
value: number;
|
|
5
|
-
onChange: (value: number) => void;
|
|
6
4
|
min?: number;
|
|
7
5
|
max?: number;
|
|
8
6
|
step?: number;
|
|
@@ -17,6 +15,24 @@ export interface QuantityInputProps {
|
|
|
17
15
|
name?: string;
|
|
18
16
|
className?: string;
|
|
19
17
|
}
|
|
18
|
+
/** The caller owns the count: every committed change comes back through `onChange`. */
|
|
19
|
+
export interface ControlledQuantityInputProps extends QuantityInputBase {
|
|
20
|
+
value: number;
|
|
21
|
+
onChange: (value: number) => void;
|
|
22
|
+
defaultValue?: never;
|
|
23
|
+
}
|
|
24
|
+
/**
|
|
25
|
+
* The field owns the count, starting at `defaultValue` (or `min`). This is the
|
|
26
|
+
* shape a server-rendered form takes: a server component cannot hand a client
|
|
27
|
+
* one a function, and with `name` the count posts with the form, so the page
|
|
28
|
+
* needs no client parent of its own. `onChange` still reports each commit.
|
|
29
|
+
*/
|
|
30
|
+
export interface UncontrolledQuantityInputProps extends QuantityInputBase {
|
|
31
|
+
value?: never;
|
|
32
|
+
defaultValue?: number;
|
|
33
|
+
onChange?: (value: number) => void;
|
|
34
|
+
}
|
|
35
|
+
export type QuantityInputProps = ControlledQuantityInputProps | UncontrolledQuantityInputProps;
|
|
20
36
|
/**
|
|
21
37
|
* A count, on the WAI-ARIA spinbutton pattern: Up and Down step it, Home and
|
|
22
38
|
* End jump to its bounds, and what is typed is committed on Enter or on
|
|
@@ -24,6 +40,11 @@ export interface QuantityInputProps {
|
|
|
24
40
|
* "Decrease {label}" and "Increase {label}" and sit at `--target-min`; they are
|
|
25
41
|
* out of the Tab order, as the pattern has them, because the arrow keys
|
|
26
42
|
* already do what they do.
|
|
43
|
+
*
|
|
44
|
+
* Controlled with `value` and `onChange`, or uncontrolled with `defaultValue`
|
|
45
|
+
* — the second is how a Server Action form uses it, since a server component
|
|
46
|
+
* can pass neither a state nor a handler.
|
|
27
47
|
*/
|
|
28
|
-
export declare function QuantityInput({ label, value, onChange, min, max, step, disabled, id, name, className, }: QuantityInputProps): import("react").JSX.Element;
|
|
48
|
+
export declare function QuantityInput({ label, value: controlled, defaultValue, onChange, min, max, step, disabled, id, name, className, }: QuantityInputProps): import("react").JSX.Element;
|
|
49
|
+
export {};
|
|
29
50
|
//# sourceMappingURL=quantity-input.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"quantity-input.d.ts","sourceRoot":"","sources":["../../../../src/ui/atoms/number-input/quantity-input.tsx"],"names":[],"mappings":"AAOA,
|
|
1
|
+
{"version":3,"file":"quantity-input.d.ts","sourceRoot":"","sources":["../../../../src/ui/atoms/number-input/quantity-input.tsx"],"names":[],"mappings":"AAOA,UAAU,iBAAiB;IACzB,2EAA2E;IAC3E,KAAK,EAAE,MAAM,CAAC;IACd,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ;;;;;OAKG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,uFAAuF;AACvF,MAAM,WAAW,4BAA6B,SAAQ,iBAAiB;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,KAAK,CAAC;CACtB;AAED;;;;;GAKG;AACH,MAAM,WAAW,8BAA+B,SAAQ,iBAAiB;IACvE,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,MAAM,kBAAkB,GAC5B,4BAA4B,GAAG,8BAA8B,CAAC;AAKhE;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,KAAK,EACL,KAAK,EAAE,UAAU,EACjB,YAAY,EACZ,QAAQ,EACR,GAAO,EACP,GAAG,EACH,IAAQ,EACR,QAAgB,EAChB,EAAE,EACF,IAAI,EACJ,SAAS,GACV,EAAE,kBAAkB,+BAkFpB"}
|
|
@@ -11,8 +11,14 @@ const STEP_BUTTON = 'flex min-h-(--target-min) min-w-(--target-min) shrink-0 ite
|
|
|
11
11
|
* "Decrease {label}" and "Increase {label}" and sit at `--target-min`; they are
|
|
12
12
|
* out of the Tab order, as the pattern has them, because the arrow keys
|
|
13
13
|
* already do what they do.
|
|
14
|
-
|
|
14
|
+
*
|
|
15
|
+
* Controlled with `value` and `onChange`, or uncontrolled with `defaultValue`
|
|
16
|
+
* — the second is how a Server Action form uses it, since a server component
|
|
17
|
+
* can pass neither a state nor a handler.
|
|
18
|
+
*/ export function QuantityInput({ label, value: controlled, defaultValue, onChange, min = 0, max, step = 1, disabled = false, id, name, className }) {
|
|
15
19
|
const t = useT();
|
|
20
|
+
const [own, setOwn] = useState(defaultValue != null ? defaultValue : min);
|
|
21
|
+
const value = controlled != null ? controlled : own;
|
|
16
22
|
const [text, setText] = useState(String(value));
|
|
17
23
|
useEffect(()=>{
|
|
18
24
|
// eslint-disable-next-line react-hooks/set-state-in-effect -- the value moved from outside (a step, a reset)
|
|
@@ -24,7 +30,9 @@ const STEP_BUTTON = 'flex min-h-(--target-min) min-w-(--target-min) shrink-0 ite
|
|
|
24
30
|
const set = (next)=>{
|
|
25
31
|
const clamped = clamp(next);
|
|
26
32
|
setText(String(clamped));
|
|
27
|
-
if (clamped
|
|
33
|
+
if (clamped === value) return;
|
|
34
|
+
setOwn(clamped);
|
|
35
|
+
onChange == null ? void 0 : onChange(clamped);
|
|
28
36
|
};
|
|
29
37
|
const commit = ()=>{
|
|
30
38
|
const typed = Number.parseInt(text, 10);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/ui/atoms/number-input/quantity-input.tsx"],"sourcesContent":["'use client';\n\nimport { type KeyboardEvent, useEffect, useState } from 'react';\n\nimport { useT } from '../../../i18n/index.js';\nimport { cn } from '../../utils/cn.js';\n\
|
|
1
|
+
{"version":3,"sources":["../../../../src/ui/atoms/number-input/quantity-input.tsx"],"sourcesContent":["'use client';\n\nimport { type KeyboardEvent, useEffect, useState } from 'react';\n\nimport { useT } from '../../../i18n/index.js';\nimport { cn } from '../../utils/cn.js';\n\ninterface QuantityInputBase {\n /** What is being counted; names the spinbutton and both of its buttons. */\n label: string;\n min?: number;\n max?: number;\n step?: number;\n disabled?: boolean;\n id?: string;\n /**\n * Posts the count with the form it sits in, under this name — a server\n * action's form works without JavaScript, where the field is the only part\n * a reader can change, so the field itself carries it. The server clamps\n * what it receives: a typed value is only clamped here once committed.\n */\n name?: string;\n className?: string;\n}\n\n/** The caller owns the count: every committed change comes back through `onChange`. */\nexport interface ControlledQuantityInputProps extends QuantityInputBase {\n value: number;\n onChange: (value: number) => void;\n defaultValue?: never;\n}\n\n/**\n * The field owns the count, starting at `defaultValue` (or `min`). This is the\n * shape a server-rendered form takes: a server component cannot hand a client\n * one a function, and with `name` the count posts with the form, so the page\n * needs no client parent of its own. `onChange` still reports each commit.\n */\nexport interface UncontrolledQuantityInputProps extends QuantityInputBase {\n value?: never;\n defaultValue?: number;\n onChange?: (value: number) => void;\n}\n\nexport type QuantityInputProps =\n ControlledQuantityInputProps | UncontrolledQuantityInputProps;\n\nconst STEP_BUTTON =\n 'flex min-h-(--target-min) min-w-(--target-min) shrink-0 items-center justify-center rounded-md border border-border-control bg-surface-elevated text-content hover:bg-surface disabled:cursor-not-allowed disabled:opacity-50';\n\n/**\n * A count, on the WAI-ARIA spinbutton pattern: Up and Down step it, Home and\n * End jump to its bounds, and what is typed is committed on Enter or on\n * leaving the field, clamped to the bounds. The − and + beside it are named\n * \"Decrease {label}\" and \"Increase {label}\" and sit at `--target-min`; they are\n * out of the Tab order, as the pattern has them, because the arrow keys\n * already do what they do.\n *\n * Controlled with `value` and `onChange`, or uncontrolled with `defaultValue`\n * — the second is how a Server Action form uses it, since a server component\n * can pass neither a state nor a handler.\n */\nexport function QuantityInput({\n label,\n value: controlled,\n defaultValue,\n onChange,\n min = 0,\n max,\n step = 1,\n disabled = false,\n id,\n name,\n className,\n}: QuantityInputProps) {\n const t = useT();\n const [own, setOwn] = useState(defaultValue ?? min);\n const value = controlled ?? own;\n const [text, setText] = useState(String(value));\n\n useEffect(() => {\n // eslint-disable-next-line react-hooks/set-state-in-effect -- the value moved from outside (a step, a reset)\n setText(String(value));\n }, [value]);\n\n const clamp = (next: number) =>\n Math.min(max ?? Number.POSITIVE_INFINITY, Math.max(min, next));\n const set = (next: number) => {\n const clamped = clamp(next);\n setText(String(clamped));\n if (clamped === value) return;\n setOwn(clamped);\n onChange?.(clamped);\n };\n const commit = () => {\n const typed = Number.parseInt(text, 10);\n set(Number.isNaN(typed) ? value : typed);\n };\n\n const onKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {\n const next = {\n ArrowUp: value + step,\n ArrowDown: value - step,\n Home: min,\n End: max,\n }[event.key];\n if (event.key === 'Enter') {\n commit();\n return;\n }\n if (next === undefined) return;\n event.preventDefault();\n set(next);\n };\n\n return (\n <span className={cn('inline-flex items-center gap-3xs', className)}>\n <button\n type=\"button\"\n tabIndex={-1}\n aria-label={t('quantity.decrease', { label })}\n disabled={disabled || value <= min}\n onClick={() => set(value - step)}\n className={STEP_BUTTON}\n >\n <span aria-hidden=\"true\">−</span>\n </button>\n <input\n id={id}\n name={name}\n type=\"text\"\n role=\"spinbutton\"\n inputMode=\"numeric\"\n aria-label={label}\n aria-valuenow={value}\n aria-valuemin={min}\n aria-valuemax={max}\n disabled={disabled}\n value={text}\n onChange={event => setText(event.currentTarget.value)}\n onBlur={commit}\n onKeyDown={onKeyDown}\n className=\"w-16 min-h-(--target-min) rounded-lg border border-border-control bg-surface-elevated px-2xs py-3xs text-center text-step-sm text-content tabular-nums focus-ring disabled:cursor-not-allowed disabled:opacity-50\"\n />\n <button\n type=\"button\"\n tabIndex={-1}\n aria-label={t('quantity.increase', { label })}\n disabled={disabled || (max !== undefined && value >= max)}\n onClick={() => set(value + step)}\n className={STEP_BUTTON}\n >\n <span aria-hidden=\"true\">+</span>\n </button>\n </span>\n );\n}\n"],"names":["useEffect","useState","useT","cn","STEP_BUTTON","QuantityInput","label","value","controlled","defaultValue","onChange","min","max","step","disabled","id","name","className","t","own","setOwn","text","setText","String","clamp","next","Math","Number","POSITIVE_INFINITY","set","clamped","commit","typed","parseInt","isNaN","onKeyDown","event","ArrowUp","ArrowDown","Home","End","key","undefined","preventDefault","span","button","type","tabIndex","aria-label","onClick","aria-hidden","input","role","inputMode","aria-valuenow","aria-valuemin","aria-valuemax","currentTarget","onBlur"],"mappings":"AAAA;;AAEA,SAA6BA,SAAS,EAAEC,QAAQ,QAAQ,QAAQ;AAEhE,SAASC,IAAI,QAAQ,yBAAyB;AAC9C,SAASC,EAAE,QAAQ,oBAAoB;AA0CvC,MAAMC,cACJ;AAEF;;;;;;;;;;;CAWC,GACD,OAAO,SAASC,cAAc,EAC5BC,KAAK,EACLC,OAAOC,UAAU,EACjBC,YAAY,EACZC,QAAQ,EACRC,MAAM,CAAC,EACPC,GAAG,EACHC,OAAO,CAAC,EACRC,WAAW,KAAK,EAChBC,EAAE,EACFC,IAAI,EACJC,SAAS,EACU;IACnB,MAAMC,IAAIhB;IACV,MAAM,CAACiB,KAAKC,OAAO,GAAGnB,SAASQ,uBAAAA,eAAgBE;IAC/C,MAAMJ,QAAQC,qBAAAA,aAAcW;IAC5B,MAAM,CAACE,MAAMC,QAAQ,GAAGrB,SAASsB,OAAOhB;IAExCP,UAAU;QACR,6GAA6G;QAC7GsB,QAAQC,OAAOhB;IACjB,GAAG;QAACA;KAAM;IAEV,MAAMiB,QAAQ,CAACC,OACbC,KAAKf,GAAG,CAACC,cAAAA,MAAOe,OAAOC,iBAAiB,EAAEF,KAAKd,GAAG,CAACD,KAAKc;IAC1D,MAAMI,MAAM,CAACJ;QACX,MAAMK,UAAUN,MAAMC;QACtBH,QAAQC,OAAOO;QACf,IAAIA,YAAYvB,OAAO;QACvBa,OAAOU;QACPpB,4BAAAA,SAAWoB;IACb;IACA,MAAMC,SAAS;QACb,MAAMC,QAAQL,OAAOM,QAAQ,CAACZ,MAAM;QACpCQ,IAAIF,OAAOO,KAAK,CAACF,SAASzB,QAAQyB;IACpC;IAEA,MAAMG,YAAY,CAACC;QACjB,MAAMX,OAAO;YACXY,SAAS9B,QAAQM;YACjByB,WAAW/B,QAAQM;YACnB0B,MAAM5B;YACN6B,KAAK5B;QACP,CAAC,CAACwB,MAAMK,GAAG,CAAC;QACZ,IAAIL,MAAMK,GAAG,KAAK,SAAS;YACzBV;YACA;QACF;QACA,IAAIN,SAASiB,WAAW;QACxBN,MAAMO,cAAc;QACpBd,IAAIJ;IACN;IAEA,qBACE,MAACmB;QAAK3B,WAAWd,GAAG,oCAAoCc;;0BACtD,KAAC4B;gBACCC,MAAK;gBACLC,UAAU,CAAC;gBACXC,cAAY9B,EAAE,qBAAqB;oBAAEZ;gBAAM;gBAC3CQ,UAAUA,YAAYP,SAASI;gBAC/BsC,SAAS,IAAMpB,IAAItB,QAAQM;gBAC3BI,WAAWb;0BAEX,cAAA,KAACwC;oBAAKM,eAAY;8BAAO;;;0BAE3B,KAACC;gBACCpC,IAAIA;gBACJC,MAAMA;gBACN8B,MAAK;gBACLM,MAAK;gBACLC,WAAU;gBACVL,cAAY1C;gBACZgD,iBAAe/C;gBACfgD,iBAAe5C;gBACf6C,iBAAe5C;gBACfE,UAAUA;gBACVP,OAAOc;gBACPX,UAAU0B,CAAAA,QAASd,QAAQc,MAAMqB,aAAa,CAAClD,KAAK;gBACpDmD,QAAQ3B;gBACRI,WAAWA;gBACXlB,WAAU;;0BAEZ,KAAC4B;gBACCC,MAAK;gBACLC,UAAU,CAAC;gBACXC,cAAY9B,EAAE,qBAAqB;oBAAEZ;gBAAM;gBAC3CQ,UAAUA,YAAaF,QAAQ8B,aAAanC,SAASK;gBACrDqC,SAAS,IAAMpB,IAAItB,QAAQM;gBAC3BI,WAAWb;0BAEX,cAAA,KAACwC;oBAAKM,eAAY;8BAAO;;;;;AAIjC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entifix/react-controls",
|
|
3
|
-
"version": "0.20.
|
|
3
|
+
"version": "0.20.2",
|
|
4
4
|
"description": "Entity-agnostic React UI — table, form, filters, wizard, command palette — rendered from entity metadata, plus layout primitives.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
"@headlessui/react": "^2.2.10",
|
|
20
20
|
"class-variance-authority": "^0.7.1",
|
|
21
21
|
"idb": "^8.0.4",
|
|
22
|
-
"@entifix/core": "0.20.
|
|
22
|
+
"@entifix/core": "0.20.2"
|
|
23
23
|
},
|
|
24
24
|
"exports": {
|
|
25
25
|
"./package.json": "./package.json",
|
|
@@ -55,8 +55,8 @@
|
|
|
55
55
|
"react": "19.3.1",
|
|
56
56
|
"react-i18next": "17.1.10",
|
|
57
57
|
"storybook": "^10.6.5",
|
|
58
|
-
"@entifix/i18n": "0.20.
|
|
59
|
-
"@entifix/style": "0.20.
|
|
58
|
+
"@entifix/i18n": "0.20.2",
|
|
59
|
+
"@entifix/style": "0.20.2"
|
|
60
60
|
},
|
|
61
61
|
"nx": {
|
|
62
62
|
"tags": [
|
|
@@ -111,7 +111,7 @@
|
|
|
111
111
|
"i18next": ">=26 <27",
|
|
112
112
|
"react": ">=19 <20",
|
|
113
113
|
"react-i18next": ">=17 <18",
|
|
114
|
-
"@entifix/i18n": "0.20.
|
|
114
|
+
"@entifix/i18n": "0.20.2"
|
|
115
115
|
},
|
|
116
116
|
"peerDependenciesMeta": {
|
|
117
117
|
"@entifix/i18n": {
|