@xyo-network/react-access-gate 7.5.8 → 7.5.11

package/dist/browser/components/AccessCodeGateFlexbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AccessCodeGateFlexbox.d.ts","sourceRoot":"","sources":["../../../src/components/AccessCodeGateFlexbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,KAEN,MAAM,OAAO,CAAA;AAId,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB,EAAE,YAAY;IAC5E,mBAAmB,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,iBAAiB,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC3B,gBAAgB,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,OAAO,CAAA;CACnD;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAwFjE,CAAA"}
+{"version":3,"file":"AccessCodeGateFlexbox.d.ts","sourceRoot":"","sources":["../../../src/components/AccessCodeGateFlexbox.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAEzD,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAC9C,OAAO,KAEN,MAAM,OAAO,CAAA;AAId,MAAM,WAAW,qBAAsB,SAAQ,iBAAiB,EAAE,YAAY;IAC5E,mBAAmB,CAAC,EAAE,CAAC,IAAI,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,iBAAiB,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,IAAI,CAAA;IAChD,oBAAoB,CAAC,EAAE,MAAM,CAAA;IAC7B,mBAAmB,CAAC,EAAE,MAAM,CAAA;IAC5B,eAAe,CAAC,EAAE,MAAM,EAAE,CAAA;IAC1B,gBAAgB,CAAC,EAAE,MAAM,EAAE,CAAA;IAC3B,gBAAgB,CAAC,EAAE,CAAC,SAAS,CAAC,EAAE,MAAM,KAAK,OAAO,CAAA;CACnD;AAED,eAAO,MAAM,qBAAqB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CA4FjE,CAAA"}

package/dist/browser/index.mjs

@@ -1,77 +1,81 @@
-var __defProp = Object.defineProperty;
-var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
-
 // src/components/AccessCodeGateFlexbox.tsx
 import { FormControl } from "@mui/material";
 import { ButtonEx } from "@xylabs/react-button";
 import { FlexGrowCol, FlexGrowRow } from "@xylabs/react-flexbox";
-import React2, { useCallback, useEffect, useState } from "react";
+import {
+  useCallback,
+  useEffect,
+  useState
+} from "react";
 
 // src/components/CodeTextField.tsx
 import { CheckCircleOutline, ErrorOutline } from "@mui/icons-material";
-import { InputAdornment, styled, TextField } from "@mui/material";
-import React from "react";
-var CodeTextField = /* @__PURE__ */ __name(({ codeInput, disabled, onEnter, setCodeInput, validCode, ...props }) => /* @__PURE__ */ React.createElement(StyledTextField, {
-  slotProps: {
-    input: {
-      endAdornment: /* @__PURE__ */ React.createElement(InputAdornment, {
-        position: "start"
-      }, /* @__PURE__ */ React.createElement(CheckCircleOutline, {
-        sx: {
-          display: validCode === null ? "block" : "hidden",
-          visibility: "hidden"
-        }
-      }), /* @__PURE__ */ React.createElement(CheckCircleOutline, {
-        color: "success",
-        fontSize: "medium",
-        sx: {
-          position: "absolute",
-          visibility: validCode === true ? "visible" : "hidden"
-        }
-      }), /* @__PURE__ */ React.createElement(ErrorOutline, {
-        color: "error",
-        fontSize: "medium",
-        sx: {
-          position: "absolute",
-          visibility: validCode === false ? "visible" : "hidden"
-        }
-      }))
-    }
-  },
-  onKeyUp: /* @__PURE__ */ __name((event) => event.key === "Enter" && !disabled ? onEnter?.() : null, "onKeyUp"),
-  autoFocus: true,
-  size: "small",
-  value: codeInput ?? "",
-  onChange: /* @__PURE__ */ __name((event) => setCodeInput?.(event.target.value), "onChange"),
+import {
+  InputAdornment,
+  styled,
+  TextField
+} from "@mui/material";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CodeTextField = ({
+  codeInput,
+  disabled,
+  onEnter,
+  setCodeInput,
+  validCode,
   ...props
-}), "CodeTextField");
-var StyledTextField = styled(TextField, {
-  name: "StyledTextField"
-})(() => ({
-  "& .MuiInputBase-root": {
-    paddingRight: 0
+}) => /* @__PURE__ */ jsx(
+  StyledTextField,
+  {
+    slotProps: {
+      input: {
+        endAdornment: /* @__PURE__ */ jsxs(InputAdornment, { position: "start", children: [
+          /* @__PURE__ */ jsx(CheckCircleOutline, { sx: { display: validCode === null ? "block" : "hidden", visibility: "hidden" } }),
+          /* @__PURE__ */ jsx(
+            CheckCircleOutline,
+            {
+              color: "success",
+              fontSize: "medium",
+              sx: { position: "absolute", visibility: validCode === true ? "visible" : "hidden" }
+            }
+          ),
+          /* @__PURE__ */ jsx(ErrorOutline, { color: "error", fontSize: "medium", sx: { position: "absolute", visibility: validCode === false ? "visible" : "hidden" } })
+        ] })
+      }
+    },
+    onKeyUp: (event) => event.key === "Enter" && !disabled ? onEnter?.() : null,
+    autoFocus: true,
+    size: "small",
+    value: codeInput ?? "",
+    onChange: (event) => setCodeInput?.(event.target.value),
+    ...props
   }
-}));
+);
+var StyledTextField = styled(TextField, { name: "StyledTextField" })(() => ({ "& .MuiInputBase-root": { paddingRight: 0 } }));
 
 // src/components/AccessCodeGateFlexbox.tsx
-var AccessCodeGateFlexbox = /* @__PURE__ */ __name(({ children, onCodeInputChange, onAccessCodeSuccess, successRedirectDelay = 1500, userAccessCodes, validAccessCodes, validateFunction, ...props }) => {
+import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var AccessCodeGateFlexbox = ({
+  children,
+  onCodeInputChange,
+  onAccessCodeSuccess,
+  successRedirectDelay = 1500,
+  userAccessCodes,
+  validAccessCodes,
+  validateFunction,
+  ...props
+}) => {
   const [initialized, setInitialized] = useState(false);
   const [accessGranted, setAccessGranted] = useState(false);
   const [codeInput, setCodeInput] = useState();
   const [validCode, setValidCode] = useState(null);
   const disabled = validateFunction ? !validateFunction(codeInput) : !codeInput;
-  const validateCode = useCallback((accessCode) => accessCode ? validAccessCodes?.includes(accessCode) : false, [
-    validAccessCodes
-  ]);
+  const validateCode = useCallback((accessCode) => accessCode ? validAccessCodes?.includes(accessCode) : false, [validAccessCodes]);
   useEffect(() => {
     if (onCodeInputChange) {
       onCodeInputChange(codeInput);
     }
-  }, [
-    codeInput,
-    onCodeInputChange
-  ]);
-  const onEnter = /* @__PURE__ */ __name(() => {
+  }, [codeInput, onCodeInputChange]);
+  const onEnter = () => {
     onCodeInputChange?.(codeInput);
     if (codeInput) {
       const granted = validateCode(codeInput);
@@ -85,76 +89,62 @@ var AccessCodeGateFlexbox = /* @__PURE__ */ __name(({ children, onCodeInputChang
         setValidCode(false);
       }
     }
-  }, "onEnter");
+  };
   useEffect(() => {
     setValidCode(null);
-  }, [
-    codeInput
-  ]);
+  }, [codeInput]);
   useEffect(() => {
     if (userAccessCodes) {
       const granted = userAccessCodes.some((code) => validateCode(code));
-      setAccessGranted(granted);
       if (granted) {
+        setAccessGranted(true);
         onAccessCodeSuccess?.();
       }
     }
     setInitialized(true);
-  }, [
-    onAccessCodeSuccess,
-    userAccessCodes,
-    validateCode
-  ]);
-  return /* @__PURE__ */ React2.createElement(React2.Fragment, null, initialized ? accessGranted ? children : /* @__PURE__ */ React2.createElement(FlexGrowCol, {
-    gap: 2,
-    ...props
-  }, /* @__PURE__ */ React2.createElement(FlexGrowRow, {
-    gap: 2,
-    alignItems: "start"
-  }, /* @__PURE__ */ React2.createElement(FormControl, null, /* @__PURE__ */ React2.createElement(CodeTextField, {
-    codeInput,
-    disabled,
-    label: "Enter Access Code",
-    setCodeInput,
-    validCode,
-    onEnter
-  })), /* @__PURE__ */ React2.createElement(FormControl, null, /* @__PURE__ */ React2.createElement(ButtonEx, {
-    disabled,
-    onClick: onEnter,
-    variant: "contained"
-  }, "Enter")))) : null);
-}, "AccessCodeGateFlexbox");
+  }, [userAccessCodes, validateCode]);
+  return /* @__PURE__ */ jsx2(Fragment, { children: initialized ? accessGranted ? children : /* @__PURE__ */ jsx2(FlexGrowCol, { gap: 2, ...props, children: /* @__PURE__ */ jsxs2(FlexGrowRow, { gap: 2, alignItems: "start", children: [
+    /* @__PURE__ */ jsx2(FormControl, { children: /* @__PURE__ */ jsx2(
+      CodeTextField,
+      {
+        codeInput,
+        disabled,
+        label: "Enter Access Code",
+        setCodeInput,
+        validCode,
+        onEnter
+      }
+    ) }),
+    /* @__PURE__ */ jsx2(FormControl, { children: /* @__PURE__ */ jsx2(ButtonEx, { disabled, onClick: onEnter, variant: "contained", children: "Enter" }) })
+  ] }) }) : null });
+};
 
 // src/hooks/useAccessCodes.ts
 import { useMemo, useState as useState2 } from "react";
