@trackunit/react-form-components 0.0.369 → 0.0.372

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 (3) hide show
  1. package/index.cjs.js +6 -3
  2. package/index.esm.js +6 -3
  3. package/package.json +1 -1
package/index.cjs.js CHANGED
@@ -476,6 +476,7 @@ const cvaCheckboxContainer = cssClassVarianceUtilities.cvaMerge([
476
476
  "grid-cols-min-fr",
477
477
  "items-center",
478
478
  "gap-2",
479
+ "cursor-pointer",
479
480
  "group",
480
481
  ]);
481
482
  const cvaCheckboxInput = cssClassVarianceUtilities.cvaMerge(["absolute", "opacity-0", "m-0", "pointer-events-none", "hidden"]);
@@ -853,7 +854,10 @@ const OptionCard = React.forwardRef((_a, ref) => {
853
854
  *
854
855
  * NOTE: If shown with a label, please use the `PasswordField` component instead.
855
856
  */
856
- const PasswordInput = React.forwardRef((props, ref) => (jsxRuntime.jsx(BaseInput, Object.assign({ ref: ref }, props))));
857
+ const PasswordInput = React.forwardRef((props, ref) => {
858
+ const [showPassword, setShowPassword] = React.useState(false);
859
+ return (jsxRuntime.jsx(BaseInput, Object.assign({ ref: ref }, props, { actions: jsxRuntime.jsx("div", { className: cvaActionContainer(), children: jsxRuntime.jsx(reactComponents.IconButton, { className: cvaActionButton({ size: props.fieldSize }), icon: jsxRuntime.jsx(reactComponents.Icon, { name: showPassword ? "EyeSlash" : "Eye", size: "small" }), onClick: () => setShowPassword(prevState => !prevState), size: "small", variant: "secondary" }) }), type: showPassword ? "text" : "password" })));
860
+ });
857
861
 
858
862
  /**
859
863
  * Password fields enter a password or other confidential information. Characters are masked as they are typed.
@@ -866,11 +870,10 @@ const PasswordField = React.forwardRef((_a, ref) => {
866
870
  var { id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["id", "label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
867
871
  const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
868
872
  const htmlFor = id ? id : "passwordField-" + uuid.v4();
869
- const [showPassword, setShowPassword] = React.useState(false);
870
873
  const handleChange = React.useCallback((event) => {
871
874
  onChange === null || onChange === void 0 ? void 0 : onChange(event);
872
875
  }, [onChange]);
873
- return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(PasswordInput, Object.assign({}, rest, { actions: jsxRuntime.jsx(reactComponents.Icon, { className: "absolute top-0 bottom-0 right-2 h-full content-center", color: "neutral", name: showPassword ? "EyeSlash" : "Eye", onClick: () => setShowPassword(prevState => !prevState), size: "small" }), "aria-labelledby": htmlFor + "-label", className: className, dataTestId: dataTestId, disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, onChange: handleChange, ref: ref, type: showPassword ? "text" : "password", value: value })) }));
876
+ return (jsxRuntime.jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsxRuntime.jsx(PasswordInput, Object.assign({}, rest, { "aria-labelledby": htmlFor + "-label", className: className, dataTestId: dataTestId, disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, onChange: handleChange, ref: ref, value: value })) }));
874
877
  });
875
878
 
876
879
  /**
package/index.esm.js CHANGED
@@ -446,6 +446,7 @@ const cvaCheckboxContainer = cvaMerge([
446
446
  "grid-cols-min-fr",
447
447
  "items-center",
448
448
  "gap-2",
449
+ "cursor-pointer",
449
450
  "group",
450
451
  ]);
451
452
  const cvaCheckboxInput = cvaMerge(["absolute", "opacity-0", "m-0", "pointer-events-none", "hidden"]);
@@ -823,7 +824,10 @@ const OptionCard = forwardRef((_a, ref) => {
823
824
  *
824
825
  * NOTE: If shown with a label, please use the `PasswordField` component instead.
825
826
  */
826
- const PasswordInput = forwardRef((props, ref) => (jsx(BaseInput, Object.assign({ ref: ref }, props))));
827
+ const PasswordInput = forwardRef((props, ref) => {
828
+ const [showPassword, setShowPassword] = useState(false);
829
+ return (jsx(BaseInput, Object.assign({ ref: ref }, props, { actions: jsx("div", { className: cvaActionContainer(), children: jsx(IconButton, { className: cvaActionButton({ size: props.fieldSize }), icon: jsx(Icon, { name: showPassword ? "EyeSlash" : "Eye", size: "small" }), onClick: () => setShowPassword(prevState => !prevState), size: "small", variant: "secondary" }) }), type: showPassword ? "text" : "password" })));
830
+ });
827
831
 
828
832
  /**
829
833
  * Password fields enter a password or other confidential information. Characters are masked as they are typed.
@@ -836,11 +840,10 @@ const PasswordField = forwardRef((_a, ref) => {
836
840
  var { id, label, tip, helpText, helpAddon, errorMessage, isInvalid, maxLength, onChange, className, value, dataTestId } = _a, rest = __rest(_a, ["id", "label", "tip", "helpText", "helpAddon", "errorMessage", "isInvalid", "maxLength", "onChange", "className", "value", "dataTestId"]);
837
841
  const renderAsInvalid = isInvalid === undefined ? Boolean(errorMessage) : isInvalid;
838
842
  const htmlFor = id ? id : "passwordField-" + v4();
839
- const [showPassword, setShowPassword] = useState(false);
840
843
  const handleChange = useCallback((event) => {
841
844
  onChange === null || onChange === void 0 ? void 0 : onChange(event);
842
845
  }, [onChange]);
843
- return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(PasswordInput, Object.assign({}, rest, { actions: jsx(Icon, { className: "absolute top-0 bottom-0 right-2 h-full content-center", color: "neutral", name: showPassword ? "EyeSlash" : "Eye", onClick: () => setShowPassword(prevState => !prevState), size: "small" }), "aria-labelledby": htmlFor + "-label", className: className, dataTestId: dataTestId, disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, onChange: handleChange, ref: ref, type: showPassword ? "text" : "password", value: value })) }));
846
+ return (jsx(FormGroup, { dataTestId: dataTestId && `${dataTestId}-FormGroup`, helpAddon: helpAddon, helpText: (renderAsInvalid && errorMessage) || helpText, htmlFor: htmlFor, isInvalid: renderAsInvalid, label: label, required: rest.required, tip: tip, children: jsx(PasswordInput, Object.assign({}, rest, { "aria-labelledby": htmlFor + "-label", className: className, dataTestId: dataTestId, disabled: rest.readOnly, id: htmlFor, isInvalid: renderAsInvalid, maxLength: maxLength, onChange: handleChange, ref: ref, value: value })) }));
844
847
  });
845
848
 
846
849
  /**
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-form-components",
3
- "version": "0.0.369",
3
+ "version": "0.0.372",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {