@algolia/satellite 1.0.0-beta.181 → 1.0.0-beta.182

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/cjs/Modal/Modal.d.ts +4 -3
  2. package/cjs/Modal/Modal.js +35 -50
  3. package/esm/Modal/Modal.d.ts +4 -3
  4. package/esm/Modal/Modal.js +36 -51
  5. package/package.json +1 -1
package/cjs/Modal/Modal.d.ts CHANGED
@@ -42,10 +42,11 @@ export declare type ModalProps = XOR<ModalControlledProps, ModalUncontrolledProp
42
42
  locale?: ModalLocale;
43
43
  /**
44
44
  * The element that should receive focus once the `Modal` is opened.
45
- * If `undefined` or `null` is passed, the first focusable element will be focused.
46
- * If `false`, no element will be focused.
45
+ * If unspecified, the first focusable element will be focused.
46
+ * If an element is passed, it will be focused.
47
+ * If 'skip' is passed, the close button will be focused if present, with a fallback on the dialog element itself.
47
48
  */
48
- autoFocusOnOpenElement?: HTMLElement | null | false;
49
+ autoFocusOnOpenElement?: HTMLElement | null | "skipContent";
49
50
  children: ReactNode;
50
51
  };
51
52
  declare type ModalSubComponents = {
package/cjs/Modal/Modal.js CHANGED
@@ -64,6 +64,8 @@ var Modal = exports.Modal = function Modal(_ref) {
64
64
  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_MODAL_LOCALE), contextLocale), propsLocale);
65
65
  var createPortal = (0, _Satellite.useCreatePortal)();
66
66
  var isControlled = triggerButton === undefined;
67
+ var closeButtonRef = (0, _react.useRef)(null);
68
+ var dialogContentRef = (0, _react.useRef)(null);
67
69
  if (typeof document === "undefined") return /*#__PURE__*/(0, _jsxRuntime.jsx)(_react.Fragment, {});
68
70
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Dialog.Root, {
69
71
  open: isControlled ? open : undefined,
@@ -79,13 +81,15 @@ var Modal = exports.Modal = function Modal(_ref) {
79
81
  }), createPortal( /*#__PURE__*/(0, _jsxRuntime.jsx)(Dialog.Overlay, {
80
82
  className: (0, _clsx["default"])(animate && !_prefersReducedMotion.prefersReducedMotion && (0, _satellitePrefixer["default"])(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["modal-animated"]))), (0, _satellitePrefixer["default"])(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["modal-overlay bg-grey-900/30 z-modalOverlay inset-0 fixed w-full h-full flex items-start justify-center overflow-x-hidden overflow-y-auto px-4 py-10"])))),
81
83
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Dialog.Content, {
84
+ ref: dialogContentRef,
82
85
  className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["modal-content"]))), SIZE_CLASSNAMES[size], centerY && (0, _satellitePrefixer["default"])(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])(["flex m-auto"])))),
