@tamagui/group 2.7.7 → 3.0.0-beta.1093.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (49) hide show
  1. package/dist/cjs/Group.cjs +99 -132
  2. package/dist/cjs/Group.native.cjs +140 -0
  3. package/dist/cjs/Group.native.js +102 -136
  4. package/dist/cjs/Group.native.js.map +1 -1
  5. package/dist/cjs/index.cjs +9 -11
  6. package/dist/cjs/index.native.cjs +20 -0
  7. package/dist/cjs/index.native.js +9 -10
  8. package/dist/cjs/index.native.js.map +1 -1
  9. package/dist/cjs/useIndexedChildren.cjs +51 -58
  10. package/dist/cjs/useIndexedChildren.native.cjs +83 -0
  11. package/dist/cjs/useIndexedChildren.native.js +59 -65
  12. package/dist/cjs/useIndexedChildren.native.js.map +1 -1
  13. package/dist/esm/Group.mjs +80 -104
  14. package/dist/esm/Group.mjs.map +1 -1
  15. package/dist/esm/Group.native.js +84 -110
  16. package/dist/esm/Group.native.js.map +1 -1
  17. package/dist/esm/index.js +1 -2
  18. package/dist/esm/index.mjs +1 -2
  19. package/dist/esm/index.native.js +1 -2
  20. package/dist/esm/useIndexedChildren.mjs +35 -33
  21. package/dist/esm/useIndexedChildren.mjs.map +1 -1
  22. package/dist/esm/useIndexedChildren.native.js +44 -42
  23. package/dist/esm/useIndexedChildren.native.js.map +1 -1
  24. package/dist/jsx/Group.mjs +80 -104
  25. package/dist/jsx/Group.mjs.map +1 -1
  26. package/dist/jsx/Group.native.cjs +140 -0
  27. package/dist/jsx/Group.native.js +102 -136
  28. package/dist/jsx/Group.native.js.map +1 -1
  29. package/dist/jsx/index.js +1 -2
  30. package/dist/jsx/index.mjs +1 -2
  31. package/dist/jsx/index.native.cjs +20 -0
  32. package/dist/jsx/index.native.js +9 -10
  33. package/dist/jsx/index.native.js.map +1 -1
  34. package/dist/jsx/useIndexedChildren.mjs +35 -33
  35. package/dist/jsx/useIndexedChildren.mjs.map +1 -1
  36. package/dist/jsx/useIndexedChildren.native.cjs +83 -0
  37. package/dist/jsx/useIndexedChildren.native.js +59 -65
  38. package/dist/jsx/useIndexedChildren.native.js.map +1 -1
  39. package/package.json +11 -10
  40. package/src/Group.tsx +11 -19
  41. package/types/Group.d.ts +107 -78
  42. package/types/Group.d.ts.map +1 -1
  43. package/types/useIndexedChildren.d.ts +1 -1
  44. package/types/useIndexedChildren.d.ts.map +1 -1
  45. package/dist/esm/index.js.map +0 -1
  46. package/dist/esm/index.mjs.map +0 -1
  47. package/dist/esm/index.native.js.map +0 -1
  48. package/dist/jsx/index.js.map +0 -1
  49. package/dist/jsx/index.mjs.map +0 -1
@@ -5,40 +5,33 @@ var __getOwnPropNames = Object.getOwnPropertyNames;
5
5
  var __getProtoOf = Object.getPrototypeOf;
6
6
  var __hasOwnProp = Object.prototype.hasOwnProperty;
7
7
  var __export = (target, all) => {
8
- for (var name in all) __defProp(target, name, {
9
- get: all[name],
10
- enumerable: true
11
- });
8
+ for (var name in all) __defProp(target, name, {
9
+ get: all[name],
10
+ enumerable: true
11
+ });
12
12
  };
13
13
  var __copyProps = (to, from, except, desc) => {
14
- if (from && typeof from === "object" || typeof from === "function") {
15
- for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
16
- get: () => from[key],
17
- enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
18
- });
19
- }
20
- return to;
14
+ if (from && typeof from === "object" || typeof from === "function") {
15
+ for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
16
+ get: () => from[key],
17
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
18
+ });
19
+ }
20
+ return to;
21
21
  };
