@yamada-ui/editable 0.2.4 → 0.2.6

package/dist/editable.d.mts

@@ -0,0 +1,101 @@
+import * as _yamada_ui_core from '@yamada-ui/core';
+import { HTMLUIProps, ThemeProps, CSSUIProps } from '@yamada-ui/core';
+import { FormControlOptions } from '@yamada-ui/form-control';
+import { PropGetter } from '@yamada-ui/utils';
+import { ReactNode } from 'react';
+
+type UseEditableProps = FormControlOptions & {
+    /**
+     * The placeholder text when the value is empty.
+     */
+    placeholder?: string;
+    /**
+     * The value of the Editable in both edit & preview mode.
+     */
+    value?: string;
+    /**
+     * The initial value of the Editable in both edit & preview mode.
+     */
+    defaultValue?: string;
+    /**
+     * If `true`, the Editable will start with edit mode by default.
+     */
+    startWithEditView?: boolean;
+    /**
+     * If `true`, the read only view, has a `tabIndex` set to `0`
+     * so it can receive focus via the keyboard or click.
+     *
+     * @default true
+     */
+    isPreviewFocusable?: boolean;
+    /**
+     * If `true`, it'll update the value onBlur and turn off the edit mode.
+     *
+     * @default true
+     */
+    submitOnBlur?: boolean;
+    /**
+     * If `true`, the input's text will be highlighted on focus.
+     *
+     * @default true
+     */
+    selectAllOnFocus?: boolean;
+    /**
+     * A callback invoked when user changes input.
+     */
+    onChange?: (value: string) => void;
+    /**
+     * Callback invoked when user cancels input with the `Esc` key.
+     * It provides the last confirmed value as argument.
+     */
+    onCancel?: (preValue: string) => void;
+    /**
+     * A callback invoked when user confirms value with `enter` key or by blurring input.
+     */
+    onSubmit?: (value: string) => void;
+    /**
+     * A callback invoked once the user enters edit mode.
+     */
+    onEdit?: () => void;
+};
+declare const useEditable: (props: UseEditableProps) => {
+    isEditing: boolean;
+    value: string;
+    onEdit: () => void;
+    onCancel: () => void;
+    onSubmit: () => void;
+    getPreviewProps: PropGetter;
+    getInputProps: PropGetter;
+    getTextareaProps: PropGetter;
+    getEditProps: PropGetter;
+    getSubmitProps: PropGetter;
+    getCancelProps: PropGetter;
+};
+type UseEditableReturn = ReturnType<typeof useEditable>;
+declare const useEditableControl: () => {
+    isEditing: boolean;
+    getEditProps: PropGetter;
+    getCancelProps: PropGetter;
+    getSubmitProps: PropGetter;
+};
+type EditableOptions = {
+    /**
+     * The border color when the input is focused.
+     */
+    focusBorderColor?: CSSUIProps<'unresponsive'>['borderColor'];
+    /**
+     * The border color when the input is invalid.
+     */
+    errorBorderColor?: CSSUIProps<'unresponsive'>['borderColor'];
+    children?: ReactNode | ((props: Pick<UseEditableReturn, 'isEditing' | 'onSubmit' | 'onCancel' | 'onEdit'>) => ReactNode);
+};
+type EditableProps = Omit<HTMLUIProps<'div'>, 'onChange' | 'value' | 'defaultValue' | 'onSubmit' | 'children'> & ThemeProps<'Editable'> & UseEditableProps & EditableOptions;
+declare const Editable: _yamada_ui_core.Component<"div", EditableProps>;
+type EditablePreviewProps = HTMLUIProps<'span'>;
+declare const EditablePreview: _yamada_ui_core.Component<"span", EditablePreviewProps>;
+type EditableInputProps = HTMLUIProps<'input'>;
+declare const EditableInput: _yamada_ui_core.Component<"input", EditableInputProps>;
+type EditableTextareaProps = HTMLUIProps<'textarea'>;
+declare const EditableTextarea: _yamada_ui_core.Component<"textarea", EditableTextareaProps>;
+
+export { Editable, EditableInput, EditableInputProps, EditablePreview, EditablePreviewProps, EditableProps, EditableTextarea, EditableTextareaProps, UseEditableProps, UseEditableReturn, useEditable, useEditableControl };

package/dist/index.d.mts

@@ -0,0 +1,5 @@
+export { Editable, EditableInput, EditableInputProps, EditablePreview, EditablePreviewProps, EditableProps, EditableTextarea, EditableTextareaProps, UseEditableProps, UseEditableReturn, useEditable, useEditableControl } from './editable.mjs';
+import '@yamada-ui/core';
+import '@yamada-ui/form-control';
+import '@yamada-ui/utils';
+import 'react';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yamada-ui/editable",
-  "version": "0.2.4",
+  "version": "0.2.6",
   "description": "Yamada UI editable component",
   "keywords": [
     "yamada",
@@ -35,11 +35,11 @@
     "url": "https://github.com/hirotomoyamada/yamada-ui/issues"
   },
   "dependencies": {
-    "@yamada-ui/utils": "0.1.2",
-    "@yamada-ui/core": "0.4.3",
-    "@yamada-ui/form-control": "0.2.4",
-    "@yamada-ui/use-controllable-state": "0.1.3",
-    "@yamada-ui/use-focus": "0.1.2"
+    "@yamada-ui/core": "0.5.1",
+    "@yamada-ui/utils": "0.1.3",
+    "@yamada-ui/form-control": "0.2.6",
+    "@yamada-ui/use-controllable-state": "0.1.4",
+    "@yamada-ui/use-focus": "0.1.3"
   },
   "devDependencies": {
     "react": "^18.0.0",