@doist/reactist 12.0.2 → 12.1.0

package/README.md

@@ -151,3 +151,5 @@ npm --no-git-tag-version version <major|minor|patch>
 Once these changes have been pushed and merged, create a release.
 
 A GitHub Action will automatically perform all the necessary steps and will release the version number that's specified inside the `package.json`'s `version` field so make sure that the release tag reflects the version you want to publish.
+
+Finally, once the release has been created be sure to update both [todoist-web](https://github.com/Doist/todoist-web) and [twist-web](https://github.com/Doist/twist-web) to use the new version.

package/dist/reactist.cjs.development.js

@@ -886,7 +886,7 @@ const Heading = /*#__PURE__*/React.forwardRef(function Heading(_ref, ref) {
   }), children);
 });
 
-var modules_a9637dd3 = {"text":"_2282cb83","size-caption":"_087a8179","size-copy":"a4423c2a","size-subtitle":"_03365a63","weight-semibold":"_5213e4ab","weight-bold":"_3d58c8f2","tone-secondary":"_892a359a","tone-danger":"f9cb5d8a","tone-positive":"fcedb234","lineClampMultipleLines":"_765949c1","lineClamp-1":"c3e4800e","lineClamp-2":"b25b652b","lineClamp-3":"bb13d214","lineClamp-4":"_6db1928e","lineClamp-5":"e9944c1d"};
+var modules_a9637dd3 = {"text":"a83bd4e0","size-caption":"_266d6623","size-copy":"a8d37c6e","size-subtitle":"_39f4eb1f","weight-semibold":"_7be5c531","weight-bold":"e214ff2e","tone-secondary":"_6a3e5ade","tone-danger":"_8f5b5f2b","tone-positive":"_9ae47ae4","lineClampMultipleLines":"_969f18f7","lineClamp-1":"_2f303ac3","lineClamp-2":"d3e04245","lineClamp-3":"_33411704","lineClamp-4":"bfc32640","lineClamp-5":"f813c82f"};
 
 const _excluded$c = ["as", "size", "weight", "tone", "align", "children", "lineClamp", "exceptionallySetClassName"];
 const Text = /*#__PURE__*/polymorphicComponent(function Text(_ref, ref) {
@@ -1116,7 +1116,7 @@ function useId(providedId) {
   return ref.current;
 }
 
-var modules_540a88ff = {"container":"ed7d894c","primaryLabel":"_22213081","secondaryLabel":"be8637dd","auxiliaryLabel":"_72b46ad5"};
+var modules_540a88ff = {"container":"_2e189908","auxiliaryLabel":"_83051e0a","bordered":"fd20ef50","error":"d1a17d92","primaryLabel":"_75e0afa0","secondaryLabel":"d04a867d","messageIcon":"_77b2107e"};
 
 function FieldHint(props) {
   return /*#__PURE__*/React.createElement(Text, _objectSpread2({
@@ -1126,11 +1126,52 @@ function FieldHint(props) {
   }, props));
 }
 
+function MessageIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M8 2.5C4.96243 2.5 2.5 4.96243 2.5 8C2.5 11.0376 4.96243 13.5 8 13.5C11.0376 13.5 13.5 11.0376 13.5 8C13.5 4.96243 11.0376 2.5 8 2.5ZM1.5 8C1.5 4.41015 4.41015 1.5 8 1.5C11.5899 1.5 14.5 4.41015 14.5 8C14.5 11.5899 11.5899 14.5 8 14.5C4.41015 14.5 1.5 11.5899 1.5 8ZM8.66667 10.3333C8.66667 10.7015 8.36819 11 8 11C7.63181 11 7.33333 10.7015 7.33333 10.3333C7.33333 9.96514 7.63181 9.66667 8 9.66667C8.36819 9.66667 8.66667 9.96514 8.66667 10.3333ZM8.65766 5.65766C8.65766 5.29445 8.36322 5 8 5C7.99087 5.00008 7.98631 5.00013 7.98175 5.00025C7.97719 5.00038 7.97263 5.00059 7.96352 5.00101C7.60086 5.02116 7.3232 5.33149 7.34335 5.69415L7.50077 8.52774C7.53575 9.15742 8.46425 9.15742 8.49923 8.52774L8.65665 5.69415C8.65707 5.68503 8.65728 5.68047 8.65741 5.67591C8.65754 5.67135 8.65758 5.66679 8.65766 5.65766Z",
+    fill: "currentColor"
+  }));
+}
+
+function FieldMessage({
+  id,
+  children,
+  tone
+}) {
+  const textTone = tone === 'error' ? 'danger' : tone === 'success' ? 'positive' : 'normal';
+  return /*#__PURE__*/React.createElement(Text, {
+    as: "p",
+    tone: textTone,
+    size: "copy",
+    id: id
+  }, /*#__PURE__*/React.createElement(Box, {
+    as: "span",
+    marginRight: "xsmall",
+    display: "inlineFlex",
+    className: modules_540a88ff.messageIcon
+  }, tone === 'loading' ? /*#__PURE__*/React.createElement(Spinner, {
+    size: 16
+  }) : /*#__PURE__*/React.createElement(MessageIcon, {
+    "aria-hidden": true
+  })), children);
+}
+
 function BaseField({
+  variant = 'default',
   label,
   secondaryLabel,
   auxiliaryLabel,
   hint,
+  message,
+  tone = 'neutral',
   className,
   children,
   maxWidth,
@@ -1140,21 +1181,26 @@ function BaseField({
 }) {
   const id = useId(originalId);
   const hintId = useId();
-  const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : hint ? hintId : undefined;
+  const messageId = useId();
+  const ariaDescribedBy = originalAriaDescribedBy != null ? originalAriaDescribedBy : [message ? messageId : null, hintId].filter(Boolean).join(' ');
+  const childrenProps = {
+    id,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': tone === 'error' ? true : undefined
+  };
   return /*#__PURE__*/React.createElement(Stack, {
-    space: "small"
-  }, /*#__PURE__*/React.createElement(Box, {
-    className: [className, modules_540a88ff.container],
-    maxWidth: maxWidth,
+    space: "small",
     hidden: hidden
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: [className, modules_540a88ff.container, tone === 'error' ? modules_540a88ff.error : null, variant === 'bordered' ? modules_540a88ff.bordered : null],
+    maxWidth: maxWidth
   }, /*#__PURE__*/React.createElement(Box, {
     as: "span",
     display: "flex",
     justifyContent: "spaceBetween",
-    alignItems: "flexEnd",
-    paddingBottom: "small"
+    alignItems: "flexEnd"
   }, /*#__PURE__*/React.createElement(Text, {
-    size: "body",
+    size: variant === 'bordered' ? 'caption' : 'body',
     as: "label",
     htmlFor: id
   }, label ? /*#__PURE__*/React.createElement("span", {
@@ -1164,13 +1210,10 @@ function BaseField({
   }, "\u00A0(", secondaryLabel, ")") : null), auxiliaryLabel ? /*#__PURE__*/React.createElement(Box, {
     className: modules_540a88ff.auxiliaryLabel,
     paddingLeft: "small"
-  }, auxiliaryLabel) : null), children(ariaDescribedBy ? {
-    id,
-    'aria-describedby': ariaDescribedBy
-  } : {
-    id
-  })), hint ? /*#__PURE__*/React.createElement(FieldHint, {
-    hidden: hidden,
+  }, auxiliaryLabel) : null), children(childrenProps)), message ? /*#__PURE__*/React.createElement(FieldMessage, {
+    id: messageId,
+    tone: tone
+  }, message) : null, hint ? /*#__PURE__*/React.createElement(FieldHint, {
     id: hintId
   }, hint) : null);
 }
@@ -1218,17 +1261,20 @@ function PasswordHiddenIcon(props) {
   })));
 }
 
