@instructure/ui-editable 8.25.1-snapshot.0 → 8.26.1-snapshot-1

package/types/Editable/index.d.ts

@@ -1,29 +1,30 @@
-import { Component } from 'react';
-import type { EditableProps } from './props';
+import React, { Component } from 'react';
+import { EditableState } from './props';
+import type { EditableProps, GetContainerProps, GetEditButtonProps, GetEditorProps, GetViewerProps } from './props';
 /**
 ---
 category: components
-experimental: true
 ---
+@tsProps
 **/
 declare class Editable extends Component<EditableProps> {
     static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
         mode: "view" | "edit";
-        onChangeMode: (...args: any[]) => any;
-        children?: ((...args: any[]) => any) | undefined;
-        render?: ((...args: any[]) => any) | undefined;
+        onChangeMode: (newMode: string) => void;
+        children?: ((props: import("./props").EditableRenderProps) => React.ReactNode) | undefined;
+        render?: ((props: import("./props").EditableRenderProps) => React.ReactNode) | undefined;
         value?: any;
-        onChange?: ((...args: any[]) => any) | undefined;
+        onChange?: ((value: any) => void) | undefined;
         readOnly?: boolean | undefined;
         elementRef?: ((element: Element | null) => void) | undefined;
     }>;
     static allowedProps: readonly (keyof {
         mode: "view" | "edit";
-        onChangeMode: (...args: any[]) => any;
-        children?: ((...args: any[]) => any) | undefined;
-        render?: ((...args: any[]) => any) | undefined;
+        onChangeMode: (newMode: string) => void;
+        children?: ((props: import("./props").EditableRenderProps) => React.ReactNode) | undefined;
+        render?: ((props: import("./props").EditableRenderProps) => React.ReactNode) | undefined;
         value?: any;
-        onChange?: ((...args: any[]) => any) | undefined;
+        onChange?: ((value: any) => void) | undefined;
         readOnly?: boolean | undefined;
         elementRef?: ((element: Element | null) => void) | undefined;
     })[];
@@ -31,51 +32,30 @@ declare class Editable extends Component<EditableProps> {
         readOnly: boolean;
         children: null;
     };
-    state: {
-        showModeToggle: boolean;
-        valueOnEdit: null;
-    };
-    _editorRef: null;
-    _editButtonRef: null;
-    constructor(props: any);
+    state: EditableState;
+    _editorRef: HTMLInputElement | null;
+    _editButtonRef: HTMLButtonElement | null;
+    constructor(props: EditableProps);
     componentDidMount(): void;
-    componentWillUnmount(): void;
-    componentDidUpdate(prevProps: any): void;
+    componentDidUpdate(prevProps: EditableProps): void;
     focusEditor(): void;
     enterView(): void;
     enterEdit(): void;
-    handleEditESC: (event: any) => void;
-    handleViewMouseOver: (event: any) => void;
-    handleViewMouseOut: (event: any) => void;
-    handleViewClick: (event: any) => void;
-    handleEditBlur: (event: any) => void;
-    handleEditButtonFocus: (event: any) => void;
-    handleEditButtonBlur: (event: any) => void;
-    handleEditButtonClick: (event: any) => void;
+    handleEditESC: (event: React.KeyboardEvent) => void;
+    handleViewMouseOver: (event: React.MouseEvent) => void;
+    handleViewMouseOut: (event: React.MouseEvent) => void;
+    handleViewClick: (event: React.MouseEvent) => void;
+    handleEditBlur: () => void;
+    handleEditButtonFocus: () => void;
+    handleEditButtonBlur: () => void;
+    handleEditButtonClick: () => void;
     ref: Element | null;
     handleContainerRef: (el: Element | null) => void;
-    getContainerProps: (props?: {}) => {
-        ref: (el: Element | null) => void;
-        onMouseOver: (event: any) => void;
-        onMouseOut: (event: any) => void;
-        onMouseDown: ((event: any) => void) | null;
-        onKeyUp: ((event: any) => void) | null;
-        readOnly: boolean | undefined;
-    };
-    getViewerProps: (props?: {}) => {
-        mode: "view" | "edit";
-        readOnly: boolean | undefined;
-    };
-    getEditorProps: (props: any) => any;
-    getEditButtonProps: (props?: {}) => {
-        onClick: (event: any) => void;
-        onFocus: (event: any) => void;
-        onBlur: (event: any) => void;
-        isVisible: boolean;
-        buttonRef: (el: any) => void;
-        readOnly: boolean | undefined;
-    };
-    render(): any;
+    getContainerProps: GetContainerProps;
+    getViewerProps: GetViewerProps;
+    getEditorProps: GetEditorProps;
+    getEditButtonProps: GetEditButtonProps;
+    render(): React.ReactNode;
 }
 export default Editable;
 export { Editable };

package/types/Editable/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Editable/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOjC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAE5C;;;;;GAKG;AACH,cAAM,QAAS,SAAQ,SAAS,CAAC,aAAa,CAAC;IAC7C,MAAM,CAAC,SAAS;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;MAGlB;IAED,KAAK;;;MAGJ;IAED,UAAU,OAAO;IACjB,cAAc,OAAO;gBAGT,KAAK,KAAA;IASjB,iBAAiB;IAKjB,oBAAoB;IAGpB,kBAAkB,CAAC,SAAS,KAAA;IAmB5B,WAAW;IAWX,SAAS;IAOT,SAAS;IAUT,aAAa,uBAIZ;IAGD,mBAAmB,uBAMlB;IAGD,kBAAkB,uBAOjB;IAGD,eAAe,uBAMd;IAGD,cAAc,uBAEb;IAGD,qBAAqB,uBAEpB;IAGD,oBAAoB,uBAEnB;IAGD,qBAAqB,uBAEpB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,kBAAkB,OAAQ,OAAO,GAAG,IAAI,UAQvC;IAGD,iBAAiB;kBAXS,OAAO,GAAG,IAAI;;;;;;MAsBvC;IAED,cAAc;;;MAMb;IAGD,cAAc,sBAWb;IAED,kBAAkB;;;;;;;MAajB;IAED,MAAM;CAeP;AAED,eAAe,QAAQ,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Editable/index.tsx"],"names":[],"mappings":"AAuBA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMxC,OAAO,EAA2B,aAAa,EAAE,MAAM,SAAS,CAAA;AAChE,OAAO,KAAK,EACV,aAAa,EACb,iBAAiB,EACjB,kBAAkB,EAClB,cAAc,EACd,cAAc,EACf,MAAM,SAAS,CAAA;AAEhB;;;;;GAKG;AACH,cAAM,QAAS,SAAQ,SAAS,CAAC,aAAa,CAAC;IAC7C,MAAM,CAAC,SAAS;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;MAGlB;IAED,KAAK,EAAE,aAAa,CAGnB;IAED,UAAU,EAAE,gBAAgB,GAAG,IAAI,CAAO;IAC1C,cAAc,EAAE,iBAAiB,GAAG,IAAI,CAAO;gBAEnC,KAAK,EAAE,aAAa;IAShC,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,EAAE,aAAa;IAkB3C,WAAW;IAUX,SAAS;IAOT,SAAS;IAST,aAAa,UAAW,mBAAmB,UAI1C;IAED,mBAAmB,UAAW,gBAAgB,UAM7C;IAED,kBAAkB,UAAW,gBAAgB,UAO5C;IAED,eAAe,UAAW,gBAAgB,UAMzC;IAED,cAAc,aAEb;IAED,qBAAqB,aAEpB;IAED,oBAAoB,aAEnB;IAED,qBAAqB,aAEpB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,kBAAkB,OAAQ,OAAO,GAAG,IAAI,UAQvC;IAGD,iBAAiB,EAAE,iBAAiB,CAWnC;IAED,cAAc,EAAE,cAAc,CAM7B;IAED,cAAc,EAAE,cAAc,CAU7B;IAED,kBAAkB,EAAE,kBAAkB,CAYrC;IAED,MAAM;CAeP;AAED,eAAe,QAAQ,CAAA;AACvB,OAAO,EAAE,QAAQ,EAAE,CAAA"}

package/types/Editable/props.d.ts

@@ -1,12 +1,78 @@
+import React from 'react';
 import type { PropValidators } from '@instructure/shared-types';
