@instructure/ui-editable 11.7.2-snapshot-23 → 11.7.2-snapshot-25

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

@@ -0,0 +1,61 @@
+import { Component } from 'react';
+import type { IconButtonProps } from '@instructure/ui-buttons/latest';
+import type { InPlaceEditProps } from './props';
+import type { EditableRenderProps } from '../../Editable/v1/props';
+/**
+---
+category: components
+---
+**/
+declare class InPlaceEdit extends Component<InPlaceEditProps> {
+    static readonly componentId = "InPlaceEdit";
+    static allowedProps: readonly (keyof {
+        renderViewer: () => React.ReactNode;
+        renderEditor: (data: {
+            onBlur: () => void;
+            editorRef: (el: HTMLElement | null) => void;
+        }) => React.ReactNode;
+        renderEditButton: (props: {
+            elementRef?: (el: HTMLButtonElement) => void;
+            onClick: () => void;
+            onFocus: () => void;
+            onBlur: () => void;
+            isVisible: boolean;
+            readOnly?: boolean;
+        }) => React.ReactNode | null;
+        mode: "view" | "edit";
+        onChangeMode: import("../../exports/a").EditableProps["onChangeMode"];
+        value?: any;
+        onChange?: import("../../exports/a").EditableProps["onChange"];
+        readOnly?: boolean;
+        showFocusRing?: boolean;
+        editButtonPlacement?: "start" | "end";
+        inline?: boolean;
+    })[];
+    static defaultProps: {
+        readOnly: boolean;
+        showFocusRing: boolean;
+        inline: boolean;
+        editButtonPlacement: string;
+    };
+    ref: Element | null;
+    _editButtonRef: HTMLButtonElement | null;
+    handleRef: (el: Element | null) => void;
+    constructor(props: InPlaceEditProps);
+    componentDidMount(): void;
+    componentDidUpdate(): void;
+    handleEditButtonRef: (el: HTMLButtonElement) => void;
+    renderEditor({ mode, onBlur, editorRef, readOnly }: ReturnType<EditableRenderProps['getEditorProps']>): import("@emotion/react/jsx-runtime").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 }: {
+        isVisible: boolean;
+        readOnly?: boolean;
+        label: string;
+    } & Partial<IconButtonProps>) => import("@emotion/react/jsx-runtime").JSX.Element | null;
+    renderAll: ({ getContainerProps, getViewerProps, getEditorProps, getEditButtonProps }: EditableRenderProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+    render(): import("@emotion/react/jsx-runtime").JSX.Element;
+}
+export default InPlaceEdit;
+export { InPlaceEdit };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/InPlaceEdit/v2/index.tsx"],"names":[],"mappings":"AAwBA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gCAAgC,CAAA;AAWrE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC/C,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAA;AAElE;;;;GAIG;AACH,cACM,WAAY,SAAQ,SAAS,CAAC,gBAAgB,CAAC;IACnD,MAAM,CAAC,QAAQ,CAAC,WAAW,iBAAgB;IAC3C,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,GAAI,IAAI,OAAO,GAAG,IAAI,UAE9B;gBAEW,KAAK,EAAE,gBAAgB;IASnC,iBAAiB;IAIjB,kBAAkB;IAIlB,mBAAmB,GAAI,IAAI,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,GAAI,gDAK/B;QACD,SAAS,EAAE,OAAO,CAAA;QAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;QAClB,KAAK,EAAE,MAAM,CAAA;KACd,GAAG,OAAO,CAAC,eAAe,CAAC,6DAe3B;IAED,SAAS,GAAI,2EAKV,mBAAmB,sDAwBrB;IAED,MAAM;CAeP;AAED,eAAe,WAAW,CAAA;AAC1B,OAAO,EAAE,WAAW,EAAE,CAAA"}

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

