@doist/reactist 20.3.0 → 21.0.0

package/dist/reactist.cjs.development.js

@@ -1680,6 +1680,49 @@ const CheckboxField = /*#__PURE__*/React.forwardRef(function CheckboxField(_ref,
   }, /*#__PURE__*/React.createElement(Text, null, label)) : null);
 });
 
+function PasswordVisibleIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fill: "none",
+    fillRule: "evenodd",
+    stroke: "gray"
+  }, /*#__PURE__*/React.createElement("path", {
+    d: "M21.358 12C17.825 7.65 14.692 5.5 12 5.5c-2.624 0-5.67 2.043-9.097 6.181a.5.5 0 0 0 0 .638C6.331 16.457 9.376 18.5 12 18.5c2.692 0 5.825-2.15 9.358-6.5z"
+  }), /*#__PURE__*/React.createElement("circle", {
+    cx: "12",
+    cy: "12",
+    r: "3.5"
+  })));
+}
+
+function PasswordHiddenIcon(props) {
+  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24"
+  }, props), /*#__PURE__*/React.createElement("g", {
+    fill: "gray",
+    fillRule: "evenodd",
+    transform: "translate(2 4)"
+  }, /*#__PURE__*/React.createElement("path", {
+    fillRule: "nonzero",
+    d: "M13.047 2.888C11.962 2.294 10.944 2 10 2 7.56 2 4.63 3.966 1.288 8c1.133 1.368 2.218 2.497 3.253 3.394l-.708.708c-1.068-.93-2.173-2.085-3.315-3.464a1 1 0 0 1 0-1.276C4.031 3.121 7.192 1 10 1c1.196 0 2.456.385 3.78 1.154l-.733.734zm-6.02 10.263C8.084 13.72 9.076 14 10 14c2.443 0 5.373-1.969 8.712-6-1.11-1.34-2.176-2.453-3.193-3.341l.708-.709C17.437 5.013 18.695 6.363 20 8c-3.721 4.667-7.054 7-10 7-1.175 0-2.411-.371-3.709-1.113l.735-.736z"
+  }), /*#__PURE__*/React.createElement("path", {
+    fillRule: "nonzero",
+    d: "M8.478 11.7l.79-.79a3 3 0 0 0 3.642-3.642l.79-.79A4 4 0 0 1 8.477 11.7zM6.334 9.602a4 4 0 0 1 5.268-5.268l-.78.78A3.002 3.002 0 0 0 7.113 8.82l-.78.78z"
+  }), /*#__PURE__*/React.createElement("rect", {
+    width: "21",
+    height: "1",
+    x: "-.722",
+    y: "7.778",
+    rx: ".5",
+    transform: "rotate(-45 9.778 8.278)"
+  })));
+}
+
 var modules_540a88ff = {"container":"_2e189908","auxiliaryLabel":"_83051e0a","bordered":"fd20ef50","error":"d1a17d92","primaryLabel":"_75e0afa0","secondaryLabel":"d04a867d","messageIcon":"_77b2107e"};
 
 function FieldHint(props) {
@@ -1782,79 +1825,35 @@ function BaseField({
   }, hint) : null);
 }
 
-function PasswordVisibleIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24"
-  }, props), /*#__PURE__*/React.createElement("g", {
-    fill: "none",
-    fillRule: "evenodd",
-    stroke: "gray"
-  }, /*#__PURE__*/React.createElement("path", {
-    d: "M21.358 12C17.825 7.65 14.692 5.5 12 5.5c-2.624 0-5.67 2.043-9.097 6.181a.5.5 0 0 0 0 .638C6.331 16.457 9.376 18.5 12 18.5c2.692 0 5.825-2.15 9.358-6.5z"
-  }), /*#__PURE__*/React.createElement("circle", {
-    cx: "12",
-    cy: "12",
-    r: "3.5"
-  })));
-}
-
-function PasswordHiddenIcon(props) {
-  return /*#__PURE__*/React.createElement("svg", _objectSpread2({
-    xmlns: "http://www.w3.org/2000/svg",
-    width: "24",
-    height: "24"
-  }, props), /*#__PURE__*/React.createElement("g", {
-    fill: "gray",
-    fillRule: "evenodd",
-    transform: "translate(2 4)"
-  }, /*#__PURE__*/React.createElement("path", {
-    fillRule: "nonzero",
-    d: "M13.047 2.888C11.962 2.294 10.944 2 10 2 7.56 2 4.63 3.966 1.288 8c1.133 1.368 2.218 2.497 3.253 3.394l-.708.708c-1.068-.93-2.173-2.085-3.315-3.464a1 1 0 0 1 0-1.276C4.031 3.121 7.192 1 10 1c1.196 0 2.456.385 3.78 1.154l-.733.734zm-6.02 10.263C8.084 13.72 9.076 14 10 14c2.443 0 5.373-1.969 8.712-6-1.11-1.34-2.176-2.453-3.193-3.341l.708-.709C17.437 5.013 18.695 6.363 20 8c-3.721 4.667-7.054 7-10 7-1.175 0-2.411-.371-3.709-1.113l.735-.736z"
-  }), /*#__PURE__*/React.createElement("path", {
-    fillRule: "nonzero",
-    d: "M8.478 11.7l.79-.79a3 3 0 0 0 3.642-3.642l.79-.79A4 4 0 0 1 8.477 11.7zM6.334 9.602a4 4 0 0 1 5.268-5.268l-.78.78A3.002 3.002 0 0 0 7.113 8.82l-.78.78z"
-  }), /*#__PURE__*/React.createElement("rect", {
-    width: "21",
-    height: "1",
-    x: "-.722",
-    y: "7.778",
-    rx: ".5",
-    transform: "rotate(-45 9.778 8.278)"
-  })));
-}
-
-var modules_3f03ead6 = {"inputWrapper":"_66b448b3"};
-
-var modules_aaf25250 = {"inputWrapper":"fb09cd05","bordered":"f65f40dd","error":"_29118bf0","startIcon":"a40eb111"};
+var modules_aaf25250 = {"inputWrapper":"_6c84b26d","bordered":"_8522aec5","error":"d4d62845","slot":"_9c20ca38"};
 
