Remove optional chaining as it breaks the docz Props component and the API section in documentation is thus not rendered

Author: mbohal

src/lib/components/layout/FormLayout/FormLayoutCustomField.jsx

@@ -52,7 +52,7 @@ export const FormLayoutCustomField = ({
       className={[
         styles.root,
         fullWidth ? styles.isRootFullWidth : '',
-        context?.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
+        context && context.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
         disabled ? styles.isRootDisabled : '',
         required ? styles.isRootRequired : '',
         getRootSizeClassName(innerFieldSize, styles),

src/lib/components/ui/Button/Button.jsx

@@ -46,21 +46,21 @@ export const Button = ({
           : [
             styles.root,
             getRootPriorityClassName(
-              resolveContextOrProp(context?.priority, priority),
+              resolveContextOrProp(context && context.priority, priority),
               styles,
             ),
             getRootColorClassName(color, styles),
             getRootSizeClassName(
-              resolveContextOrProp(context?.size, size),
+              resolveContextOrProp(context && context.size, size),
               styles,
             ),
             getRootLabelVisibilityClassName(labelVisibility, styles),
-            resolveContextOrProp(context?.block, block) ? styles.rootBlock : '',
+            resolveContextOrProp(context && context.block, block) ? styles.rootBlock : '',
             context ? styles.rootGrouped : '',
             loadingIcon ? styles.isRootLoading : '',
           ].join(' ')
       }
-      disabled={resolveContextOrProp(context?.disabled, disabled) || !!loadingIcon}
+      disabled={resolveContextOrProp(context && context.disabled, disabled) || !!loadingIcon}
       id={id}
       onClick={clickHandler}
       ref={forwardedRef}

src/lib/components/ui/CheckboxField/CheckboxField.jsx

@@ -30,7 +30,7 @@ export const CheckboxField = ({
       className={[
         styles.root,
         context ? styles.isRootInFormLayout : '',
-        context?.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
+        context && context.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
         labelPosition === 'before' ? styles.hasRootLabelBefore : '',
         disabled ? styles.isRootDisabled : '',
         required ? styles.isRootRequired : '',

src/lib/components/ui/FileInputField/FileInputField.jsx

@@ -31,7 +31,7 @@ export const FileInputField = ({
         styles.root,
         fullWidth ? styles.isRootFullWidth : '',
         context ? styles.isRootInFormLayout : '',
-        resolveContextOrProp(context?.layout, layout) === 'horizontal'
+        resolveContextOrProp(context && context.layout, layout) === 'horizontal'
           ? styles.rootLayoutHorizontal
           : styles.rootLayoutVertical,
         disabled ? styles.isRootDisabled : '',

src/lib/components/ui/Radio/Radio.jsx

@@ -29,7 +29,7 @@ export const Radio = ({
       className={[
         styles.root,
         context ? styles.isRootInFormLayout : '',
-        resolveContextOrProp(context?.layout, layout) === 'horizontal'
+        resolveContextOrProp(context && context.layout, layout) === 'horizontal'
           ? styles.rootLayoutHorizontal
           : styles.rootLayoutVertical,
         disabled ? styles.isRootDisabled : '',

src/lib/components/ui/SelectField/SelectField.jsx

@@ -36,7 +36,7 @@ export const SelectField = ({
         styles.root,
         fullWidth ? styles.isRootFullWidth : '',
         context ? styles.isRootInFormLayout : '',
-        resolveContextOrProp(context?.layout, layout) === 'horizontal'
+        resolveContextOrProp(context && context.layout, layout) === 'horizontal'
           ? styles.rootLayoutHorizontal
           : styles.rootLayoutVertical,
         disabled ? styles.isRootDisabled : '',

src/lib/components/ui/TextArea/TextArea.jsx

@@ -38,7 +38,7 @@ export const TextArea = ({
         styles.root,
         fullWidth ? styles.isRootFullWidth : '',
         context ? styles.isRootInFormLayout : '',
-        resolveContextOrProp(context?.layout, layout) === 'horizontal'
+        resolveContextOrProp(context && context.layout, layout) === 'horizontal'
           ? styles.rootLayoutHorizontal
           : styles.rootLayoutVertical,
         disabled ? styles.isRootDisabled : '',

src/lib/components/ui/TextField/TextField.jsx

@@ -42,7 +42,7 @@ export const TextField = ({
         fullWidth ? styles.isRootFullWidth : '',
         hasSmallInput ? styles.hasRootSmallInput : '',
         context ? styles.isRootInFormLayout : '',
-        resolveContextOrProp(context?.layout, layout) === 'horizontal'
+        resolveContextOrProp(context && context.layout, layout) === 'horizontal'
           ? styles.rootLayoutHorizontal
           : styles.rootLayoutVertical,
         disabled ? styles.isRootDisabled : '',

src/lib/components/ui/Toggle/Toggle.jsx

@@ -30,7 +30,7 @@ export const Toggle = ({
       className={[
         styles.root,
         context ? styles.isRootInFormLayout : '',
-        context?.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
+        context && context.layout === 'horizontal' ? styles.rootLayoutHorizontal : styles.rootLayoutVertical,
         labelPosition === 'before' ? styles.hasRootLabelBefore : '',
         disabled ? styles.isRootDisabled : '',
         required ? styles.isRootRequired : '',