@sheinx/base 3.0.0-alpha.1

package/esm/dropdown/__example__/001-base.js

@@ -0,0 +1,64 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _shineoutStyle = require("@sheinx/shineout-style");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 基本用法
+ *    -- Dropdown 通过数据来渲染，支持 json 格式数据、React 组件
+ * en - Base
+ *    -- Dropdown is rendered through data and supports json formatted data and React components.
+ */
+
+var data = [{
+  content: 'SubmenuSubmenuSubmenuSubmenuSubmenu',
+  children: [{
+    content: 'Link to Google',
+    children: [{
+      content: 'Link to Google'
+    }, {
+      content: 'Disabled',
+      disabled: true
+    }, {
+      content: '666'
+    }]
+  }, {
+    content: 'Disabled',
+    disabled: true
+  }, {
+    content: '666'
+  }]
+}, /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+  href: "/",
+  children: "Home"
+}, 'home'), {
+  content: 'Message',
+  children: [{
+    content: 'shuai'
+  }, {
+    content: 'kukuku',
+    disabled: true
+  }, {
+    content: 'memem666'
+  }]
+}];
+var App = function App() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Dropdown, {
+    jssStyle: {
+      dropdown: _shineoutStyle.useDropdownStyle,
+      button: _shineoutStyle.useButtonStyle
+    },
+    position: 'bottom',
+    trigger: "click",
+    placeholder: "Dropdown",
+    data: data
+  });
+};
+var _default = App;
+exports.default = _default;

package/esm/dropdown/dropdown.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { DropdownProps } from './dropdown.type';
+declare const Dropdown: (props: DropdownProps) => JSX.Element;
+export default Dropdown;
+//# sourceMappingURL=dropdown.d.ts.map

package/esm/dropdown/dropdown.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.d.ts","sourceRoot":"","sources":["dropdown.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAGhD,QAAA,MAAM,QAAQ,UAAW,aAAa,gBAErC,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/dropdown/dropdown.js

@@ -0,0 +1,25 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireDefault(require("react"));
+var _dropdownIn = _interopRequireDefault(require("./dropdownIn"));
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+// 过滤内部属性
+var Dropdown = function Dropdown(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropdownIn.default, _objectSpread(_objectSpread({}, props), {}, {
+    isSub: false,
+    closePop: undefined
+  }));
+};
+var _default = Dropdown;
+exports.default = _default;

package/esm/dropdown/dropdown.type.d.ts