-const _excluded$k = ["variant", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "togglePasswordLabel", "hidden", "aria-describedby"];
-const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref, ref) {
+const _excluded$k = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "type", "maxWidth", "hidden", "aria-describedby", "startSlot", "endSlot"];
+const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
   let {
     variant = 'default',
+    id,
     label,
     secondaryLabel,
     auxiliaryLabel,
     hint,
     message,
     tone,
+    type = 'text',
     maxWidth,
-    togglePasswordLabel = 'Toggle password visibility',
     hidden,
-    'aria-describedby': ariaDescribedBy
+    'aria-describedby': ariaDescribedBy,
+    startSlot,
+    endSlot
   } = _ref,
       props = _objectWithoutProperties(_ref, _excluded$k);
 
-  const id = useId(props.id);
   const internalRef = React.useRef(null);
-  const inputRef = ariakitReactUtils.useForkRef(internalRef, ref);
-  const [isPasswordVisible, setPasswordVisible] = React.useState(false);
+  const combinedRef = useCallbackRef.useMergeRefs([ref, internalRef]);
 
-  function togglePasswordVisibility() {
+  function handleClick(event) {
     var _internalRef$current;
 
-    setPasswordVisible(v => !v);
+    if (event.currentTarget === combinedRef.current) return;
     (_internalRef$current = internalRef.current) == null ? void 0 : _internalRef$current.focus();
   }
 
@@ -1873,27 +1872,51 @@ const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref,
   }, extraProps => /*#__PURE__*/React.createElement(Box, {
     display: "flex",
     alignItems: "center",
-    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'
-  })), /*#__PURE__*/React.createElement(Tooltip, {
-    content: togglePasswordLabel
-  }, /*#__PURE__*/React.createElement("button", {
-    type: "button",
-    onClick: togglePasswordVisibility,
-    "aria-label": togglePasswordLabel,
-    tabIndex: -1
-  }, isPasswordVisible ? /*#__PURE__*/React.createElement(PasswordVisibleIcon, {
-    "aria-hidden": true
-  }) : /*#__PURE__*/React.createElement(PasswordHiddenIcon, {
-    "aria-hidden": true
-  })))));
+    className: [modules_aaf25250.inputWrapper, tone === 'error' ? modules_aaf25250.error : null, variant === 'bordered' ? modules_aaf25250.bordered : null],
+    onClick: handleClick
+  }, startSlot ? /*#__PURE__*/React.createElement(Box, {
+    className: modules_aaf25250.slot,
+    display: "flex",
+    marginRight: variant === 'bordered' ? 'xsmall' : '-xsmall',
+    marginLeft: variant === 'bordered' ? '-xsmall' : 'xsmall'
+  }, startSlot) : null, /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
+    type: type,
+    ref: combinedRef
+  })), endSlot ? /*#__PURE__*/React.createElement(Box, {
+    className: modules_aaf25250.slot,
+    display: "flex",
+    marginRight: variant === 'bordered' ? '-xsmall' : 'xsmall',
+    marginLeft: variant === 'bordered' ? 'xsmall' : '-xsmall'
+  }, endSlot) : null));
+});
+
+const _excluded$l = ["togglePasswordLabel"];
+const PasswordField = /*#__PURE__*/React.forwardRef(function PasswordField(_ref, ref) {
+  let {
+    togglePasswordLabel = 'Toggle password visibility'
+  } = _ref,
+      props = _objectWithoutProperties(_ref, _excluded$l);
+
+  const [isPasswordVisible, setPasswordVisible] = React.useState(false);
+  const Icon = isPasswordVisible ? PasswordVisibleIcon : PasswordHiddenIcon;
+  return /*#__PURE__*/React.createElement(TextField, _objectSpread2(_objectSpread2({}, props), {}, {
+    ref: ref,
+    // @ts-expect-error TextField does not support type="password", so we override the type check here
+    type: isPasswordVisible ? 'text' : 'password',
+    endSlot: /*#__PURE__*/React.createElement(Button, {
+      variant: "quaternary",
+      icon: /*#__PURE__*/React.createElement(Icon, {
+        "aria-hidden": true
+      }),
+      "aria-label": togglePasswordLabel,
+      onClick: () => setPasswordVisible(v => !v)
+    })
+  }));
 });
 
 var modules_1fa9b208 = {"selectWrapper":"a804edbf","bordered":"_50a3655f","error":"a6d38abf"};
 