-var useAccessCodes = /* @__PURE__ */ __name((localStorageKey, validCodeLength = 6) => {
+var useAccessCodes = (localStorageKey, validCodeLength = 6) => {
   const [validated, setValidated] = useState2(false);
   const [codeInput, setCodeInput] = useState2("");
-  const onAccessCodeSuccess = /* @__PURE__ */ __name(() => {
+  const onAccessCodeSuccess = () => {
     if (codeInput) {
-      localStorage.setItem(localStorageKey, JSON.stringify([
-        codeInput
-      ]));
+      localStorage.setItem(localStorageKey, JSON.stringify([codeInput]));
       setValidated(true);
     } else {
       setValidated(true);
     }
-  }, "onAccessCodeSuccess");
-  const validateCodeInput = /* @__PURE__ */ __name((code) => {
+  };
+  const validateCodeInput = (code) => {
     return code?.length === validCodeLength;
-  }, "validateCodeInput");
-  const onCodeInputChange = /* @__PURE__ */ __name((code) => {
+  };
+  const onCodeInputChange = (code) => {
     setCodeInput(code ?? "");
-  }, "onCodeInputChange");
+  };
   const userAccessCodes = useMemo(() => {
     const storedCodes = localStorage.getItem(localStorageKey);
     if (storedCodes) {
       const parsedResult = JSON.parse(storedCodes ?? "");
       if (Array.isArray(parsedResult)) return parsedResult;
     }
-  }, [
-    localStorageKey
-  ]);
+  }, [localStorageKey]);
   return {
     codeInput,
     validated,
@@ -163,7 +153,7 @@ var useAccessCodes = /* @__PURE__ */ __name((localStorageKey, validCodeLength =
     onCodeInputChange,
     validateCodeInput
   };
-}, "useAccessCodes");
+};
 export {
   AccessCodeGateFlexbox,
   useAccessCodes

package/dist/browser/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/AccessCodeGateFlexbox.tsx","../../src/components/CodeTextField.tsx","../../src/hooks/useAccessCodes.ts"],"sourcesContent":["import { FormControl } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport type { PropsWithChildren } from 'react'\nimport React, {\n  useCallback, useEffect, useState,\n} from 'react'\n\nimport { CodeTextField } from './CodeTextField.tsx'\n\nexport interface AccessCodeGateFlexbox extends PropsWithChildren, FlexBoxProps {\n  onAccessCodeSuccess?: (code?: string) => void\n  onCodeInputChange?: (codeInput?: string) => void\n  successRedirectDelay?: number\n  textFieldHelperText?: string\n  userAccessCodes?: string[]\n  validAccessCodes?: string[]\n  validateFunction?: (codeInput?: string) => boolean\n}\n\nexport const AccessCodeGateFlexbox: React.FC<AccessCodeGateFlexbox> = ({\n  children,\n  onCodeInputChange,\n  onAccessCodeSuccess,\n  successRedirectDelay = 1500,\n  userAccessCodes,\n  validAccessCodes,\n  validateFunction,\n  ...props\n}) => {\n  const [initialized, setInitialized] = useState(false)\n  const [accessGranted, setAccessGranted] = useState(false)\n  const [codeInput, setCodeInput] = useState<string>()\n  const [validCode, setValidCode] = useState<boolean | null>(null)\n\n  const disabled = validateFunction ? !validateFunction(codeInput) : !codeInput\n  const validateCode = useCallback((accessCode: string) => (accessCode ? validAccessCodes?.includes(accessCode) : false), [validAccessCodes])\n\n  // keep the parent informed of the code input\n  useEffect(() => {\n    if (onCodeInputChange) {\n      onCodeInputChange(codeInput)\n    }\n  }, [codeInput, onCodeInputChange])\n\n  const onEnter = () => {\n    onCodeInputChange?.(codeInput)\n    if (codeInput) {\n      const granted = validateCode(codeInput)\n      if (granted) {\n        setValidCode(true)\n        // delay success callback to ensure the ui shows success before next action\n        setTimeout(() => {\n          setAccessGranted(granted)\n          onAccessCodeSuccess?.(codeInput)\n        }, successRedirectDelay)\n      } else {\n        setValidCode(false)\n      }\n    }\n  }\n\n  useEffect(() => {\n    // whenever a code changes, reset the success/failure warning\n    setValidCode(null)\n  }, [codeInput])\n\n  useEffect(() => {\n    if (userAccessCodes) {\n      const granted = userAccessCodes.some(code => validateCode(code))\n      setAccessGranted(granted)\n      if (granted) {\n        onAccessCodeSuccess?.()\n      }\n    }\n    setInitialized(true)\n  }, [onAccessCodeSuccess, userAccessCodes, validateCode])\n\n  return (\n    <>\n      {initialized\n        ? accessGranted\n          ? children\n          : (\n              <FlexGrowCol gap={2} {...props}>\n                <FlexGrowRow gap={2} alignItems=\"start\">\n                  <FormControl>\n                    <CodeTextField\n                      codeInput={codeInput}\n                      disabled={disabled}\n                      label=\"Enter Access Code\"\n                      setCodeInput={setCodeInput}\n                      validCode={validCode}\n                      onEnter={onEnter}\n                    />\n                  </FormControl>\n                  <FormControl>\n                    <ButtonEx disabled={disabled} onClick={onEnter} variant=\"contained\">\n                      Enter\n                    </ButtonEx>\n                  </FormControl>\n                </FlexGrowRow>\n              </FlexGrowCol>\n            )\n\n        : null}\n    </>\n  )\n}\n","import { CheckCircleOutline, ErrorOutline } from '@mui/icons-material'\nimport type { TextFieldProps } from '@mui/material'\nimport {\n  InputAdornment, styled, TextField,\n} from '@mui/material'\nimport type { KeyboardEvent } from 'react'\nimport React from 'react'\n\nexport type CodeTextFieldProps = TextFieldProps & {\n  codeInput?: string\n  disabled?: boolean\n  onEnter?: () => void\n  setCodeInput?: (code?: string) => void\n  validCode?: boolean | null\n}\n\nexport const CodeTextField: React.FC<CodeTextFieldProps> = ({\n  codeInput, disabled, onEnter, setCodeInput, validCode, ...props\n}) => (\n  <StyledTextField\n    slotProps={{\n      input: {\n        endAdornment: (\n          <InputAdornment position=\"start\">\n            {/* Having a display block element for all 3 states (null, false, true) means the icon coming in and out\n            does not affect the overall width */}\n            <CheckCircleOutline sx={{ display: validCode === null ? 'block' : 'hidden', visibility: 'hidden' }} />\n            <CheckCircleOutline\n              color=\"success\"\n              fontSize=\"medium\"\n              sx={{ position: 'absolute', visibility: validCode === true ? 'visible' : 'hidden' }}\n            />\n            <ErrorOutline color=\"error\" fontSize=\"medium\" sx={{ position: 'absolute', visibility: validCode === false ? 'visible' : 'hidden' }} />\n          </InputAdornment>\n        ),\n      },\n    }}\n    onKeyUp={(event: KeyboardEvent) => (event.key === 'Enter' && !disabled ? onEnter?.() : null)}\n    autoFocus\n    size=\"small\"\n    value={codeInput ?? ''}\n    onChange={(event: React.ChangeEvent<HTMLInputElement>) => setCodeInput?.(event.target.value)}\n    {...props}\n  />\n)\n\nconst StyledTextField = styled(TextField, { name: 'StyledTextField' })(() => ({ '& .MuiInputBase-root': { paddingRight: 0 } }))\n","import { useMemo, useState } from 'react'\n\nexport const useAccessCodes = (localStorageKey: string, validCodeLength = 6) => {\n  const [validated, setValidated] = useState(false)\n  const [codeInput, setCodeInput] = useState('')\n\n  const onAccessCodeSuccess = () => {\n    // Save the access code to local storage\n    if (codeInput) {\n      localStorage.setItem(localStorageKey, JSON.stringify([codeInput]))\n      setValidated(true)\n    } else {\n      // If the codeInput is empty, but we have success, do nothing since the successful code is already saved\n      setValidated(true)\n    }\n  }\n  const validateCodeInput = (code?: string) => {\n    return code?.length === validCodeLength\n  }\n  const onCodeInputChange = (code?: string) => {\n    setCodeInput(code ?? '')\n  }\n  const userAccessCodes = useMemo(() => {\n    const storedCodes = localStorage.getItem(localStorageKey)\n    if (storedCodes) {\n      const parsedResult = JSON.parse(storedCodes ?? '')\n      if (Array.isArray(parsedResult)) return parsedResult\n    }\n  }, [localStorageKey])\n\n  return {\n    codeInput, validated, userAccessCodes, onAccessCodeSuccess, onCodeInputChange, validateCodeInput,\n  }\n}\n"],"mappings":"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","names":["FormControl","ButtonEx","FlexGrowCol","FlexGrowRow","React","useCallback","useEffect","useState","CheckCircleOutline","ErrorOutline","InputAdornment","styled","TextField","React","CodeTextField","codeInput","disabled","onEnter","setCodeInput","validCode","props","StyledTextField","slotProps","input","endAdornment","InputAdornment","position","CheckCircleOutline","sx","display","visibility","color","fontSize","ErrorOutline","onKeyUp","event","key","autoFocus","size","value","onChange","target","styled","TextField","name","paddingRight","AccessCodeGateFlexbox","children","onCodeInputChange","onAccessCodeSuccess","successRedirectDelay","userAccessCodes","validAccessCodes","validateFunction","props","initialized","setInitialized","useState","accessGranted","setAccessGranted","codeInput","setCodeInput","validCode","setValidCode","disabled","validateCode","useCallback","accessCode","includes","useEffect","onEnter","granted","setTimeout","some","code","React","FlexGrowCol","gap","FlexGrowRow","alignItems","FormControl","CodeTextField","label","ButtonEx","onClick","variant","useMemo","useState","useAccessCodes","localStorageKey","validCodeLength","validated","setValidated","useState","codeInput","setCodeInput","onAccessCodeSuccess","localStorage","setItem","JSON","stringify","validateCodeInput","code","length","onCodeInputChange","userAccessCodes","useMemo","storedCodes","getItem","parsedResult","parse","Array","isArray"]}
+{"version":3,"sources":["../../src/components/AccessCodeGateFlexbox.tsx","../../src/components/CodeTextField.tsx","../../src/hooks/useAccessCodes.ts"],"sourcesContent":["import { FormControl } from '@mui/material'\nimport { ButtonEx } from '@xylabs/react-button'\nimport type { FlexBoxProps } from '@xylabs/react-flexbox'\nimport { FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'\nimport type { PropsWithChildren } from 'react'\nimport React, {\n  useCallback, useEffect, useState,\n} from 'react'\n\nimport { CodeTextField } from './CodeTextField.tsx'\n\nexport interface AccessCodeGateFlexbox extends PropsWithChildren, FlexBoxProps {\n  onAccessCodeSuccess?: (code?: string) => void\n  onCodeInputChange?: (codeInput?: string) => void\n  successRedirectDelay?: number\n  textFieldHelperText?: string\n  userAccessCodes?: string[]\n  validAccessCodes?: string[]\n  validateFunction?: (codeInput?: string) => boolean\n}\n\nexport const AccessCodeGateFlexbox: React.FC<AccessCodeGateFlexbox> = ({\n  children,\n  onCodeInputChange,\n  onAccessCodeSuccess,\n  successRedirectDelay = 1500,\n  userAccessCodes,\n  validAccessCodes,\n  validateFunction,\n  ...props\n}) => {\n  const [initialized, setInitialized] = useState(false)\n  const [accessGranted, setAccessGranted] = useState(false)\n  const [codeInput, setCodeInput] = useState<string>()\n  const [validCode, setValidCode] = useState<boolean | null>(null)\n\n  const disabled = validateFunction ? !validateFunction(codeInput) : !codeInput\n  const validateCode = useCallback((accessCode: string) => (accessCode ? validAccessCodes?.includes(accessCode) : false), [validAccessCodes])\n\n  // keep the parent informed of the code input\n  useEffect(() => {\n    if (onCodeInputChange) {\n      onCodeInputChange(codeInput)\n    }\n  }, [codeInput, onCodeInputChange])\n\n  const onEnter = () => {\n    onCodeInputChange?.(codeInput)\n    if (codeInput) {\n      const granted = validateCode(codeInput)\n      if (granted) {\n        setValidCode(true)\n        // delay success callback to ensure the ui shows success before next action\n        setTimeout(() => {\n          setAccessGranted(granted)\n          onAccessCodeSuccess?.(codeInput)\n        }, successRedirectDelay)\n      } else {\n        setValidCode(false)\n      }\n    }\n  }\n\n  useEffect(() => {\n    // whenever a code changes, reset the success/failure warning\n    // eslint-disable-next-line react-hooks/set-state-in-effect, react-x/set-state-in-effect\n    setValidCode(null)\n  }, [codeInput])\n\n  useEffect(() => {\n    if (userAccessCodes) {\n      const granted = userAccessCodes.some(code => validateCode(code))\n      if (granted) {\n        // eslint-disable-next-line react-hooks/set-state-in-effect, react-x/set-state-in-effect\n        setAccessGranted(true)\n        onAccessCodeSuccess?.()\n      }\n    }\n    // eslint-disable-next-line react-x/set-state-in-effect\n    setInitialized(true)\n    // eslint-disable-next-line react-hooks/exhaustive-deps, react-x/exhaustive-deps\n  }, [userAccessCodes, validateCode])\n\n  return (\n    <>\n      {initialized\n        ? accessGranted\n          ? children\n          : (\n              <FlexGrowCol gap={2} {...props}>\n                <FlexGrowRow gap={2} alignItems=\"start\">\n                  <FormControl>\n                    <CodeTextField\n                      codeInput={codeInput}\n                      disabled={disabled}\n                      label=\"Enter Access Code\"\n                      setCodeInput={setCodeInput}\n                      validCode={validCode}\n                      onEnter={onEnter}\n                    />\n                  </FormControl>\n                  <FormControl>\n                    <ButtonEx disabled={disabled} onClick={onEnter} variant=\"contained\">\n                      Enter\n                    </ButtonEx>\n                  </FormControl>\n                </FlexGrowRow>\n              </FlexGrowCol>\n            )\n\n        : null}\n    </>\n  )\n}\n","import { CheckCircleOutline, ErrorOutline } from '@mui/icons-material'\nimport type { TextFieldProps } from '@mui/material'\nimport {\n  InputAdornment, styled, TextField,\n} from '@mui/material'\nimport type { KeyboardEvent } from 'react'\nimport React from 'react'\n\nexport type CodeTextFieldProps = TextFieldProps & {\n  codeInput?: string\n  disabled?: boolean\n  onEnter?: () => void\n  setCodeInput?: (code?: string) => void\n  validCode?: boolean | null\n}\n\nexport const CodeTextField: React.FC<CodeTextFieldProps> = ({\n  codeInput, disabled, onEnter, setCodeInput, validCode, ...props\n}) => (\n  <StyledTextField\n    slotProps={{\n      input: {\n        endAdornment: (\n          <InputAdornment position=\"start\">\n            {/* Having a display block element for all 3 states (null, false, true) means the icon coming in and out\n            does not affect the overall width */}\n            <CheckCircleOutline sx={{ display: validCode === null ? 'block' : 'hidden', visibility: 'hidden' }} />\n            <CheckCircleOutline\n              color=\"success\"\n              fontSize=\"medium\"\n              sx={{ position: 'absolute', visibility: validCode === true ? 'visible' : 'hidden' }}\n            />\n            <ErrorOutline color=\"error\" fontSize=\"medium\" sx={{ position: 'absolute', visibility: validCode === false ? 'visible' : 'hidden' }} />\n          </InputAdornment>\n        ),\n      },\n    }}\n    onKeyUp={(event: KeyboardEvent) => (event.key === 'Enter' && !disabled ? onEnter?.() : null)}\n    autoFocus\n    size=\"small\"\n    value={codeInput ?? ''}\n    onChange={(event: React.ChangeEvent<HTMLInputElement>) => setCodeInput?.(event.target.value)}\n    {...props}\n  />\n)\n\nconst StyledTextField = styled(TextField, { name: 'StyledTextField' })(() => ({ '& .MuiInputBase-root': { paddingRight: 0 } }))\n","import { useMemo, useState } from 'react'\n\nexport const useAccessCodes = (localStorageKey: string, validCodeLength = 6) => {\n  const [validated, setValidated] = useState(false)\n  const [codeInput, setCodeInput] = useState('')\n\n  const onAccessCodeSuccess = () => {\n    // Save the access code to local storage\n    if (codeInput) {\n      localStorage.setItem(localStorageKey, JSON.stringify([codeInput]))\n      setValidated(true)\n    } else {\n      // If the codeInput is empty, but we have success, do nothing since the successful code is already saved\n      setValidated(true)\n    }\n  }\n  const validateCodeInput = (code?: string) => {\n    return code?.length === validCodeLength\n  }\n  const onCodeInputChange = (code?: string) => {\n    setCodeInput(code ?? '')\n  }\n  const userAccessCodes = useMemo(() => {\n    const storedCodes = localStorage.getItem(localStorageKey)\n    if (storedCodes) {\n      const parsedResult = JSON.parse(storedCodes ?? '')\n      if (Array.isArray(parsedResult)) return parsedResult\n    }\n  }, [localStorageKey])\n\n  return {\n    codeInput, validated, userAccessCodes, onAccessCodeSuccess, onCodeInputChange, validateCodeInput,\n  }\n}\n"],"mappings":"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","names":["jsx","jsxs","useState"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/react-access-gate",
-  "version": "7.5.8",
+  "version": "7.5.11",
   "description": "Common React library for all XYO projects that use React",
   "keywords": [
     "xyo",
@@ -36,44 +36,72 @@
     },
     "./package.json": "./package.json"
   },
-  "module": "dist/browser/index.mjs",
-  "types": "dist/browser/index.d.ts",
   "files": [
     "dist",
-    "src"
+    "README.md"
   ],
-  "dependencies": {
-    "@xylabs/react-button": "~7.1.17",
-    "@xylabs/react-flexbox": "~7.1.17"
-  },
   "devDependencies": {
-    "@mui/icons-material": "~7.3.9",
-    "@mui/material": "~7.3.9",
-    "@storybook/react-vite": "~10.3.3",
+    "@mui/icons-material": "^7.3.10",
+    "@mui/material": "^7.3.10",
+    "@opentelemetry/api": "^1.9.1",
+    "@opentelemetry/sdk-trace-base": "^2.7.0",
+    "@storybook/react-vite": "~10.3.5",
+    "@types/node": "~25.6.0",
     "@types/react": "^19.2.14",
-    "@xylabs/ts-scripts-common": "~7.5.6",
-    "@xylabs/ts-scripts-yarn3": "~7.5.6",
-    "@xylabs/tsconfig": "~7.5.6",
-    "@xylabs/tsconfig-dom": "~7.5.6",
-    "@xylabs/tsconfig-react": "~7.5.6",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
-    "react-router-dom": "^7.13.2",
-    "storybook": "~10.3.3",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-button": "~7.1.20",
+    "@xylabs/react-flexbox": "~7.1.20",
+    "@xylabs/react-promise": "~7.1.20",
+    "@xylabs/toolchain": "~7.11.9",
+    "@xylabs/tsconfig": "^7.11.9",
+    "@xylabs/tsconfig-dom": "^7.11.9",
+    "@xylabs/tsconfig-react": "~7.11.9",
+    "@xylabs/zod": "~5.0.100",
+    "async-mutex": "^0.5.0",
+    "axios": "^1.15.2",
+    "bn.js": "^5.2.3",
+    "bowser": "^2.14.1",
+    "buffer": "^6.0.3",
+    "chalk": "^5.6.2",
+    "esbuild": "~0.28.0",
+    "eslint": "^10.2.1",
+    "ethers": "^6.16.0",
+    "fast-deep-equal": "~3.1.3",
+    "js-cookie": "~3.0.5",
+    "pako": "^2.1.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "spark-md5": "~3.0.2",
+    "storybook": "^10.3.5",
     "typescript": "^5.9.3",
-    "vite": "~8.0.3",
+    "vite": "^8.0.10",
     "zod": "^4.3.6"
   },
   "peerDependencies": {
-    "@mui/icons-material": ">=6 <8",
-    "@mui/material": ">=6 <8",
-    "react": "^19",
-    "react-dom": "^19",
-    "react-router-dom": "^7",
-    "zod": "^4"
+    "@mui/icons-material": "^7.3.10",
+    "@mui/material": "^7.3.10",
+    "@opentelemetry/sdk-trace-base": "^2.7.0",
+    "@types/react": "^19.2.14",
+    "@xylabs/react-async-effect": "~7.1.20",
+    "@xylabs/react-button": "~7.1.20",
+    "@xylabs/react-flexbox": "~7.1.20",
+    "@xylabs/zod": "~5.0.100",
+    "async-mutex": "^0.5.0",
+    "bn.js": "^5.2.3",
+    "bowser": "^2.14.1",
+    "buffer": "^6.0.3",
+    "chalk": "^5.6.2",
+    "ethers": "^6.16.0",
+    "fast-deep-equal": "~3.1.3",
+    "js-cookie": "~3.0.5",
+    "pako": "^2.1.0",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
+    "spark-md5": "~3.0.2",
+    "zod": "^4.3.6"
   },
   "publishConfig": {
     "access": "public"
   },
   "docs": "dist/docs.json"
-}
+}

package/src/components/AccessCodeGateFlexbox.stories.tsx

@@ -1,51 +0,0 @@
-import { Alert, Typography } from '@mui/material'
-import type { Meta, StoryFn } from '@storybook/react-vite'
-import { FlexCol } from '@xylabs/react-flexbox'
-import React from 'react'
-
-import { useAccessCodes } from '../hooks/index.ts'
-import { AccessCodeGateFlexbox } from './AccessCodeGateFlexbox.tsx'
-
-const ValidAccessCodes = ['100519']
-
-export default {
-  component: AccessCodeGateFlexbox,
-  title: 'access/AccessCodeGateFlexbox',
-} as Meta
-
-const Template: StoryFn<typeof AccessCodeGateFlexbox> = args => (
-  <AccessCodeGateFlexbox {...args} />
-)
-
-const TemplateWithAccessCodes: StoryFn<typeof AccessCodeGateFlexbox> = (args) => {
-  const {
-    codeInput, validated, onAccessCodeSuccess, onCodeInputChange, validateCodeInput,
-  } = useAccessCodes('storybook-access-codes-test')
-
-  return validated
-    ? <Alert severity="success">Success!</Alert>
-    : (
-        <FlexCol gap={2}>
-          <AccessCodeGateFlexbox
-            onAccessCodeSuccess={onAccessCodeSuccess}
-            onCodeInputChange={onCodeInputChange}
-            validAccessCodes={ValidAccessCodes}
-            validateFunction={validateCodeInput}
-            {...args}
-          />
-          <Typography variant="caption" gutterBottom>
-            Hint:
-            {ValidAccessCodes[0]}
-          </Typography>
-          <Typography variant="caption">
-            Code Input in Parent:
-            {codeInput}
-          </Typography>
-        </FlexCol>
-      )
-}
-
-const Default = Template.bind({})
-const WithAccessCodes = TemplateWithAccessCodes.bind({})
-
-export { Default, WithAccessCodes }

package/src/components/AccessCodeGateFlexbox.tsx

@@ -1,110 +0,0 @@
-import { FormControl } from '@mui/material'
-import { ButtonEx } from '@xylabs/react-button'
-import type { FlexBoxProps } from '@xylabs/react-flexbox'
-import { FlexGrowCol, FlexGrowRow } from '@xylabs/react-flexbox'
-import type { PropsWithChildren } from 'react'
-import React, {
-  useCallback, useEffect, useState,
-} from 'react'
-
-import { CodeTextField } from './CodeTextField.tsx'
-
-export interface AccessCodeGateFlexbox extends PropsWithChildren, FlexBoxProps {
-  onAccessCodeSuccess?: (code?: string) => void
-  onCodeInputChange?: (codeInput?: string) => void
-  successRedirectDelay?: number
-  textFieldHelperText?: string
-  userAccessCodes?: string[]
-  validAccessCodes?: string[]
-  validateFunction?: (codeInput?: string) => boolean
-}
-
-export const AccessCodeGateFlexbox: React.FC<AccessCodeGateFlexbox> = ({
-  children,
-  onCodeInputChange,
-  onAccessCodeSuccess,
-  successRedirectDelay = 1500,
-  userAccessCodes,
-  validAccessCodes,
-  validateFunction,
-  ...props
-}) => {
-  const [initialized, setInitialized] = useState(false)
-  const [accessGranted, setAccessGranted] = useState(false)
-  const [codeInput, setCodeInput] = useState<string>()
-  const [validCode, setValidCode] = useState<boolean | null>(null)
-
-  const disabled = validateFunction ? !validateFunction(codeInput) : !codeInput
-  const validateCode = useCallback((accessCode: string) => (accessCode ? validAccessCodes?.includes(accessCode) : false), [validAccessCodes])
-
-  // keep the parent informed of the code input
-  useEffect(() => {
-    if (onCodeInputChange) {
-      onCodeInputChange(codeInput)
-    }
-  }, [codeInput, onCodeInputChange])
-
-  const onEnter = () => {
-    onCodeInputChange?.(codeInput)
-    if (codeInput) {
-      const granted = validateCode(codeInput)
-      if (granted) {
-        setValidCode(true)
-        // delay success callback to ensure the ui shows success before next action
-        setTimeout(() => {
-          setAccessGranted(granted)
-          onAccessCodeSuccess?.(codeInput)
-        }, successRedirectDelay)
-      } else {
-        setValidCode(false)
-      }
-    }
-  }
-
-  useEffect(() => {
-    // whenever a code changes, reset the success/failure warning
-    setValidCode(null)
-  }, [codeInput])
-
-  useEffect(() => {
-    if (userAccessCodes) {
-      const granted = userAccessCodes.some(code => validateCode(code))
-      setAccessGranted(granted)
-      if (granted) {
-        onAccessCodeSuccess?.()
-      }
-    }
-    setInitialized(true)
-  }, [onAccessCodeSuccess, userAccessCodes, validateCode])
-
-  return (
-    <>
-      {initialized
-        ? accessGranted
-          ? children
-          : (
-              <FlexGrowCol gap={2} {...props}>
-                <FlexGrowRow gap={2} alignItems="start">
-                  <FormControl>
-                    <CodeTextField
-                      codeInput={codeInput}
-                      disabled={disabled}
-                      label="Enter Access Code"
-                      setCodeInput={setCodeInput}
-                      validCode={validCode}
-                      onEnter={onEnter}
-                    />
-                  </FormControl>
-                  <FormControl>
-                    <ButtonEx disabled={disabled} onClick={onEnter} variant="contained">
-                      Enter
-                    </ButtonEx>
-                  </FormControl>
-                </FlexGrowRow>
-              </FlexGrowCol>
-            )
-
-        : null}
-    </>
-  )
-}

package/src/components/CodeTextField.tsx

@@ -1,47 +0,0 @@
-import { CheckCircleOutline, ErrorOutline } from '@mui/icons-material'
-import type { TextFieldProps } from '@mui/material'
-import {
-  InputAdornment, styled, TextField,
-} from '@mui/material'
-import type { KeyboardEvent } from 'react'
-import React from 'react'
-
-export type CodeTextFieldProps = TextFieldProps & {
-  codeInput?: string
-  disabled?: boolean
-  onEnter?: () => void
-  setCodeInput?: (code?: string) => void
-  validCode?: boolean | null
-}
-
-export const CodeTextField: React.FC<CodeTextFieldProps> = ({
-  codeInput, disabled, onEnter, setCodeInput, validCode, ...props
-}) => (
-  <StyledTextField
-    slotProps={{
-      input: {
-        endAdornment: (
-          <InputAdornment position="start">
-            {/* Having a display block element for all 3 states (null, false, true) means the icon coming in and out
-            does not affect the overall width */}
-            <CheckCircleOutline sx={{ display: validCode === null ? 'block' : 'hidden', visibility: 'hidden' }} />
-            <CheckCircleOutline
-              color="success"
-              fontSize="medium"
-              sx={{ position: 'absolute', visibility: validCode === true ? 'visible' : 'hidden' }}
-            />
-            <ErrorOutline color="error" fontSize="medium" sx={{ position: 'absolute', visibility: validCode === false ? 'visible' : 'hidden' }} />
-          </InputAdornment>
-        ),
-      },
-    }}
-    onKeyUp={(event: KeyboardEvent) => (event.key === 'Enter' && !disabled ? onEnter?.() : null)}
-    autoFocus
-    size="small"
-    value={codeInput ?? ''}
-    onChange={(event: React.ChangeEvent<HTMLInputElement>) => setCodeInput?.(event.target.value)}
-    {...props}
-  />
-)
-
-const StyledTextField = styled(TextField, { name: 'StyledTextField' })(() => ({ '& .MuiInputBase-root': { paddingRight: 0 } }))

package/src/components/index.ts

@@ -1 +0,0 @@
-export * from './AccessCodeGateFlexbox.tsx'

package/src/hooks/index.ts

@@ -1 +0,0 @@
-export * from './useAccessCodes.ts'

package/src/hooks/useAccessCodes.ts

@@ -1,34 +0,0 @@
-import { useMemo, useState } from 'react'
-
-export const useAccessCodes = (localStorageKey: string, validCodeLength = 6) => {
-  const [validated, setValidated] = useState(false)
-  const [codeInput, setCodeInput] = useState('')
-
-  const onAccessCodeSuccess = () => {
-    // Save the access code to local storage
-    if (codeInput) {
-      localStorage.setItem(localStorageKey, JSON.stringify([codeInput]))
-      setValidated(true)
-    } else {
-      // If the codeInput is empty, but we have success, do nothing since the successful code is already saved
-      setValidated(true)
-    }
-  }
-  const validateCodeInput = (code?: string) => {
-    return code?.length === validCodeLength
-  }
-  const onCodeInputChange = (code?: string) => {
-    setCodeInput(code ?? '')
-  }
-  const userAccessCodes = useMemo(() => {
-    const storedCodes = localStorage.getItem(localStorageKey)
-    if (storedCodes) {
-      const parsedResult = JSON.parse(storedCodes ?? '')
-      if (Array.isArray(parsedResult)) return parsedResult
-    }
-  }, [localStorageKey])
-
-  return {
-    codeInput, validated, userAccessCodes, onAccessCodeSuccess, onCodeInputChange, validateCodeInput,
-  }
-}

package/src/index.ts

@@ -1,2 +0,0 @@
-export * from './components/index.ts'
-export * from './hooks/index.ts'

package/src/types/images.d.ts

@@ -1,5 +0,0 @@
-declare module '*.png'
-declare module '*.jpg'
-declare module '*.svg'
-declare module '*.gif'
-declare module '*.webp'