+declare type GetContainerProps = (props?: Record<string, any>) => {
+    ref: React.RefCallback<any>;
+    onMouseOver: (event: React.MouseEvent) => void;
+    onMouseOut: (event: React.MouseEvent) => void;
+    onMouseDown?: (event: React.MouseEvent) => void;
+    onKeyUp?: (event: React.KeyboardEvent) => void;
+    readOnly?: boolean;
+} & Record<string, any>;
+declare type GetViewerProps = (props?: Record<string, any>) => {
+    mode: 'view' | 'edit';
+    readOnly?: boolean;
+} & Record<string, any>;
+declare type GetEditorProps = (props?: Record<string, any>) => {
+    mode: 'view' | 'edit';
+    onBlur: () => void;
+    editorRef: (el: HTMLElement | null) => void;
+    readOnly?: boolean;
+} & Record<string, any>;
+declare type GetEditButtonProps = (props?: Record<string, any>) => {
+    onClick: () => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    isVisible: boolean;
+    buttonRef: (el: Element) => void;
+    readOnly?: boolean;
+} & Record<string, any>;
+declare type EditableRenderProps = {
+    mode: string;
+    getContainerProps: GetContainerProps;
+    getViewerProps: GetViewerProps;
+    getEditorProps: GetEditorProps;
+    getEditButtonProps: GetEditButtonProps;
+};
 declare type EditableOwnProps = {
+    /**
+     * If `'view'`: the view component is rendered,
+     * if `'edit'`: the edit component is rendered
+     */
     mode: 'view' | 'edit';
-    onChangeMode: (...args: any[]) => any;
-    children?: (...args: any[]) => any;
-    render?: (...args: any[]) => any;
+    /**
+     * Called when the component's mode changes.
+     */
+    onChangeMode: (newMode: string) => void;
+    /**
+     * Function that you can supply that will return the children of this component.
+     * It has one parameter has the following fields:
+     * - mode: `view` or `edit`, depending on whether the view or the editor should be rendered.
+     * - getContainerProps(props) - Props to be spread onto the container element
+     * - getEditorProps(props) - Props to be spread onto the editor element
+     * - getEditButtonProps(props) - Props to be spread onto the edit button element
+     */
+    children?: (props: EditableRenderProps) => React.ReactNode;
+    /**
+     * Identical to children
+     */
+    render?: (props: EditableRenderProps) => React.ReactNode;
+    /**
+     * The current value.
+     * The value is managed by the consuming app, but we need to tell Editable
+     * it's changed or it won't re-render
+     */
     value?: any;
-    onChange?: (...args: any[]) => any;
+    /**
+     * Called when Editable switches from edit to view mode and the value has changed.
+     */
+    onChange?: (value: any) => void;
+    /**
+     * The mode is fixed as 'view'
+     */
     readOnly?: boolean;
+    /**
+     * provides a reference to the underlying html root element (container)
+     */
     elementRef?: (element: Element | null) => void;
 };
 declare type PropKeys = keyof EditableOwnProps;
@@ -14,6 +80,10 @@ declare type AllowedPropKeys = Readonly<Array<PropKeys>>;
 declare type EditableProps = EditableOwnProps;
 declare const propTypes: PropValidators<PropKeys>;
 declare const allowedProps: AllowedPropKeys;
-export type { EditableProps };
+declare type EditableState = {
+    showModeToggle: boolean;
+    valueOnEdit: any;
+};
+export type { EditableProps, EditableRenderProps, EditableState, GetContainerProps, GetEditButtonProps, GetEditorProps, GetViewerProps };
 export { propTypes, allowedProps };
 //# sourceMappingURL=props.d.ts.map

package/types/Editable/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Editable/props.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAE/D,aAAK,gBAAgB,GAAG;IACtB,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,YAAY,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACrC,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAClC,MAAM,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAChC,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,gBAAgB,CAAA;AAEtC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,aAAa,GAAG,gBAAgB,CAAA;AAErC,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CA4CvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eASnB,CAAA;AAED,YAAY,EAAE,aAAa,EAAE,CAAA;AAC7B,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Editable/props.ts"],"names":[],"mappings":"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"}

package/types/InPlaceEdit/index.d.ts

@@ -1,35 +1,58 @@
 /** @jsx jsx */
 import { Component } from 'react';
+import type { IconButtonProps } from '@instructure/ui-buttons';
 import { jsx } from '@instructure/emotion';
 import type { InPlaceEditProps } from './props';