22
- var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
23
- // If the importer is in node compatibility mode or this is not an ESM
24
- // file that has been converted to a CommonJS file using a Babel-
25
- // compatible transform (i.e. "__esModule" has not been set), then set
26
- // "default" to the CommonJS "module.exports" for node compatibility.
27
- isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
28
- value: mod,
29
- enumerable: true
22
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
23
+ value: mod,
24
+ enumerable: true
30
25
  }) : target, mod));
31
- var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
32
- value: true
33
- }), mod);
26
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
34
27
  var Group_exports = {};
35
28
  __export(Group_exports, {
36
- Group: () => Group,
37
- GroupFrame: () => GroupFrame,
38
- XGroup: () => XGroup,
39
- YGroup: () => YGroup,
40
- createGroupScope: () => createGroupScope,
41
- useGroupItem: () => useGroupItem
29
+ Group: () => Group,
30
+ GroupFrame: () => GroupFrame,
31
+ XGroup: () => XGroup,
32
+ YGroup: () => YGroup,
33
+ createGroupScope: () => createGroupScope,
34
+ useGroupItem: () => useGroupItem
42
35
  });
43
36
  module.exports = __toCommonJS(Group_exports);
44
37
  var import_core = require("@tamagui/core");
@@ -51,119 +44,93 @@ var import_jsx_runtime = require("react/jsx-runtime");
51
44
  const GROUP_NAME = "Group";
52
45
  const [createGroupContext, createGroupScope] = (0, import_create_context.createContextScope)(GROUP_NAME);
53
46
  const [GroupProvider, useGroupContext] = createGroupContext(GROUP_NAME);
47
+ const groupSizeVariant = import_core.styled.dynamic((val, env) => {
48
+ return { borderRadius: (0, import_core.resolveSize)(val, env).frame.borderRadius };
49
+ });
54
50
  const GroupFrame = (0, import_core.styled)(import_stacks.YStack, {
55
- name: "GroupFrame",
56
- variants: {
57
- unstyled: {
58
- false: {
59
- size: "$true"
60
- }
61
- },
62
- size: (val, {
63
- tokens
64
- }) => {
65
- const borderRadius = tokens.radius[val] ?? val ?? tokens.radius["$true"];
66
- return {
67
- borderRadius
68
- };
69
- }
70
- },
71
- defaultVariants: {
72
- unstyled: process.env.TAMAGUI_HEADLESS === "1"
73
- }
51
+ displayName: "GroupFrame",
52
+ size: true,
53
+ variants: { size: groupSizeVariant }
74
54
  });
75
55
  function createGroup(verticalDefault) {
76
- return (0, import_helpers.withStaticProperties)(GroupFrame.styleable((props, ref) => {
77
- const {
78
- __scopeGroup,
79
- children: childrenProp,
80
- orientation = verticalDefault ? "vertical" : "horizontal",
81
- disabled,
82
- ...restProps
83
- } = props;
84
- const vertical = orientation === "vertical";
85
- const indexedChildren = (0, import_useIndexedChildren.useIndexedChildren)(import_react.default.Children.toArray(childrenProp));
86
- return /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupProvider, {
87
- vertical,
88
- disabled,
89
- scope: __scopeGroup,
90
- children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(GroupFrame, {
91
- ref,
92
- flexDirection: vertical ? "column" : "row",
93
- ...restProps,
94
- children: indexedChildren
95
- })
96
- });
97
- }), {
98
- Item: GroupItem
99
- });
56
+ return (0, import_helpers.withStaticProperties)((0, import_core.createStyledHOC)(GroupFrame, (props, ref) => {
57
+ const { __scopeGroup, children: childrenProp, orientation = verticalDefault ? "vertical" : "horizontal", disabled, ...restProps } = props;
58
+ const vertical = orientation === "vertical";
59
+ const indexedChildren = (0, import_useIndexedChildren.useIndexedChildren)(import_react.default.Children.toArray(childrenProp));
60
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GroupProvider, {
61
+ vertical,
62
+ disabled,
63
+ scope: __scopeGroup,
64
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GroupFrame, {
65
+ ref,
66
+ flexDirection: vertical ? "column" : "row",
67
+ ...restProps,
68
+ children: indexedChildren
69
+ })
70
+ });
71
+ }), { Item: GroupItem });
100
72
  }