-const _excluded$l = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "children", "hidden", "aria-describedby"];
+const _excluded$m = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "children", "hidden", "aria-describedby"];
 const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref) {
   let {
     variant = 'default',
@@ -1909,7 +1932,7 @@ const SelectField = /*#__PURE__*/React.forwardRef(function SelectField(_ref, ref
     hidden,
     'aria-describedby': ariaDescribedBy
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$l);
+      props = _objectWithoutProperties(_ref, _excluded$m);
 
   return /*#__PURE__*/React.createElement(BaseField, {
     variant: variant,
@@ -1947,7 +1970,7 @@ function SelectChevron(props) {
 
 var modules_8e05f7c9 = {"container":"bae487be","disabled":"_408d32a0","checked":"_99b0ead7","toggle":"_5af09fb5","label":"a66e1846","handle":"_0dcf70ec","keyFocused":"_1f5e7fd4"};
 
-const _excluded$m = ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "aria-label", "aria-labelledby", "onChange"];
+const _excluded$n = ["label", "hint", "disabled", "hidden", "defaultChecked", "id", "aria-describedby", "aria-label", "aria-labelledby", "onChange"];
 const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref) {
   var _ref2, _props$checked, _props$checked2;
 
@@ -1963,7 +1986,7 @@ const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref
     'aria-labelledby': originalAriaLabelledby,
     onChange
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$m);
+      props = _objectWithoutProperties(_ref, _excluded$n);
 
   const id = useId(originalId);
   const hintId = useId();
@@ -2023,7 +2046,7 @@ const SwitchField = /*#__PURE__*/React.forwardRef(function SwitchField(_ref, ref
 
 var modules_2728c236 = {"textAreaContainer":"_21dbfa84","innerContainer":"_43588660","bordered":"f081b428","error":"a862f0e5","autoExpand":"_46360b15"};
 
-const _excluded$n = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "hidden", "aria-describedby", "rows", "autoExpand"];
+const _excluded$o = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "maxWidth", "hidden", "aria-describedby", "rows", "autoExpand"];
 const TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
   let {
     variant = 'default',
@@ -2040,7 +2063,7 @@ const TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
     rows,
     autoExpand = false
   } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$n);
+      props = _objectWithoutProperties(_ref, _excluded$o);
 
   const containerRef = React.useRef(null);
   const internalRef = React.useRef(null);
@@ -2084,63 +2107,6 @@ const TextArea = /*#__PURE__*/React.forwardRef(function TextArea(_ref, ref) {
   }))));
 });
 
-const _excluded$o = ["variant", "id", "label", "secondaryLabel", "auxiliaryLabel", "hint", "message", "tone", "type", "maxWidth", "hidden", "aria-describedby", "startIcon"];
-const TextField = /*#__PURE__*/React.forwardRef(function TextField(_ref, ref) {
-  let {
-    variant = 'default',
-    id,
-    label,
-    secondaryLabel,
-    auxiliaryLabel,
-    hint,
-    message,
-    tone,
-    type = 'text',
-    maxWidth,
-    hidden,
-    'aria-describedby': ariaDescribedBy,
-    startIcon
-  } = _ref,
-      props = _objectWithoutProperties(_ref, _excluded$o);
-
-  const internalRef = React.useRef(null);
-  const combinedRef = useCallbackRef.useMergeRefs([ref, internalRef]);
-
-  function focusOnIconClick() {
-    var _internalRef$current;
-
-    (_internalRef$current = internalRef.current) == null ? void 0 : _internalRef$current.focus();
-  }
-
-  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_aaf25250.inputWrapper, tone === 'error' ? modules_aaf25250.error : null, variant === 'bordered' ? modules_aaf25250.bordered : null]
-  }, startIcon ? /*#__PURE__*/React.createElement(Box, {
-    display: "flex",
-    className: modules_aaf25250.startIcon,
-    onClick: focusOnIconClick,
-    marginRight: "-xsmall",
-    marginLeft: "small",
-    "aria-hidden": true
-  }, startIcon) : null, /*#__PURE__*/React.createElement("input", _objectSpread2(_objectSpread2(_objectSpread2({}, props), extraProps), {}, {
-    type: type,
-    ref: combinedRef
-  }))));
-});
-
 function getInitials(name) {
   var _initials;