+import type { EditableRenderProps } from '../Editable/props';
 /**
 ---
 category: components
 ---
+@tsProps
 **/
 declare class InPlaceEdit extends Component<InPlaceEditProps> {
     static readonly componentId = "InPlaceEdit";
     static propTypes: import("@instructure/shared-types/types/UtilityTypes").PropValidators<keyof {
-        renderViewer: (...args: any[]) => any;
-        renderEditor: (...args: any[]) => any;
-        renderEditButton: (...args: any[]) => any;
+        renderViewer: () => import("react").ReactNode;
+        renderEditor: ({ onBlur, editorRef }: {
+            onBlur: () => void;
+            editorRef: (el: HTMLElement | null) => void;
+        }) => import("react").ReactNode;
+        renderEditButton: (props: {
+            elementRef?: ((el: HTMLButtonElement) => void) | undefined;
+            onClick: () => void;
+            onFocus: () => void;
+            onBlur: () => void;
+            isVisible: boolean;
+            readOnly?: boolean | undefined;
+        }) => import("react").ReactNode;
         mode: "view" | "edit";
-        onChangeMode: (...args: any[]) => any;
+        onChangeMode: (newMode: string) => void;
         value?: any;
-        onChange?: ((...args: any[]) => any) | undefined;
+        onChange?: ((value: any) => void) | undefined;
         readOnly?: boolean | undefined;
         showFocusRing?: boolean | undefined;
         editButtonPlacement?: "start" | "end" | undefined;
         inline?: boolean | undefined;
     }>;
     static allowedProps: readonly (keyof {
-        renderViewer: (...args: any[]) => any;
-        renderEditor: (...args: any[]) => any;
-        renderEditButton: (...args: any[]) => any;
+        renderViewer: () => import("react").ReactNode;
+        renderEditor: ({ onBlur, editorRef }: {
+            onBlur: () => void;
+            editorRef: (el: HTMLElement | null) => void;
+        }) => import("react").ReactNode;
+        renderEditButton: (props: {
+            elementRef?: ((el: HTMLButtonElement) => void) | undefined;
+            onClick: () => void;
+            onFocus: () => void;
+            onBlur: () => void;
+            isVisible: boolean;
+            readOnly?: boolean | undefined;
+        }) => import("react").ReactNode;
         mode: "view" | "edit";
-        onChangeMode: (...args: any[]) => any;
+        onChangeMode: (newMode: string) => void;
         value?: any;
-        onChange?: ((...args: any[]) => any) | undefined;
+        onChange?: ((value: any) => void) | undefined;
         readOnly?: boolean | undefined;
         showFocusRing?: boolean | undefined;
         editButtonPlacement?: "start" | "end" | undefined;
@@ -42,37 +65,21 @@ declare class InPlaceEdit extends Component<InPlaceEditProps> {
         editButtonPlacement: string;
     };
     ref: Element | null;
+    _editButtonRef: HTMLButtonElement | null;
     handleRef: (el: Element | null) => void;
-    constructor(props: any);
+    constructor(props: InPlaceEditProps);
     componentDidMount(): void;
-    componentDidUpdate(prevProps: any, prevState: any, snapshot: any): void;
-    handleEditButtonRef: (el: any) => void;
-    renderEditor({ mode, onBlur, editorRef, readOnly }: {
-        mode: any;
-        onBlur: any;
-        editorRef: any;
-        readOnly: any;
-    }): jsx.JSX.Element | null;
-    renderViewer({ readOnly, mode }: {
-        readOnly: any;
-        mode: any;
-    }): any;
-    renderEditButton({ buttonRef, ...rest }: {
-        [x: string]: any;
-        buttonRef: any;
-    }): any;
+    componentDidUpdate(): void;
+    handleEditButtonRef: (el: HTMLButtonElement) => void;
+    renderEditor({ mode, onBlur, editorRef, readOnly }: ReturnType<EditableRenderProps['getEditorProps']>): jsx.JSX.Element | null;
+    renderViewer({ readOnly, mode }: ReturnType<EditableRenderProps['getViewerProps']>): import("react").ReactNode;
+    renderEditButton({ buttonRef, ...rest }: ReturnType<EditableRenderProps['getEditButtonProps']>): import("react").ReactNode;
     static renderDefaultEditButton: ({ isVisible, readOnly, label, ...buttonProps }: {
-        [x: string]: any;
-        isVisible: any;
-        readOnly: any;
-        label: any;
-    }) => jsx.JSX.Element | null;
-    renderAll: ({ getContainerProps, getViewerProps, getEditorProps, getEditButtonProps }: {
-        getContainerProps: any;
-        getViewerProps: any;
-        getEditorProps: any;
-        getEditButtonProps: any;
-    }) => jsx.JSX.Element;
+        isVisible: boolean;
+        readOnly?: boolean | undefined;
+        label: string;
+    } & Partial<IconButtonProps>) => jsx.JSX.Element | null;
+    renderAll: ({ getContainerProps, getViewerProps, getEditorProps, getEditButtonProps }: EditableRenderProps) => jsx.JSX.Element;
     render(): jsx.JSX.Element;
 }
 export default InPlaceEdit;