101
73
  function GroupItem(props) {
102
- const {
103
- __scopeGroup,
104
- children,
105
- forcePlacement,
106
- ...forwardedProps
107
- } = props;
108
- const context = useGroupContext("GroupItem", __scopeGroup);
109
- const treeIndex = (0, import_useIndexedChildren.useIndex)();
110
- if (!treeIndex) {
111
- throw Error("<Group.Item/> should only be used within a <Group/>");
112
- }
113
- if (!import_react.default.isValidElement(children)) {
114
- return children;
115
- }
116
- const isFirst = forcePlacement === "first" || forcePlacement !== "last" && treeIndex.index === 0;
117
- const isLast = forcePlacement === "last" || forcePlacement !== "first" && treeIndex.index === treeIndex.maxIndex;
118
- const radiusStyles = getZeroedRadius(isFirst, isLast, context.vertical);
119
- const groupProps = {
120
- ...forwardedProps,
121
- ...radiusStyles
122
- };
123
- if (context.disabled != null) {
124
- groupProps.disabled = children.props.disabled ?? context.disabled;
125
- }
126
- const mergedProps = (0, import_core.mergeSlotStyleProps)(groupProps, children.props);
127
- return import_react.default.cloneElement(children, mergedProps);
74
+ const { __scopeGroup, children, forcePlacement, ...forwardedProps } = props;
75
+ const context = useGroupContext("GroupItem", __scopeGroup);
76
+ const treeIndex = (0, import_useIndexedChildren.useIndex)();
77
+ if (!treeIndex) {
78
+ throw Error("<Group.Item/> should only be used within a <Group/>");
79
+ }
80
+ if (!import_react.default.isValidElement(children)) {
81
+ return children;
82
+ }
83
+ const isFirst = forcePlacement === "first" || forcePlacement !== "last" && treeIndex.index === 0;
84
+ const isLast = forcePlacement === "last" || forcePlacement !== "first" && treeIndex.index === treeIndex.maxIndex;
85
+ const radiusStyles = getZeroedRadius(isFirst, isLast, context.vertical);
86
+ const groupProps = {
87
+ ...forwardedProps,
88
+ ...radiusStyles
89
+ };
90
+ if (context.disabled != null) {
91
+ groupProps.disabled = children.props.disabled ?? context.disabled;
92
+ }
93
+ const mergedProps = (0, import_core.mergeSlotStyleProps)(groupProps, children.props);
94
+ return import_react.default.cloneElement(children, mergedProps);
128
95
  }
129
96
  const useGroupItem = (childrenProps, forcePlacement, __scopeGroup) => {
130
- const treeIndex = (0, import_useIndexedChildren.useIndex)();
131
- const context = useGroupContext("GroupItem", __scopeGroup);
132
- if (!treeIndex) {
133
- throw Error("useGroupItem should only be used within a <Group/>");
134
- }
135
- const isFirst = forcePlacement === "first" || forcePlacement !== "last" && treeIndex.index === 0;
136
- const isLast = forcePlacement === "last" || forcePlacement !== "first" && treeIndex.index === treeIndex.maxIndex;
137
- const radiusStyles = getZeroedRadius(isFirst, isLast, context.vertical);
138
- return {
139
- disabled: childrenProps.disabled ?? context.disabled,
140
- ...radiusStyles
141
- };
97
+ const treeIndex = (0, import_useIndexedChildren.useIndex)();
98
+ const context = useGroupContext("GroupItem", __scopeGroup);
99
+ if (!treeIndex) {
100
+ throw Error("useGroupItem should only be used within a <Group/>");
101
+ }
102
+ const isFirst = forcePlacement === "first" || forcePlacement !== "last" && treeIndex.index === 0;
103
+ const isLast = forcePlacement === "last" || forcePlacement !== "first" && treeIndex.index === treeIndex.maxIndex;
104
+ const radiusStyles = getZeroedRadius(isFirst, isLast, context.vertical);
105
+ return {
106
+ disabled: childrenProps.disabled ?? context.disabled,
107
+ ...radiusStyles
108
+ };
142
109
  };
