@design-edito/tools 0.5.28 → 0.5.29
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/agnostic/html/hyper-json/smart-tags/coalesced/index.d.ts +9 -9
- package/agnostic/html/hyper-json/smart-tags/coalesced/index.js +9 -9
- package/agnostic/html/hyper-json/smart-tags/isolated/index.d.ts +2 -2
- package/agnostic/html/hyper-json/smart-tags/isolated/index.js +2 -2
- package/agnostic/html/index.d.ts +2 -2
- package/agnostic/html/index.js +2 -2
- package/agnostic/index.d.ts +3 -3
- package/agnostic/index.js +3 -3
- package/components/Drawer/index.d.ts +26 -2
- package/components/Drawer/index.js +96 -8
- package/components/index.d.ts +2 -2
- package/components/index.js +2 -2
- package/node/@aws-s3/storage/file/index.d.ts +1 -1
- package/node/@aws-s3/storage/file/index.js +1 -1
- package/node/@google-cloud/storage/directory/index.d.ts +1 -1
- package/node/@google-cloud/storage/directory/index.js +1 -1
- package/node/@google-cloud/storage/index.d.ts +1 -1
- package/node/@google-cloud/storage/index.js +1 -1
- package/node/cloud-storage/index.d.ts +1 -1
- package/node/cloud-storage/index.js +1 -1
- package/node/cloud-storage/operations/index.d.ts +2 -2
- package/node/cloud-storage/operations/index.js +2 -2
- package/node/ftps/file/index.d.ts +1 -1
- package/node/ftps/file/index.js +1 -1
- package/node/index.d.ts +1 -1
- package/node/index.js +1 -1
- package/node/process/index.d.ts +1 -1
- package/node/process/index.js +1 -1
- package/package.json +1 -1
|
@@ -2,41 +2,40 @@ export * as add from './add/index.js'
|
|
|
2
2
|
export * as addclass from './addclass/index.js'
|
|
3
3
|
export * as and from './and/index.js'
|
|
4
4
|
export * as append from './append/index.js'
|
|
5
|
+
export * as at from './at/index.js'
|
|
5
6
|
export * as call from './call/index.js'
|
|
6
7
|
export * as clone from './clone/index.js'
|
|
7
8
|
export * as deleteproperties from './deleteproperties/index.js'
|
|
8
9
|
export * as equals from './equals/index.js'
|
|
9
10
|
export * as getattribute from './getattribute/index.js'
|
|
10
11
|
export * as getproperties from './getproperties/index.js'
|
|
11
|
-
export * as at from './at/index.js'
|
|
12
12
|
export * as getproperty from './getproperty/index.js'
|
|
13
13
|
export * as hjparse from './hjparse/index.js'
|
|
14
14
|
export * as hjstringify from './hjstringify/index.js'
|
|
15
|
+
export * as initialize from './initialize/index.js'
|
|
15
16
|
export * as if from './if/index.js'
|
|
16
17
|
export * as join from './join/index.js'
|
|
17
|
-
export * as length from './length/index.js'
|
|
18
|
-
export * as initialize from './initialize/index.js'
|
|
19
18
|
export * as map from './map/index.js'
|
|
20
19
|
export * as negate from './negate/index.js'
|
|
21
20
|
export * as notrailing from './notrailing/index.js'
|
|
22
21
|
export * as or from './or/index.js'
|
|
23
|
-
export * as pickrandom from './pickrandom/index.js'
|
|
24
22
|
export * as populate from './populate/index.js'
|
|
23
|
+
export * as pickrandom from './pickrandom/index.js'
|
|
25
24
|
export * as print from './print/index.js'
|
|
26
25
|
export * as push from './push/index.js'
|
|
27
26
|
export * as pusheach from './pusheach/index.js'
|
|
27
|
+
export * as length from './length/index.js'
|
|
28
28
|
export * as recordtoarray from './recordtoarray/index.js'
|
|
29
|
-
export * as removeattribute from './removeattribute/index.js'
|
|
30
29
|
export * as removeclass from './removeclass/index.js'
|
|
30
|
+
export * as removeattribute from './removeattribute/index.js'
|
|
31
31
|
export * as renameproperty from './renameproperty/index.js'
|
|
32
32
|
export * as replace from './replace/index.js'
|
|
33
|
-
export * as select from './select/index.js'
|
|
34
33
|
export * as set from './set/index.js'
|
|
35
|
-
export * as
|
|
34
|
+
export * as select from './select/index.js'
|
|
36
35
|
export * as setproperty from './setproperty/index.js'
|
|
37
|
-
export * as
|
|
38
|
-
export * as split from './split/index.js'
|
|
36
|
+
export * as setattribute from './setattribute/index.js'
|
|
39
37
|
export * as spread from './spread/index.js'
|
|
38
|
+
export * as sorton from './sorton/index.js'
|
|
40
39
|
export * as toarray from './toarray/index.js'
|
|
41
40
|
export * as toboolean from './toboolean/index.js'
|
|
42
41
|
export * as toelement from './toelement/index.js'
|
|
@@ -50,3 +49,4 @@ export * as tostring from './tostring/index.js'
|
|
|
50
49
|
export * as totext from './totext/index.js'
|
|
51
50
|
export * as transformselected from './transformselected/index.js'
|
|
52
51
|
export * as trim from './trim/index.js'
|
|
52
|
+
export * as split from './split/index.js'
|
|
@@ -2,41 +2,40 @@ export * as add from './add/index.js'
|
|
|
2
2
|
export * as addclass from './addclass/index.js'
|
|
3
3
|
export * as and from './and/index.js'
|
|
4
4
|
export * as append from './append/index.js'
|
|
5
|
+
export * as at from './at/index.js'
|
|
5
6
|
export * as call from './call/index.js'
|
|
6
7
|
export * as clone from './clone/index.js'
|
|
7
8
|
export * as deleteproperties from './deleteproperties/index.js'
|
|
8
9
|
export * as equals from './equals/index.js'
|
|
9
10
|
export * as getattribute from './getattribute/index.js'
|
|
10
11
|
export * as getproperties from './getproperties/index.js'
|
|
11
|
-
export * as at from './at/index.js'
|
|
12
12
|
export * as getproperty from './getproperty/index.js'
|
|
13
13
|
export * as hjparse from './hjparse/index.js'
|
|
14
14
|
export * as hjstringify from './hjstringify/index.js'
|
|
15
|
+
export * as initialize from './initialize/index.js'
|
|
15
16
|
export * as if from './if/index.js'
|
|
16
17
|
export * as join from './join/index.js'
|
|
17
|
-
export * as length from './length/index.js'
|
|
18
|
-
export * as initialize from './initialize/index.js'
|
|
19
18
|
export * as map from './map/index.js'
|
|
20
19
|
export * as negate from './negate/index.js'
|
|
21
20
|
export * as notrailing from './notrailing/index.js'
|
|
22
21
|
export * as or from './or/index.js'
|
|
23
|
-
export * as pickrandom from './pickrandom/index.js'
|
|
24
22
|
export * as populate from './populate/index.js'
|
|
23
|
+
export * as pickrandom from './pickrandom/index.js'
|
|
25
24
|
export * as print from './print/index.js'
|
|
26
25
|
export * as push from './push/index.js'
|
|
27
26
|
export * as pusheach from './pusheach/index.js'
|
|
27
|
+
export * as length from './length/index.js'
|
|
28
28
|
export * as recordtoarray from './recordtoarray/index.js'
|
|
29
|
-
export * as removeattribute from './removeattribute/index.js'
|
|
30
29
|
export * as removeclass from './removeclass/index.js'
|
|
30
|
+
export * as removeattribute from './removeattribute/index.js'
|
|
31
31
|
export * as renameproperty from './renameproperty/index.js'
|
|
32
32
|
export * as replace from './replace/index.js'
|
|
33
|
-
export * as select from './select/index.js'
|
|
34
33
|
export * as set from './set/index.js'
|
|
35
|
-
export * as
|
|
34
|
+
export * as select from './select/index.js'
|
|
36
35
|
export * as setproperty from './setproperty/index.js'
|
|
37
|
-
export * as
|
|
38
|
-
export * as split from './split/index.js'
|
|
36
|
+
export * as setattribute from './setattribute/index.js'
|
|
39
37
|
export * as spread from './spread/index.js'
|
|
38
|
+
export * as sorton from './sorton/index.js'
|
|
40
39
|
export * as toarray from './toarray/index.js'
|
|
41
40
|
export * as toboolean from './toboolean/index.js'
|
|
42
41
|
export * as toelement from './toelement/index.js'
|
|
@@ -50,3 +49,4 @@ export * as tostring from './tostring/index.js'
|
|
|
50
49
|
export * as totext from './totext/index.js'
|
|
51
50
|
export * as transformselected from './transformselected/index.js'
|
|
52
51
|
export * as trim from './trim/index.js'
|
|
52
|
+
export * as split from './split/index.js'
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
export * as any from './any/index.js'
|
|
2
2
|
export * as array from './array/index.js'
|
|
3
3
|
export * as boolean from './boolean/index.js'
|
|
4
|
-
export * as element from './element/index.js'
|
|
5
4
|
export * as get from './get/index.js'
|
|
6
5
|
export * as guess from './guess/index.js'
|
|
7
6
|
export * as nodelist from './nodelist/index.js'
|
|
8
7
|
export * as null from './null/index.js'
|
|
8
|
+
export * as ref from './ref/index.js'
|
|
9
9
|
export * as number from './number/index.js'
|
|
10
10
|
export * as record from './record/index.js'
|
|
11
|
+
export * as element from './element/index.js'
|
|
11
12
|
export * as string from './string/index.js'
|
|
12
|
-
export * as ref from './ref/index.js'
|
|
13
13
|
export * as text from './text/index.js'
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
export * as any from './any/index.js'
|
|
2
2
|
export * as array from './array/index.js'
|
|
3
3
|
export * as boolean from './boolean/index.js'
|
|
4
|
-
export * as element from './element/index.js'
|
|
5
4
|
export * as get from './get/index.js'
|
|
6
5
|
export * as guess from './guess/index.js'
|
|
7
6
|
export * as nodelist from './nodelist/index.js'
|
|
8
7
|
export * as null from './null/index.js'
|
|
8
|
+
export * as ref from './ref/index.js'
|
|
9
9
|
export * as number from './number/index.js'
|
|
10
10
|
export * as record from './record/index.js'
|
|
11
|
+
export * as element from './element/index.js'
|
|
11
12
|
export * as string from './string/index.js'
|
|
12
|
-
export * as ref from './ref/index.js'
|
|
13
13
|
export * as text from './text/index.js'
|
package/agnostic/html/index.d.ts
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
+
export * as deepSelect from './deep-select/index.js'
|
|
1
2
|
export * as getNodeAncestors from './get-node-ancestors/index.js'
|
|
2
|
-
export * as getPositionInsideParent from './get-position-inside-parent/index.js'
|
|
3
3
|
export * as hyperJson from './hyper-json/index.js'
|
|
4
4
|
export * as insertNode from './insert-node/index.js'
|
|
5
5
|
export * as placeholders from './placeholders/index.js'
|
|
6
6
|
export * as replaceInElement from './replace-in-element/index.js'
|
|
7
|
+
export * as getPositionInsideParent from './get-position-inside-parent/index.js'
|
|
7
8
|
export * as selectorToElement from './selector-to-element/index.js'
|
|
8
9
|
export * as stringToNodes from './string-to-nodes/index.js'
|
|
9
10
|
export * as watchSelection from './watch-selection/index.js'
|
|
10
|
-
export * as deepSelect from './deep-select/index.js'
|
package/agnostic/html/index.js
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
|
+
export * as deepSelect from './deep-select/index.js'
|
|
1
2
|
export * as getNodeAncestors from './get-node-ancestors/index.js'
|
|
2
|
-
export * as getPositionInsideParent from './get-position-inside-parent/index.js'
|
|
3
3
|
export * as hyperJson from './hyper-json/index.js'
|
|
4
4
|
export * as insertNode from './insert-node/index.js'
|
|
5
5
|
export * as placeholders from './placeholders/index.js'
|
|
6
6
|
export * as replaceInElement from './replace-in-element/index.js'
|
|
7
|
+
export * as getPositionInsideParent from './get-position-inside-parent/index.js'
|
|
7
8
|
export * as selectorToElement from './selector-to-element/index.js'
|
|
8
9
|
export * as stringToNodes from './string-to-nodes/index.js'
|
|
9
10
|
export * as watchSelection from './watch-selection/index.js'
|
|
10
|
-
export * as deepSelect from './deep-select/index.js'
|
package/agnostic/index.d.ts
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
export * as arrays from './arrays/index.js'
|
|
2
|
-
export * as booleans from './booleans/index.js'
|
|
3
2
|
export * as colors from './colors/index.js'
|
|
3
|
+
export * as booleans from './booleans/index.js'
|
|
4
4
|
export * as css from './css/index.js'
|
|
5
|
-
export * as errors from './errors/index.js'
|
|
6
5
|
export * as html from './html/index.js'
|
|
6
|
+
export * as errors from './errors/index.js'
|
|
7
7
|
export * as misc from './misc/index.js'
|
|
8
8
|
export * as numbers from './numbers/index.js'
|
|
9
9
|
export * as objects from './objects/index.js'
|
|
10
|
-
export * as random from './random/index.js'
|
|
11
10
|
export * as optim from './optim/index.js'
|
|
11
|
+
export * as random from './random/index.js'
|
|
12
12
|
export * as regexps from './regexps/index.js'
|
|
13
13
|
export * as sanitization from './sanitization/index.js'
|
|
14
14
|
export * as strings from './strings/index.js'
|
package/agnostic/index.js
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
export * as arrays from './arrays/index.js'
|
|
2
|
-
export * as booleans from './booleans/index.js'
|
|
3
2
|
export * as colors from './colors/index.js'
|
|
3
|
+
export * as booleans from './booleans/index.js'
|
|
4
4
|
export * as css from './css/index.js'
|
|
5
|
-
export * as errors from './errors/index.js'
|
|
6
5
|
export * as html from './html/index.js'
|
|
6
|
+
export * as errors from './errors/index.js'
|
|
7
7
|
export * as misc from './misc/index.js'
|
|
8
8
|
export * as numbers from './numbers/index.js'
|
|
9
9
|
export * as objects from './objects/index.js'
|
|
10
|
-
export * as random from './random/index.js'
|
|
11
10
|
export * as optim from './optim/index.js'
|
|
11
|
+
export * as random from './random/index.js'
|
|
12
12
|
export * as regexps from './regexps/index.js'
|
|
13
13
|
export * as sanitization from './sanitization/index.js'
|
|
14
14
|
export * as strings from './strings/index.js'
|
|
@@ -3,8 +3,19 @@ import type { WithClassName } from '../utils/types.js';
|
|
|
3
3
|
/**
|
|
4
4
|
* Props for the {@link Drawer} component.
|
|
5
5
|
*
|
|
6
|
-
* @property openerContent - Content rendered inside the opener control.
|
|
7
|
-
*
|
|
6
|
+
* @property openerContent - Content rendered inside the opener control. Not
|
|
7
|
+
* necessarily a button: a command is a bar, and most consumers put a title *and* a
|
|
8
|
+
* toggle in it — hence `openerContent` rather than `openerBtnContent`.
|
|
9
|
+
* @property closerContent - Content rendered inside the closer control. Defaults to
|
|
10
|
+
* `openerContent`, so a bar written once serves both states and CSS tells them apart
|
|
11
|
+
* through the root modifiers. Pass `null` to render an empty closer.
|
|
12
|
+
* @property openerBtnSelector - CSS selector picking the toggle *inside*
|
|
13
|
+
* `openerContent`. Without it the whole bar opens the drawer; with it, only a click
|
|
14
|
+
* landing inside a matching descendant does. Whatever it points at receives the
|
|
15
|
+
* `opener-btn` class, so CSS can reach the toggle too. An invalid selector falls back
|
|
16
|
+
* to the whole bar.
|
|
17
|
+
* @property closerBtnSelector - Same, for the closer. Defaults to
|
|
18
|
+
* `openerBtnSelector`, like the content it goes with.
|
|
8
19
|
* @property defaultIsOpened - Initial open state in uncontrolled mode.
|
|
9
20
|
* Ignored when `isOpened` is provided. Defaults to `false`.
|
|
10
21
|
* @property isOpened - Controlled open state. When defined, the component
|
|
@@ -23,6 +34,8 @@ import type { WithClassName } from '../utils/types.js';
|
|
|
23
34
|
export type Props = PropsWithChildren<WithClassName<{
|
|
24
35
|
openerContent?: ReactNode;
|
|
25
36
|
closerContent?: ReactNode;
|
|
37
|
+
openerBtnSelector?: string;
|
|
38
|
+
closerBtnSelector?: string;
|
|
26
39
|
defaultIsOpened?: boolean;
|
|
27
40
|
isOpened?: boolean;
|
|
28
41
|
onOpenerClicked?: (isOpened: boolean) => void;
|
|
@@ -49,6 +62,9 @@ export type Props = PropsWithChildren<WithClassName<{
|
|
|
49
62
|
* - `opener`
|
|
50
63
|
* - `closer`
|
|
51
64
|
* - `content`
|
|
65
|
+
* - `opener-btn` / `closer-btn` — the toggle. On the bar itself when the whole bar is
|
|
66
|
+
* clickable, on whatever `openerBtnSelector` / `closerBtnSelector` point at otherwise.
|
|
67
|
+
* Always present, so a stylesheet has one place to look.
|
|
52
68
|
*
|
|
53
69
|
* ### CSS custom properties on the root element
|
|
54
70
|
* - `--lm-drawer-content-width` / `--lm-drawer-content-width-raw`
|
|
@@ -69,5 +85,13 @@ export type Props = PropsWithChildren<WithClassName<{
|
|
|
69
85
|
* - `onOpenerClicked` and `onCloserClicked` fire in both modes — a controlled
|
|
70
86
|
* parent needs them to know a click happened at all.
|
|
71
87
|
* - `onIsOpenedChanged` fires in both modes too, and never on mount.
|
|
88
|
+
* - **A command is a bar, not a button.** Both content props take whatever the consumer
|
|
89
|
+
* puts in the row — most often a title and a toggle — and `closerContent` /
|
|
90
|
+
* `closerBtnSelector` default to their opener counterpart, so that bar is written
|
|
91
|
+
* once. What tells the two states apart is CSS, through the root modifiers.
|
|
92
|
+
* - **`…BtnSelector` narrows the click, it does not move it.** The handler stays on the
|
|
93
|
+
* bar; the selector only decides which descendants carry the `-btn` class, and the
|
|
94
|
+
* handler asks that class. So the consumer keeps full control of what the row
|
|
95
|
+
* contains, and a stylesheet reaches the toggle without knowing the selector.
|
|
72
96
|
*/
|
|
73
97
|
export declare const Drawer: FunctionComponent<Props>;
|
|
@@ -1,10 +1,62 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from 'react';
|
|
2
|
+
import { useLayoutEffect, useRef, useState } from 'react';
|
|
3
3
|
import { clss } from '../../agnostic/css/clss/index.js';
|
|
4
4
|
import { ResizeObserverComponent } from '../ResizeObserver/index.js';
|
|
5
5
|
import { mergeClassNames, useChangeDispatch } from '../utils/index.js';
|
|
6
6
|
import { drawer as publicClassName } from '../public-classnames.js';
|
|
7
7
|
import cssModule from './styles.module.css';
|
|
8
|
+
/**
|
|
9
|
+
* Marks whatever a `…BtnSelector` points at with the command's `-btn` public class.
|
|
10
|
+
*
|
|
11
|
+
* **The class is the single source of truth**, for CSS and for the click handler alike:
|
|
12
|
+
* without it, a stylesheet would have no way to reach the toggle — the selector is a
|
|
13
|
+
* JavaScript prop and leaves no trace in the markup — and the two would answer the
|
|
14
|
+
* question « what is the toggle » by different means.
|
|
15
|
+
*
|
|
16
|
+
* The no-selector case never gets here: the class is then written straight into the
|
|
17
|
+
* bar's own `className`, because the whole bar *is* the toggle. So this hook only ever
|
|
18
|
+
* runs to narrow that down to a few descendants.
|
|
19
|
+
*
|
|
20
|
+
* **It writes into DOM that React owns.** React does not reset an attribute it has not
|
|
21
|
+
* diffed, so the class survives an ordinary re-render — but a bar whose own `className`
|
|
22
|
+
* changes would be rewritten, class included. Hence `content` among the dependencies:
|
|
23
|
+
* whatever makes the content change is also what repairs the marking, before paint.
|
|
24
|
+
*
|
|
25
|
+
* An invalid selector marks the bar itself. A consumer typo would otherwise leave no
|
|
26
|
+
* toggle at all and a drawer that no longer opens; falling back to the whole bar is the
|
|
27
|
+
* behaviour they had before writing the selector.
|
|
28
|
+
*/
|
|
29
|
+
function useToggleMarking(barRef, selector, btnClassName, content) {
|
|
30
|
+
useLayoutEffect(() => {
|
|
31
|
+
const bar = barRef.current;
|
|
32
|
+
if (bar === null)
|
|
33
|
+
return;
|
|
34
|
+
bar.querySelectorAll(`.${btnClassName}`).forEach(node => { node.classList.remove(btnClassName); });
|
|
35
|
+
if (selector === undefined)
|
|
36
|
+
return;
|
|
37
|
+
bar.classList.remove(btnClassName);
|
|
38
|
+
try {
|
|
39
|
+
bar.querySelectorAll(selector).forEach(node => { node.classList.add(btnClassName); });
|
|
40
|
+
}
|
|
41
|
+
catch (err) {
|
|
42
|
+
bar.classList.add(btnClassName);
|
|
43
|
+
}
|
|
44
|
+
}, [barRef, selector, btnClassName, content]);
|
|
45
|
+
}
|
|
46
|
+
/**
|
|
47
|
+
* Whether a click on a command should toggle the drawer.
|
|
48
|
+
*
|
|
49
|
+
* The test is « did the click land inside a marked element », never the selector itself:
|
|
50
|
+
* {@link useToggleMarking} has already resolved what the toggle is. `contains` comes on
|
|
51
|
+
* top of `closest` because a marked element could, in principle, sit outside this bar.
|
|
52
|
+
*/
|
|
53
|
+
function isToggleHit(event, btnClassName) {
|
|
54
|
+
const { target, currentTarget } = event;
|
|
55
|
+
if (!(target instanceof Element))
|
|
56
|
+
return false;
|
|
57
|
+
const hit = target.closest(`.${btnClassName}`);
|
|
58
|
+
return hit !== null && currentTarget.contains(hit);
|
|
59
|
+
}
|
|
8
60
|
/**
|
|
9
61
|
* Drawer component supporting controlled and uncontrolled usage.
|
|
10
62
|
*
|
|
@@ -21,6 +73,9 @@ import cssModule from './styles.module.css';
|
|
|
21
73
|
* - `opener`
|
|
22
74
|
* - `closer`
|
|
23
75
|
* - `content`
|
|
76
|
+
* - `opener-btn` / `closer-btn` — the toggle. On the bar itself when the whole bar is
|
|
77
|
+
* clickable, on whatever `openerBtnSelector` / `closerBtnSelector` point at otherwise.
|
|
78
|
+
* Always present, so a stylesheet has one place to look.
|
|
24
79
|
*
|
|
25
80
|
* ### CSS custom properties on the root element
|
|
26
81
|
* - `--lm-drawer-content-width` / `--lm-drawer-content-width-raw`
|
|
@@ -41,25 +96,55 @@ import cssModule from './styles.module.css';
|
|
|
41
96
|
* - `onOpenerClicked` and `onCloserClicked` fire in both modes — a controlled
|
|
42
97
|
* parent needs them to know a click happened at all.
|
|
43
98
|
* - `onIsOpenedChanged` fires in both modes too, and never on mount.
|
|
99
|
+
* - **A command is a bar, not a button.** Both content props take whatever the consumer
|
|
100
|
+
* puts in the row — most often a title and a toggle — and `closerContent` /
|
|
101
|
+
* `closerBtnSelector` default to their opener counterpart, so that bar is written
|
|
102
|
+
* once. What tells the two states apart is CSS, through the root modifiers.
|
|
103
|
+
* - **`…BtnSelector` narrows the click, it does not move it.** The handler stays on the
|
|
104
|
+
* bar; the selector only decides which descendants carry the `-btn` class, and the
|
|
105
|
+
* handler asks that class. So the consumer keeps full control of what the row
|
|
106
|
+
* contains, and a stylesheet reaches the toggle without knowing the selector.
|
|
44
107
|
*/
|
|
45
|
-
export const Drawer = ({ openerContent, closerContent, defaultIsOpened = false, isOpened: isOpenedProp, onOpenerClicked, onCloserClicked, onIsOpenedChanged, onContentResized, className, children }) => {
|
|
108
|
+
export const Drawer = ({ openerContent, closerContent, openerBtnSelector, closerBtnSelector, defaultIsOpened = false, isOpened: isOpenedProp, onOpenerClicked, onCloserClicked, onIsOpenedChanged, onContentResized, className, children }) => {
|
|
46
109
|
// State
|
|
47
110
|
const [internalIsOpened, setInternalIsOpened] = useState(defaultIsOpened);
|
|
48
111
|
const [contentDimensions, setContentDimensions] = useState();
|
|
112
|
+
const openerRef = useRef(null);
|
|
113
|
+
const closerRef = useRef(null);
|
|
49
114
|
const isControlled = isOpenedProp !== undefined;
|
|
50
115
|
const isOpened = isOpenedProp ?? internalIsOpened;
|
|
116
|
+
// Une barre écrite une fois sert les deux états : le plus souvent un titre et une
|
|
117
|
+
// bascule, identiques ouverts et fermés, que les modifieurs de la racine suffisent à
|
|
118
|
+
// distinguer en CSS. `undefined` seul retombe — un `null` explicite reste un closer
|
|
119
|
+
// vide, et le consommateur garde le moyen de n'en rendre aucun.
|
|
120
|
+
const resolvedCloserContent = closerContent === undefined ? openerContent : closerContent;
|
|
121
|
+
const resolvedCloserBtnSelector = closerBtnSelector ?? openerBtnSelector;
|
|
122
|
+
// Class names
|
|
123
|
+
// Le `-btn` désigne la bascule, et il existe dans tous les cas : posé ici quand la
|
|
124
|
+
// barre entière en tient lieu, posé sur les descendants par {@link useToggleMarking}
|
|
125
|
+
// quand un sélecteur la rétrécit. Une feuille n'a donc qu'un endroit où regarder, et
|
|
126
|
+
// le gestionnaire de clic qu'une question à poser.
|
|
127
|
+
const c = clss(publicClassName, { cssModule });
|
|
128
|
+
const openerBtnClss = c('opener-btn');
|
|
129
|
+
const closerBtnClss = c('closer-btn');
|
|
130
|
+
useToggleMarking(openerRef, openerBtnSelector, openerBtnClss, openerContent);
|
|
131
|
+
useToggleMarking(closerRef, resolvedCloserBtnSelector, closerBtnClss, resolvedCloserContent);
|
|
51
132
|
// State dispatch
|
|
52
133
|
useChangeDispatch(isOpened, onIsOpenedChanged);
|
|
53
134
|
useChangeDispatch(contentDimensions, dimensions => { if (dimensions !== undefined)
|
|
54
135
|
onContentResized?.(dimensions); }, (a, b) => a?.width === b?.width && a?.height === b?.height);
|
|
55
136
|
// User action handlers
|
|
56
|
-
const handleOpenerClick = () => {
|
|
137
|
+
const handleOpenerClick = (event) => {
|
|
138
|
+
if (!isToggleHit(event, openerBtnClss))
|
|
139
|
+
return;
|
|
57
140
|
onOpenerClicked?.(isOpened);
|
|
58
141
|
if (isControlled)
|
|
59
142
|
return;
|
|
60
143
|
setInternalIsOpened(true);
|
|
61
144
|
};
|
|
62
|
-
const handleCloserClick = () => {
|
|
145
|
+
const handleCloserClick = (event) => {
|
|
146
|
+
if (!isToggleHit(event, closerBtnClss))
|
|
147
|
+
return;
|
|
63
148
|
onCloserClicked?.(isOpened);
|
|
64
149
|
if (isControlled)
|
|
65
150
|
return;
|
|
@@ -70,14 +155,17 @@ export const Drawer = ({ openerContent, closerContent, defaultIsOpened = false,
|
|
|
70
155
|
setContentDimensions({ width, height });
|
|
71
156
|
};
|
|
72
157
|
// Rendering
|
|
73
|
-
const c = clss(publicClassName, { cssModule });
|
|
74
158
|
const rootClss = mergeClassNames(c(null, {
|
|
75
159
|
'opened': isOpened,
|
|
76
160
|
'closed': !isOpened,
|
|
77
161
|
measured: contentDimensions !== undefined
|
|
78
162
|
}), className);
|
|
79
|
-
const openerClss =
|
|
80
|
-
|
|
163
|
+
const openerClss = openerBtnSelector === undefined
|
|
164
|
+
? mergeClassNames(c('opener'), openerBtnClss)
|
|
165
|
+
: c('opener');
|
|
166
|
+
const closerClss = resolvedCloserBtnSelector === undefined
|
|
167
|
+
? mergeClassNames(c('closer'), closerBtnClss)
|
|
168
|
+
: c('closer');
|
|
81
169
|
const contentClss = c('content');
|
|
82
170
|
let dataAttributes = {};
|
|
83
171
|
let customCssProps = {};
|
|
@@ -94,5 +182,5 @@ export const Drawer = ({ openerContent, closerContent, defaultIsOpened = false,
|
|
|
94
182
|
'--lm-drawer-content-height-raw': `${height}`
|
|
95
183
|
};
|
|
96
184
|
}
|
|
97
|
-
return _jsxs("div", { className: rootClss, ...dataAttributes, style: { ...customCssProps }, children: [_jsx("div", { className: openerClss, onClick: handleOpenerClick, children: openerContent }), _jsx("div", { className: closerClss, onClick: handleCloserClick, children:
|
|
185
|
+
return _jsxs("div", { className: rootClss, ...dataAttributes, style: { ...customCssProps }, children: [_jsx("div", { ref: openerRef, className: openerClss, onClick: handleOpenerClick, children: openerContent }), _jsx("div", { ref: closerRef, className: closerClss, onClick: handleCloserClick, children: resolvedCloserContent }), _jsx("div", { className: contentClss, children: _jsx(ResizeObserverComponent, { onResized: handleContentResized, children: children }) })] });
|
|
98
186
|
};
|
package/components/index.d.ts
CHANGED
|
@@ -5,8 +5,8 @@ export * as disclaimer from './Disclaimer/index.js'
|
|
|
5
5
|
export * as drawer from './Drawer/index.js'
|
|
6
6
|
export * as eventListener from './EventListener/index.js'
|
|
7
7
|
export * as gallery from './Gallery/index.js'
|
|
8
|
-
export * as image from './Image/index.js'
|
|
9
8
|
export * as iframe from './Iframe/index.js'
|
|
9
|
+
export * as image from './Image/index.js'
|
|
10
10
|
export * as input from './Input/index.js'
|
|
11
11
|
export * as intersectionObserver from './IntersectionObserver/index.js'
|
|
12
12
|
export * as jsonEditor from './JsonEditor/index.js'
|
|
@@ -18,8 +18,8 @@ export * as resizeObserver from './ResizeObserver/index.js'
|
|
|
18
18
|
export * as scrllgngn from './Scrllgngn/index.js'
|
|
19
19
|
export * as scrollListener from './ScrollListener/index.js'
|
|
20
20
|
export * as select from './Select/index.js'
|
|
21
|
-
export * as sequencer from './Sequencer/index.js'
|
|
22
21
|
export * as shadowRoot from './ShadowRoot/index.js'
|
|
22
|
+
export * as sequencer from './Sequencer/index.js'
|
|
23
23
|
export * as subtitles from './Subtitles/index.js'
|
|
24
24
|
export * as textarea from './Textarea/index.js'
|
|
25
25
|
export * as uiModule from './UIModule/index.js'
|
package/components/index.js
CHANGED
|
@@ -5,8 +5,8 @@ export * as disclaimer from './Disclaimer/index.js'
|
|
|
5
5
|
export * as drawer from './Drawer/index.js'
|
|
6
6
|
export * as eventListener from './EventListener/index.js'
|
|
7
7
|
export * as gallery from './Gallery/index.js'
|
|
8
|
-
export * as image from './Image/index.js'
|
|
9
8
|
export * as iframe from './Iframe/index.js'
|
|
9
|
+
export * as image from './Image/index.js'
|
|
10
10
|
export * as input from './Input/index.js'
|
|
11
11
|
export * as intersectionObserver from './IntersectionObserver/index.js'
|
|
12
12
|
export * as jsonEditor from './JsonEditor/index.js'
|
|
@@ -18,8 +18,8 @@ export * as resizeObserver from './ResizeObserver/index.js'
|
|
|
18
18
|
export * as scrllgngn from './Scrllgngn/index.js'
|
|
19
19
|
export * as scrollListener from './ScrollListener/index.js'
|
|
20
20
|
export * as select from './Select/index.js'
|
|
21
|
-
export * as sequencer from './Sequencer/index.js'
|
|
22
21
|
export * as shadowRoot from './ShadowRoot/index.js'
|
|
22
|
+
export * as sequencer from './Sequencer/index.js'
|
|
23
23
|
export * as subtitles from './Subtitles/index.js'
|
|
24
24
|
export * as textarea from './Textarea/index.js'
|
|
25
25
|
export * as uiModule from './UIModule/index.js'
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
export * as copyDir from './copy-dir/index.js'
|
|
2
2
|
export * as copyFile from './copy-file/index.js'
|
|
3
|
+
export * as downloadFile from './download-file/index.js'
|
|
4
|
+
export * as existsFile from './exists-file/index.js'
|
|
3
5
|
export * as listDir from './list-dir/index.js'
|
|
4
6
|
export * as moveDir from './move-dir/index.js'
|
|
5
7
|
export * as moveFile from './move-file/index.js'
|
|
6
|
-
export * as downloadFile from './download-file/index.js'
|
|
7
8
|
export * as removeDir from './remove-dir/index.js'
|
|
8
9
|
export * as removeFile from './remove-file/index.js'
|
|
9
10
|
export * as statFile from './stat-file/index.js'
|
|
10
|
-
export * as existsFile from './exists-file/index.js'
|
|
11
11
|
export * as uploadFile from './upload-file/index.js'
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
export * as copyDir from './copy-dir/index.js'
|
|
2
2
|
export * as copyFile from './copy-file/index.js'
|
|
3
|
+
export * as downloadFile from './download-file/index.js'
|
|
4
|
+
export * as existsFile from './exists-file/index.js'
|
|
3
5
|
export * as listDir from './list-dir/index.js'
|
|
4
6
|
export * as moveDir from './move-dir/index.js'
|
|
5
7
|
export * as moveFile from './move-file/index.js'
|
|
6
|
-
export * as downloadFile from './download-file/index.js'
|
|
7
8
|
export * as removeDir from './remove-dir/index.js'
|
|
8
9
|
export * as removeFile from './remove-file/index.js'
|
|
9
10
|
export * as statFile from './stat-file/index.js'
|
|
10
|
-
export * as existsFile from './exists-file/index.js'
|
|
11
11
|
export * as uploadFile from './upload-file/index.js'
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export * as copy from './copy/index.js'
|
|
2
|
-
export * as download from './download/index.js'
|
|
3
2
|
export * as exists from './exists/index.js'
|
|
4
3
|
export * as move from './move/index.js'
|
|
4
|
+
export * as download from './download/index.js'
|
|
5
5
|
export * as remove from './remove/index.js'
|
|
6
6
|
export * as stat from './stat/index.js'
|
|
7
7
|
export * as upload from './upload/index.js'
|
package/node/ftps/file/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export * as copy from './copy/index.js'
|
|
2
|
-
export * as download from './download/index.js'
|
|
3
2
|
export * as exists from './exists/index.js'
|
|
4
3
|
export * as move from './move/index.js'
|
|
4
|
+
export * as download from './download/index.js'
|
|
5
5
|
export * as remove from './remove/index.js'
|
|
6
6
|
export * as stat from './stat/index.js'
|
|
7
7
|
export * as upload from './upload/index.js'
|
package/node/index.d.ts
CHANGED
|
@@ -7,5 +7,5 @@ export * as encryption from './encryption/index.js'
|
|
|
7
7
|
export * as files from './files/index.js'
|
|
8
8
|
export * as ftps from './ftps/index.js'
|
|
9
9
|
export * as images from './images/index.js'
|
|
10
|
-
export * as sftp from './sftp/index.js'
|
|
11
10
|
export * as process from './process/index.js'
|
|
11
|
+
export * as sftp from './sftp/index.js'
|
package/node/index.js
CHANGED
|
@@ -7,5 +7,5 @@ export * as encryption from './encryption/index.js'
|
|
|
7
7
|
export * as files from './files/index.js'
|
|
8
8
|
export * as ftps from './ftps/index.js'
|
|
9
9
|
export * as images from './images/index.js'
|
|
10
|
-
export * as sftp from './sftp/index.js'
|
|
11
10
|
export * as process from './process/index.js'
|
|
11
|
+
export * as sftp from './sftp/index.js'
|
package/node/process/index.d.ts
CHANGED
package/node/process/index.js
CHANGED