@@ -0,0 +1,170 @@
+import React from 'react';
+import { CommonType } from '../common/type';
+import { ButtonClasses, ButtonProps } from '../button/button.type';
+import { AbsoluteListProps } from '../absolute-list/absolute-list.type';
+export interface DropdownClass {
+    wrapper: string;
+    open: string;
+    boxList: string;
+    list: string;
+    listSmall: string;
+    listLarge: string;
+    caret: string;
+    content: string;
+    button: string;
+    item: string;
+    itemDisabled: string;
+    itemActive: string;
+    splitButton: string;
+    optionGroup: string;
+    optionDivider: string;
+}
+export declare type MenuPosition = 'left-top' | 'left-bottom' | 'right-top' | 'right-bottom' | 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' | 'left' | 'right' | 'top' | 'bottom';
+export declare type TriggerType = 'click' | 'hover';
+export declare type DropdownItem = DropdownNode | React.ReactNode;
+/**
+ * @title DropdownData
+ * @cn data 选项有三种情况：\n  为 ReactElement 时，直接显示此元素；\n  为 object 且设置了 renderItem，显示 renderItem 返回的内容；\n  为 object 且未设置 renderItem，按以下数据结构处理。
+ * @en If data item is a ReactElement, render the item;\nIf data item is an object and renderItem is set, render the renderItem's result;\nif data item is an object and renderItem is not set, handle the parameters as follows;
+ */
+export interface DropdownNode {
+    /**
+     * @cn 分组
+     * @en Group
+     */
+    group?: string;
+    /**
+     * @cn 分割线
+     * @en Divider
+     */
+    divider?: boolean;
+    /**
+     * @en When the url is not empty, a url will be rendered.
+     * @cn url属性不为空时，render为一个链接
+     */
+    url?: string;
+    /**
+     * @en It is valid when the url is not empty.
+     * @cn url 不为空时有效
+     */
+    target?: string;
+    /**
+     * @en Disabled
+     * @cn 禁用
+     */
+    disabled?: boolean;
+    /**
+     * @en element
+     * @cn 默认从content获取内容
+     */
+    content?: React.ReactNode;
+    /**
+     * @en childNode
+     * @cn 子节点
+     */
+    children?: DropdownNode[];
+    /**
+     * @en click event
+     * @cn 点击事件
+     */
+    onClick?: (data: DropdownNode) => void;
+    [key: string]: any;
+}
+export interface ItemProps {
+    data: DropdownItem;
+    itemClassName: string;
+    width: DropdownProps['width'];
+    onClick: DropdownProps['onClick'];
+    columns: DropdownProps['columns'];
+    renderItem: ((data: any) => React.ReactNode) | string;
+    handleBlur: () => void;
+}
+export interface SimpleDropdownProps extends Pick<CommonType, 'className' | 'style' | 'size'>, Pick<AbsoluteListProps, 'absolute'>, Pick<ButtonProps, 'type' | 'size' | 'text' | 'outline' | 'mode'> {
+    jssStyle?: {
+        dropdown?: () => DropdownClass;
+        button?: () => ButtonClasses;
+    };
+    /**
+     * @private 内部属性
+     */
+    isSub?: boolean;
+    /**
+     * @private 内部属性
+     */
+    closePop?: () => void;
+    /**
+     * @en Display multiple elements on the page. This property depends on the width attribute. Please set the number of columns and width appropriately.
+     * @cn 页面多元素展示,此属性需要依赖width属性,请合理的设置列数和宽度
+     */
+    columns?: number;
+    /**
+     * @en Specifies the dropdown should be disabled
+     * @cn 禁用
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * @en Specifies the dropdown should be disabled
+     * @cn 是否开启动画
+     * @default true
+     */
+    animation?: boolean;
+    /**
+     * @en data of dropdown; See the detail in the DropdownNode
+     * @cn 下拉数据 详见 DropdownData
+     * @default []
+     * @override object[]
+     */
+    data: DropdownItem[];
+    /**
+     * @en Toggle mode
+     * @cn 触发方式
+     * @default 'click'
+     */
+    trigger?: TriggerType;
+    /**
+     * @en Displayed content of the button
+     * @cn 按钮显示内容
+     */
+    placeholder?: React.ReactNode;
+    /**
+     * @en The click event. The parameter is the rendered data. <br /> Note: if the onClick is set in the data, this method will be ignored and data.onclick will be called.
+     * @cn 点击事件。参数为渲染的数据,注: 如果数据内设置了onClick，会忽略此方法，调用data.onClick
+     */
+    onClick?: (data: any) => void;
+    /**
+     * @en The width of the pop-up option layer
+     * @cn 弹出选项层的宽度
+     */
+    width?: number;
+    /**
+     * @en Set position property can control the direction and position of the drop-down menu
+     * @cn 弹出的方向和位置
+     * @default 'bottom-left'
+     */
+    position?: MenuPosition | 'auto';
+    /**
+     * @en Set the displayed content. If it is a string,  the corresponding value will be displayed. \n If it is a function, the return value will be displayed and its parameter is the current data.
+     * @cn 设置显示的内容,如果是字符串,则为对应的值。如果是函数,则返回值为显示的内容,参数为当条数据
+     */
+    renderItem?: ((data: any) => React.ReactNode) | string;
+    /**
+     * @en Set visible of cascader popup
+     * @cn 控制浮层显隐
+     */
+    open?: boolean;
+    /**
+     * @en options collapse callback
+     * @cn 下拉列表展开/收起回调
+     */
+    onCollapse?: (collapse: boolean) => void;
+}
+/**
+ * @title DropDown
+ */
+export declare type DropdownProps = Omit<SimpleDropdownProps, 'isSub' | 'closePop'>;
+export declare class DropdownComp extends React.Component<DropdownProps> {
+    render(): JSX.Element;
+}
+export declare type DropdownType = typeof DropdownComp;
+//# sourceMappingURL=dropdown.type.d.ts.map

package/esm/dropdown/dropdown.type.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown.type.d.ts","sourceRoot":"","sources":["dropdown.type.ts"],"names":[],"mappings":"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"}

package/esm/dropdown/dropdown.type.js

@@ -0,0 +1,4 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));

package/esm/dropdown/dropdownIn.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { SimpleDropdownProps } from './dropdown.type';
+declare const Dropdown: (props: SimpleDropdownProps) => JSX.Element;
+export default Dropdown;
+//# sourceMappingURL=dropdownIn.d.ts.map