143
110
  const Group = createGroup(true);
144
111
  const YGroup = Group;
145
112
  const XGroup = createGroup(false);
146
113
  function getZeroedRadius(isFirst, isLast, vertical) {
147
- if (vertical) {
148
- return {
149
- ...(isFirst ? null : {
150
- borderTopLeftRadius: 0,
151
- borderTopRightRadius: 0
152
- }),
153
- ...(isLast ? null : {
154
- borderBottomLeftRadius: 0,
155
- borderBottomRightRadius: 0
156
- })
157
- };
158
- }
159
- return {
160
- ...(isFirst ? null : {
161
- borderTopLeftRadius: 0,
162
- borderBottomLeftRadius: 0
163
- }),
164
- ...(isLast ? null : {
165
- borderTopRightRadius: 0,
166
- borderBottomRightRadius: 0
167
- })
168
- };
169
- }
114
+ if (vertical) {
115
+ return {
116
+ ...isFirst ? null : {
117
+ borderTopLeftRadius: 0,
118
+ borderTopRightRadius: 0
119
+ },
120
+ ...isLast ? null : {
121
+ borderBottomLeftRadius: 0,
122
+ borderBottomRightRadius: 0
123
+ }
124
+ };
125
+ }
126
+ return {
127
+ ...isFirst ? null : {
128
+ borderTopLeftRadius: 0,
129
+ borderBottomLeftRadius: 0
130
+ },
131
+ ...isLast ? null : {
132
+ borderTopRightRadius: 0,
133
+ borderBottomRightRadius: 0
134
+ }
135
+ };
136
+ }
@@ -0,0 +1,140 @@
1
+ "use strict";
2
+
3
+ var __create = Object.create;
4
+ var __defProp = Object.defineProperty;
5
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
6
+ var __getOwnPropNames = Object.getOwnPropertyNames;
7
+ var __getProtoOf = Object.getPrototypeOf;
8
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
9
+ var __export = (target, all) => {
10
+ for (var name in all) __defProp(target, name, {
11
+ get: all[name],
12
+ enumerable: true
13
+ });
14
+ };
15
+ var __copyProps = (to, from, except, desc) => {
16
+ if (from && typeof from === "object" || typeof from === "function") {
17
+ for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
18
+ get: () => from[key],
19
+ enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
20
+ });
21
+ }
22
+ return to;
23
+ };
24
+ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", {
25
+ value: mod,
26
+ enumerable: true
27
+ }) : target, mod));
28
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
29
+ var Group_exports = {};
30
+ __export(Group_exports, {
31
+ Group: () => Group,
32
+ GroupFrame: () => GroupFrame,
33
+ XGroup: () => XGroup,
34
+ YGroup: () => YGroup,
35
+ createGroupScope: () => createGroupScope,
36
+ useGroupItem: () => useGroupItem
37
+ });
38
+ module.exports = __toCommonJS(Group_exports);
39
+ var import_jsx_runtime = require("react/jsx-runtime");
40
+ var import_core = require("@tamagui/core");
41
+ var import_create_context = require("@tamagui/create-context");
42
+ var import_helpers = require("@tamagui/helpers");
43
+ var import_stacks = require("@tamagui/stacks");
44
+ var import_react = __toESM(require("react"), 1);
45
+ var import_useIndexedChildren = require("./useIndexedChildren.native.js");
46
+ var GROUP_NAME = "Group";
47
+ var [createGroupContext, createGroupScope] = (0, import_create_context.createContextScope)(GROUP_NAME);
48
+ var [GroupProvider, useGroupContext] = createGroupContext(GROUP_NAME);
49
+ var groupSizeVariant = import_core.styled.dynamic(function(val, env) {
50
+ return { borderRadius: (0, import_core.resolveSize)(val, env).frame.borderRadius };
51
+ });
52
+ var GroupFrame = (0, import_core.styled)(import_stacks.YStack, {
53
+ displayName: "GroupFrame",
54
+ size: true,
55
+ variants: { size: groupSizeVariant }
56
+ });
57
+ function createGroup(verticalDefault) {
58
+ return (0, import_helpers.withStaticProperties)((0, import_core.createStyledHOC)(GroupFrame, function(props, ref) {
59
+ var { __scopeGroup, children: childrenProp, orientation = verticalDefault ? "vertical" : "horizontal", disabled, ...restProps } = props;
60
+ var vertical = orientation === "vertical";
61
+ var indexedChildren = (0, import_useIndexedChildren.useIndexedChildren)(import_react.default.Children.toArray(childrenProp));
62
+ return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GroupProvider, {
63
+ vertical,
64
+ disabled,
65
+ scope: __scopeGroup,
66
+ children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GroupFrame, {
67
+ ref,
68
+ flexDirection: vertical ? "column" : "row",
69
+ ...restProps,
70
+ children: indexedChildren
71
+ })
72
+ });
73
+ }), { Item: GroupItem });
74
+ }
75
+ function GroupItem(props) {
76
+ var { __scopeGroup, children, forcePlacement, ...forwardedProps } = props;
77
+ var context = useGroupContext("GroupItem", __scopeGroup);
78
+ var treeIndex = (0, import_useIndexedChildren.useIndex)();
79
+ if (!treeIndex) {
80
+ throw Error("<Group.Item/> should only be used within a <Group/>");
81
+ }
82
+ if (!/* @__PURE__ */ import_react.default.isValidElement(children)) {
83
+ return children;
84
+ }
85
+ var isFirst = forcePlacement === "first" || forcePlacement !== "last" && treeIndex.index === 0;
86
+ var isLast = forcePlacement === "last" || forcePlacement !== "first" && treeIndex.index === treeIndex.maxIndex;
87
+ var radiusStyles = getZeroedRadius(isFirst, isLast, context.vertical);
88
+ var groupProps = {
89
+ ...forwardedProps,
90
+ ...radiusStyles
91
+ };
92
+ if (context.disabled != null) {
93
+ var _children_props_disabled;
94
+ groupProps.disabled = (_children_props_disabled = children.props.disabled) !== null && _children_props_disabled !== void 0 ? _children_props_disabled : context.disabled;
95
+ }
96
+ var mergedProps = (0, import_core.mergeSlotStyleProps)(groupProps, children.props);
97
+ return /* @__PURE__ */ import_react.default.cloneElement(children, mergedProps);
98
+ }
99
+ var useGroupItem = function(childrenProps, forcePlacement, __scopeGroup) {
100
+ var treeIndex = (0, import_useIndexedChildren.useIndex)();
101
+ var context = useGroupContext("GroupItem", __scopeGroup);
102
+ if (!treeIndex) {
103
+ throw Error("useGroupItem should only be used within a <Group/>");
104
+ }
105
+ var isFirst = forcePlacement === "first" || forcePlacement !== "last" && treeIndex.index === 0;
106
+ var isLast = forcePlacement === "last" || forcePlacement !== "first" && treeIndex.index === treeIndex.maxIndex;
107
+ var radiusStyles = getZeroedRadius(isFirst, isLast, context.vertical);
108
+ var _childrenProps_disabled;
109
+ return {
110
+ disabled: (_childrenProps_disabled = childrenProps.disabled) !== null && _childrenProps_disabled !== void 0 ? _childrenProps_disabled : context.disabled,
111
+ ...radiusStyles
112
+ };
113
+ };
114
+ var Group = createGroup(true);
115
+ var YGroup = Group;
116
+ var XGroup = createGroup(false);
117
+ function getZeroedRadius(isFirst, isLast, vertical) {
118
+ if (vertical) {
119
+ return {
120
+ ...isFirst ? null : {
121
+ borderTopLeftRadius: 0,
122
+ borderTopRightRadius: 0
123
+ },
124
+ ...isLast ? null : {
125
+ borderBottomLeftRadius: 0,
126
+ borderBottomRightRadius: 0
127
+ }
128
+ };
129
+ }
130
+ return {
131
+ ...isFirst ? null : {
132
+ borderTopLeftRadius: 0,
133
+ borderBottomLeftRadius: 0
134
+ },
135
+ ...isLast ? null : {
136
+ borderTopRightRadius: 0,
137
+ borderBottomRightRadius: 0
138
+ }
139
+ };
140
+ }