83
86
  onOpenAutoFocus: function onOpenAutoFocus(e) {
84
- if (autoFocusOnOpenElement === false) {
87
+ var _closeButtonRef$curre;
88
+ if (!autoFocusOnOpenElement) return;
89
+ var elementToFocus = autoFocusOnOpenElement === "skipContent" ? (_closeButtonRef$curre = closeButtonRef.current) !== null && _closeButtonRef$curre !== void 0 ? _closeButtonRef$curre : dialogContentRef.current : autoFocusOnOpenElement;
90
+ if (elementToFocus) {
85
91
  e.preventDefault();
86
- } else if (autoFocusOnOpenElement instanceof HTMLElement) {
87
- e.preventDefault();
88
- autoFocusOnOpenElement.focus();
92
+ elementToFocus.focus();
89
93
  }
90
94
  },
91
95
  onCloseAutoFocus: function onCloseAutoFocus(e) {
@@ -94,56 +98,37 @@ var Modal = exports.Modal = function Modal(_ref) {
94
98
  autoFocusOnCloseElement.focus();
95
99
  }
96
100
  },
97
- onEscapeKeyDown: function onEscapeKeyDown(e) {
98
- if (isControlled) {
99
- e.preventDefault();
100
- onDismiss === null || onDismiss === void 0 || onDismiss();
101
- }
102
- },
103
- onInteractOutside: function onInteractOutside(e) {
104
- if (isControlled) {
105
- e.preventDefault();
106
- onDismiss === null || onDismiss === void 0 || onDismiss();
107
- }
108
- },
109
101
  "aria-label": !title ? locale.modalTitle : undefined,
110
102
  "aria-describedby": undefined,
111
103
  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
112
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
113
- className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["modal-container"]))),
114
- children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.Card, {
115
- as: "div",
116
- elevation: "500",
117
- className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["relative"]))), className),
118
- fullBleed: true,
119
- children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
120
- className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["min-h-14 flex items-center justify-between space-x-2"]))), title ? (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["border-b border-grey-100 pl-8 pr-16"]))) : (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["justify-end px-8"]))), !title && hideCloseIcon && (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
121
- children: !!title && /*#__PURE__*/(0, _jsxRuntime.jsx)(Dialog.Title, {
122
- className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["flex-1 display-heading truncate"]))),
123
- children: title
124
- })
125
- }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
126
- className: (0, _clsx["default"])(!fullBleed && (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["p-10"])))),
127
- children: children
128
- }), !hideCloseIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
129
- className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["-mr-2 absolute top-3 right-8"]))),
130
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Dialog.Close, {
131
- asChild: true,
132
- children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
133
- icon: _Icons.XIcon,
134
- title: locale.dismissText,
135
- variant: "subtle",
136
- showTooltip: false,
137
- onClick: function onClick(e) {
138
- if (isControlled) {
139
- e.preventDefault();
140
- onDismiss === null || onDismiss === void 0 || onDismiss();
141
- }
142
- }
143
- })
104
+ className: (0, _satellitePrefixer["default"])(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2["default"])(["modal-container"]))),
105
+ children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_Card.Card, {
106
+ as: "div",
107
+ elevation: "500",
108
+ className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["relative"]))), className),
109
+ fullBleed: true,
110
+ children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("header", {
111
+ className: (0, _clsx["default"])((0, _satellitePrefixer["default"])(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["min-h-14 flex items-center justify-between space-x-2"]))), title ? (0, _satellitePrefixer["default"])(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2["default"])(["border-b border-grey-100 pl-8 pr-16"]))) : (0, _satellitePrefixer["default"])(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2["default"])(["justify-end px-8"]))), !title && hideCloseIcon && (0, _satellitePrefixer["default"])(_templateObject12 || (_templateObject12 = (0, _taggedTemplateLiteral2["default"])(["hidden"])))),
112
+ children: !!title && /*#__PURE__*/(0, _jsxRuntime.jsx)(Dialog.Title, {
113
+ className: (0, _satellitePrefixer["default"])(_templateObject13 || (_templateObject13 = (0, _taggedTemplateLiteral2["default"])(["flex-1 display-heading truncate"]))),
114
+ children: title
115
+ })
116
+ }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
117
+ className: (0, _clsx["default"])(!fullBleed && (0, _satellitePrefixer["default"])(_templateObject14 || (_templateObject14 = (0, _taggedTemplateLiteral2["default"])(["p-10"])))),
118
+ children: children
119
+ }), !hideCloseIcon && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
120
+ className: (0, _satellitePrefixer["default"])(_templateObject15 || (_templateObject15 = (0, _taggedTemplateLiteral2["default"])(["-mr-2 absolute top-3 right-8"]))),
121
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Dialog.Close, {
122
+ ref: closeButtonRef,
123
+ asChild: true,
124
+ children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.IconButton, {
125
+ icon: _Icons.XIcon,
126
+ title: locale.dismissText,
127
+ variant: "subtle",
128
+ showTooltip: false
144
129
  })
145
- })]
146
- })
130
+ })
131
+ })]
147
132
  })
148
133
  })
149
134
  })
