@activecollab/components 1.0.191 → 1.0.192
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/components/EditableContent/EditableContent.js +7 -3
- package/dist/cjs/components/EditableContent/EditableContent.js.map +1 -1
- package/dist/cjs/components/EditableContent/Styles.js +11 -4
- package/dist/cjs/components/EditableContent/Styles.js.map +1 -1
- package/dist/esm/components/EditableContent/EditableContent.d.ts +1 -0
- package/dist/esm/components/EditableContent/EditableContent.d.ts.map +1 -1
- package/dist/esm/components/EditableContent/EditableContent.js +7 -3
- package/dist/esm/components/EditableContent/EditableContent.js.map +1 -1
- package/dist/esm/components/EditableContent/Styles.d.ts +3 -1
- package/dist/esm/components/EditableContent/Styles.d.ts.map +1 -1
- package/dist/esm/components/EditableContent/Styles.js +6 -3
- package/dist/esm/components/EditableContent/Styles.js.map +1 -1
- package/dist/index.js +12 -5
- package/dist/index.js.map +1 -1
- package/dist/index.min.js +1 -1
- package/dist/index.min.js.map +1 -1
- package/package.json +1 -1
|
@@ -11,7 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
11
11
|
|
|
12
12
|
var _Styles = require("./Styles");
|
|
13
13
|
|
|
14
|
-
var _excluded = ["className", "variant", "weight", "inputProps"];
|
|
14
|
+
var _excluded = ["className", "variant", "weight", "disabled", "inputProps"];
|
|
15
15
|
|
|
16
16
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
17
17
|
|
|
@@ -28,6 +28,8 @@ var EditableContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
28
28
|
_ref$variant = _ref.variant,
|
|
29
29
|
variant = _ref$variant === void 0 ? "Body 2" : _ref$variant,
|
|
30
30
|
weight = _ref.weight,
|
|
31
|
+
_ref$disabled = _ref.disabled,
|
|
32
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
31
33
|
inputProps = _ref.inputProps,
|
|
32
34
|
props = _objectWithoutProperties(_ref, _excluded);
|
|
33
35
|
|
|
@@ -44,14 +46,16 @@ var EditableContent = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
44
46
|
}, props), /*#__PURE__*/_react.default.createElement(_Styles.StyledSpan, {
|
|
45
47
|
variant: variant,
|
|
46
48
|
forwardedAs: "span",
|
|
47
|
-
weight: weight
|
|
49
|
+
weight: weight,
|
|
50
|
+
$disabled: disabled
|
|
48
51
|
}, inputProps === null || inputProps === void 0 ? void 0 : inputProps.value), /*#__PURE__*/_react.default.createElement(_Styles.StyledInput, _extends({}, inputProps, {
|
|
49
52
|
ref: intInputRef,
|
|
50
53
|
forwardedAs: "input",
|
|
51
54
|
variant: variant,
|
|
52
55
|
weight: weight,
|
|
53
56
|
value: inputProps === null || inputProps === void 0 ? void 0 : inputProps.value,
|
|
54
|
-
onBlur: handleBlur
|
|
57
|
+
onBlur: handleBlur,
|
|
58
|
+
disabled: disabled
|
|
55
59
|
})));
|
|
56
60
|
});
|
|
57
61
|
exports.EditableContent = EditableContent;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"names":["EditableContent","ref","className","variant","weight","inputProps","props","intInputRef","handleBlur","evt","current","setSelectionRange","onBlur","value","displayName"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;;;;;;;;;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"names":["EditableContent","ref","className","variant","weight","disabled","inputProps","props","intInputRef","handleBlur","evt","current","setSelectionRange","onBlur","value","displayName"],"mappings":";;;;;;;;;AAAA;;AAEA;;;;;;;;;;;;;;AAaO,IAAMA,eAAe,gBAAG,uBAK7B,gBASEC,GATF,EAUK;AAAA,MARDC,SAQC,QARDA,SAQC;AAAA,0BAPDC,OAOC;AAAA,MAPDA,OAOC,6BAPS,QAOT;AAAA,MANDC,MAMC,QANDA,MAMC;AAAA,2BALDC,QAKC;AAAA,MALDA,QAKC,8BALU,KAKV;AAAA,MAJDC,UAIC,QAJDA,UAIC;AAAA,MAHEC,KAGF;;AACH,MAAMC,WAAW,GAAG,mBAAyB,IAAzB,CAApB;AAEA,MAAMC,UAAU,GAAG,wBACjB,UAACC,GAAD,EAAS;AAAA;;AACPF,IAAAA,WAAW,SAAX,IAAAA,WAAW,WAAX,oCAAAA,WAAW,CAAEG,OAAb,8EAAsBC,iBAAtB,CAAwC,CAAxC,EAA2C,CAA3C;AACA,YAAON,UAAP,aAAOA,UAAP,uBAAOA,UAAU,CAAEO,MAAnB,qBAA4CP,UAA5C,aAA4CA,UAA5C,uBAA4CA,UAAU,CAAEO,MAAZ,CAAmBH,GAAnB,CAA5C;AACD,GAJgB,EAKjB,CAACJ,UAAD,CALiB,CAAnB;AAQA,sBACE,6BAAC,iBAAD;AAAW,IAAA,SAAS,EAAEJ,SAAtB;AAAiC,IAAA,GAAG,EAAED;AAAtC,KAA+CM,KAA/C,gBACE,6BAAC,kBAAD;AACE,IAAA,OAAO,EAAEJ,OADX;AAEE,IAAA,WAAW,EAAC,MAFd;AAGE,IAAA,MAAM,EAAEC,MAHV;AAIE,IAAA,SAAS,EAAEC;AAJb,KAMGC,UANH,aAMGA,UANH,uBAMGA,UAAU,CAAEQ,KANf,CADF,eASE,6BAAC,mBAAD,eACMR,UADN;AAEE,IAAA,GAAG,EAAEE,WAFP;AAGE,IAAA,WAAW,EAAC,OAHd;AAIE,IAAA,OAAO,EAAEL,OAJX;AAKE,IAAA,MAAM,EAAEC,MALV;AAME,IAAA,KAAK,EAAEE,UAAF,aAAEA,UAAF,uBAAEA,UAAU,CAAEQ,KANrB;AAOE,IAAA,MAAM,EAAEL,UAPV;AAQE,IAAA,QAAQ,EAAEJ;AARZ,KATF,CADF;AAsBD,CAhD4B,CAAxB;;AAmDPL,eAAe,CAACe,WAAhB,GAA8B,iBAA9B","sourcesContent":["import React, { forwardRef, useRef, useCallback } from \"react\";\nimport { Variant } from \"../Typography/Typography\";\nimport { StyledDiv, StyledInput, StyledSpan } from \"./Styles\";\n\nexport interface EditableContentInterface {\n /** Typography variant. */\n variant?: Variant;\n /** Typography weight. */\n weight?: \"light\" | \"regular\" | \"bold\" | \"medium\";\n /** Input props. */\n inputProps?: Partial<React.ComponentPropsWithoutRef<\"input\">>;\n /** Disable edit mode. */\n disabled?: boolean;\n}\n\nexport const EditableContent = forwardRef<\n HTMLDivElement,\n EditableContentInterface &\n Omit<React.ComponentPropsWithoutRef<\"div\">, keyof EditableContentInterface>\n>(\n (\n {\n className,\n variant = \"Body 2\",\n weight,\n disabled = false,\n inputProps,\n ...props\n },\n ref\n ) => {\n const intInputRef = useRef<HTMLInputElement>(null);\n\n const handleBlur = useCallback(\n (evt) => {\n intInputRef?.current?.setSelectionRange(0, 0);\n typeof inputProps?.onBlur === `function` && inputProps?.onBlur(evt);\n },\n [inputProps]\n );\n\n return (\n <StyledDiv className={className} ref={ref} {...props}>\n <StyledSpan\n variant={variant}\n forwardedAs=\"span\"\n weight={weight}\n $disabled={disabled}\n >\n {inputProps?.value}\n </StyledSpan>\n <StyledInput\n {...inputProps}\n ref={intInputRef}\n forwardedAs=\"input\"\n variant={variant}\n weight={weight}\n value={inputProps?.value}\n onBlur={handleBlur}\n disabled={disabled}\n />\n </StyledDiv>\n );\n }\n);\n\nEditableContent.displayName = \"EditableContent\";\n"],"file":"EditableContent.js"}
|
|
@@ -1,11 +1,13 @@
|
|
|
1
1
|
"use strict";
|
|
2
2
|
|
|
3
|
+
function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
|
|
4
|
+
|
|
3
5
|
Object.defineProperty(exports, "__esModule", {
|
|
4
6
|
value: true
|
|
5
7
|
});
|
|
6
8
|
exports.StyledSpan = exports.StyledInput = exports.StyledDiv = void 0;
|
|
7
9
|
|
|
8
|
-
var _styledComponents =
|
|
10
|
+
var _styledComponents = _interopRequireWildcard(require("styled-components"));
|
|
9
11
|
|
|
10
12
|
var _BoxSizingStyle = require("../BoxSizingStyle");
|
|
11
13
|
|
|
@@ -13,7 +15,9 @@ var _FontStyle = require("../FontStyle");
|
|
|
13
15
|
|
|
14
16
|
var _Typography = require("../Typography/Typography");
|
|
15
17
|
|
|
16
|
-
function
|
|
18
|
+
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
19
|
+
|
|
20
|
+
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
17
21
|
|
|
18
22
|
var StyledDiv = _styledComponents.default.div.withConfig({
|
|
19
23
|
displayName: "Styles__StyledDiv",
|
|
@@ -28,13 +32,16 @@ exports.StyledDiv = StyledDiv;
|
|
|
28
32
|
var StyledSpan = (0, _styledComponents.default)(_Typography.Typography).withConfig({
|
|
29
33
|
displayName: "Styles__StyledSpan",
|
|
30
34
|
componentId: "sc-1wapx2a-1"
|
|
31
|
-
})(["visibility:hidden;display:block;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;position:relative;border:1px solid transparent;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:pre
|
|
35
|
+
})(["visibility:hidden;display:block;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;position:relative;border:1px solid transparent;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:pre;", " &:empty:before{content:\"i\";}"], function (_ref) {
|
|
36
|
+
var $disabled = _ref.$disabled;
|
|
37
|
+
return $disabled && (0, _styledComponents.css)(["visibility:visible;"]);
|
|
38
|
+
});
|
|
32
39
|
exports.StyledSpan = StyledSpan;
|
|
33
40
|
StyledSpan.displayName = "StyledSpan";
|
|
34
41
|
var StyledInput = (0, _styledComponents.default)(_Typography.Typography).withConfig({
|
|
35
42
|
displayName: "Styles__StyledInput",
|
|
36
43
|
componentId: "sc-1wapx2a-2"
|
|
37
|
-
})(["", " background-color:inherit;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;text-overflow:ellipsis;&:focus-whitin{text-overflow:clip;}outline-width:0px;outline:none;"], {
|
|
44
|
+
})(["", " background-color:inherit;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;text-overflow:ellipsis;&:focus-whitin{text-overflow:clip;}outline-width:0px;outline:none;&:disabled{display:none;}"], {
|
|
38
45
|
"position": "absolute",
|
|
39
46
|
"top": "0px",
|
|
40
47
|
"right": "0px",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/EditableContent/Styles.ts"],"names":["StyledDiv","styled","div","FontStyle","BoxSizingStyle","StyledSpan","Typography","displayName","StyledInput"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/EditableContent/Styles.ts"],"names":["StyledDiv","styled","div","FontStyle","BoxSizingStyle","StyledSpan","Typography","$disabled","css","displayName","StyledInput"],"mappings":";;;;;;;;;AAAA;;AAEA;;AACA;;AACA;;;;;;AAEO,IAAMA,SAAS,GAAGC,0BAAOC,GAAV;AAAA;AAAA;AAAA,uBAClBC,oBADkB,EAElBC,8BAFkB,EAIhB;AAAA;AAAA;AAAA;AAAA,CAJgB,CAAf;;;AAOA,IAAMC,UAAU,GAAG,+BAAOC,sBAAP,CAAH;AAAA;AAAA;AAAA,yRAenB;AAAA,MAAGC,SAAH,QAAGA,SAAH;AAAA,SACAA,SAAS,QACTC,qBADS,0BADT;AAAA,CAfmB,CAAhB;;AA0BPH,UAAU,CAACI,WAAX,GAAyB,YAAzB;AAEO,IAAMC,WAAW,GAAG,+BAAOJ,sBAAP,CAAH;AAAA;AAAA;AAAA,+NAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CADkB,CAAjB;;AAgCPI,WAAW,CAACD,WAAZ,GAA0B,aAA1B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { Typography } from \"../Typography/Typography\";\n\nexport const StyledDiv = styled.div`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-relative tw-inline-block tw-max-w-full`}\n`;\n\nexport const StyledSpan = styled(Typography)<{ $disabled?: boolean }>`\n visibility: hidden;\n display: block;\n padding-left: 4px;\n padding-right: 4px;\n padding-top: 1px;\n padding-bottom: 1px;\n position: relative;\n border: 1px solid transparent;\n border-radius: 6px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: pre;\n\n ${({ $disabled }) =>\n $disabled &&\n css`\n visibility: visible;\n `}\n\n &:empty:before {\n content: \"i\";\n }\n`;\n\nStyledSpan.displayName = \"StyledSpan\";\n\nexport const StyledInput = styled(Typography)`\n ${tw`\n tw-absolute\n tw-inset-0\n tw-border\n tw-border-transparent\n tw-border-solid\n hover:tw-border-theme-700\n focus-within:tw-border-theme-700\n tw-rounded-md\n tw-box-border\n tw-overflow-hidden\n tw-whitespace-nowrap\n focus-within:tw-overflow-scroll\n tw-w-full`}\n\n background-color: inherit;\n padding-left: 4px;\n padding-right: 4px;\n padding-top: 1px;\n padding-bottom: 1px;\n text-overflow: ellipsis;\n &:focus-whitin {\n text-overflow: clip;\n }\n outline-width: 0px;\n outline: none;\n &:disabled {\n display: none;\n }\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"file":"Styles.js"}
|
|
@@ -4,6 +4,7 @@ export interface EditableContentInterface {
|
|
|
4
4
|
variant?: Variant;
|
|
5
5
|
weight?: "light" | "regular" | "bold" | "medium";
|
|
6
6
|
inputProps?: Partial<React.ComponentPropsWithoutRef<"input">>;
|
|
7
|
+
disabled?: boolean;
|
|
7
8
|
}
|
|
8
9
|
export declare const EditableContent: React.ForwardRefExoticComponent<EditableContentInterface & Omit<Pick<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "slot" | "style" | "title" | "key" | "css" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "cs" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "tw">, keyof EditableContentInterface> & React.RefAttributes<HTMLDivElement>>;
|
|
9
10
|
//# sourceMappingURL=EditableContent.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EditableContent.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAGnD,MAAM,WAAW,wBAAwB;IAEvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;IAEjD,UAAU,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"EditableContent.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0C,MAAM,OAAO,CAAC;AAC/D,OAAO,EAAE,OAAO,EAAE,MAAM,0BAA0B,CAAC;AAGnD,MAAM,WAAW,wBAAwB;IAEvC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,MAAM,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;IAEjD,UAAU,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,wBAAwB,CAAC,OAAO,CAAC,CAAC,CAAC;IAE9D,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,eAAe,yuJAiD3B,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
3
|
-
var _excluded = ["className", "variant", "weight", "inputProps"];
|
|
3
|
+
var _excluded = ["className", "variant", "weight", "disabled", "inputProps"];
|
|
4
4
|
import React, { forwardRef, useRef, useCallback } from "react";
|
|
5
5
|
import { StyledDiv, StyledInput, StyledSpan } from "./Styles";
|
|
6
6
|
export var EditableContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
@@ -8,6 +8,8 @@ export var EditableContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
8
8
|
_ref$variant = _ref.variant,
|
|
9
9
|
variant = _ref$variant === void 0 ? "Body 2" : _ref$variant,
|
|
10
10
|
weight = _ref.weight,
|
|
11
|
+
_ref$disabled = _ref.disabled,
|
|
12
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
11
13
|
inputProps = _ref.inputProps,
|
|
12
14
|
props = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
13
15
|
|
|
@@ -24,14 +26,16 @@ export var EditableContent = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
24
26
|
}, props), /*#__PURE__*/React.createElement(StyledSpan, {
|
|
25
27
|
variant: variant,
|
|
26
28
|
forwardedAs: "span",
|
|
27
|
-
weight: weight
|
|
29
|
+
weight: weight,
|
|
30
|
+
$disabled: disabled
|
|
28
31
|
}, inputProps == null ? void 0 : inputProps.value), /*#__PURE__*/React.createElement(StyledInput, _extends({}, inputProps, {
|
|
29
32
|
ref: intInputRef,
|
|
30
33
|
forwardedAs: "input",
|
|
31
34
|
variant: variant,
|
|
32
35
|
weight: weight,
|
|
33
36
|
value: inputProps == null ? void 0 : inputProps.value,
|
|
34
|
-
onBlur: handleBlur
|
|
37
|
+
onBlur: handleBlur,
|
|
38
|
+
disabled: disabled
|
|
35
39
|
})));
|
|
36
40
|
});
|
|
37
41
|
EditableContent.displayName = "EditableContent";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"names":["React","forwardRef","useRef","useCallback","StyledDiv","StyledInput","StyledSpan","EditableContent","ref","className","variant","weight","inputProps","props","intInputRef","handleBlur","evt","current","setSelectionRange","onBlur","value","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,MAA5B,EAAoCC,WAApC,QAAuD,OAAvD;AAEA,SAASC,SAAT,EAAoBC,WAApB,EAAiCC,UAAjC,QAAmD,UAAnD;
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/EditableContent/EditableContent.tsx"],"names":["React","forwardRef","useRef","useCallback","StyledDiv","StyledInput","StyledSpan","EditableContent","ref","className","variant","weight","disabled","inputProps","props","intInputRef","handleBlur","evt","current","setSelectionRange","onBlur","value","displayName"],"mappings":";;;AAAA,OAAOA,KAAP,IAAgBC,UAAhB,EAA4BC,MAA5B,EAAoCC,WAApC,QAAuD,OAAvD;AAEA,SAASC,SAAT,EAAoBC,WAApB,EAAiCC,UAAjC,QAAmD,UAAnD;AAaA,OAAO,IAAMC,eAAe,gBAAGN,UAAU,CAKvC,gBASEO,GATF,EAUK;AAAA,MARDC,SAQC,QARDA,SAQC;AAAA,0BAPDC,OAOC;AAAA,MAPDA,OAOC,6BAPS,QAOT;AAAA,MANDC,MAMC,QANDA,MAMC;AAAA,2BALDC,QAKC;AAAA,MALDA,QAKC,8BALU,KAKV;AAAA,MAJDC,UAIC,QAJDA,UAIC;AAAA,MAHEC,KAGF;;AACH,MAAMC,WAAW,GAAGb,MAAM,CAAmB,IAAnB,CAA1B;AAEA,MAAMc,UAAU,GAAGb,WAAW,CAC5B,UAACc,GAAD,EAAS;AAAA;;AACPF,IAAAA,WAAW,QAAX,oCAAAA,WAAW,CAAEG,OAAb,0CAAsBC,iBAAtB,CAAwC,CAAxC,EAA2C,CAA3C;AACA,YAAON,UAAP,oBAAOA,UAAU,CAAEO,MAAnB,qBAA4CP,UAA5C,oBAA4CA,UAAU,CAAEO,MAAZ,CAAmBH,GAAnB,CAA5C;AACD,GAJ2B,EAK5B,CAACJ,UAAD,CAL4B,CAA9B;AAQA,sBACE,oBAAC,SAAD;AAAW,IAAA,SAAS,EAAEJ,SAAtB;AAAiC,IAAA,GAAG,EAAED;AAAtC,KAA+CM,KAA/C,gBACE,oBAAC,UAAD;AACE,IAAA,OAAO,EAAEJ,OADX;AAEE,IAAA,WAAW,EAAC,MAFd;AAGE,IAAA,MAAM,EAAEC,MAHV;AAIE,IAAA,SAAS,EAAEC;AAJb,KAMGC,UANH,oBAMGA,UAAU,CAAEQ,KANf,CADF,eASE,oBAAC,WAAD,eACMR,UADN;AAEE,IAAA,GAAG,EAAEE,WAFP;AAGE,IAAA,WAAW,EAAC,OAHd;AAIE,IAAA,OAAO,EAAEL,OAJX;AAKE,IAAA,MAAM,EAAEC,MALV;AAME,IAAA,KAAK,EAAEE,UAAF,oBAAEA,UAAU,CAAEQ,KANrB;AAOE,IAAA,MAAM,EAAEL,UAPV;AAQE,IAAA,QAAQ,EAAEJ;AARZ,KATF,CADF;AAsBD,CAhDsC,CAAlC;AAmDPL,eAAe,CAACe,WAAhB,GAA8B,iBAA9B","sourcesContent":["import React, { forwardRef, useRef, useCallback } from \"react\";\nimport { Variant } from \"../Typography/Typography\";\nimport { StyledDiv, StyledInput, StyledSpan } from \"./Styles\";\n\nexport interface EditableContentInterface {\n /** Typography variant. */\n variant?: Variant;\n /** Typography weight. */\n weight?: \"light\" | \"regular\" | \"bold\" | \"medium\";\n /** Input props. */\n inputProps?: Partial<React.ComponentPropsWithoutRef<\"input\">>;\n /** Disable edit mode. */\n disabled?: boolean;\n}\n\nexport const EditableContent = forwardRef<\n HTMLDivElement,\n EditableContentInterface &\n Omit<React.ComponentPropsWithoutRef<\"div\">, keyof EditableContentInterface>\n>(\n (\n {\n className,\n variant = \"Body 2\",\n weight,\n disabled = false,\n inputProps,\n ...props\n },\n ref\n ) => {\n const intInputRef = useRef<HTMLInputElement>(null);\n\n const handleBlur = useCallback(\n (evt) => {\n intInputRef?.current?.setSelectionRange(0, 0);\n typeof inputProps?.onBlur === `function` && inputProps?.onBlur(evt);\n },\n [inputProps]\n );\n\n return (\n <StyledDiv className={className} ref={ref} {...props}>\n <StyledSpan\n variant={variant}\n forwardedAs=\"span\"\n weight={weight}\n $disabled={disabled}\n >\n {inputProps?.value}\n </StyledSpan>\n <StyledInput\n {...inputProps}\n ref={intInputRef}\n forwardedAs=\"input\"\n variant={variant}\n weight={weight}\n value={inputProps?.value}\n onBlur={handleBlur}\n disabled={disabled}\n />\n </StyledDiv>\n );\n }\n);\n\nEditableContent.displayName = \"EditableContent\";\n"],"file":"EditableContent.js"}
|
|
@@ -1,7 +1,9 @@
|
|
|
1
1
|
export declare const StyledDiv: import("styled-components").StyledComponent<"div", any, {}, never>;
|
|
2
2
|
export declare const StyledSpan: import("styled-components").StyledComponent<import("../Typography/Typography").TypographyComponent & {
|
|
3
3
|
displayName?: string | undefined;
|
|
4
|
-
}, any, {
|
|
4
|
+
}, any, {
|
|
5
|
+
$disabled?: boolean | undefined;
|
|
6
|
+
}, never>;
|
|
5
7
|
export declare const StyledInput: import("styled-components").StyledComponent<import("../Typography/Typography").TypographyComponent & {
|
|
6
8
|
displayName?: string | undefined;
|
|
7
9
|
}, any, {}, never>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableContent/Styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS,oEAKrB,CAAC;AAEF,eAAO,MAAM,UAAU
|
|
1
|
+
{"version":3,"file":"Styles.d.ts","sourceRoot":"","sources":["../../../../src/components/EditableContent/Styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,SAAS,oEAKrB,CAAC;AAEF,eAAO,MAAM,UAAU;;;;SAwBtB,CAAC;AAIF,eAAO,MAAM,WAAW;;kBA8BvB,CAAC"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import styled from "styled-components";
|
|
1
|
+
import styled, { css } from "styled-components";
|
|
2
2
|
import { BoxSizingStyle } from "../BoxSizingStyle";
|
|
3
3
|
import { FontStyle } from "../FontStyle";
|
|
4
4
|
import { Typography } from "../Typography/Typography";
|
|
@@ -13,12 +13,15 @@ export var StyledDiv = styled.div.withConfig({
|
|
|
13
13
|
export var StyledSpan = styled(Typography).withConfig({
|
|
14
14
|
displayName: "Styles__StyledSpan",
|
|
15
15
|
componentId: "sc-1wapx2a-1"
|
|
16
|
-
})(["visibility:hidden;display:block;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;position:relative;border:1px solid transparent;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:pre
|
|
16
|
+
})(["visibility:hidden;display:block;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;position:relative;border:1px solid transparent;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:pre;", " &:empty:before{content:\"i\";}"], function (_ref) {
|
|
17
|
+
var $disabled = _ref.$disabled;
|
|
18
|
+
return $disabled && css(["visibility:visible;"]);
|
|
19
|
+
});
|
|
17
20
|
StyledSpan.displayName = "StyledSpan";
|
|
18
21
|
export var StyledInput = styled(Typography).withConfig({
|
|
19
22
|
displayName: "Styles__StyledInput",
|
|
20
23
|
componentId: "sc-1wapx2a-2"
|
|
21
|
-
})(["", " background-color:inherit;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;text-overflow:ellipsis;&:focus-whitin{text-overflow:clip;}outline-width:0px;outline:none;"], {
|
|
24
|
+
})(["", " background-color:inherit;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;text-overflow:ellipsis;&:focus-whitin{text-overflow:clip;}outline-width:0px;outline:none;&:disabled{display:none;}"], {
|
|
22
25
|
"position": "absolute",
|
|
23
26
|
"top": "0px",
|
|
24
27
|
"right": "0px",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../../../src/components/EditableContent/Styles.ts"],"names":["styled","BoxSizingStyle","FontStyle","Typography","StyledDiv","div","StyledSpan","displayName","StyledInput"],"mappings":"AAAA,OAAOA,MAAP,
|
|
1
|
+
{"version":3,"sources":["../../../../src/components/EditableContent/Styles.ts"],"names":["styled","css","BoxSizingStyle","FontStyle","Typography","StyledDiv","div","StyledSpan","$disabled","displayName","StyledInput"],"mappings":"AAAA,OAAOA,MAAP,IAAiBC,GAAjB,QAA4B,mBAA5B;AAEA,SAASC,cAAT,QAA+B,mBAA/B;AACA,SAASC,SAAT,QAA0B,cAA1B;AACA,SAASC,UAAT,QAA2B,0BAA3B;AAEA,OAAO,IAAMC,SAAS,GAAGL,MAAM,CAACM,GAAV;AAAA;AAAA;AAAA,uBAClBH,SADkB,EAElBD,cAFkB,EAIhB;AAAA;AAAA;AAAA;AAAA,CAJgB,CAAf;AAOP,OAAO,IAAMK,UAAU,GAAGP,MAAM,CAACI,UAAD,CAAT;AAAA;AAAA;AAAA,yRAenB;AAAA,MAAGI,SAAH,QAAGA,SAAH;AAAA,SACAA,SAAS,IACTP,GADS,yBADT;AAAA,CAfmB,CAAhB;AA0BPM,UAAU,CAACE,WAAX,GAAyB,YAAzB;AAEA,OAAO,IAAMC,WAAW,GAAGV,MAAM,CAACI,UAAD,CAAT;AAAA;AAAA;AAAA,+NAClB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CADkB,CAAjB;AAgCPM,WAAW,CAACD,WAAZ,GAA0B,aAA1B","sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { FontStyle } from \"../FontStyle\";\nimport { Typography } from \"../Typography/Typography\";\n\nexport const StyledDiv = styled.div`\n ${FontStyle}\n ${BoxSizingStyle}\n\n ${tw`tw-relative tw-inline-block tw-max-w-full`}\n`;\n\nexport const StyledSpan = styled(Typography)<{ $disabled?: boolean }>`\n visibility: hidden;\n display: block;\n padding-left: 4px;\n padding-right: 4px;\n padding-top: 1px;\n padding-bottom: 1px;\n position: relative;\n border: 1px solid transparent;\n border-radius: 6px;\n max-width: 100%;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: pre;\n\n ${({ $disabled }) =>\n $disabled &&\n css`\n visibility: visible;\n `}\n\n &:empty:before {\n content: \"i\";\n }\n`;\n\nStyledSpan.displayName = \"StyledSpan\";\n\nexport const StyledInput = styled(Typography)`\n ${tw`\n tw-absolute\n tw-inset-0\n tw-border\n tw-border-transparent\n tw-border-solid\n hover:tw-border-theme-700\n focus-within:tw-border-theme-700\n tw-rounded-md\n tw-box-border\n tw-overflow-hidden\n tw-whitespace-nowrap\n focus-within:tw-overflow-scroll\n tw-w-full`}\n\n background-color: inherit;\n padding-left: 4px;\n padding-right: 4px;\n padding-top: 1px;\n padding-bottom: 1px;\n text-overflow: ellipsis;\n &:focus-whitin {\n text-overflow: clip;\n }\n outline-width: 0px;\n outline: none;\n &:disabled {\n display: none;\n }\n`;\n\nStyledInput.displayName = \"StyledInput\";\n"],"file":"Styles.js"}
|
package/dist/index.js
CHANGED
|
@@ -11989,12 +11989,15 @@
|
|
|
11989
11989
|
var StyledSpan = styled__default["default"](Typography).withConfig({
|
|
11990
11990
|
displayName: "Styles__StyledSpan",
|
|
11991
11991
|
componentId: "sc-1wapx2a-1"
|
|
11992
|
-
})(["visibility:hidden;display:block;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;position:relative;border:1px solid transparent;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:pre
|
|
11992
|
+
})(["visibility:hidden;display:block;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;position:relative;border:1px solid transparent;border-radius:6px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:pre;", " &:empty:before{content:\"i\";}"], function (_ref) {
|
|
11993
|
+
var $disabled = _ref.$disabled;
|
|
11994
|
+
return $disabled && styled.css(["visibility:visible;"]);
|
|
11995
|
+
});
|
|
11993
11996
|
StyledSpan.displayName = "StyledSpan";
|
|
11994
11997
|
var StyledInput = styled__default["default"](Typography).withConfig({
|
|
11995
11998
|
displayName: "Styles__StyledInput",
|
|
11996
11999
|
componentId: "sc-1wapx2a-2"
|
|
11997
|
-
})(["", " background-color:inherit;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;text-overflow:ellipsis;&:focus-whitin{text-overflow:clip;}outline-width:0px;outline:none;"], {
|
|
12000
|
+
})(["", " background-color:inherit;padding-left:4px;padding-right:4px;padding-top:1px;padding-bottom:1px;text-overflow:ellipsis;&:focus-whitin{text-overflow:clip;}outline-width:0px;outline:none;&:disabled{display:none;}"], {
|
|
11998
12001
|
"position": "absolute",
|
|
11999
12002
|
"top": "0px",
|
|
12000
12003
|
"right": "0px",
|
|
@@ -12018,12 +12021,14 @@
|
|
|
12018
12021
|
});
|
|
12019
12022
|
StyledInput.displayName = "StyledInput";
|
|
12020
12023
|
|
|
12021
|
-
var _excluded$5 = ["className", "variant", "weight", "inputProps"];
|
|
12024
|
+
var _excluded$5 = ["className", "variant", "weight", "disabled", "inputProps"];
|
|
12022
12025
|
var EditableContent = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
|
|
12023
12026
|
var className = _ref.className,
|
|
12024
12027
|
_ref$variant = _ref.variant,
|
|
12025
12028
|
variant = _ref$variant === void 0 ? "Body 2" : _ref$variant,
|
|
12026
12029
|
weight = _ref.weight,
|
|
12030
|
+
_ref$disabled = _ref.disabled,
|
|
12031
|
+
disabled = _ref$disabled === void 0 ? false : _ref$disabled,
|
|
12027
12032
|
inputProps = _ref.inputProps,
|
|
12028
12033
|
props = _objectWithoutProperties(_ref, _excluded$5);
|
|
12029
12034
|
|
|
@@ -12040,14 +12045,16 @@
|
|
|
12040
12045
|
}, props), /*#__PURE__*/React__default["default"].createElement(StyledSpan, {
|
|
12041
12046
|
variant: variant,
|
|
12042
12047
|
forwardedAs: "span",
|
|
12043
|
-
weight: weight
|
|
12048
|
+
weight: weight,
|
|
12049
|
+
$disabled: disabled
|
|
12044
12050
|
}, inputProps === null || inputProps === void 0 ? void 0 : inputProps.value), /*#__PURE__*/React__default["default"].createElement(StyledInput, _extends({}, inputProps, {
|
|
12045
12051
|
ref: intInputRef,
|
|
12046
12052
|
forwardedAs: "input",
|
|
12047
12053
|
variant: variant,
|
|
12048
12054
|
weight: weight,
|
|
12049
12055
|
value: inputProps === null || inputProps === void 0 ? void 0 : inputProps.value,
|
|
12050
|
-
onBlur: handleBlur
|
|
12056
|
+
onBlur: handleBlur,
|
|
12057
|
+
disabled: disabled
|
|
12051
12058
|
})));
|
|
12052
12059
|
});
|
|
12053
12060
|
EditableContent.displayName = "EditableContent";
|