@cypress-design/react-docmenu 0.7.1 → 1.0.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.
- package/.turbo/turbo-build.log +3 -1
- package/CHANGELOG.md +21 -0
- package/_DocGroup.tsx +1 -0
- package/dist/_DocGroup.d.ts.map +1 -1
- package/dist/index.es.mjs +9 -122
- package/dist/index.es.mjs.map +1 -1
- package/dist/index.umd.js +14 -127
- package/dist/index.umd.js.map +1 -1
- package/package.json +4 -4
- package/rollup.config.mjs +5 -1
package/.turbo/turbo-build.log
CHANGED
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
$ yarn build:module && yarn build:types
|
|
2
2
|
$ rollup -c ./rollup.config.mjs
|
|
3
|
+
(node:4045) ExperimentalWarning: Importing JSON modules is an experimental feature and might change at any time
|
|
4
|
+
(Use `node --trace-warnings ...` to show where the warning was created)
|
|
3
5
|
[36m
|
|
4
6
|
[1m./index.ts[22m → [1m./dist/index.umd.js, ./dist/index.es.mjs[22m...[39m
|
|
5
|
-
[32mcreated [1m./dist/index.umd.js, ./dist/index.es.mjs[22m in [
|
|
7
|
+
[32mcreated [1m./dist/index.umd.js, ./dist/index.es.mjs[22m in [1m18.6s[22m[39m
|
|
6
8
|
$ tsc --project ./tsconfig.build.json
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,26 @@
|
|
|
1
1
|
# @cypress-design/react-docmenu
|
|
2
2
|
|
|
3
|
+
## 1.0.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#450](https://github.com/cypress-io/cypress-design/pull/450) [`927097f`](https://github.com/cypress-io/cypress-design/commit/927097f409235ac78c98b281c4d9b2ec70dfe01d) Thanks [@elevatebart](https://github.com/elevatebart)! - optim: do not package dependencies
|
|
8
|
+
|
|
9
|
+
- Updated dependencies [[`927097f`](https://github.com/cypress-io/cypress-design/commit/927097f409235ac78c98b281c4d9b2ec70dfe01d), [`927097f`](https://github.com/cypress-io/cypress-design/commit/927097f409235ac78c98b281c4d9b2ec70dfe01d)]:
|
|
10
|
+
- @cypress-design/react-icon@1.1.0
|
|
11
|
+
|
|
12
|
+
## 1.0.0
|
|
13
|
+
|
|
14
|
+
### Major Changes
|
|
15
|
+
|
|
16
|
+
- [`63fb4d9`](https://github.com/cypress-io/cypress-design/commit/63fb4d9e60f6c56c563d17e3b983d0ebd25e0e87) Thanks [@elevatebart](https://github.com/elevatebart)! - Create 1.0
|
|
17
|
+
|
|
18
|
+
### Patch Changes
|
|
19
|
+
|
|
20
|
+
- Updated dependencies [[`63fb4d9`](https://github.com/cypress-io/cypress-design/commit/63fb4d9e60f6c56c563d17e3b983d0ebd25e0e87)]:
|
|
21
|
+
- @cypress-design/constants-docmenu@1.0.0
|
|
22
|
+
- @cypress-design/react-icon@1.0.0
|
|
23
|
+
|
|
3
24
|
## 0.7.1
|
|
4
25
|
|
|
5
26
|
### Patch Changes
|
package/_DocGroup.tsx
CHANGED
package/dist/_DocGroup.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"_DocGroup.d.ts","sourceRoot":"./","sources":["_DocGroup.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"_DocGroup.d.ts","sourceRoot":"./","sources":["_DocGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,EACL,KAAK,QAAQ,EACb,KAAK,WAAW,EAEjB,MAAM,mCAAmC,CAAA;AAC1C,OAAO,EAEL,KAAK,OAAO,EAEZ,KAAK,iBAAiB,EACvB,MAAM,YAAY,CAAA;AAEnB,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,QAAQ,CAAA;IACf,OAAO,EAAE,OAAO,CAAA;IAChB,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACjE,oBAAoB,EAAE,MAAM,IAAI,CAAA;IAChC,cAAc,EAAE,OAAO,CAAA;IACvB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,aAAa,CAAC,EAAE,iBAAiB,CAAA;CAClC;AAED,MAAM,WAAW,eAAe;IAC9B,uBAAuB,EAAE,MAAM,IAAI,CAAA;CACpC;AAcD,eAAO,MAAM,QAAQ,uFAkKpB,CAAA;AAID,MAAM,WAAW,qBACf,SAAQ,KAAK,CAAC,cAAc,CAAC,gBAAgB,CAAC;IAC9C,KAAK,EAAE,CAAC,QAAQ,GAAG,WAAW,CAAC,EAAE,CAAA;IACjC,gBAAgB,EAAE,CAAC,IAAI,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IACjE,cAAc,EAAE,OAAO,CAAA;IACvB,oBAAoB,CAAC,EAAE,MAAM,IAAI,CAAA;IACjC,KAAK,EAAE,MAAM,CAAA;IACb,aAAa,EAAE,iBAAiB,CAAA;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,OAAO,EAAE,OAAO,CAAA;CACjB;AAED,MAAM,WAAW,uBAAuB;IACtC,uBAAuB,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;CAClD;AAED,eAAO,MAAM,gBAAgB,uGAkG5B,CAAA"}
|
package/dist/index.es.mjs
CHANGED
|
@@ -1,52 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
+
import { IconChevronDownSmall } from '@cypress-design/react-icon';
|
|
2
3
|
import clsx from 'clsx';
|
|
3
|
-
import
|
|
4
|
-
import { ICON_COLOR_PROP_NAMES } from '@cypress-design/icon-registry';
|
|
5
|
-
|
|
6
|
-
/******************************************************************************
|
|
7
|
-
Copyright (c) Microsoft Corporation.
|
|
8
|
-
|
|
9
|
-
Permission to use, copy, modify, and/or distribute this software for any
|
|
10
|
-
purpose with or without fee is hereby granted.
|
|
11
|
-
|
|
12
|
-
THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
|
|
13
|
-
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
|
|
14
|
-
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
|
|
15
|
-
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
|
|
16
|
-
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
|
|
17
|
-
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
|
|
18
|
-
PERFORMANCE OF THIS SOFTWARE.
|
|
19
|
-
***************************************************************************** */
|
|
20
|
-
/* global Reflect, Promise, SuppressedError, Symbol */
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
var __assign$1 = function() {
|
|
24
|
-
__assign$1 = Object.assign || function __assign(t) {
|
|
25
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
26
|
-
s = arguments[i];
|
|
27
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
|
|
28
|
-
}
|
|
29
|
-
return t;
|
|
30
|
-
};
|
|
31
|
-
return __assign$1.apply(this, arguments);
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
function __rest$1(s, e) {
|
|
35
|
-
var t = {};
|
|
36
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
37
|
-
t[p] = s[p];
|
|
38
|
-
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
39
|
-
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
40
|
-
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
41
|
-
t[p[i]] = s[p[i]];
|
|
42
|
-
}
|
|
43
|
-
return t;
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
|
|
47
|
-
var e = new Error(message);
|
|
48
|
-
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
49
|
-
};
|
|
4
|
+
import { classes } from '@cypress-design/constants-docmenu';
|
|
50
5
|
|
|
51
6
|
/******************************************************************************
|
|
52
7
|
Copyright (c) Microsoft Corporation.
|
|
@@ -93,80 +48,12 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
|
|
|
93
48
|
return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
|
|
94
49
|
};
|
|
95
50
|
|
|
96
|
-
var compileReactIconProperties = function (_a) {
|
|
97
|
-
var body = _a.body, defs = _a.defs, compiledClasses = _a.compiledClasses, size = _a.size, name = _a.name, attributes = __rest(_a, ["body", "defs", "compiledClasses", "size", "name"]);
|
|
98
|
-
var filteredAttributes = Object.keys(attributes).reduce(function (newAttributes, attrName) {
|
|
99
|
-
if (!ICON_COLOR_PROP_NAMES.includes(attrName) &&
|
|
100
|
-
attrName !== 'name') {
|
|
101
|
-
// @ts-expect-error the ky of React's SVGProps is too broad and
|
|
102
|
-
// breaks here. Since we do not need to check for it. We keep the expect error
|
|
103
|
-
newAttributes[attrName] =
|
|
104
|
-
attributes[attrName];
|
|
105
|
-
}
|
|
106
|
-
return newAttributes;
|
|
107
|
-
}, {});
|
|
108
|
-
// eslint-disable-next-line react-hooks/rules-of-hooks
|
|
109
|
-
React.useEffect(function () {
|
|
110
|
-
var iconFileId = "".concat(name, "_").concat(size);
|
|
111
|
-
if (defs) {
|
|
112
|
-
if (document.querySelector("[data-cy-svg-defs=\"".concat(iconFileId, "\"]"))) {
|
|
113
|
-
return;
|
|
114
|
-
}
|
|
115
|
-
var svgElement = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
|
|
116
|
-
svgElement.setAttribute('data-cy-svg-defs', iconFileId);
|
|
117
|
-
svgElement.setAttribute('width', '0');
|
|
118
|
-
svgElement.setAttribute('height', '0');
|
|
119
|
-
svgElement.innerHTML = defs;
|
|
120
|
-
document.body.appendChild(svgElement);
|
|
121
|
-
}
|
|
122
|
-
}, [defs, name, size]);
|
|
123
|
-
var componentProps = __assign({ width: size, height: size, viewBox: "0 0 ".concat(size, " ").concat(size), fill: 'none', dangerouslySetInnerHTML: {
|
|
124
|
-
__html: body,
|
|
125
|
-
}, className: undefined }, filteredAttributes);
|
|
126
|
-
if (attributes.className) {
|
|
127
|
-
compiledClasses.push(attributes.className);
|
|
128
|
-
}
|
|
129
|
-
if (compiledClasses.length) {
|
|
130
|
-
componentProps.className = compiledClasses.join(' ');
|
|
131
|
-
}
|
|
132
|
-
return componentProps;
|
|
133
|
-
};
|
|
134
|
-
|
|
135
|
-
function useIconProps(props, iconBodiesAndDefs, availableSizes, name) {
|
|
136
|
-
var interactiveColorsOnGroup = props.interactiveColorsOnGroup, cleanProps = __rest(props, ["interactiveColorsOnGroup"]);
|
|
137
|
-
var _a = iconsRegistry.getComponentAttributes(__assign(__assign({}, cleanProps), { availableSizes: availableSizes, interactiveColorsOnGroup: interactiveColorsOnGroup })), size = _a.sizeWithDefault, compiledClasses = _a.compiledClasses;
|
|
138
|
-
var _b = iconBodiesAndDefs[size] || {}, body = _b.body, defs = _b.defs;
|
|
139
|
-
if (!body) {
|
|
140
|
-
throw Error("Icon \"".concat(name, "\" is not available in size ").concat(size));
|
|
141
|
-
}
|
|
142
|
-
return compileReactIconProperties(__assign(__assign({}, cleanProps), { name: name, size: size, body: body, defs: defs, compiledClasses: compiledClasses }));
|
|
143
|
-
}
|
|
144
|
-
var IconChevronDownSmall = function (props) { return React.createElement('svg', useIconProps(props, {
|
|
145
|
-
"8": {
|
|
146
|
-
"body": "<path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m1 2.5 3 3 3-3\" class=\"icon-dark\"/>"
|
|
147
|
-
},
|
|
148
|
-
"16": {
|
|
149
|
-
"body": "<path stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m4 6 4 4 4-4\" class=\"icon-dark\"/>"
|
|
150
|
-
}
|
|
151
|
-
}, ["8", "16"], "chevron-down-small")); };
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
/* <wind-keep class="filter icon-light-secondary icon-dark-secondary"> */
|
|
155
|
-
|
|
156
|
-
const classes = {
|
|
157
|
-
expandedIcon: 'absolute left-0 transform transition-transform text-gray-400 dark:text-gray-700',
|
|
158
|
-
button: 'flex leading-[24px] py-[10px] items-center relative w-full text-start',
|
|
159
|
-
topButton: 'leading-[24px] text-[16px] pl-[24px] font-medium',
|
|
160
|
-
leafButton: 'leading-[20px] text-[14px] pl-[48px]',
|
|
161
|
-
openListBorderLeft: 'absolute left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900',
|
|
162
|
-
};
|
|
163
|
-
|
|
164
51
|
var DocLink = React.forwardRef(function (_a, ref) {
|
|
165
52
|
var item = _a.item, depth = _a.depth, markerIsMoving = _a.markerIsMoving, context = _a.context, onActive = _a.onActive, LinkComponent = _a.LinkComponent;
|
|
166
53
|
var activeLIRef = React.useRef(null);
|
|
167
54
|
var active = React.useMemo(function () { return item.href === context.activePath; }, [item.href, context.activePath]);
|
|
168
55
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
169
|
-
item.label; var itemRest = __rest
|
|
56
|
+
item.label; var itemRest = __rest(item, ["label"]);
|
|
170
57
|
var setActiveMarkerPosition = function () {
|
|
171
58
|
var _a;
|
|
172
59
|
if (active) {
|
|
@@ -204,7 +91,7 @@ var DocLink = React.forwardRef(function (_a, ref) {
|
|
|
204
91
|
setActiveMarkerPosition: setActiveMarkerPosition,
|
|
205
92
|
}); });
|
|
206
93
|
return (React.createElement("li", { ref: activeLIRef, className: "list-none p-0 scroll-my-10" },
|
|
207
|
-
React.createElement(LinkComponent, __assign
|
|
94
|
+
React.createElement(LinkComponent, __assign({}, itemRest, { className: clsx('group relative block w-full pl-[24px]', {
|
|
208
95
|
'text-indigo-500 dark:text-indigo-400': active,
|
|
209
96
|
'text-gray-700 dark:text-gray-500': !active,
|
|
210
97
|
'py-[8px] text-[16px] leading-[24px]': depth < 0,
|
|
@@ -335,7 +222,7 @@ var DocGroup = React.forwardRef(function (_a, ref) {
|
|
|
335
222
|
});
|
|
336
223
|
DocGroup.displayName = 'DocMenuDocGroup';
|
|
337
224
|
var DocGroupElements = React.forwardRef(function (_a, ref) {
|
|
338
|
-
var items = _a.items, _b = _a.depth, depth = _b === void 0 ? 0 : _b, onActivePosition = _a.onActivePosition, updateMarkerPosition = _a.updateMarkerPosition, markerIsMoving = _a.markerIsMoving, LinkComponent = _a.LinkComponent, className = _a.className, context = _a.context, rest = __rest
|
|
225
|
+
var items = _a.items, _b = _a.depth, depth = _b === void 0 ? 0 : _b, onActivePosition = _a.onActivePosition, updateMarkerPosition = _a.updateMarkerPosition, markerIsMoving = _a.markerIsMoving, LinkComponent = _a.LinkComponent, className = _a.className, context = _a.context, rest = __rest(_a, ["items", "depth", "onActivePosition", "updateMarkerPosition", "markerIsMoving", "LinkComponent", "className", "context"]);
|
|
339
226
|
var $groups = React.useRef([]);
|
|
340
227
|
var $items = React.useRef([]);
|
|
341
228
|
var reTriggerSetActiveGroup = React.useCallback(function (index) {
|
|
@@ -367,7 +254,7 @@ var DocGroupElements = React.forwardRef(function (_a, ref) {
|
|
|
367
254
|
updateMarkerPosition === null || updateMarkerPosition === void 0 ? void 0 : updateMarkerPosition();
|
|
368
255
|
}
|
|
369
256
|
}, [updateMarkerPosition, reTriggerSetActiveGroup, items, activePath]);
|
|
370
|
-
return (React.createElement("ul", __assign
|
|
257
|
+
return (React.createElement("ul", __assign({}, rest, { className: clsx('list-none p-0', className) }), items.map(function (item, index) {
|
|
371
258
|
return 'items' in item ? (React.createElement("li", { key: index, className: "relative list-none p-0" },
|
|
372
259
|
React.createElement(DocGroup, { ref: function (el) {
|
|
373
260
|
$groups.current[index] = el;
|
|
@@ -381,7 +268,7 @@ var DocGroupElements = React.forwardRef(function (_a, ref) {
|
|
|
381
268
|
DocGroupElements.displayName = 'DocMenuDocGroupElements';
|
|
382
269
|
|
|
383
270
|
var DocMenu = function (_a) {
|
|
384
|
-
var items = _a.items, _b = _a.activePath, activePath = _b === void 0 ? '<unknown>' : _b, _c = _a.collapsible, collapsible = _c === void 0 ? true : _c, _d = _a.LinkComponent, LinkComponent = _d === void 0 ? 'a' : _d, rest = __rest
|
|
271
|
+
var items = _a.items, _b = _a.activePath, activePath = _b === void 0 ? '<unknown>' : _b, _c = _a.collapsible, collapsible = _c === void 0 ? true : _c, _d = _a.LinkComponent, LinkComponent = _d === void 0 ? 'a' : _d, rest = __rest(_a, ["items", "activePath", "collapsible", "LinkComponent"]);
|
|
385
272
|
var _e = React.useState(0), activeTop = _e[0], setActiveTop = _e[1];
|
|
386
273
|
var _f = React.useState(36), activeHeight = _f[0], setActiveHeight = _f[1];
|
|
387
274
|
var _g = React.useState(false), showMarker = _g[0], setShowMarker = _g[1];
|
|
@@ -415,7 +302,7 @@ var DocMenu = function (_a) {
|
|
|
415
302
|
? 'height .3s ease-in-out, top .3s ease-in-out'
|
|
416
303
|
: 'none',
|
|
417
304
|
} })) : null,
|
|
418
|
-
React.createElement(DocGroupElements, __assign
|
|
305
|
+
React.createElement(DocGroupElements, __assign({}, rest, { items: items, depth: -1, markerIsMoving: markerIsMoving, onActivePosition: setActivePosition, LinkComponent: LinkComponent, context: {
|
|
419
306
|
setMarkerIsMoving: setMarkerIsMoving,
|
|
420
307
|
activePath: activePath,
|
|
421
308
|
collapsible: collapsible,
|
|
@@ -426,4 +313,4 @@ var DocMenu = function (_a) {
|
|
|
426
313
|
export { DocMenu as default };
|
|
427
314
|
//# sourceMappingURL=index.es.mjs.map
|
|
428
315
|
|
|
429
|
-
/* <wind-keep class="container relative absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 dark:bg-indigo-400 ml-[6.5px] mt-[4px] transition ease-in-out text-indigo-500 dark:text-indigo-400 text-gray-900 dark:text-gray-100 text-gray-800 dark:text-gray-200 rotate-0 -rotate-90 transition-all grid grid-rows-[0fr] grid-rows-[1fr] overflow-hidden filter list-none p-0 visible block inline scroll-my-10 w-full pl-[24px] text-gray-700 dark:text-gray-500 py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] left-[6.5px] top-[4px] bottom-[4px] z-10 hidden group-hover:block bg-gray-300 text-indigo-400 text-gray-500 bg-indigo-400
|
|
316
|
+
/* <wind-keep class="container relative absolute h-[36px] w-[4px] z-50 rounded-full bg-indigo-500 dark:bg-indigo-400 ml-[6.5px] mt-[4px] transition ease-in-out text-indigo-500 dark:text-indigo-400 text-gray-900 dark:text-gray-100 text-gray-800 dark:text-gray-200 rotate-0 -rotate-90 transition-all grid grid-rows-[0fr] grid-rows-[1fr] overflow-hidden filter list-none p-0 visible block inline scroll-my-10 w-full pl-[24px] text-gray-700 dark:text-gray-500 py-[8px] text-[16px] leading-[24px] leading-[20px] text-[14px] py-[12px] left-[6.5px] top-[4px] bottom-[4px] z-10 hidden group-hover:block bg-gray-300 text-indigo-400 text-gray-500 bg-indigo-400"> */
|