package/esm/Modal/Modal.d.ts CHANGED
@@ -42,10 +42,11 @@ export declare type ModalProps = XOR<ModalControlledProps, ModalUncontrolledProp
42
42
  locale?: ModalLocale;
43
43
  /**
44
44
  * The element that should receive focus once the `Modal` is opened.
45
- * If `undefined` or `null` is passed, the first focusable element will be focused.
46
- * If `false`, no element will be focused.
45
+ * If unspecified, the first focusable element will be focused.
46
+ * If an element is passed, it will be focused.
47
+ * If 'skip' is passed, the close button will be focused if present, with a fallback on the dialog element itself.
47
48
  */
48
- autoFocusOnOpenElement?: HTMLElement | null | false;
49
+ autoFocusOnOpenElement?: HTMLElement | null | "skipContent";
49
50
  children: ReactNode;
50
51
  };
51
52
  declare type ModalSubComponents = {
package/esm/Modal/Modal.js CHANGED
@@ -5,7 +5,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
5
5
  function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
6
6
  import * as Dialog from "@radix-ui/react-dialog";
7
7
  import cx from "clsx";
8
- import { Fragment } from "react";
8
+ import { Fragment, useRef } from "react";
9
9
  import { IconButton } from "../Button";
10
10
  import { Card } from "../Card";
11
11
  import { XIcon } from "../Icons";
@@ -55,6 +55,8 @@ export var Modal = function Modal(_ref) {
55
55
  var locale = _objectSpread(_objectSpread(_objectSpread({}, DEFAULT_MODAL_LOCALE), contextLocale), propsLocale);
56
56
  var createPortal = useCreatePortal();
57
57
  var isControlled = triggerButton === undefined;
58
+ var closeButtonRef = useRef(null);
59
+ var dialogContentRef = useRef(null);
58
60
  if (typeof document === "undefined") return /*#__PURE__*/_jsx(Fragment, {});
59
61
  return /*#__PURE__*/_jsxs(Dialog.Root, {
60
62
  open: isControlled ? open : undefined,
@@ -70,13 +72,15 @@ export var Modal = function Modal(_ref) {
70
72
  }), createPortal( /*#__PURE__*/_jsx(Dialog.Overlay, {
71
73
  className: cx(animate && !prefersReducedMotion && stl(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["modal-animated"]))), stl(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["modal-overlay bg-grey-900/30 z-modalOverlay inset-0 fixed w-full h-full flex items-start justify-center overflow-x-hidden overflow-y-auto px-4 py-10"])))),
72
74
  children: /*#__PURE__*/_jsx(Dialog.Content, {
75
+ ref: dialogContentRef,
73
76
  className: cx(stl(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["modal-content"]))), SIZE_CLASSNAMES[size], centerY && stl(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["flex m-auto"])))),
