react-native-system-ui 0.0.6 → 1.0.0

package/dist/cjs/components/form/FormItem.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.FormItem = void 0;
+exports.default = exports.FormItem = void 0;
 function _react() {
   const data = _interopRequireWildcard(require("react"));
   _react = function () {
@@ -16,7 +16,8 @@ var _FormContext = require("./FormContext");
 var _utils2 = require("./utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 const EMPTY_RULES = [];
-const FormItem = ({
+const EMPTY_VALUES = {};
+const FormItemImpl = ({
   name,
   label,
   description,
@@ -34,140 +35,111 @@ const FormItem = ({
   children
 }) => {
   const renderProps = typeof children === 'function';
-  const context = (0, _react().useContext)(_FormContext.FormContext);
-  if (!context) {
-    if (renderProps) {
-      return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children({
-        getFieldValue: () => undefined,
-        getFieldsValue: () => ({}),
-        form: null
-      }));
-    }
-    return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children);
-  }
+  const ctx = (0, _react().useContext)(_FormContext.FormContext);
   const normalizedRules = rules ?? EMPTY_RULES;
-  const prevValuesRef = (0, _react().useRef)(context.getFieldsValue());
-  const [, forceUpdate] = (0, _react().useState)(0);
   const nameKey = name ? (0, _utils2.serializeNamePath)(name) : undefined;
-  const subscribeAll = renderProps && !nameKey && !shouldUpdate;
+  const shouldAlwaysUpdate = renderProps && !nameKey && !shouldUpdate;
+  const previousValuesRef = (0, _react().useRef)(EMPTY_VALUES);
+  const [, forceUpdate] = (0, _react().useState)(0);
   (0, _react().useEffect)(() => {
-    if (!context?.subscribe) return undefined;
-    return context.subscribe((changed, all) => {
-      if (_utils2.FORM_ALL_FIELDS_KEY in changed) {
-        forceUpdate(version => version + 1);
+    if (!ctx?.subscribe) return undefined;
+    return ctx.subscribe((changedValues, all) => {
+      if (_utils2.FORM_ALL_FIELDS_KEY in changedValues) {
+        forceUpdate(v => v + 1);
         return;
       }
-      if (subscribeAll) {
-        forceUpdate(version => version + 1);
+      if (shouldAlwaysUpdate) {
+        forceUpdate(v => v + 1);
         return;
       }
       if (shouldUpdate) {
-        if (shouldUpdate(prevValuesRef.current, all)) {
-          forceUpdate(version => version + 1);
-        }
+        if (shouldUpdate(previousValuesRef.current, all)) forceUpdate(v => v + 1);
         return;
       }
-      if (nameKey && nameKey in changed) {
-        forceUpdate(version => version + 1);
-      }
+      if (nameKey && nameKey in changedValues) forceUpdate(v => v + 1);
     });
-  }, [context, nameKey, shouldUpdate, subscribeAll]);
-  const currentValues = context.getFieldsValue();
+  }, [ctx, nameKey, shouldUpdate, shouldAlwaysUpdate]);
+  const currentValues = ctx?.getFieldsValue() ?? EMPTY_VALUES;
   (0, _react().useEffect)(() => {
-    prevValuesRef.current = currentValues;
+    previousValuesRef.current = currentValues;
   }, [currentValues]);
-  const shouldRender = !shouldUpdate || shouldUpdate(prevValuesRef.current, currentValues);
   (0, _react().useEffect)(() => {
-    if (!name) return undefined;
-    return context.registerField(name, {
+    if (!name || !ctx) return undefined;
+    return ctx.registerField(name, {
       rules: normalizedRules,
       dependencies,
       initialValue,
       validateTrigger: validateTrigger ?? trigger
     });
-  }, [context.registerField, name, normalizedRules, dependencies, initialValue, validateTrigger, trigger]);
-  const mergedValue = name ? context.getFieldValue(name) : undefined;
-  const mergedShowMessage = showValidateMessage ?? context.showValidateMessage ?? true;
-  const fieldErrors = name ? context.getFieldError(name) : undefined;
-  const firstError = mergedShowMessage ? fieldErrors?.[0] : undefined;
-  const mergedRequired = required ?? normalizedRules.some(rule => rule.required);
-  const mergedValidateTriggers = (0, _utils2.normalizeTrigger)(validateTrigger ?? trigger);
+  }, [ctx, name, normalizedRules, dependencies, initialValue, validateTrigger, trigger]);
+  if (!ctx) {
+    if (renderProps) return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children({
+      getFieldValue: () => undefined,
+      getFieldsValue: () => EMPTY_VALUES,
+      form: null
+    }));
+    return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children);
+  }
+  const shouldRender = !shouldUpdate || shouldUpdate(previousValuesRef.current, currentValues);
+  const modelValue = name ? ctx.getFieldValue(name) : undefined;
+  const mergedShowValidateMessage = showValidateMessage ?? ctx.showValidateMessage ?? true;
+  const fieldErrors = name ? ctx.getFieldError(name) : undefined;
+  const fieldError = mergedShowValidateMessage ? fieldErrors?.[0] : undefined;
+  const mergedRequired = required ?? normalizedRules.some(r => r.required);
+  const mergedValidateTrigger = (0, _utils2.normalizeTrigger)(validateTrigger ?? trigger);
   if (renderProps) {
     if (!shouldRender) return null;
-    const node = children({
-      getFieldValue: context.getFieldValue,
-      getFieldsValue: context.getFieldsValue,
-      form: context.form || null
-    });
-    return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, node);
-  }
-  if (!name) {
-    return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children);
+    return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children({
+      getFieldValue: ctx.getFieldValue,
+      getFieldsValue: ctx.getFieldsValue,
+      form: ctx.form || null
+    }));
   }
+  if (!name) return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children);
   if (!shouldRender) return null;
-  const childArray = _react().default.Children.toArray(children);
-  if (childArray.length !== 1) {
-    return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children);
-  }
-  const child = childArray[0];
+  const childrenArray = _react().default.Children.toArray(children);
+  if (childrenArray.length !== 1) return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children);
+  const child = childrenArray[0];
   const handleChange = next => {
-    context.setFieldValue(name, next, trigger);
+    ctx.setFieldValue(name, next, trigger);
     const original = child.props[trigger];
-    if ((0, _utils.isFunction)(original)) {
-      original(next);
-    }
+    if ((0, _utils.isFunction)(original)) original(next);
   };
