@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.
@@ -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
  
4
6
  ./index.ts → ./dist/index.umd.js, ./dist/index.es.mjs...
5
- created ./dist/index.umd.js, ./dist/index.es.mjs in 16.5s
7
+ created ./dist/index.umd.js, ./dist/index.es.mjs in 18.6s
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
@@ -1,3 +1,4 @@
1
+ /* global NodeJS */
1
2
  import * as React from 'react'
2
3
  import { IconChevronDownSmall } from '@cypress-design/react-icon'
3
4
  import clsx from 'clsx'
@@ -1 +1 @@
1
- {"version":3,"file":"_DocGroup.d.ts","sourceRoot":"./","sources":["_DocGroup.tsx"],"names":[],"mappings":"AAAA,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"}
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 * as iconsRegistry from '@cypress-design/icon-registry';
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$1(item, ["label"]);
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$1({}, itemRest, { className: clsx('group relative block w-full pl-[24px]', {
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$1(_a, ["items", "depth", "onActivePosition", "updateMarkerPosition", "markerIsMoving", "LinkComponent", "className", "context"]);
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$1({}, rest, { className: clsx('list-none p-0', className) }), items.map(function (item, index) {
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$1(_a, ["items", "activePath", "collapsible", "LinkComponent"]);
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$1({}, rest, { items: items, depth: -1, markerIsMoving: markerIsMoving, onActivePosition: setActivePosition, LinkComponent: LinkComponent, context: {
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 left-0 transform transition-transform text-gray-400 dark:text-gray-700 flex py-[10px] items-center text-start font-medium pl-[48px] left-[8px] top-0 w-[1px] h-full bg-gray-100 dark:bg-gray-900"> */
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"> */