74
77
  onOpenAutoFocus: function onOpenAutoFocus(e) {
75
- if (autoFocusOnOpenElement === false) {
78
+ var _closeButtonRef$curre;
79
+ if (!autoFocusOnOpenElement) return;
80
+ var elementToFocus = autoFocusOnOpenElement === "skipContent" ? (_closeButtonRef$curre = closeButtonRef.current) !== null && _closeButtonRef$curre !== void 0 ? _closeButtonRef$curre : dialogContentRef.current : autoFocusOnOpenElement;
81
+ if (elementToFocus) {
76
82
  e.preventDefault();
77
- } else if (autoFocusOnOpenElement instanceof HTMLElement) {
78
- e.preventDefault();
79
- autoFocusOnOpenElement.focus();
83
+ elementToFocus.focus();
80
84
  }
81
85
  },
82
86
  onCloseAutoFocus: function onCloseAutoFocus(e) {
@@ -85,56 +89,37 @@ export var Modal = function Modal(_ref) {
85
89
  autoFocusOnCloseElement.focus();
86
90
  }
87
91
  },
88
- onEscapeKeyDown: function onEscapeKeyDown(e) {
89
- if (isControlled) {
90
- e.preventDefault();
91
- onDismiss === null || onDismiss === void 0 || onDismiss();
92
- }
93
- },
94
- onInteractOutside: function onInteractOutside(e) {
95
- if (isControlled) {
96
- e.preventDefault();
97
- onDismiss === null || onDismiss === void 0 || onDismiss();
98
- }
99
- },
100
92
  "aria-label": !title ? locale.modalTitle : undefined,
101
93
  "aria-describedby": undefined,
102
94
  children: /*#__PURE__*/_jsx("div", {
103
- children: /*#__PURE__*/_jsx("div", {
104
- className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["modal-container"]))),
105
- children: /*#__PURE__*/_jsxs(Card, {
106
- as: "div",
107
- elevation: "500",
108
- className: cx(stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["relative"]))), className),
109
- fullBleed: true,
110
- children: [/*#__PURE__*/_jsx("header", {
111
- className: cx(stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["min-h-14 flex items-center justify-between space-x-2"]))), title ? stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["border-b border-grey-100 pl-8 pr-16"]))) : stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["justify-end px-8"]))), !title && hideCloseIcon && stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["hidden"])))),
112
- children: !!title && /*#__PURE__*/_jsx(Dialog.Title, {
113
- className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["flex-1 display-heading truncate"]))),
114
- children: title
115
- })
116
- }), /*#__PURE__*/_jsx("div", {
117
- className: cx(!fullBleed && stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["p-10"])))),
118
- children: children
119
- }), !hideCloseIcon && /*#__PURE__*/_jsx("div", {
120
- className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["-mr-2 absolute top-3 right-8"]))),
121
- children: /*#__PURE__*/_jsx(Dialog.Close, {
122
- asChild: true,
123
- children: /*#__PURE__*/_jsx(IconButton, {
124
- icon: XIcon,
125
- title: locale.dismissText,
126
- variant: "subtle",
127
- showTooltip: false,
128
- onClick: function onClick(e) {
129
- if (isControlled) {
130
- e.preventDefault();
131
- onDismiss === null || onDismiss === void 0 || onDismiss();
132
- }
133
- }
134
- })
95
+ className: stl(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["modal-container"]))),
96
+ children: /*#__PURE__*/_jsxs(Card, {
97
+ as: "div",
98
+ elevation: "500",
99
+ className: cx(stl(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["relative"]))), className),
100
+ fullBleed: true,
101
+ children: [/*#__PURE__*/_jsx("header", {
102
+ className: cx(stl(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["min-h-14 flex items-center justify-between space-x-2"]))), title ? stl(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["border-b border-grey-100 pl-8 pr-16"]))) : stl(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["justify-end px-8"]))), !title && hideCloseIcon && stl(_templateObject12 || (_templateObject12 = _taggedTemplateLiteral(["hidden"])))),
103
+ children: !!title && /*#__PURE__*/_jsx(Dialog.Title, {
104
+ className: stl(_templateObject13 || (_templateObject13 = _taggedTemplateLiteral(["flex-1 display-heading truncate"]))),
105
+ children: title
106
+ })
107
+ }), /*#__PURE__*/_jsx("div", {
108
+ className: cx(!fullBleed && stl(_templateObject14 || (_templateObject14 = _taggedTemplateLiteral(["p-10"])))),
109
+ children: children
110
+ }), !hideCloseIcon && /*#__PURE__*/_jsx("div", {
111
+ className: stl(_templateObject15 || (_templateObject15 = _taggedTemplateLiteral(["-mr-2 absolute top-3 right-8"]))),
112
+ children: /*#__PURE__*/_jsx(Dialog.Close, {
113
+ ref: closeButtonRef,
114
+ asChild: true,
115
+ children: /*#__PURE__*/_jsx(IconButton, {
116
+ icon: XIcon,
117
+ title: locale.dismissText,
118
+ variant: "subtle",
119
+ showTooltip: false
135
120
  })
136
- })]
137
- })
121
+ })
122
+ })]
138
123
  })
139
124
  })
140
125
  })
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@algolia/satellite",
3
- "version": "1.0.0-beta.181",
3
+ "version": "1.0.0-beta.182",
4
4
  "description": "Algolia design system React components",
5
5
  "sideEffects": false,
6
6
  "scripts": {