@react-ui-org/react-ui 0.52.1 → 0.53.0

package/src/{lib/components/CheckboxField/README.mdx → components/CheckboxField/README.md}

@@ -1,19 +1,7 @@
----
-name: CheckboxField
-menu: 'Inputs'
-route: /components/checkbox-field
----
-
 # CheckboxField
 
 CheckboxField allows users to select one or more options from a set.
 
-import {
-  Playground,
-  Props,
-} from 'docz'
-import { CheckboxField } from '../..'
-
 ## Basic Usage
 
 To implement the CheckboxField component, you need to import it first:
@@ -24,18 +12,18 @@ import { CheckboxField } from '@react-ui-org/react-ui';
 
 And use it:
 
-<Playground>
-  {() => {
-    const [agree, setAgree] = React.useState(true);
-    return (
-      <CheckboxField
-        checked={agree}
-        label="I agree"
-        onChange={() => setAgree(!agree)}
-      />
-    );
-  }}
-</Playground>
+```docoff-react-preview
+React.createElement(() => {
+  const [agree, setAgree] = React.useState(true);
+  return (
+    <CheckboxField
+      checked={agree}
+      label="I agree"
+      onChange={() => setAgree(!agree)}
+    />
+  );
+});
+```
 
 See [API](#api) for all available options.
 
@@ -44,13 +32,13 @@ See [API](#api) for all available options.
 - Use the CheckboxField when there are lists of options and the user may
   **select any number of choices,** including zero, one, or several. For
   selecting just a single option from the list, use either the
-  [Radio](/components/radio) or [SelectField](/components/select-field)
+  [Radio](/components/Radio) or [SelectField](/components/SelectField)
   component.
 
 - Use the CheckboxField for boolean (true/false) input **in forms that require
   to be confirmed** by a button to become active. To toggle things on or off
   with an immediate effect (without confirmation), use rather the
-  [Toggle](/components/toggle) component.
+  [Toggle](/components/Toggle) component.
 
 - **Use positive wording for the checkbox label,** so that it's clear what will
   happen when the user turns on the checkbox. Avoid negations such as “Don't
@@ -76,54 +64,54 @@ See [API](#api) for all available options.
 You may provide an additional help text to clarify what will be the impact of
 turning the checkbox on or off.
 
-<Playground>
-  {() => {
-    const [getNewsletter, setGetNewsletter] = React.useState(true);
-    return (
-      <CheckboxField
-        checked={getNewsletter}
-        helpText="We will not bother you more than once a month, we promise!"
-        label="Send me newsletter"
-        onChange={() => setGetNewsletter(!getNewsletter)}
-      />
-    );
-  }}
-</Playground>
+```docoff-react-preview
+React.createElement(() => {
+  const [getNewsletter, setGetNewsletter] = React.useState(true);
+  return (
+    <CheckboxField
+      checked={getNewsletter}
+      helpText="We will not bother you more than once a month, we promise!"
+      label="Send me newsletter"
+      onChange={() => setGetNewsletter(!getNewsletter)}
+    />
+  );
+});
+```
 
 ## Label Options
 
 In some cases, it may be convenient to visually hide the checkbox label. The
 label remains accessible to assistive technologies.
 
-<Playground>
-  {() => {
-    const [checked, setChecked] = React.useState(true);
-    return (
-      <CheckboxField
-        checked={checked}
-        isLabelVisible={false}
-        label="You cannot see this"
-        onChange={() => setChecked(!checked)}
-      />
-    );
-  }}
-</Playground>
+```docoff-react-preview
+React.createElement(() => {
+  const [checked, setChecked] = React.useState(true);
+  return (
+    <CheckboxField
+      checked={checked}
+      isLabelVisible={false}
+      label="You cannot see this"
+      onChange={() => setChecked(!checked)}
+    />
+  );
+});
+```
 
 It's also possible to display label before input:
 
-<Playground>
-  {() => {
-    const [checked, setChecked] = React.useState(true);
-    return (
-      <CheckboxField
-        checked={checked}
-        label="Label precedes input"
-        labelPosition="before"
-        onChange={() => setChecked(!checked)}
-      />
-    );
-  }}
-</Playground>
+```docoff-react-preview
+React.createElement(() => {
+  const [checked, setChecked] = React.useState(true);
+  return (
+    <CheckboxField
+      checked={checked}
+      label="Label precedes input"
+      labelPosition="before"
+      onChange={() => setChecked(!checked)}
+    />
+  );
+});
+```
 
 ## States
 
@@ -134,52 +122,52 @@ should always **provide validation message for states other than valid** so
 users know what happened and what action they should take or what options they
 have.
 
-<Playground>
-  {() => {
-    const [agree, setAgree] = React.useState(true);
-    return (
-      <>
-        <CheckboxField
-          checked={agree}
-          label="I have read and agree with terms and conditions"
-          onChange={() => setAgree(!agree)}
-          validationState="valid"
-        />
-        <CheckboxField
-          checked={agree}
-          label="I have read and agree with terms and conditions"
-          onChange={() => setAgree(!agree)}
-          validationState="warning"
-          validationText="Please wait 10 minutes until we verify your data."
-        />
-        <CheckboxField
-          checked={agree}
-          label="I have read and agree with terms and conditions"
-          onChange={() => setAgree(!agree)}
-          required
-          validationState="invalid"
-          validationText="You must agree to be able to proceed."
-        />
-      </>
-    );
-  }}
-</Playground>
+```docoff-react-preview
+React.createElement(() => {
+  const [agree, setAgree] = React.useState(true);
+  return (
+    <>
+      <CheckboxField
+        checked={agree}
+        label="I have read and agree with terms and conditions"
+        onChange={() => setAgree(!agree)}
+        validationState="valid"
+      />
+      <CheckboxField
+        checked={agree}
+        label="I have read and agree with terms and conditions"
+        onChange={() => setAgree(!agree)}
+        validationState="warning"
+        validationText="Please wait 10 minutes until we verify your data."
+      />
+      <CheckboxField
+        checked={agree}
+        label="I have read and agree with terms and conditions"
+        onChange={() => setAgree(!agree)}
+        required
+        validationState="invalid"
+        validationText="You must agree to be able to proceed."
+      />
+    </>
+  );
+});
+```
 
 ### Disabled State
 
 Disabled state makes the input unavailable.
 
-<Playground>
-  <CheckboxField
-    disabled
-    label="Disabled checkbox"
-  />
-  <CheckboxField
-    checked
-    disabled
-    label="Disabled checkbox, checked"
-  />
-</Playground>
+```docoff-react-preview
+<CheckboxField
+  disabled
+  label="Disabled checkbox"
+/>
+<CheckboxField
+  checked
+  disabled
+  label="Disabled checkbox, checked"
+/>
+```
 
 ## Forwarding HTML Attributes
 
@@ -198,11 +186,11 @@ If you provide [ref], it is forwarded to the native HTML `<input>` element.
 
 ## API
 
-<Props table of={CheckboxField} />
+<docoff-react-props src="/components/CheckboxField/CheckboxField.jsx"></docoff-react-props>
 
 ## Theming
 
-Head to [Forms Theming](/customize/theming/forms) to see shared form theming
+Head to [Forms Theming](/docs/customize/theming/forms) to see shared form theming
 options. On top of that, the following options are available for CheckboxField.
 
 | Custom Property                                                      | Description                                  |

package/src/{lib/components/FileInputField/README.mdx → components/FileInputField/README.md}

@@ -1,19 +1,7 @@
----
-name: FileInputField
-menu: 'Inputs'
-route: /components/file-input-field
----
-
 # FileInputField
 
 FileInputField allows users to select files to upload.
 
-import {
-  Playground,
-  Props,
-} from 'docz'
-import { FileInputField } from '../..'
-
 ## Basic Usage
 
 To implement the FileInputField component, you need to import it first:
@@ -24,9 +12,9 @@ import { FileInputField } from '@react-ui-org/react-ui';
 
 And use it:
 
-<Playground>
-  <FileInputField label="Attachment" />
-</Playground>
+```docoff-react-preview
+<FileInputField label="Attachment" />
+```
 
 See [API](#api) for all available options.
 
@@ -59,12 +47,12 @@ layout perspective, FileInputFields work just like any other form fields.
 
 Full-width fields span the full width of a parent:
 
-<Playground>
-  <FileInputField
-    fullWidth
-    label="First name"
-  />
-</Playground>
+```docoff-react-preview
+<FileInputField
+  fullWidth
+  label="First name"
+/>
+```
 
 ## Invisible Label
 
@@ -75,12 +63,12 @@ While it may be acceptable for simple forms with just a few fields, it's
 dangerous to hide labels from users in most cases. Keep in mind you should
 **provide another visual clue** so users know what to fill into the input.
 
-<Playground>
-  <FileInputField
-    isLabelVisible={false}
-    label="Attachment"
-  />
-</Playground>
+```docoff-react-preview
+<FileInputField
+  isLabelVisible={false}
+  label="Attachment"
+/>
+```
 
 ## Horizontal Layout
 
@@ -88,41 +76,41 @@ The default vertical layout is very easy to use and work with. However, there
 are situations where horizontal layout suits better — and that's why React UI
 supports this kind of layout as well.
 
-<Playground>
-  <FileInputField
-    label="Attachment"
-    layout="horizontal"
-  />
-  <FileInputField
-    fullWidth
-    isLabelVisible={false}
-    label="Attachment"
-    layout="horizontal"
-  />
-</Playground>
+```docoff-react-preview
+<FileInputField
+  label="Attachment"
+  layout="horizontal"
+/>
+<FileInputField
+  fullWidth
+  isLabelVisible={false}
+  label="Attachment"
+  layout="horizontal"
+/>
+```
 
 ## Help Text
 
 You may provide an additional help text to clarify how the input should be
 filled.
 
-<Playground>
-  <FileInputField
-    helpText="Choose one or more files to upload."
-    label="Attachment"
-  />
-  <FileInputField
-    helpText="Choose one or more files to upload."
-    label="Attachment"
-    layout="horizontal"
-  />
-  <FileInputField
-    fullWidth
-    helpText="Choose one or more files to upload."
-    label="Attachment"
-    layout="horizontal"
-  />
-</Playground>
+```docoff-react-preview
+<FileInputField
+  helpText="Choose one or more files to upload."
+  label="Attachment"
+/>
+<FileInputField
+  helpText="Choose one or more files to upload."
+  label="Attachment"
+  layout="horizontal"
+/>
+<FileInputField
+  fullWidth
+  helpText="Choose one or more files to upload."
+  label="Attachment"
+  layout="horizontal"
+/>
+```
 
 ## States
 
@@ -133,37 +121,37 @@ should always **provide a validation message for states other than valid** so
 users know what happened and what action they should take or what options they
 have.
 
-<Playground>
-  <FileInputField
-    label="Attachment"
-    validationState="valid"
-    validationText="Looks good!"
-  />
-  <FileInputField
-    label="Attachment"
-    validationState="invalid"
-    validationText="Your file is too big. Please select something smaller."
-  />
-  <FileInputField
-    label="Attachment"
-    validationState="warning"
-    validationText={`
-      You selected more than 10 files.
-      It may take some time before we process them.
-    `}
-  />
-</Playground>
+```docoff-react-preview
+<FileInputField
+  label="Attachment"
+  validationState="valid"
+  validationText="Looks good!"
+/>
+<FileInputField
+  label="Attachment"
+  validationState="invalid"
+  validationText="Your file is too big. Please select something smaller."
+/>
+<FileInputField
+  label="Attachment"
+  validationState="warning"
+  validationText={`
+    You selected more than 10 files.
+    It may take some time before we process them.
+  `}
+/>
+```
 
 ### Disabled State
 
 It's possible to disable the whole input.
 
-<Playground>
-  <FileInputField
-    disabled
-    label="Attachment"
-  />
-</Playground>
+```docoff-react-preview
+<FileInputField
+  disabled
+  label="Attachment"
+/>
+```
 
 ## Forwarding HTML Attributes
 
@@ -173,17 +161,17 @@ you like.** All attributes that don't interfere with the API are forwarded to
 the native HTML `<input>`. This enables making the component interactive and
 helps to improve its accessibility.
 
-<Playground>
-  <FileInputField
-    accept=".pdf,.jpg,.jpeg,.png"
-    helpText={`
-      Choose up to 10 files. Allowed extensions are .pdf, .jpg, .jpeg, or .png.
-      Size limit is 10 MB.
-    `}
-    label="Attachment"
-    multiple
-  />
-</Playground>
+```docoff-react-preview
+<FileInputField
+  accept=".pdf,.jpg,.jpeg,.png"
+  helpText={`
+    Choose up to 10 files. Allowed extensions are .pdf, .jpg, .jpeg, or .png.
+    Size limit is 10 MB.
+  `}
+  label="Attachment"
+  multiple
+/>
+```
 
 👉 Refer to the MDN reference for the full list of supported attributes of the
 [file] input type.
@@ -194,11 +182,11 @@ If you provide [ref], it is forwarded to the native HTML `<input>` element.
 
 ## API
 
-<Props table of={FileInputField} />
+<docoff-react-props src="/components/FileInputField/FileInputField.jsx"></docoff-react-props>
 
 ## Theming
 
-Head to [Forms Theming](/customize/theming/forms) to see shared form theming
+Head to [Forms Theming](/docs/customize/theming/forms) to see shared form theming
 options.
 
 [React synthetic events]: https://reactjs.org/docs/events.html

package/src/{lib/components → components}/FormLayout/FormLayout.jsx

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { withGlobalProps } from '../../provider';
 import { transferProps } from '../_helpers/transferProps';
 import { classNames } from '../../utils/classNames';
@@ -16,6 +16,8 @@ export const FormLayout = ({
   labelWidth,
   ...restProps
 }) => {
+  const childProps = useMemo(() => ({ layout: fieldLayout }), [fieldLayout]);
+
   if (isChildrenEmpty(children)) {
     return null;
   }
@@ -57,9 +59,7 @@ export const FormLayout = ({
       )}
       {...hasCustomLabelWidth ? { style: { '--rui-custom-label-width': labelWidth } } : {}}
     >
-      <FormLayoutContext.Provider
-        value={{ layout: fieldLayout }}
-      >
+      <FormLayoutContext.Provider value={childProps}>
         {children}
       </FormLayoutContext.Provider>
     </div>