-var modules_3f03ead6 = {"inputWrapper":"_460d581b"};
+var modules_3f03ead6 = {"inputWrapper":"_66b448b3"};
 
-var modules_aaf25250 = {"inputWrapper":"dd9ffeab"};
+var modules_aaf25250 = {"inputWrapper":"a3ecd1c5","bordered":"_5e6ce80b","error":"_1d92e043"};
 
-const _excluded$h = ["label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "togglePasswordLabel", "hidden", "aria-describedby"];
+const _excluded$h = ["variant", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "togglePasswordLabel", "hidden", "aria-describedby"];
 const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref, ref) {
   let {
+    variant = 'default',
     label,
     secondaryLabel,
     auxiliaryLabel,
     hint,
+    message,
+    tone,
     maxWidth,
     togglePasswordLabel = 'Toggle password visibility',
     hidden,
@@ -1249,18 +1295,21 @@ const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref,
   }
 
   return /*#__PURE__*/React.createElement(BaseField, {
+    variant: variant,
     id: id,
     label: label,
     secondaryLabel: secondaryLabel,
     auxiliaryLabel: auxiliaryLabel,
     hint: hint,
+    message: message,
+    tone: tone,
     maxWidth: maxWidth,
     hidden: hidden,
     "aria-describedby": ariaDescribedBy
   }, extraProps => /*#__PURE__*/React.createElement(Box, {
     display: "flex",
     alignItems: "center",
-    className: [modules_3f03ead6.inputWrapper, modules_aaf25250.inputWrapper]
+    className: [modules_3f03ead6.inputWrapper, modules_aaf25250.inputWrapper, tone === 'error' ? modules_aaf25250.error : null, variant === 'bordered' ? modules_aaf25250.bordered : null]
   }, /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
     ref: inputRef,
     type: isPasswordVisible ? 'text' : 'password'
@@ -1278,9 +1327,9 @@ const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref,
   })))));
 });
 