@@ -0,0 +1,103 @@
+import type { WithStyleProps, ComponentStyle } from '@instructure/emotion';
+import type { EditableProps } from '../../Editable/v1/props';
+import React from 'react';
+type ExtendedRenderEditButton = {
+    elementRef?: (el: HTMLButtonElement) => void;
+    onClick: () => void;
+    onFocus: () => void;
+    onBlur: () => void;
+    isVisible: boolean;
+    readOnly?: boolean;
+};
+type InPlaceEditOwnProps = {
+    /**
+     * 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: (data: {
+        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';
+    /**
+     * 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;
+    /**
+     * 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;
+};
+type PropKeys = keyof InPlaceEditOwnProps;
+type AllowedPropKeys = Readonly<Array<PropKeys>>;
+type InPlaceEditProps = InPlaceEditOwnProps & WithStyleProps<null, InPlaceEditStyle>;
+type InPlaceEditStyle = ComponentStyle<'inPlaceEdit'>;
+declare const allowedProps: AllowedPropKeys;
+export type { InPlaceEditProps, InPlaceEditStyle };
+export { allowedProps };
+//# sourceMappingURL=props.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../../src/InPlaceEdit/v2/props.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,sBAAsB,CAAA;AAC1E,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAA;AAC5D,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,KAAK,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,KAAK,mBAAmB,GAAG;IACzB;;;;;;;OAOG;IACH,YAAY,EAAE,MAAM,KAAK,CAAC,SAAS,CAAA;IACnC;;;;;;;;;OASG;IACH,YAAY,EAAE,CAAC,IAAI,EAAE;QACnB,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,KAAK,QAAQ,GAAG,MAAM,mBAAmB,CAAA;AAEzC,KAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,KAAK,gBAAgB,GAAG,mBAAmB,GACzC,cAAc,CAAC,IAAI,EAAE,gBAAgB,CAAC,CAAA;AAExC,KAAK,gBAAgB,GAAG,cAAc,CAAC,aAAa,CAAC,CAAA;AACrD,QAAA,MAAM,YAAY,EAAE,eAYnB,CAAA;AAED,YAAY,EAAE,gBAAgB,EAAE,gBAAgB,EAAE,CAAA;AAClD,OAAO,EAAE,YAAY,EAAE,CAAA"}

package/types/InPlaceEdit/v2/styles.d.ts

@@ -0,0 +1,14 @@
+import type { InPlaceEditStyle } from './props';
+/**
+ * ---
+ * private: true
+ * ---
+ * Generates the style object from the theme and provided additional information
+ * @param  {Object} componentTheme The theme variable object.
+ * @param  {Object} props the props of the component, the style is applied to
+ * @param  {Object} state the state of the component, the style is applied to
+ * @return {Object} The final style object, which will be used in the component
+ */
+declare const generateStyle: () => InPlaceEditStyle;
+export default generateStyle;
+//# sourceMappingURL=styles.d.ts.map

package/types/InPlaceEdit/v2/styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/InPlaceEdit/v2/styles.ts"],"names":[],"mappings":"AAwBA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAE/C;;;;;;;;;GASG;AACH,QAAA,MAAM,aAAa,QAAO,gBAmBzB,CAAA;AAED,eAAe,aAAa,CAAA"}

package/types/exports/b.d.ts

@@ -0,0 +1,5 @@
+export { Editable } from '../Editable/v1';
+export { InPlaceEdit } from '../InPlaceEdit/v2';
+export type { EditableProps } from '../Editable/v1/props';
+export type { InPlaceEditProps } from '../InPlaceEdit/v2/props';
+//# sourceMappingURL=b.d.ts.map

package/types/exports/b.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"b.d.ts","sourceRoot":"","sources":["../../src/exports/b.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,QAAQ,EAAE,MAAM,gBAAgB,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAE/C,YAAY,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAA;AACzD,YAAY,EAAE,gBAAgB,EAAE,MAAM,yBAAyB,CAAA"}