@blockle/blocks-react 3.4.0 → 3.5.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/dist/components/form/Switch/Switch.d.ts.map +1 -1
- package/dist/components/form/Switch/Switch.js +2 -20
- package/dist/components/layout/Grid/Grid.css.d.ts +1 -0
- package/dist/components/layout/Grid/Grid.css.d.ts.map +1 -1
- package/dist/components/layout/Grid/Grid.css.js +22 -2
- package/dist/components/layout/Grid/Grid.d.ts +7 -0
- package/dist/components/layout/Grid/Grid.d.ts.map +1 -1
- package/dist/components/layout/Grid/Grid.js +6 -2
- package/dist/components/overlay/Menu/Menu.d.ts +4 -3
- package/dist/components/overlay/Menu/Menu.d.ts.map +1 -1
- package/dist/components/overlay/Menu/Menu.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAM9B,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CACvD,GAAG,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/form/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAM9B,MAAM,MAAM,WAAW,GAAG;IACxB;;;OAGG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;CACvD,GAAG,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC,EAAE,UAAU,CAAC,CAAC;AAKzD,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAqCxC,CAAC"}
|
|
@@ -1,36 +1,21 @@
|
|
|
1
1
|
"use client";
|
|
2
2
|
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
3
3
|
import { composeRefs, classnames } from "@blockle/blocks-core";
|
|
4
|
-
import { useRef
|
|
4
|
+
import { useRef } from "react";
|
|
5
5
|
import { useComponentStyles } from "../../../hooks/useComponentStyles/useComponentStyles.js";
|
|
6
6
|
import { input, container } from "./switch.css.js";
|
|
7
7
|
const Switch = ({
|
|
8
|
-
checked,
|
|
9
8
|
className,
|
|
10
|
-
defaultChecked,
|
|
11
|
-
onChange,
|
|
12
9
|
ref,
|
|
13
10
|
...restProps
|
|
14
11
|
}) => {
|
|
15
12
|
const inputRef = useRef(null);
|
|
16
|
-
const [uncontrolledChecked, setUncontrolledChecked] = useState(
|
|
17
|
-
defaultChecked ?? false
|
|
18
|
-
);
|
|
19
|
-
const isControlled = checked !== void 0;
|
|
20
|
-
const isChecked = isControlled ? checked : uncontrolledChecked;
|
|
21
13
|
const baseClassName = useComponentStyles("switch", "root");
|
|
22
14
|
const thumbClassName = useComponentStyles("switch", "thumb");
|
|
23
|
-
const onChangeHandler = (event) => {
|
|
24
|
-
if (!isControlled) {
|
|
25
|
-
setUncontrolledChecked(event.target.checked);
|
|
26
|
-
}
|
|
27
|
-
onChange?.(event);
|
|
28
|
-
};
|
|
29
15
|
return /* @__PURE__ */ jsx(Fragment, { children: /* @__PURE__ */ jsxs(
|
|
30
16
|
"div",
|
|
31
17
|
{
|
|
32
18
|
className: classnames(className, container, baseClassName),
|
|
33
|
-
"data-checked": isChecked,
|
|
34
19
|
onClick: (event) => {
|
|
35
20
|
if (event.target === inputRef.current) {
|
|
36
21
|
return;
|
|
@@ -44,14 +29,11 @@ const Switch = ({
|
|
|
44
29
|
type: "checkbox",
|
|
45
30
|
role: "switch",
|
|
46
31
|
className: input,
|
|
47
|
-
checked,
|
|
48
|
-
defaultChecked,
|
|
49
|
-
onChange: onChangeHandler,
|
|
50
32
|
ref: composeRefs(ref, inputRef),
|
|
51
33
|
...restProps
|
|
52
34
|
}
|
|
53
35
|
),
|
|
54
|
-
/* @__PURE__ */ jsx("div", { className: thumbClassName
|
|
36
|
+
/* @__PURE__ */ jsx("div", { className: thumbClassName })
|
|
55
37
|
]
|
|
56
38
|
}
|
|
57
39
|
) });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.css.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Grid/Grid.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI,QAEf,CAAC;
|
|
1
|
+
{"version":3,"file":"Grid.css.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Grid/Grid.css.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,IAAI,QAEf,CAAC;AAIH,eAAO,MAAM,cAAc,+CAkB1B,CAAC;AAEF,eAAO,MAAM,uBAAuB,KAMnC,CAAC;AAEF,eAAO,MAAM,uBAAuB,KAMnC,CAAC"}
|
|
@@ -1,10 +1,29 @@
|
|
|
1
1
|
import { setFileScope, endFileScope } from "@vanilla-extract/css/fileScope";
|
|
2
|
-
import {
|
|
3
|
-
import { style } from "@vanilla-extract/css";
|
|
2
|
+
import { vars, layers, createResponsiveStyles } from "@blockle/blocks-core";
|
|
3
|
+
import { styleVariants, style } from "@vanilla-extract/css";
|
|
4
4
|
setFileScope("src/components/layout/Grid/Grid.css.ts", "@blockle/blocks-react");
|
|
5
5
|
const grid = style({
|
|
6
6
|
gridTemplateColumns: "repeat(12, minmax(0, 1fr))"
|
|
7
7
|
});
|
|
8
|
+
const minColumnWidth = styleVariants(
|
|
9
|
+
{
|
|
10
|
+
1: vars.space[1],
|
|
11
|
+
2: vars.space[2],
|
|
12
|
+
3: vars.space[3],
|
|
13
|
+
4: vars.space[4],
|
|
14
|
+
5: vars.space[5],
|
|
15
|
+
6: vars.space[6],
|
|
16
|
+
7: vars.space[7],
|
|
17
|
+
8: vars.space[8]
|
|
18
|
+
},
|
|
19
|
+
(width) => ({
|
|
20
|
+
"@layer": {
|
|
21
|
+
[layers.molecule]: {
|
|
22
|
+
gridTemplateColumns: `repeat(auto-fill, minmax(${width}, 1fr))`
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
})
|
|
26
|
+
);
|
|
8
27
|
const responsiveColSpanStyles = createResponsiveStyles(
|
|
9
28
|
[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
|
|
10
29
|
(value) => ({
|
|
@@ -22,6 +41,7 @@ const responsiveRowSpanStyles = createResponsiveStyles(
|
|
|
22
41
|
endFileScope();
|
|
23
42
|
export {
|
|
24
43
|
grid,
|
|
44
|
+
minColumnWidth,
|
|
25
45
|
responsiveColSpanStyles,
|
|
26
46
|
responsiveRowSpanStyles
|
|
27
47
|
};
|
|
@@ -1,6 +1,13 @@
|
|
|
1
1
|
import { Atoms, HTMLElementProps } from '@blockle/blocks-core';
|
|
2
|
+
import * as styles from './Grid.css.js';
|
|
2
3
|
export type GridProps = {
|
|
3
4
|
children?: React.ReactNode;
|
|
5
|
+
/**
|
|
6
|
+
* Lay out as many columns as fit, each at least this `space` step wide.
|
|
7
|
+
* Replaces the default 12-column template; `GridItem` `colSpan` spans
|
|
8
|
+
* auto-fill tracks.
|
|
9
|
+
*/
|
|
10
|
+
minColumnWidth?: keyof typeof styles.minColumnWidth;
|
|
4
11
|
} & Omit<Atoms, 'flexDirection'> & Omit<HTMLElementProps<HTMLDivElement>, keyof Atoms>;
|
|
5
12
|
export declare const Grid: React.FC<GridProps>;
|
|
6
13
|
//# sourceMappingURL=Grid.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,KAAK,EAEV,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../../../src/components/layout/Grid/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,KAAK,EAEV,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAG9B,OAAO,KAAK,MAAM,MAAM,eAAe,CAAC;AAExC,MAAM,MAAM,SAAS,GAAG;IACtB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;;;OAIG;IACH,cAAc,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,cAAc,CAAC;CACrD,GAAG,IAAI,CAAC,KAAK,EAAE,eAAe,CAAC,GAC9B,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE,MAAM,KAAK,CAAC,CAAC;AAEtD,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAmBpC,CAAC"}
|
|
@@ -1,18 +1,22 @@
|
|
|
1
1
|
import { jsx } from "react/jsx-runtime";
|
|
2
2
|
import { classnames } from "@blockle/blocks-core";
|
|
3
3
|
import { Box } from "../Box/Box.js";
|
|
4
|
-
import { grid } from "./Grid.css.js";
|
|
4
|
+
import { minColumnWidth, grid } from "./Grid.css.js";
|
|
5
5
|
const Grid = ({
|
|
6
6
|
children,
|
|
7
7
|
display = "grid",
|
|
8
8
|
className,
|
|
9
|
+
minColumnWidth: minColumnWidth$1,
|
|
9
10
|
...restProps
|
|
10
11
|
}) => {
|
|
11
12
|
return /* @__PURE__ */ jsx(
|
|
12
13
|
Box,
|
|
13
14
|
{
|
|
14
15
|
display,
|
|
15
|
-
className: classnames(
|
|
16
|
+
className: classnames(
|
|
17
|
+
minColumnWidth$1 ? minColumnWidth[minColumnWidth$1] : grid,
|
|
18
|
+
className
|
|
19
|
+
),
|
|
16
20
|
...restProps,
|
|
17
21
|
children
|
|
18
22
|
}
|
|
@@ -39,10 +39,11 @@ export type MenuRadioGroupItem<V extends string = string> = {
|
|
|
39
39
|
};
|
|
40
40
|
/**
|
|
41
41
|
* Types a radio group over a union of values. `V` is inferred from `value`
|
|
42
|
-
* and `onChange`, and the items' values are checked against it.
|
|
43
|
-
* group
|
|
42
|
+
* and `onChange`, and the items' values are checked against it. Adds
|
|
43
|
+
* `type: 'radio-group'` itself, so callers leave `type` out, and the
|
|
44
|
+
* result can sit in `items` next to any other item.
|
|
44
45
|
*/
|
|
45
|
-
export declare function menuRadioGroup<V extends string>(group: Omit<MenuRadioGroupItem<V>, 'onChange' | 'items'> & {
|
|
46
|
+
export declare function menuRadioGroup<V extends string>(group: Omit<MenuRadioGroupItem<V>, 'type' | 'onChange' | 'items'> & {
|
|
46
47
|
onChange: (value: V) => void;
|
|
47
48
|
items: MenuRadioItem<NoInfer<V>>[];
|
|
48
49
|
}): MenuRadioGroupItem<V>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Menu/Menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAc9B,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAenE,KAAK,YAAY,GAAG,KAAK,CAAC,YAAY,CAEpC,GAAG,EAEH,MAAM,GAAG,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAC1C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,WAAW,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACrD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAC1D,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,CAAC,CAAC;IACT;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;CAC3B,CAAC;AAEF
|
|
1
|
+
{"version":3,"file":"Menu.d.ts","sourceRoot":"","sources":["../../../../src/components/overlay/Menu/Menu.tsx"],"names":[],"mappings":"AAEA,OAAO,EAGL,KAAK,gBAAgB,EACtB,MAAM,sBAAsB,CAAC;AAc9B,OAAO,EAAW,KAAK,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAenE,KAAK,YAAY,GAAG,KAAK,CAAC,YAAY,CAEpC,GAAG,EAEH,MAAM,GAAG,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,CAC1C,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IAC3B,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAC9B,IAAI,EAAE,WAAW,CAAC;CACnB,CAAC;AAEF,MAAM,MAAM,aAAa,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IACrD,KAAK,EAAE,CAAC,CAAC;IACT,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAC1D,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,CAAC,CAAC;IACT;;;;OAIG;IACH,QAAQ,CAAC,KAAK,EAAE,CAAC,GAAG,IAAI,CAAC;IACzB,KAAK,EAAE,aAAa,CAAC,CAAC,CAAC,EAAE,CAAC;CAC3B,CAAC;AAEF;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,CAAC,SAAS,MAAM,EAC7C,KAAK,EAAE,IAAI,CAAC,kBAAkB,CAAC,CAAC,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC,GAAG;IAClE,QAAQ,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,CAAC;IAC7B,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC,EAAE,CAAC;CACpC,GACA,kBAAkB,CAAC,CAAC,CAAC,CAEvB;AAED,MAAM,MAAM,QAAQ,GAAG,cAAc,GAAG,iBAAiB,GAAG,kBAAkB,CAAC;AAE/E,MAAM,MAAM,SAAS,GAAG;IACtB;;OAEG;IACH,QAAQ,EAAE,YAAY,CAAC;IACvB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAC;CACvC,GAAG,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAC,EAAE,KAAK,GAAG,UAAU,CAAC,CAAC;AAU/D,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,EAAE,CAAC,SAAS,CAyLpC,CAAC"}
|
|
@@ -8,7 +8,7 @@ import { Popover } from "../Popover/Popover.js";
|
|
|
8
8
|
import { isMenuNavigationKey, isTypeaheadKey, getEnabledItems, getNextIndex, getTypeaheadMatch, getItemText, getTextValue } from "./menu-utils.js";
|
|
9
9
|
const TYPEAHEAD_RESET_MS = 500;
|
|
10
10
|
function menuRadioGroup(group) {
|
|
11
|
-
return group;
|
|
11
|
+
return { ...group, type: "radio-group" };
|
|
12
12
|
}
|
|
13
13
|
function focusItem(list, which) {
|
|
14
14
|
const items = getEnabledItems(list);
|