[EuiInlineEdit] (POC Review) Create Component Directory and Base Functionality

src-docs/src/routes.js

@@ -149,6 +149,8 @@ import { IconExample } from './views/icon/icon_example';
 
 import { ImageExample } from './views/image/image_example';
 
+import { InlineEditExample } from './views/inline_edit/inline_edit_example';
+
 import { InnerTextExample } from './views/inner_text/inner_text_example';
 
 import { KeyPadMenuExample } from './views/key_pad_menu/key_pad_menu_example';
@@ -557,6 +559,7 @@ const navigation = [
       HealthExample,
       IconExample,
       ImageExample,
+      InlineEditExample,
       ListGroupExample,
       LoadingExample,
       NotificationEventExample,

src-docs/src/views/inline_edit/inline_edit.tsx

@@ -0,0 +1,93 @@
+import React, { useState } from 'react';
+
+import {
+  EuiInlineEdit,
+  EuiFieldText,
+  EuiComboBox,
+  EuiTextArea,
+  EuiComboBoxProps,
+  EuiHorizontalRule,
+  EuiSpacer,
+} from '../../../../src/components';
+
+const optionsStatic = [
+  {
+    label: 'Titan',
+    'data-test-subj': 'titanOption',
+  },
+  {
+    label: 'Enceladus is disabled',
+    disabled: true,
+  },
+  {
+    label: 'Mimas',
+  },
+  {
+    label: 'Dione',
+  },
+  {
+    label: 'Iapetus',
+  },
+  {
+    label: 'Phoebe',
+  },
+  {
+    label: 'Rhea',
+  },
+  {
+    label:
+      "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
+  },
+  {
+    label: 'Tethys',
+  },
+  {
+    label: 'Hyperion',
+  },
+];
+
+export default () => {
+  const [options, setOptions] = useState(optionsStatic);
+  const [selectedOptions, setSelected] = useState([options[2], options[4]]);
+
+  const onChange = (selectedOptions: any) => {
+    setSelected(selectedOptions);
+  };
+
+  return (
+    <>
+      {/* Base components */}
+      <h3>EuiInlineEdit - Text</h3>
+      <EuiInlineEdit
+        editViewType={EuiFieldText}
+        defaultValue="helloWorld"
+        editViewTypeProps={{ id: 'hello' }}
+      />
+      <EuiHorizontalRule />
+
+      <h3>EuiInlineEdit - Textarea</h3>
+      <EuiInlineEdit
+        editViewType={EuiTextArea}
+        defaultValue="Tiramisu jelly beans sweet croissant macaroon topping. Gummies fruitcake sesame snaps lollipop chocolate cake lemon drops icing. Cake cake croissant ice cream jujubes donut toffee. Gummies jelly tiramisu cheesecake brownie icing gummi bears candy canes."
+        editViewTypeProps={{ id: 'hello' }}
+      />
+      <EuiHorizontalRule />
+
+      <h3>EuiInlineEdit - Select</h3>
+      <EuiInlineEdit
+        editViewType={EuiComboBox}
+        editViewTypeProps={{
+          isClearable: true,
+          options: options,
+          placeholder: 'Select or create options',
+          selectedOptions: selectedOptions,
+          onChange: onChange,
+          'data-test-subj': 'demoComboBox',
+          'aria-label': 'Accessible screen reader label',
+          autoFocus: true,
+        }}
+      />
+      <EuiHorizontalRule />
+    </>
+  );
+};

src-docs/src/views/inline_edit/inline_edit_example.js

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { GuideSectionTypes } from '../../components';
+
+import { EuiText, EuiInlineEdit } from '../../../../src';
+
+import InlineEdit from './inline_edit';
+const inlineEditSource = require('!!raw-loader!./inline_edit');
+
+export const InlineEditExample = {
+  title: 'Inline edit',
+  intro: (
+    <>
+      <EuiText>
+        Hello! This is where the EuiInlineEdit documentation intro will go!
+      </EuiText>
+    </>
+  ),
+  sections: [
+    {
+      title: 'Inline edit',
+      text: (
+        <>
+          <p>
+            Description needed: how to use the <strong>EuiInlineEdit</strong>{' '}
+            component.
+          </p>
+        </>
+      ),
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: inlineEditSource,
+        },
+      ],
+      demo: <InlineEdit />,
+      props: { EuiInlineEdit },
+    },
+  ],
+};

src/components/common.ts

@@ -246,3 +246,18 @@ export type RecursivePartial<T> = {
     : RecursivePartial<T[P]>; // recurse for all non-array and non-primitive values
 };
 type NonAny = number | boolean | string | symbol | null;
+
+// `Defaultize` copied out of @types/react
+type Defaultize<P, D> = P extends any
+  ? string extends keyof P
+    ? P
+    : Pick<P, Exclude<keyof P, keyof D>> &
+        Partial<Pick<P, Extract<keyof P, keyof D>>> &
+        Partial<Pick<D, Exclude<keyof D, keyof P>>>
+  : never;
+
+export type WithDefaultPropsApplied<
+  T extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>
+> = T extends { defaultProps: infer D }
+  ? Defaultize<ComponentProps<T>, D>
+  : ComponentProps<T>;

src/components/index.ts

@@ -89,6 +89,8 @@ export * from './icon';
 
 export * from './image';
 
+export * from './inline_edit';
+
 export * from './inner_text';
 
 export * from './i18n';

src/components/inline_edit/index.ts

@@ -0,0 +1,9 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+export { EuiInlineEdit } from './inline_edit';