package/types/InPlaceEdit/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InPlaceEdit/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAOjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAOrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C;;;;GAIG;AACH,cACM,WAAY,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACnD,MAAM,CAAC,QAAQ,CAAC,WAAW,iBAAgB;IAC3C,MAAM,CAAC,SAAS;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;MAKlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAE9B;gBAGW,KAAK,KAAA;IASjB,iBAAiB;IAMjB,kBAAkB,CAAC,SAAS,KAAA,EAAE,SAAS,KAAA,EAAE,QAAQ,KAAA;IAMjD,mBAAmB,oBAGlB;IAGD,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE;;;;;KAAA;IAoBlD,YAAY,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE;;;KAAA;IAK/B,gBAAgB,CAAC,EAAE,SAAS,EAAE,GAAG,IAAI,EAAE;;;KAAA;IASvC,MAAM,CAAC,uBAAuB;;;;;iCAuB7B;IAED,SAAS;;;;;0BAiCR;IAED,MAAM;CAeP;AAED,eAAe,WAAW,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/InPlaceEdit/index.tsx"],"names":[],"mappings":"AAwBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAA;AAI9D,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAOrD,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,mBAAmB,CAAA;AAE5D;;;;;GAKG;AACH,cACM,WAAY,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACnD,MAAM,CAAC,QAAQ,CAAC,WAAW,iBAAgB;IAC3C,MAAM,CAAC,SAAS;;;;;;;;;;;;;;;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;;;;;;;;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;MAKlB;IAED,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAC1B,cAAc,EAAE,iBAAiB,GAAG,IAAI,CAAO;IAE/C,SAAS,OAAQ,OAAO,GAAG,IAAI,UAE9B;gBAEW,KAAK,EAAE,gBAAgB;IASnC,iBAAiB;IAIjB,kBAAkB;IAIlB,mBAAmB,OAAQ,iBAAiB,UAE3C;IAED,YAAY,CAAC,EACX,IAAI,EACJ,MAAM,EACN,SAAS,EACT,QAAQ,EACT,EAAE,UAAU,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAmBpD,YAAY,CAAC,EACX,QAAQ,EACR,IAAI,EACL,EAAE,UAAU,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;IAIpD,gBAAgB,CAAC,EACf,SAAS,EACT,GAAG,IAAI,EACR,EAAE,UAAU,CAAC,mBAAmB,CAAC,oBAAoB,CAAC,CAAC;IASxD,MAAM,CAAC,uBAAuB;mBAMjB,OAAO;;eAEX,MAAM;4DAgBd;IAED,SAAS,8EAKN,mBAAmB,qBAwBrB;IAED,MAAM;CAeP;AAED,eAAe,WAAW,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,CAAA"}

package/types/InPlaceEdit/props.d.ts

@@ -1,16 +1,97 @@
 import type { PropValidators } from '@instructure/shared-types';
 import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