-  const isFieldLike = (() => {
-    const displayName = child.type.displayName;
-    return (0, _utils.isString)(displayName) && (displayName.includes('Field') || displayName.includes('Input'));
-  })();
-  const resolveValue = () => {
+  const displayName = child.type.displayName;
+  const isFieldLike = (0, _utils.isString)(displayName) && (displayName.includes('Field') || displayName.includes('Input'));
+  const resolvedValue = () => {
     const childValue = child.props[valuePropName];
     if (childValue !== undefined) return childValue;
-    if (mergedValue !== undefined) return mergedValue;
+    if (modelValue !== undefined) return modelValue;
     if (isFieldLike && valuePropName === 'value') return '';
-    return mergedValue;
+    return modelValue;
   };
   const injectedProps = {
-    [valuePropName]: resolveValue(),
+    [valuePropName]: resolvedValue(),
     [trigger]: handleChange
   };
-  mergedValidateTriggers.forEach(eventName => {
+  mergedValidateTrigger.forEach(eventName => {
     if (!eventName || eventName === trigger) return;
     const original = child.props[eventName];
     injectedProps[eventName] = (...args) => {
-      if ((0, _utils.isFunction)(original)) {
-        original(...args);
-      }
-      context.validateField(name, eventName);
+      if ((0, _utils.isFunction)(original)) original(...args);
+      ctx.validateField(name, eventName);
     };
   });
-  if (label !== undefined && child.props.label === undefined) {
-    injectedProps.label = label;
-  }
-  if (context.colon !== undefined && injectedProps.label !== undefined && child.props.colon === undefined) {
-    injectedProps.colon = context.colon;
-  }
-  if (context.labelWidth !== undefined && child.props.labelWidth === undefined) {
-    injectedProps.labelWidth = context.labelWidth;
-  }
-  if (description && child.props.description === undefined) {
-    injectedProps.description = description;
-  }
-  if (intro && child.props.intro === undefined) {
-    injectedProps.intro = intro;
-  }
-  if (tooltip && child.props.tooltip === undefined) {
-    injectedProps.tooltip = tooltip;
-  }
-  if (mergedRequired && child.props.required === undefined) {
-    injectedProps.required = true;
-  }
-  if (firstError && child.props.errorMessage === undefined) {
+  const childProps = child.props;
+  if (label !== undefined && childProps.label === undefined) injectedProps.label = label;
+  if (ctx.colon !== undefined && injectedProps.label !== undefined && childProps.colon === undefined) injectedProps.colon = ctx.colon;
+  if (ctx.labelWidth !== undefined && childProps.labelWidth === undefined) injectedProps.labelWidth = ctx.labelWidth;
+  if (description && childProps.description === undefined) injectedProps.description = description;
+  if (intro && childProps.intro === undefined) injectedProps.intro = intro;
+  if (tooltip && childProps.tooltip === undefined) injectedProps.tooltip = tooltip;
+  if (mergedRequired && childProps.required === undefined) injectedProps.required = true;
+  if (fieldError && childProps.errorMessage === undefined) {
     injectedProps.error = true;
-    injectedProps.errorMessage = firstError;
+    injectedProps.errorMessage = fieldError;
   }
   return /*#__PURE__*/_react().default.cloneElement(child, injectedProps);
 };
-exports.FormItem = FormItem;
-FormItem.displayName = 'FormItem';
+FormItemImpl.displayName = 'FormItem';
+const FormItem = exports.FormItem = /*#__PURE__*/_react().default.memo(FormItemImpl);
+var _default = exports.default = FormItem;

package/dist/cjs/components/form/FormList.js

@@ -14,25 +14,28 @@ function _react() {
 var _FormContext = require("./FormContext");
 var _utils = require("./utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const getList = (context, name) => {
+  const raw = (0, _utils.getValueByName)(context.getFieldsValue(), name);
+  return Array.isArray(raw) ? raw : [];
+};
 const FormList = ({
   name,
   initialValue,
   children
 }) => {
   const context = (0, _react().useContext)(_FormContext.FormContext);
-  const keyRef = (0, _react().useRef)(0);
+  const keyCounterRef = (0, _react().useRef)(0),
+    keysRef = (0, _react().useRef)([]);
   const nameKey = (0, _utils.serializeNamePath)(name);
-  const [listValue, setListValue] = (0, _react().useState)(() => {
-    if (!context) return [];
-    const current = (0, _utils.getValueByName)(context.getFieldsValue(), name);
-    return Array.isArray(current) ? current : [];
-  });
+  const [listValue, setListValue] = (0, _react().useState)(() => context ? getList(context, name) : []);
+  const syncKeys = (0, _react().useCallback)(length => {
+    const keys = keysRef.current;
+    while (keys.length < length) keys.push(keyCounterRef.current++);
+    if (keys.length > length) keysRef.current = keys.slice(0, length);
+  }, []);
   const ensureInitial = (0, _react().useCallback)(() => {
     if (!context) return;
-    const current = (0, _utils.getValueByName)(context.getFieldsValue(), name);
-    if (current === undefined && initialValue !== undefined) {
-      context.setFieldValue(name, initialValue);
-    }
+    if ((0, _utils.getValueByName)(context.getFieldsValue(), name) === undefined && initialValue !== undefined) context.setFieldValue(name, initialValue);
   }, [context, initialValue, name]);
   (0, _react().useEffect)(() => {
     ensureInitial();
@@ -41,38 +44,47 @@ const FormList = ({
     if (!context?.subscribe) return undefined;
     return context.subscribe((changed, all) => {
       if (_utils.FORM_ALL_FIELDS_KEY in changed || nameKey in changed) {
-        const nextRaw = (0, _utils.getValueByName)(all, name);
-        setListValue(Array.isArray(nextRaw) ? nextRaw : []);
+        const next = (0, _utils.getValueByName)(all, name);
+        const nl = Array.isArray(next) ? next : [];
+        syncKeys(nl.length);
+        setListValue(nl);
       }
     });
-  }, [context, name, nameKey]);
-  if (!context) {
-    return null;
-  }
-  const fields = listValue.map((_, index) => ({
-    name: index,
-    key: keyRef.current + index,
-    isListField: true
-  }));
-  const add = (defaultValue, index) => {
-    const insertIndex = typeof index === 'number' ? index : listValue.length;
-    const next = [...listValue];
-    next.splice(insertIndex, 0, defaultValue);
-    context.setFieldValue(name, next);
-    keyRef.current += 1;
-  };
-  const remove = index => {
-    if (index < 0 || index >= listValue.length) return;
-    const next = listValue.slice(0, index).concat(listValue.slice(index + 1));
+  }, [context, name, nameKey, syncKeys]);
+  const add = (0, _react().useCallback)((defaultValue, index) => {
+    if (!context) return;
+    const arr = getList(context, name),
+      i = typeof index === 'number' ? index : arr.length,
+      next = [...arr];
+    next.splice(i, 0, defaultValue);
+    keysRef.current.splice(i, 0, keyCounterRef.current++);
     context.setFieldValue(name, next);
-  };
-  const move = (from, to) => {
-    if (from === to || from < 0 || to < 0 || from >= listValue.length || to >= listValue.length) return;
-    const next = [...listValue];
-    const item = next.splice(from, 1)[0];
+  }, [context, name]);
+  const remove = (0, _react().useCallback)(index => {
+    if (!context) return;
+    const arr = getList(context, name);
+    if (index < 0 || index >= arr.length) return;
+    keysRef.current.splice(index, 1);
+    context.setFieldValue(name, arr.slice(0, index).concat(arr.slice(index + 1)));
+  }, [context, name]);
+  const move = (0, _react().useCallback)((from, to) => {
+    if (!context) return;
+    const arr = getList(context, name);
+    if (from === to || from < 0 || to < 0 || from >= arr.length || to >= arr.length) return;
+    const next = [...arr],
+      item = next.splice(from, 1)[0];
     next.splice(to, 0, item);
+    const [movedKey] = keysRef.current.splice(from, 1);
+    keysRef.current.splice(to, 0, movedKey);
     context.setFieldValue(name, next);
-  };
+  }, [context, name]);
+  if (!context) return null;
+  syncKeys(listValue.length);
+  const fields = listValue.map((_, i) => ({
+    name: i,
+    key: keysRef.current[i],
+    isListField: true
+  }));
   return /*#__PURE__*/_react().default.createElement(_react().default.Fragment, null, children(fields, {
     add,
     remove,

package/dist/cjs/components/form/tokens.js

@@ -5,7 +5,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useFormTokens = void 0;
 var _designSystem = require("../../design-system");
-const createFormTokens = _foundations => {
-  return {};
-};
+const createFormTokens = _foundations => ({
+  defaults: {
+    showValidateMessage: true,
+    defaultValidationMessage: 'Validation failed'
+  }
+});
 const useFormTokens = exports.useFormTokens = (0, _designSystem.createComponentTokensHook)('form', createFormTokens);

package/dist/cjs/components/form/utils.js

@@ -12,30 +12,21 @@ const toNamePath = name => {
   if (name === undefined || name === null) return [];
   if (Array.isArray(name)) return name;
   if ((0, _utils.isNumber)(name)) return [name];
-  if ((0, _utils.isString)(name)) {
-    return name.split('.');
-  }
+  if ((0, _utils.isString)(name)) return name.split('.');
   return [String(name)];
 };
 exports.toNamePath = toNamePath;
-const serializeNamePath = name => {
-  const path = toNamePath(name);
-  return path.join('.');
-};
+const serializeNamePath = name => toNamePath(name).join('.');
 exports.serializeNamePath = serializeNamePath;
 const getValueByName = (source, name) => {
-  const path = toNamePath(name);
-  return path.reduce((acc, key) => {
+  return toNamePath(name).reduce((acc, key) => {
     if (acc == null) return acc;
-    const keyStr = String(key);
+    const k = String(key);
     if (Array.isArray(acc)) {
-      const index = Number(keyStr);
-      return Number.isFinite(index) ? acc[index] : acc[keyStr];
+      const i = Number(k);
+      return Number.isFinite(i) ? acc[i] : acc[k];
     }
-    if (typeof acc === 'object') {
-      return acc[keyStr];
-    }
-    return undefined;
+    return typeof acc === 'object' ? acc[k] : undefined;
   }, source);
 };
 exports.getValueByName = getValueByName;
@@ -47,28 +38,18 @@ const setValueByName = (source, name, value) => {
   } : {};
   let cursor = clone;
   path.forEach((key, index) => {
-    const keyStr = String(key);
-    const keyIndex = Number(keyStr);
+    const k = String(key),
+      ki = Number(k);
     if (index === path.length - 1) {
-      if (Array.isArray(cursor) && Number.isFinite(keyIndex)) {
-        cursor[keyIndex] = value;
-      } else {
-        ;
-        cursor[keyStr] = value;
-      }
+      if (Array.isArray(cursor) && Number.isFinite(ki)) cursor[ki] = value;else cursor[k] = value;
       return;
     }
-    const nextVal = Array.isArray(cursor) && Number.isFinite(keyIndex) ? cursor[keyIndex] : cursor[keyStr];
-    const nextContainer = nextVal === undefined || nextVal === null ? (0, _utils.isNumber)(path[index + 1]) ? [] : {} : Array.isArray(nextVal) ? [...nextVal] : typeof nextVal === 'object' ? {
-      ...nextVal
+    const nv = Array.isArray(cursor) && Number.isFinite(ki) ? cursor[ki] : cursor[k];
+    const nc = nv === undefined || nv === null ? (0, _utils.isNumber)(path[index + 1]) ? [] : {} : Array.isArray(nv) ? [...nv] : typeof nv === 'object' ? {
+      ...nv
     } : {};
-    if (Array.isArray(cursor) && Number.isFinite(keyIndex)) {
-      cursor[keyIndex] = nextContainer;
-    } else {
-      ;
-      cursor[keyStr] = nextContainer;
-    }
-    cursor = nextContainer;
+    if (Array.isArray(cursor) && Number.isFinite(ki)) cursor[ki] = nc;else cursor[k] = nc;
+    cursor = nc;
   });
   return clone;
 };

package/dist/cjs/components/grid/Grid.js

@@ -23,7 +23,7 @@ var _tokens = require("./tokens");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 const GridContext = exports.GridContext = /*#__PURE__*/_react().default.createContext(null);
-const Grid = props => {
+const GridImpl = props => {
   const {
     tokensOverride,
     children,
@@ -42,24 +42,24 @@ const Grid = props => {
   } = props;
   const tokens = (0, _tokens.useGridTokens)(tokensOverride);
   const columnNum = (0, _react().useMemo)(() => {
-    const columnNumValue = columnNumProp ?? tokens.defaults.columnNum;
-    return Number.isFinite(columnNumValue) && columnNumValue > 0 ? Math.floor(columnNumValue) : tokens.defaults.columnNum;
+    const value = columnNumProp ?? tokens.defaults.columnNum;
+    return Number.isFinite(value) && value > 0 ? Math.floor(value) : tokens.defaults.columnNum;
   }, [columnNumProp, tokens.defaults.columnNum]);
   const gutter = (0, _react().useMemo)(() => {
-    const gutterValue = gutterProp ?? tokens.defaults.gutter;
-    return Number.isFinite(gutterValue) && gutterValue > 0 ? gutterValue : 0;
+    const value = gutterProp ?? tokens.defaults.gutter;
+    return Number.isFinite(value) && value > 0 ? value : 0;
   }, [gutterProp, tokens.defaults.gutter]);
-  const border = (0, _react().useMemo)(() => borderProp ?? tokens.defaults.border, [borderProp, tokens.defaults.border]);
-  const center = (0, _react().useMemo)(() => centerProp ?? tokens.defaults.center, [centerProp, tokens.defaults.center]);
-  const square = (0, _react().useMemo)(() => squareProp ?? tokens.defaults.square, [squareProp, tokens.defaults.square]);
-  const direction = (0, _react().useMemo)(() => directionProp ?? tokens.defaults.direction, [directionProp, tokens.defaults.direction]);
-  const reverse = (0, _react().useMemo)(() => reverseProp ?? tokens.defaults.reverse, [reverseProp, tokens.defaults.reverse]);
-  const clickable = (0, _react().useMemo)(() => clickableProp ?? tokens.defaults.clickable, [clickableProp, tokens.defaults.clickable]);
+  const border = borderProp ?? tokens.defaults.border;
+  const center = centerProp ?? tokens.defaults.center;
+  const square = squareProp ?? tokens.defaults.square;
+  const direction = directionProp ?? tokens.defaults.direction;
+  const reverse = reverseProp ?? tokens.defaults.reverse;
+  const clickable = clickableProp ?? tokens.defaults.clickable;
   const iconSize = (0, _react().useMemo)(() => {
-    const iconSizeValue = iconSizeProp ?? tokens.defaults.iconSize;
-    return Number.isFinite(iconSizeValue) && iconSizeValue > 0 ? iconSizeValue : tokens.defaults.iconSize;
+    const value = iconSizeProp ?? tokens.defaults.iconSize;
+    return Number.isFinite(value) && value > 0 ? value : tokens.defaults.iconSize;
   }, [iconSizeProp, tokens.defaults.iconSize]);
-  const childArray = (0, _react().useMemo)(() => _react().default.Children.toArray(children).filter(child => /*#__PURE__*/_react().default.isValidElement(child)), [children]);
+  const childrenArray = (0, _react().useMemo)(() => _react().default.Children.toArray(children).filter(child => /*#__PURE__*/_react().default.isValidElement(child)), [children]);
   const showBorder = border && !gutter;
   const borderColor = tokens.colors.border;
   const topBorder = (0, _react().useMemo)(() => showBorder ? /*#__PURE__*/_react().default.createElement(_reactNative().View, {
@@ -81,19 +81,19 @@ const Grid = props => {
     })]
   }) : null, [borderColor, showBorder, tokens.layout.border, tokens.layout.borderBottom]);
   const contextValue = (0, _react().useMemo)(() => ({
-    columnNum,
-    gutter,
-    border,
-    center,
-    square,
-    direction,
-    reverse,
-    clickable,
-    iconSize,
+    columnNum: columnNum,
+    gutter: gutter,
+    border: border,
+    center: center,
+    square: square,
+    direction: direction,
+    reverse: reverse,
+    clickable: clickable,
+    iconSize: iconSize,
     iconColor,
-    count: childArray.length,
-    tokens
-  }), [border, center, childArray.length, clickable, columnNum, direction, gutter, iconColor, iconSize, reverse, square, tokens]);
+    count: childrenArray.length,
+    tokens: tokens
+  }), [border, center, childrenArray.length, clickable, columnNum, direction, gutter, iconColor, iconSize, reverse, square, tokens]);
   const webGridStyle = (0, _react().useMemo)(() => _reactNative().Platform.OS === 'web' ? {
     display: 'grid',
     gridTemplateColumns: `repeat(${columnNum}, minmax(0, 1fr))`,
@@ -103,15 +103,16 @@ const Grid = props => {
   const containerStyle = (0, _react().useMemo)(() => [tokens.layout.container, _reactNative().Platform.OS === 'web' ? webGridStyle : gutter ? {
     paddingLeft: gutter
   } : undefined, style], [gutter, style, tokens.layout.container, webGridStyle]);
-  const renderedChildren = (0, _react().useMemo)(() => childArray.map((child, index) => /*#__PURE__*/_react().default.cloneElement(child, {
+  const renderedChildren = (0, _react().useMemo)(() => childrenArray.map((child, index) => /*#__PURE__*/_react().default.cloneElement(child, {
     gridItemIndex: index,
     key: child.key ?? index
-  })), [childArray]);
+  })), [childrenArray]);
   return /*#__PURE__*/_react().default.createElement(GridContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/_react().default.createElement(_reactNative().View, _extends({
+    accessibilityRole: 'grid',
     style: containerStyle
   }, rest), topBorder, renderedChildren, bottomBorder));
 };
-exports.Grid = Grid;
+const Grid = exports.Grid = /*#__PURE__*/_react().default.memo(GridImpl);
 Grid.displayName = 'Grid';