package/esm/dropdown/dropdownIn.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdownIn.d.ts","sourceRoot":"","sources":["dropdownIn.tsx"],"names":[],"mappings":";AAEA,OAAO,EAA8B,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AAwBlF,QAAA,MAAM,QAAQ,UAAW,mBAAmB,gBA4L3C,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/esm/dropdown/dropdownIn.js

@@ -0,0 +1,190 @@
+"use strict";
+
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+require("core-js/modules/es.array.includes.js");
+require("core-js/modules/es.array.map.js");
+var _react = _interopRequireDefault(require("react"));
+var _button = _interopRequireDefault(require("../button"));
+var _hooks = require("@sheinx/hooks");
+var _animationList = _interopRequireDefault(require("../animation-list"));
+var _absoluteList = _interopRequireDefault(require("../absolute-list"));
+var _caret = _interopRequireDefault(require("../icons/caret"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _Item = _interopRequireDefault(require("./Item"));
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+var positionMap = {
+  'left-top': 'left-top',
+  'left-bottom': 'left-bottom',
+  'right-top': 'right-top',
+  'right-bottom': 'right-bottom',
+  'top-right': 'left-bottom',
+  'top-left': 'right-bottom',
+  'bottom-right': 'left-top',
+  'bottom-left': 'right-top',
+  left: 'left',
+  right: 'right',
+  top: 'right',
+  bottom: 'right',
+  auto: ''
+};
+var Dropdown = function Dropdown(props) {
+  var _jssStyle$dropdown;
+  var placeholder = props.placeholder,
+    onClick = props.onClick,
+    renderItem = props.renderItem,
+    absolute = props.absolute,
+    data = props.data,
+    jssStyle = props.jssStyle,
+    isSub = props.isSub,
+    columns = props.columns,
+    width = props.width,
+    disabled = props.disabled,
+    _props$trigger = props.trigger,
+    trigger = _props$trigger === void 0 ? 'click' : _props$trigger,
+    style = props.style,
+    className = props.className,
+    size = props.size,
+    animation = props.animation;
+  var dropdownClasses = jssStyle === null || jssStyle === void 0 ? void 0 : (_jssStyle$dropdown = jssStyle.dropdown) === null || _jssStyle$dropdown === void 0 ? void 0 : _jssStyle$dropdown.call(jssStyle);
+  var _usePopup = (0, _hooks.usePopup)({
+      open: props.open,
+      onCollapse: props.onCollapse,
+      disabled: disabled,
+      trigger: trigger,
+      position: props.position || 'bottom-left',
+      autoMode: 'menu',
+      priorityDirection: 'vertical',
+      mouseLeaveDelay: 200
+    }),
+    open = _usePopup.open,
+    position = _usePopup.position,
+    targetRef = _usePopup.targetRef,
+    popupRef = _usePopup.popupRef,
+    getTargetProps = _usePopup.getTargetProps,
+    closePop = _usePopup.closePop,
+    openPop = _usePopup.openPop;
+  // buttonProps
+  var type = props.type,
+    text = props.text,
+    outline = props.outline,
+    mode = props.mode;
+
+  // 默认使用 secondary text 样式
+  if (type === undefined && text === undefined && outline === undefined && mode === undefined) {
+    type = 'secondary';
+    mode = 'text';
+  }
+  var renderButton = function renderButton() {
+    var caret = /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.caret,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_caret.default, {})
+    }, 'caret');
+    var child = [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      className: dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.content,
+      children: placeholder
+    }, 'text'), caret];
+    if (['left-bottom', 'left-top', 'left'].includes(position)) {
+      child.reverse();
+    }
+    if (isSub) {
+      return /*#__PURE__*/(0, _jsxRuntime.jsx)("a", {
+        className: (0, _classnames.default)(dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.button, dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.item, !!disabled && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.itemDisabled), !!open && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.itemActive)),
+        "data-role": "item",
+        children: child
+      }, 'button');
+    }
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_button.default, {
+      disabled: disabled,
+      jssStyle: jssStyle,
+      outline: outline,
+      className: (0, _classnames.default)(dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.button, !placeholder && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.splitButton)),
+      mode: mode,
+      type: type,
+      size: size,
+      text: text,
+      children: child
+    }, 'button');
+  };
+  var renderList = function renderList() {
+    return data.map(function (dd, index) {
+      var d = dd;
+      var childPosition = positionMap[position];
+      var renderPlaceholder = _hooks.util.render(renderItem || 'content', d);
+      var children = d.children;
+      var group = d.group ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.optionGroup,
+        children: d.group
+      }, 'group') : null;
+      var divider = d.divider ? /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.optionDivider
+      }, 'divider') : null;
+      var context = children ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Dropdown, {
+        jssStyle: jssStyle,
+        data: children,
+        disabled: !!d.disabled,
+        placeholder: renderPlaceholder,
+        position: childPosition,
+        onClick: onClick,
+        renderItem: renderItem,
+        trigger: trigger,
+        isSub: true,
+        closePop: closePop
+      }, 'group') : /*#__PURE__*/(0, _jsxRuntime.jsx)(_Item.default, {
+        data: d,
+        onClick: d.onClick || onClick,
+        itemClassName: (0, _classnames.default)(dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.item),
+        renderItem: renderItem,
+        columns: columns,
+        width: width,
+        handleBlur: isSub && props.closePop ? props.closePop : closePop
+      }, index);
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_react.default.Fragment, {
+        children: [group, context, divider]
+      }, index);
+    });
+  };
+  var targetProps = getTargetProps();
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", _objectSpread(_objectSpread({
+    className: (0, _classnames.default)(className, dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.wrapper, !isSub && open && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.open)),
+    style: style,
+    "data-position": position,
+    ref: targetRef
+  }, targetProps), {}, {
+    onClick: isSub ? openPop : targetProps.onClick,
+    children: [renderButton(), /*#__PURE__*/(0, _jsxRuntime.jsx)(_absoluteList.default, {
+      position: position,
+      focus: open,
+      parentElement: targetRef.current,
+      absolute: absolute,
+      fixedWidth: 'min',
+      popupEl: popupRef.current,
+      adjust: !isSub,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_animationList.default, {
+        display: columns ? 'grid' : 'block',
+        className: (0, _classnames.default)(dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.list, columns !== undefined && columns > 1 && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.boxList), size === 'small' && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.listSmall), size === 'large' && (dropdownClasses === null || dropdownClasses === void 0 ? void 0 : dropdownClasses.listLarge)),
+        style: {
+          width: width,
+          gridTemplateColumns: columns ? "repeat(".concat(columns, ", 1fr)") : undefined
+        },
+        type: 'fade',
+        duration: 'fast',
+        show: open,
+        onRef: popupRef,
+        animation: animation,
+        children: renderList()
+      })
+    })]
+  }));
+};
+var _default = Dropdown;
+exports.default = _default;