-var modules_1fa9b208 = {"selectWrapper":"_828e09c5"};
+var modules_1fa9b208 = {"selectWrapper":"_07e75293","error":"f147bcea"};
 
-const _excluded$i = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth", "children", "hidden", "aria-describedby"];
+const _excluded$i = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "children", "hidden", "aria-describedby"];
 const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref) {
   let {
     id,
@@ -1288,6 +1337,8 @@ const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref
     secondaryLabel,
     auxiliaryLabel,
     hint,
+    message,
+    tone,
     maxWidth,
     children,
     hidden,
@@ -1301,11 +1352,13 @@ const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref
     secondaryLabel: secondaryLabel,
     auxiliaryLabel: auxiliaryLabel,
     hint: hint,
+    message: message,
+    tone: tone,
     maxWidth: maxWidth,
     hidden: hidden,
     "aria-describedby": ariaDescribedBy
   }, extraProps => /*#__PURE__*/React.createElement(Box, {
-    className: modules_1fa9b208.selectWrapper
+    className: [modules_1fa9b208.selectWrapper, tone === 'error' ? modules_1fa9b208.error : null]
   }, /*#__PURE__*/React.createElement("select", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
     ref: ref
   }), children), /*#__PURE__*/React.createElement(SelectChevron, {
@@ -1401,42 +1454,52 @@ const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref
   }, hint) : null);
 });
 
-var modules_2728c236 = {"container":"_5a579f96"};
+var modules_2728c236 = {"container":"d6ec37c5","bordered":"a60d6043","error":"bef49c61"};
 
-const _excluded$k = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "maxWidth"];
+const _excluded$k = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth"];
 
 function TextArea(_ref) {
   let {
+    variant = 'default',
     id,
     label,
     secondaryLabel,
     auxiliaryLabel,
     hint,
+    message,
+    tone,
     maxWidth
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$k);
 
   return /*#__PURE__*/React.createElement(BaseField, {
+    variant: variant,
     id: id,
     label: label,
     secondaryLabel: secondaryLabel,
     auxiliaryLabel: auxiliaryLabel,
     hint: hint,
-    className: modules_2728c236.container,
+    message: message,
+    tone: tone,
+    className: [modules_2728c236.container, tone === 'error' ? modules_2728c236.error : null, variant === 'bordered' ? modules_2728c236.bordered : null],
     maxWidth: maxWidth
   }, extraProps => /*#__PURE__*/React.createElement(Box, {
-    width: "full"
+    width: "full",
+    display: "flex"
   }, /*#__PURE__*/React.createElement("textarea", _objectSpread2(_objectSpread2({}, props), extraProps))));
 }
 
-const _excluded$l = ["id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "type", "maxWidth", "hidden", "aria-describedby"];
+const _excluded$l = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "type", "maxWidth", "hidden", "aria-describedby"];
 const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
   let {
+    variant = 'default',
     id,
     label,
     secondaryLabel,
     auxiliaryLabel,
     hint,
+    message,
+    tone,
     type = 'text',
     maxWidth,
     hidden,
@@ -1445,16 +1508,19 @@ const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
       props = _objectWithoutProperties(_ref, _excluded$l);
 
   return /*#__PURE__*/React.createElement(BaseField, {
+    variant: variant,
     id: id,
     label: label,
     secondaryLabel: secondaryLabel,
     auxiliaryLabel: auxiliaryLabel,
     hint: hint,
+    message: message,
+    tone: tone,
     maxWidth: maxWidth,
     hidden: hidden,
     "aria-describedby": ariaDescribedBy
   }, extraProps => /*#__PURE__*/React.createElement(Box, {
-    className: modules_aaf25250.inputWrapper
+    className: [modules_aaf25250.inputWrapper, tone === 'error' ? modules_aaf25250.error : null, variant === 'bordered' ? modules_aaf25250.bordered : null]
   }, /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
     type: type,
     ref: ref
@@ -3160,7 +3226,8 @@ const MenuContext = /*#__PURE__*/React.createContext( // Ariakit gives us no mea
 {});
 /**
  * Wrapper component to control a menu. It does not render anything, only providing the state
- * management for the menu components inside it.
+ * management for the menu components inside it. Note that if you are relying on the `[role='menu']`
+ * attribute to style the menu list, it is applied a `menubar` role instead in Safari.
  */
 
 function Menu(_ref) {
@@ -3173,7 +3240,7 @@ function Menu(_ref) {
   const state = Ariakit.useMenuState(_objectSpread2({
     focusLoop: true,
     gutter: 8,
-    shift: 8
+    shift: 4
   }, props));
   const handleItemSelect = React.useCallback(function handleItemSelect(value) {
     if (onItemSelect) onItemSelect(value);