@loomhq/lens 11.5.0 → 11.6.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.
Files changed (5) hide show
  1. package/dist/components/modal/modal.d.ts +6 -1
  2. package/dist/icons/index.js +6 -6
  3. package/dist/icons/numbered-list.js +6 -6
  4. package/dist/index.js +15 -5
  5. package/package.json +1 -1
package/dist/components/modal/modal.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import React from 'react';
2
2
  declare const ModalCardWrapper: import("@emotion/styled").StyledComponent<React.DetailedHTMLProps<React.DialogHTMLAttributes<HTMLDialogElement>, HTMLDialogElement>, ModalCardProps, object>;
3
- export declare const ModalCard: ({ children, onCloseClick, isOpen, maxWidth, maxHeight, placement, ariaLabel, ref, ...props }: ModalCardProps & React.ComponentProps<typeof ModalCardWrapper>) => React.JSX.Element;
3
+ export declare const ModalCard: ({ children, onCloseClick, isOpen, maxWidth, maxHeight, placement, ariaLabel, ref, removeClose, ...props }: ModalCardProps & React.ComponentProps<typeof ModalCardWrapper>) => React.JSX.Element;
4
4
  declare const Modal: React.ForwardRefExoticComponent<Omit<ModalProps & {
5
5
  isOpen?: boolean;
6
6
  children?: React.ReactNode;
@@ -47,5 +47,10 @@ type ModalCardProps = {
47
47
  maxHeight?: number | string;
48
48
  maxWidth?: number | string;
49
49
  ariaLabel?: string;
50
+ /**
51
+ * Use sparingly, and always provide a way for the user to continue or close out.
52
+ * Useful for cases where there are mandatory steps.
53
+ */
54
+ removeClose?: boolean;
50
55
  };
51
56
  export default Modal;
package/dist/icons/index.js CHANGED
@@ -3205,7 +3205,7 @@ var SvgNumberedList = () => /* @__PURE__ */ React139.createElement("svg", { view
3205
3205
  {
3206
3206
  fillRule: "evenodd",
3207
3207
  clipRule: "evenodd",
3208
- d: "M11.4444 11C11.4444 10.4477 11.8921 10 12.4444 10H23.9999C24.5522 10 24.9999 10.4477 24.9999 11C24.9999 11.5523 24.5522 12 23.9999 12H12.4444C11.8921 12 11.4444 11.5523 11.4444 11Z",
3208
+ d: "M7.44439 7C7.44439 6.44772 7.89211 6 8.44439 6H19.9999C20.5522 6 20.9999 6.44772 20.9999 7C20.9999 7.55228 20.5522 8 19.9999 8H8.44439C7.89211 8 7.44439 7.55228 7.44439 7Z",
3209
3209
  fill: "currentColor"
3210
3210
  }
3211
3211
  ), /* @__PURE__ */ React139.createElement(
@@ -3213,7 +3213,7 @@ var SvgNumberedList = () => /* @__PURE__ */ React139.createElement("svg", { view
3213
3213
  {
3214
3214
  fillRule: "evenodd",
3215
3215
  clipRule: "evenodd",
3216
- d: "M11.4444 16.3333C11.4444 15.781 11.8921 15.3333 12.4444 15.3333H23.9999C24.5522 15.3333 24.9999 15.781 24.9999 16.3333C24.9999 16.8856 24.5522 17.3333 23.9999 17.3333H12.4444C11.8921 17.3333 11.4444 16.8856 11.4444 16.3333Z",
3216
+ d: "M7.44439 12.3333C7.44439 11.781 7.89211 11.3333 8.44439 11.3333H19.9999C20.5522 11.3333 20.9999 11.781 20.9999 12.3333C20.9999 12.8856 20.5522 13.3333 19.9999 13.3333H8.44439C7.89211 13.3333 7.44439 12.8856 7.44439 12.3333Z",
3217
3217
  fill: "currentColor"
3218
3218
  }
3219
3219
  ), /* @__PURE__ */ React139.createElement(
@@ -3221,25 +3221,25 @@ var SvgNumberedList = () => /* @__PURE__ */ React139.createElement("svg", { view
3221
3221
  {
3222
3222
  fillRule: "evenodd",
3223
3223
  clipRule: "evenodd",
3224
- d: "M11.4444 21.6667C11.4444 21.1144 11.8921 20.6667 12.4444 20.6667H23.9999C24.5522 20.6667 24.9999 21.1144 24.9999 21.6667C24.9999 22.219 24.5522 22.6667 23.9999 22.6667H12.4444C11.8921 22.6667 11.4444 22.219 11.4444 21.6667Z",
3224
+ d: "M7.44439 17.6667C7.44439 17.1144 7.89211 16.6667 8.44439 16.6667H19.9999C20.5522 16.6667 20.9999 17.1144 20.9999 17.6667C20.9999 18.219 20.5522 18.6667 19.9999 18.6667H8.44439C7.89211 18.6667 7.44439 18.219 7.44439 17.6667Z",
3225
3225
  fill: "currentColor"
3226
3226
  }
3227
3227
  ), /* @__PURE__ */ React139.createElement(
3228
3228
  "path",
3229
3229
  {
3230
- d: "M8.8852 13H8.1002V10.65H7.3052V10.12C7.8252 10.11 8.1452 9.82 8.2102 9.455H8.8852V13Z",
3230
+ d: "M4.88495 9H4.09995V6.65H3.30495V6.12C3.82495 6.11 4.14495 5.82 4.20995 5.455H4.88495V9Z",
3231
3231
  fill: "currentColor"
3232
3232
  }
3233
3233
  ), /* @__PURE__ */ React139.createElement(
3234
3234
  "path",
3235
3235
  {
3236
- d: "M8.015 15.835L7.265 15.815C7.25 15.76 7.24 15.65 7.24 15.555C7.24 14.93 7.725 14.38 8.525 14.38C9.305 14.38 9.8 14.91 9.8 15.54C9.8 15.99 9.58 16.37 9.115 16.635L8.415 17.035C8.28 17.115 8.18 17.215 8.15 17.335H9.79V18H7.205C7.21 17.36 7.385 16.83 8.025 16.465L8.6 16.135C8.895 15.965 9.01 15.805 9.01 15.555C9.01 15.29 8.805 15.085 8.525 15.085C8.2 15.085 7.99 15.31 7.99 15.64C7.99 15.695 7.995 15.77 8.015 15.835Z",
3236
+ d: "M4.015 11.835L3.265 11.815C3.25 11.76 3.24 11.65 3.24 11.555C3.24 10.93 3.725 10.38 4.525 10.38C5.305 10.38 5.8 10.91 5.8 11.54C5.8 11.99 5.58 12.37 5.115 12.635L4.415 13.035C4.28 13.115 4.18 13.215 4.15 13.335H5.79V14H3.205C3.21 13.36 3.385 12.83 4.025 12.465L4.6 12.135C4.895 11.965 5.01 11.805 5.01 11.555C5.01 11.29 4.805 11.085 4.525 11.085C4.2 11.085 3.99 11.31 3.99 11.64C3.99 11.695 3.995 11.77 4.015 11.835Z",
3237
3237
  fill: "currentColor"
3238
3238
  }
3239
3239
  ), /* @__PURE__ */ React139.createElement(
3240
3240
  "path",
3241
3241
  {
3242
- d: "M8.205 21.7L7.865 21.16L8.755 20.37H7.28V19.705H9.735V20.345L8.88 21.085C9.39 21.11 9.84 21.505 9.84 22.155C9.84 22.78 9.335 23.325 8.505 23.325C7.71 23.325 7.22 22.8 7.17 22.21L7.92 22.055C7.935 22.4 8.165 22.65 8.5 22.65C8.85 22.65 9.045 22.405 9.045 22.135C9.045 21.785 8.795 21.625 8.515 21.625C8.41 21.625 8.28 21.655 8.205 21.7Z",
3242
+ d: "M4.205 17.7L3.865 17.16L4.755 16.37H3.28V15.705H5.735V16.345L4.88 17.085C5.39 17.11 5.84 17.505 5.84 18.155C5.84 18.78 5.335 19.325 4.505 19.325C3.71 19.325 3.22 18.8 3.17 18.21L3.92 18.055C3.935 18.4 4.165 18.65 4.5 18.65C4.85 18.65 5.045 18.405 5.045 18.135C5.045 17.785 4.795 17.625 4.515 17.625C4.41 17.625 4.28 17.655 4.205 17.7Z",
3243
3243
  fill: "currentColor"
3244
3244
  }
3245
3245
  ));
package/dist/icons/numbered-list.js CHANGED
@@ -5,7 +5,7 @@ var SvgNumberedList = () => /* @__PURE__ */ React.createElement("svg", { viewBox
5
5
  {
6
6
  fillRule: "evenodd",
7
7
  clipRule: "evenodd",
8
- d: "M11.4444 11C11.4444 10.4477 11.8921 10 12.4444 10H23.9999C24.5522 10 24.9999 10.4477 24.9999 11C24.9999 11.5523 24.5522 12 23.9999 12H12.4444C11.8921 12 11.4444 11.5523 11.4444 11Z",
8
+ d: "M7.44439 7C7.44439 6.44772 7.89211 6 8.44439 6H19.9999C20.5522 6 20.9999 6.44772 20.9999 7C20.9999 7.55228 20.5522 8 19.9999 8H8.44439C7.89211 8 7.44439 7.55228 7.44439 7Z",
9
9
  fill: "currentColor"
10
10
  }
11
11
  ), /* @__PURE__ */ React.createElement(
@@ -13,7 +13,7 @@ var SvgNumberedList = () => /* @__PURE__ */ React.createElement("svg", { viewBox
13
13
  {
14
14
  fillRule: "evenodd",
15
15
  clipRule: "evenodd",
16
- d: "M11.4444 16.3333C11.4444 15.781 11.8921 15.3333 12.4444 15.3333H23.9999C24.5522 15.3333 24.9999 15.781 24.9999 16.3333C24.9999 16.8856 24.5522 17.3333 23.9999 17.3333H12.4444C11.8921 17.3333 11.4444 16.8856 11.4444 16.3333Z",
16
+ d: "M7.44439 12.3333C7.44439 11.781 7.89211 11.3333 8.44439 11.3333H19.9999C20.5522 11.3333 20.9999 11.781 20.9999 12.3333C20.9999 12.8856 20.5522 13.3333 19.9999 13.3333H8.44439C7.89211 13.3333 7.44439 12.8856 7.44439 12.3333Z",
17
17
  fill: "currentColor"
18
18
  }
19
19
  ), /* @__PURE__ */ React.createElement(
@@ -21,25 +21,25 @@ var SvgNumberedList = () => /* @__PURE__ */ React.createElement("svg", { viewBox
21
21
  {
22
22
  fillRule: "evenodd",
23
23
  clipRule: "evenodd",
24
- d: "M11.4444 21.6667C11.4444 21.1144 11.8921 20.6667 12.4444 20.6667H23.9999C24.5522 20.6667 24.9999 21.1144 24.9999 21.6667C24.9999 22.219 24.5522 22.6667 23.9999 22.6667H12.4444C11.8921 22.6667 11.4444 22.219 11.4444 21.6667Z",
24
+ d: "M7.44439 17.6667C7.44439 17.1144 7.89211 16.6667 8.44439 16.6667H19.9999C20.5522 16.6667 20.9999 17.1144 20.9999 17.6667C20.9999 18.219 20.5522 18.6667 19.9999 18.6667H8.44439C7.89211 18.6667 7.44439 18.219 7.44439 17.6667Z",
25
25
  fill: "currentColor"
26
26
  }
27
27
  ), /* @__PURE__ */ React.createElement(
28
28
  "path",
29
29
  {
30
- d: "M8.8852 13H8.1002V10.65H7.3052V10.12C7.8252 10.11 8.1452 9.82 8.2102 9.455H8.8852V13Z",
30
+ d: "M4.88495 9H4.09995V6.65H3.30495V6.12C3.82495 6.11 4.14495 5.82 4.20995 5.455H4.88495V9Z",
31
31
  fill: "currentColor"
32
32
  }
33
33
  ), /* @__PURE__ */ React.createElement(
34
34
  "path",
35
35
  {
36
- d: "M8.015 15.835L7.265 15.815C7.25 15.76 7.24 15.65 7.24 15.555C7.24 14.93 7.725 14.38 8.525 14.38C9.305 14.38 9.8 14.91 9.8 15.54C9.8 15.99 9.58 16.37 9.115 16.635L8.415 17.035C8.28 17.115 8.18 17.215 8.15 17.335H9.79V18H7.205C7.21 17.36 7.385 16.83 8.025 16.465L8.6 16.135C8.895 15.965 9.01 15.805 9.01 15.555C9.01 15.29 8.805 15.085 8.525 15.085C8.2 15.085 7.99 15.31 7.99 15.64C7.99 15.695 7.995 15.77 8.015 15.835Z",
36
+ d: "M4.015 11.835L3.265 11.815C3.25 11.76 3.24 11.65 3.24 11.555C3.24 10.93 3.725 10.38 4.525 10.38C5.305 10.38 5.8 10.91 5.8 11.54C5.8 11.99 5.58 12.37 5.115 12.635L4.415 13.035C4.28 13.115 4.18 13.215 4.15 13.335H5.79V14H3.205C3.21 13.36 3.385 12.83 4.025 12.465L4.6 12.135C4.895 11.965 5.01 11.805 5.01 11.555C5.01 11.29 4.805 11.085 4.525 11.085C4.2 11.085 3.99 11.31 3.99 11.64C3.99 11.695 3.995 11.77 4.015 11.835Z",
37
37
  fill: "currentColor"
38
38
  }
39
39
  ), /* @__PURE__ */ React.createElement(
40
40
  "path",
41
41
  {
42
- d: "M8.205 21.7L7.865 21.16L8.755 20.37H7.28V19.705H9.735V20.345L8.88 21.085C9.39 21.11 9.84 21.505 9.84 22.155C9.84 22.78 9.335 23.325 8.505 23.325C7.71 23.325 7.22 22.8 7.17 22.21L7.92 22.055C7.935 22.4 8.165 22.65 8.5 22.65C8.85 22.65 9.045 22.405 9.045 22.135C9.045 21.785 8.795 21.625 8.515 21.625C8.41 21.625 8.28 21.655 8.205 21.7Z",
42
+ d: "M4.205 17.7L3.865 17.16L4.755 16.37H3.28V15.705H5.735V16.345L4.88 17.085C5.39 17.11 5.84 17.505 5.84 18.155C5.84 18.78 5.335 19.325 4.505 19.325C3.71 19.325 3.22 18.8 3.17 18.21L3.92 18.055C3.935 18.4 4.165 18.65 4.5 18.65C4.85 18.65 5.045 18.405 5.045 18.135C5.045 17.785 4.795 17.625 4.515 17.625C4.41 17.625 4.28 17.655 4.205 17.7Z",
43
43
  fill: "currentColor"
44
44
  }
45
45
  ));
package/dist/index.js CHANGED
@@ -3541,7 +3541,8 @@ var ModalCard = (_a) => {
3541
3541
  maxHeight = "70vh",
3542
3542
  placement = "center",
3543
3543
  ariaLabel,
3544
- ref
3544
+ ref,
3545
+ removeClose
3545
3546
  } = _b, props = __objRest(_b, [
3546
3547
  "children",
3547
3548
  "onCloseClick",
@@ -3550,13 +3551,16 @@ var ModalCard = (_a) => {
3550
3551
  "maxHeight",
3551
3552
  "placement",
3552
3553
  "ariaLabel",
3553
- "ref"
3554
+ "ref",
3555
+ "removeClose"
3554
3556
  ]);
3555
3557
  useEffect3(() => {
3556
3558
  const keyListener = (e) => {
3557
3559
  if (e.key === "Escape") {
3558
3560
  e.preventDefault();
3559
- onCloseClick(e);
3561
+ if (!removeClose) {
3562
+ onCloseClick(e);
3563
+ }
3560
3564
  }
3561
3565
  };
3562
3566
  window.addEventListener("keydown", keyListener);
@@ -3585,7 +3589,7 @@ var ModalCard = (_a) => {
3585
3589
  ref,
3586
3590
  "aria-label": ariaLabel
3587
3591
  }, props),
3588
- onCloseClick && /* @__PURE__ */ React25.createElement(CloseIconSection, null, /* @__PURE__ */ React25.createElement(
3592
+ !removeClose && onCloseClick && /* @__PURE__ */ React25.createElement(CloseIconSection, null, /* @__PURE__ */ React25.createElement(
3589
3593
  icon_button_default,
3590
3594
  {
3591
3595
  altText: "Close",
@@ -3593,7 +3597,13 @@ var ModalCard = (_a) => {
3593
3597
  onClick: onCloseClick
3594
3598
  }
3595
3599
  )),
3596
- /* @__PURE__ */ React25.createElement(ModalCardChildrenSection, null, children)
3600
+ /* @__PURE__ */ React25.createElement(
3601
+ ModalCardChildrenSection,
3602
+ {
3603
+ tabIndex: removeClose ? 0 : -1
3604
+ },
3605
+ children
3606
+ )
3597
3607
  )
3598
3608
  );
3599
3609
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@loomhq/lens",
3
- "version": "11.5.0",
3
+ "version": "11.6.0",
4
4
  "engines": {
5
5
  "pnpm": "^8.9.2"
6
6
  },