package/esm/dropdown/index.d.ts

@@ -0,0 +1,3 @@
+export { default as Dropdown, default } from './dropdown';
+export type { DropdownItem, DropdownProps } from './dropdown.type';
+//# sourceMappingURL=index.d.ts.map

package/esm/dropdown/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,OAAO,EAAE,MAAM,YAAY,CAAC;AAC1D,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/esm/dropdown/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Dropdown", {
+  enumerable: true,
+  get: function get() {
+    return _dropdown.default;
+  }
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _dropdown.default;
+  }
+});
+var _dropdown = _interopRequireDefault(require("./dropdown"));

package/esm/editable-area/__example__/01-base.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+declare const _default: () => JSX.Element;
+export default _default;
+//# sourceMappingURL=01-base.d.ts.map

package/esm/editable-area/__example__/01-base.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"01-base.d.ts","sourceRoot":"","sources":["01-base.tsx"],"names":[],"mappings":";;AAUA,wBAkBE"}

package/esm/editable-area/__example__/01-base.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _ = require("../..");
+var _shineoutStyle = require("@sheinx/shineout-style");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * cn - 基本用法
+ *    --
+ * en - Basic
+ *    --
+ */
+var _default = function _default() {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.EditableArea, {
+      width: 200,
+      bordered: true,
+      defaultValue: 'hello world',
+      clearable: true,
+      placeholder: 'please input something',
+      innerTitle: "I'm inner title",
+      jssStyle: {
+        editableArea: _shineoutStyle.useEditableAreaStyle,
+        textarea: _shineoutStyle.useTextareaStyle,
+        innerTitle: _shineoutStyle.useInnerTitleStyle
+      }
+    })
+  });
+};
+exports.default = _default;

package/esm/editable-area/editable-area.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { EditableAreaProps } from './editable-area.type';
+declare const EditableArea: (props: EditableAreaProps) => JSX.Element;
+export default EditableArea;
+//# sourceMappingURL=editable-area.d.ts.map

package/esm/editable-area/editable-area.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editable-area.d.ts","sourceRoot":"","sources":["editable-area.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,sBAAsB,CAAC;AAoBzD,QAAA,MAAM,YAAY,UAAW,iBAAiB,gBA2K7C,CAAC;AAEF,eAAe,YAAY,CAAC"}