+import type { EditableProps } from '../Editable/props';
+import React from 'react';
+declare type ExtendedRenderEditButton = {
+    elementRef?: (el: HTMLButtonElement) => void;
+    onClick: () => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    isVisible: boolean;
+    readOnly?: boolean;
+};
 declare type InPlaceEditOwnProps = {
-    renderViewer: (...args: any[]) => any;
-    renderEditor: (...args: any[]) => any;
-    renderEditButton: (...args: any[]) => any;
+    /**
+     * Function to render the view mode component.
+     * It is the consumer's responsibility to provide the
+     * current value or children.
+     *
+     * Return value:
+     * - element: the viewer DOM sub-tree.
+     */
+    renderViewer: () => React.ReactNode;
+    /**
+     * Function to render the edit mode component
+     * It is the consumer's responsibility to provide the
+     * current value, and to attach the appropriate onChange
+     * event handler needed to capture the updated value. This
+     * new value must then be forwarded to the view mode component.
+     *
+     * Return value:
+     * - element: the editor DOM sub-tree.
+     */
+    renderEditor: ({ onBlur, editorRef }: {
+        onBlur: () => void;
+        editorRef: (el: HTMLElement | null) => void;
+    }) => React.ReactNode;
+    /**
+     * Function to render the edit button.
+     *
+     * Parameters:
+     * - object: { isVisible, onClick, onFocus, onBlur, buttonRef }
+     *
+     * Return value:
+     *
+     * - element:  the edit button DOM sub-tree
+     *
+     * If you choose to use the default edit button, add `label` to the
+     * incoming `props` parameter and call `InPlaceEdit.renderDefaultEditButton(props)`
+     *
+     * If you choose to render a custom button, attach the on* event handlers
+     * and set `buttonRef` as a `ref` type property on the `button` element.
+     *
+     * `isVisible` is a hint as to whether the button is _typically_ shown,
+     * but you're free to ignore it for your use-case.
+     */
+    renderEditButton: (props: ExtendedRenderEditButton) => React.ReactNode | null;
+    /**
+     * If `'view'`: the view component is rendered,
+     * if `'edit'`: the edit component is rendered
+     */
     mode: 'view' | 'edit';
-    onChangeMode: (...args: any[]) => any;
+    /**
+     * Called when the component's mode changes
+     * Parameter:
+     * - newMode: string
+     */
+    onChangeMode: EditableProps['onChangeMode'];
+    /**
+     * The current value.
+     * The value is managed by the consuming app, but we need to tell InPlaceEdit
+     * it's changed or it won't re-render
+     */
     value?: any;
-    onChange?: (...args: any[]) => any;
+    /**
+     * Called when Editable switches from edit to view mode and the value has changed.
+     * Parameter:
+     * - value: any
+     */
+    onChange?: EditableProps['onChange'];
+    /**
+     * The mode is fixed as 'view'
+     */
     readOnly?: boolean;
+    /**
+     * Show a focus outline when the input is focused
+     */
     showFocusRing?: boolean;
+    /**
+     * Put the edit button before or after the view
+     */
     editButtonPlacement?: 'start' | 'end';
+    /**
+     * Render outermost element inline v. block
+     */
     inline?: boolean;
 };
 declare type PropKeys = keyof InPlaceEditOwnProps;

package/types/InPlaceEdit/props.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/InPlaceEdit/props.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAE1E,aAAK,mBAAmB,GAAG;IACzB,YAAY,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACrC,YAAY,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACrC,gBAAgB,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACzC,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB,YAAY,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IACrC,KAAK,CAAC,EAAE,GAAG,CAAA;IACX,QAAQ,CAAC,EAAE,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,GAAG,CAAA;IAClC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,mBAAmB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IACrC,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,mBAAmB,CAAA;AAEzC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,gBAAgB,GAAG,mBAAmB,GACzC,cAAc,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAA;AAExC,aAAK,gBAAgB,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA;AAErD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAwEvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAYnB,CAAA;AAED,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/InPlaceEdit/props.ts"],"names":[],"mappings":"AA0BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAA;AAC/D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAA;AACtD,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,aAAK,wBAAwB,GAAG;IAC9B,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,iBAAiB,KAAK,IAAI,CAAA;IAC5C,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB,MAAM,EAAE,MAAM,IAAI,CAAA;IAClB,SAAS,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,aAAK,mBAAmB,GAAG;IACzB;;;;;;;OAOG;IACH,YAAY,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IACnC;;;;;;;;;OASG;IACH,YAAY,EAAE,CAAC,EACb,MAAM,EACN,SAAS,EACV,EAAE;QACD,MAAM,EAAE,MAAM,IAAI,CAAA;QAClB,SAAS,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;KAC5C,KAAK,KAAK,CAAC,SAAS,CAAA;IACrB;;;;;;;;;;;;;;;;;;OAkBG;IACH,gBAAgB,EAAE,CAAC,KAAK,EAAE,wBAAwB,KAAK,KAAK,CAAC,SAAS,GAAG,IAAI,CAAA;IAC7E;;;OAGG;IACH,IAAI,EAAE,MAAM,GAAG,MAAM,CAAA;IACrB;;;;OAIG;IACH,YAAY,EAAE,aAAa,CAAC,cAAc,CAAC,CAAA;IAC3C;;;;OAIG;IACH,KAAK,CAAC,EAAE,GAAG,CAAA;IACX;;;;OAIG;IACH,QAAQ,CAAC,EAAE,aAAa,CAAC,UAAU,CAAC,CAAA;IACpC;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IACrC;;OAEG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;CACjB,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,mBAAmB,CAAA;AAEzC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,gBAAgB,GAAG,mBAAmB,GACzC,cAAc,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAA;AAExC,aAAK,gBAAgB,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA;AAErD,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAYvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAYnB,CAAA;AAED,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}

package/LICENSE.md

@@ -1,27 +0,0 @@
----
-title: The MIT License (MIT)
-category: Getting Started
-order: 9
----
-
-# The MIT License (MIT)
-
-Copyright (c) 2015 Instructure, Inc.
-
-**Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions.**
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.