@chayns-components/core 5.0.0-beta.582 → 5.0.0-beta.585
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/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.js +2 -0
- package/lib/cjs/components/context-menu/context-menu-content/ContextMenuContent.js.map +1 -1
- package/lib/cjs/components/text-area/TextArea.js +5 -1
- package/lib/cjs/components/text-area/TextArea.js.map +1 -1
- package/lib/cjs/components/text-area/TextArea.styles.js +3 -2
- package/lib/cjs/components/text-area/TextArea.styles.js.map +1 -1
- package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.js +2 -0
- package/lib/esm/components/context-menu/context-menu-content/ContextMenuContent.js.map +1 -1
- package/lib/esm/components/text-area/TextArea.js +6 -2
- package/lib/esm/components/text-area/TextArea.js.map +1 -1
- package/lib/esm/components/text-area/TextArea.styles.js +3 -2
- package/lib/esm/components/text-area/TextArea.styles.js.map +1 -1
- package/lib/types/components/text-area/TextArea.styles.d.ts +2 -1
- package/package.json +2 -2
|
@@ -61,6 +61,8 @@ const ContextMenuContent = /*#__PURE__*/_react.default.forwardRef(({
|
|
|
61
61
|
}) => /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentItem, {
|
|
62
62
|
key: key,
|
|
63
63
|
onClick: event => {
|
|
64
|
+
event.preventDefault();
|
|
65
|
+
event.stopPropagation();
|
|
64
66
|
void onClick(event);
|
|
65
67
|
}
|
|
66
68
|
}, /*#__PURE__*/_react.default.createElement(_ContextMenuContent.StyledContextMenuContentItemIconWrapper, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuContent.js","names":["_react","_interopRequireDefault","require","_contextMenu","_Icon","_ContextMenuContent","obj","__esModule","default","ContextMenuContent","React","forwardRef","alignment","coordinates","items","ref","isBottomLeftAlignment","ContextMenuAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","StyledMotionContextMenuContent","animate","opacity","y","exit","initial","$position","style","left","x","top","transition","type","transformTemplate","map","icons","key","onClick","text","StyledContextMenuContentItem","event","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText","displayName","_default","exports"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.tsx"],"sourcesContent":["import React from 'react';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\nimport Icon from '../../icon/Icon';\nimport type { ContextMenuCoordinates, ContextMenuItem } from '../ContextMenu';\nimport {\n StyledContextMenuContentItem,\n StyledContextMenuContentItemIconWrapper,\n StyledContextMenuContentItemText,\n StyledMotionContextMenuContent,\n} from './ContextMenuContent.styles';\n\ntype ContextMenuContentProps = {\n alignment: ContextMenuAlignment;\n coordinates: ContextMenuCoordinates;\n items: ContextMenuItem[];\n};\n\nconst ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(\n ({ alignment, coordinates, items }, ref) => {\n const isBottomLeftAlignment = alignment === ContextMenuAlignment.BottomLeft;\n const isTopLeftAlignment = alignment === ContextMenuAlignment.TopLeft;\n const isTopRightAlignment = alignment === ContextMenuAlignment.TopRight;\n\n const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n return (\n <StyledMotionContextMenuContent\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: exitAndInitialY }}\n initial={{ opacity: 0, y: exitAndInitialY }}\n $position={alignment}\n ref={ref}\n style={{ left: coordinates.x, top: coordinates.y }}\n transition={{ type: 'tween' }}\n transformTemplate={({ y = '0px' }) => `\n translateX(${percentageOffsetX}%)\n translateY(${percentageOffsetY}%)\n translateX(${anchorOffsetX}px)\n translateY(${anchorOffsetY}px)\n translateY(${y})\n `}\n >\n {items.map(({ icons, key, onClick, text }) => (\n <StyledContextMenuContentItem\n key={key}\n onClick={(event) => {\n void onClick(event);\n }}\n >\n <StyledContextMenuContentItemIconWrapper>\n <Icon icons={icons} />\n </StyledContextMenuContentItemIconWrapper>\n <StyledContextMenuContentItemText>{text}</StyledContextMenuContentItemText>\n </StyledContextMenuContentItem>\n ))}\n </StyledMotionContextMenuContent>\n );\n },\n);\n\nContextMenuContent.displayName = 'ContextMenuContent';\n\nexport default ContextMenuContent;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEA,IAAAG,mBAAA,GAAAH,OAAA;AAKqC,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAQrC,MAAMG,kBAAkB,gBAAGC,cAAK,CAACC,UAAU,CACvC,CAAC;EAAEC,SAAS;EAAEC,WAAW;EAAEC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACxC,MAAMC,qBAAqB,GAAGJ,SAAS,KAAKK,iCAAoB,CAACC,UAAU;EAC3E,MAAMC,kBAAkB,GAAGP,SAAS,KAAKK,iCAAoB,CAACG,OAAO;EACrE,MAAMC,mBAAmB,GAAGT,SAAS,KAAKK,iCAAoB,CAACK,QAAQ;EAEvE,MAAMC,iBAAiB,GAAGP,qBAAqB,IAAIG,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGT,qBAAqB,IAAIG,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACIrB,MAAA,CAAAQ,OAAA,CAAAoB,aAAA,CAACvB,mBAAA,CAAAwB,8BAA8B;IAC3BC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,IAAI,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IACzCO,OAAO,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IAC5CQ,SAAS,EAAEvB,SAAU;IACrBG,GAAG,EAAEA,GAAI;IACTqB,KAAK,EAAE;MAAEC,IAAI,EAAExB,WAAW,CAACyB,CAAC;MAAEC,GAAG,EAAE1B,WAAW,CAACmB;IAAE,CAAE;IACnDQ,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEA,CAAC;MAAEV,CAAC,GAAG;IAAM,CAAC,KAAM;AACvD,iCAAiCT,iBAAkB;AACnD,iCAAiCC,iBAAkB;AACnD,iCAAiCC,aAAc;AAC/C,iCAAiCC,aAAc;AAC/C,iCAAiCM,CAAE;AACnC;EAAkB,GAEDlB,KAAK,CAAC6B,GAAG,CAAC,CAAC;IAAEC,KAAK;IAAEC,GAAG;IAAEC,OAAO;IAAEC;EAAK,CAAC,kBACrC/C,MAAA,CAAAQ,OAAA,CAAAoB,aAAA,CAACvB,mBAAA,CAAA2C,4BAA4B;IACzBH,GAAG,EAAEA,GAAI;IACTC,OAAO,EAAGG,KAAK,IAAK;
|
|
1
|
+
{"version":3,"file":"ContextMenuContent.js","names":["_react","_interopRequireDefault","require","_contextMenu","_Icon","_ContextMenuContent","obj","__esModule","default","ContextMenuContent","React","forwardRef","alignment","coordinates","items","ref","isBottomLeftAlignment","ContextMenuAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","StyledMotionContextMenuContent","animate","opacity","y","exit","initial","$position","style","left","x","top","transition","type","transformTemplate","map","icons","key","onClick","text","StyledContextMenuContentItem","event","preventDefault","stopPropagation","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText","displayName","_default","exports"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.tsx"],"sourcesContent":["import React from 'react';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\nimport Icon from '../../icon/Icon';\nimport type { ContextMenuCoordinates, ContextMenuItem } from '../ContextMenu';\nimport {\n StyledContextMenuContentItem,\n StyledContextMenuContentItemIconWrapper,\n StyledContextMenuContentItemText,\n StyledMotionContextMenuContent,\n} from './ContextMenuContent.styles';\n\ntype ContextMenuContentProps = {\n alignment: ContextMenuAlignment;\n coordinates: ContextMenuCoordinates;\n items: ContextMenuItem[];\n};\n\nconst ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(\n ({ alignment, coordinates, items }, ref) => {\n const isBottomLeftAlignment = alignment === ContextMenuAlignment.BottomLeft;\n const isTopLeftAlignment = alignment === ContextMenuAlignment.TopLeft;\n const isTopRightAlignment = alignment === ContextMenuAlignment.TopRight;\n\n const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n return (\n <StyledMotionContextMenuContent\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: exitAndInitialY }}\n initial={{ opacity: 0, y: exitAndInitialY }}\n $position={alignment}\n ref={ref}\n style={{ left: coordinates.x, top: coordinates.y }}\n transition={{ type: 'tween' }}\n transformTemplate={({ y = '0px' }) => `\n translateX(${percentageOffsetX}%)\n translateY(${percentageOffsetY}%)\n translateX(${anchorOffsetX}px)\n translateY(${anchorOffsetY}px)\n translateY(${y})\n `}\n >\n {items.map(({ icons, key, onClick, text }) => (\n <StyledContextMenuContentItem\n key={key}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n\n void onClick(event);\n }}\n >\n <StyledContextMenuContentItemIconWrapper>\n <Icon icons={icons} />\n </StyledContextMenuContentItemIconWrapper>\n <StyledContextMenuContentItemText>{text}</StyledContextMenuContentItemText>\n </StyledContextMenuContentItem>\n ))}\n </StyledMotionContextMenuContent>\n );\n },\n);\n\nContextMenuContent.displayName = 'ContextMenuContent';\n\nexport default ContextMenuContent;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,YAAA,GAAAD,OAAA;AACA,IAAAE,KAAA,GAAAH,sBAAA,CAAAC,OAAA;AAEA,IAAAG,mBAAA,GAAAH,OAAA;AAKqC,SAAAD,uBAAAK,GAAA,WAAAA,GAAA,IAAAA,GAAA,CAAAC,UAAA,GAAAD,GAAA,KAAAE,OAAA,EAAAF,GAAA;AAQrC,MAAMG,kBAAkB,gBAAGC,cAAK,CAACC,UAAU,CACvC,CAAC;EAAEC,SAAS;EAAEC,WAAW;EAAEC;AAAM,CAAC,EAAEC,GAAG,KAAK;EACxC,MAAMC,qBAAqB,GAAGJ,SAAS,KAAKK,iCAAoB,CAACC,UAAU;EAC3E,MAAMC,kBAAkB,GAAGP,SAAS,KAAKK,iCAAoB,CAACG,OAAO;EACrE,MAAMC,mBAAmB,GAAGT,SAAS,KAAKK,iCAAoB,CAACK,QAAQ;EAEvE,MAAMC,iBAAiB,GAAGP,qBAAqB,IAAIG,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGT,qBAAqB,IAAIG,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACIrB,MAAA,CAAAQ,OAAA,CAAAoB,aAAA,CAACvB,mBAAA,CAAAwB,8BAA8B;IAC3BC,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,IAAI,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IACzCO,OAAO,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEL;IAAgB,CAAE;IAC5CQ,SAAS,EAAEvB,SAAU;IACrBG,GAAG,EAAEA,GAAI;IACTqB,KAAK,EAAE;MAAEC,IAAI,EAAExB,WAAW,CAACyB,CAAC;MAAEC,GAAG,EAAE1B,WAAW,CAACmB;IAAE,CAAE;IACnDQ,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEA,CAAC;MAAEV,CAAC,GAAG;IAAM,CAAC,KAAM;AACvD,iCAAiCT,iBAAkB;AACnD,iCAAiCC,iBAAkB;AACnD,iCAAiCC,aAAc;AAC/C,iCAAiCC,aAAc;AAC/C,iCAAiCM,CAAE;AACnC;EAAkB,GAEDlB,KAAK,CAAC6B,GAAG,CAAC,CAAC;IAAEC,KAAK;IAAEC,GAAG;IAAEC,OAAO;IAAEC;EAAK,CAAC,kBACrC/C,MAAA,CAAAQ,OAAA,CAAAoB,aAAA,CAACvB,mBAAA,CAAA2C,4BAA4B;IACzBH,GAAG,EAAEA,GAAI;IACTC,OAAO,EAAGG,KAAK,IAAK;MAChBA,KAAK,CAACC,cAAc,CAAC,CAAC;MACtBD,KAAK,CAACE,eAAe,CAAC,CAAC;MAEvB,KAAKL,OAAO,CAACG,KAAK,CAAC;IACvB;EAAE,gBAEFjD,MAAA,CAAAQ,OAAA,CAAAoB,aAAA,CAACvB,mBAAA,CAAA+C,uCAAuC,qBACpCpD,MAAA,CAAAQ,OAAA,CAAAoB,aAAA,CAACxB,KAAA,CAAAI,OAAI;IAACoC,KAAK,EAAEA;EAAM,CAAE,CACgB,CAAC,eAC1C5C,MAAA,CAAAQ,OAAA,CAAAoB,aAAA,CAACvB,mBAAA,CAAAgD,gCAAgC,QAAEN,IAAuC,CAChD,CACjC,CAC2B,CAAC;AAEzC,CACJ,CAAC;AAEDtC,kBAAkB,CAAC6C,WAAW,GAAG,oBAAoB;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAhD,OAAA,GAEvCC,kBAAkB","ignoreList":[]}
|
|
@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
var _chaynsApi = require("chayns-api");
|
|
8
8
|
var _react = _interopRequireWildcard(require("react"));
|
|
9
|
+
var _AreaContextProvider = require("../area-provider/AreaContextProvider");
|
|
9
10
|
var _TextArea = require("./TextArea.styles");
|
|
10
11
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
|
|
11
12
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -18,10 +19,12 @@ const TextArea = ({
|
|
|
18
19
|
minHeight = '41px'
|
|
19
20
|
}) => {
|
|
20
21
|
const [isOverflowing, setIsOverflowing] = (0, _react.useState)(false);
|
|
22
|
+
const areaProvider = (0, _react.useContext)(_AreaContextProvider.AreaContext);
|
|
21
23
|
const textareaRef = (0, _react.useRef)(null);
|
|
22
24
|
const {
|
|
23
25
|
browser
|
|
24
26
|
} = (0, _chaynsApi.getDevice)();
|
|
27
|
+
const shouldChangeColor = (0, _react.useMemo)(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
|
|
25
28
|
const adjustTextareaHeight = (0, _react.useCallback)(() => {
|
|
26
29
|
if (textareaRef.current) {
|
|
27
30
|
textareaRef.current.style.height = 'auto';
|
|
@@ -40,6 +43,7 @@ const TextArea = ({
|
|
|
40
43
|
}
|
|
41
44
|
}, [adjustTextareaHeight, value]);
|
|
42
45
|
return (0, _react.useMemo)(() => /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextArea, null, /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaInput, {
|
|
46
|
+
$shouldChangeColor: shouldChangeColor,
|
|
43
47
|
$browser: browser === null || browser === void 0 ? void 0 : browser.name,
|
|
44
48
|
ref: textareaRef,
|
|
45
49
|
value: value,
|
|
@@ -49,7 +53,7 @@ const TextArea = ({
|
|
|
49
53
|
$minHeight: minHeight,
|
|
50
54
|
$isOverflowing: isOverflowing,
|
|
51
55
|
rows: 1
|
|
52
|
-
}), !value && /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabelWrapper, null, ' ', /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabel, null, placeholder))), [browser === null || browser === void 0 ? void 0 : browser.name, isOverflowing, maxHeight, minHeight, onBlur, onChange, placeholder, value]);
|
|
56
|
+
}), !value && /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabelWrapper, null, ' ', /*#__PURE__*/_react.default.createElement(_TextArea.StyledTextAreaLabel, null, placeholder))), [browser === null || browser === void 0 ? void 0 : browser.name, isOverflowing, maxHeight, minHeight, onBlur, onChange, placeholder, shouldChangeColor, value]);
|
|
53
57
|
};
|
|
54
58
|
TextArea.displayName = 'TextArea';
|
|
55
59
|
var _default = exports.default = TextArea;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_TextArea","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TextArea","placeholder","value","onChange","onBlur","maxHeight","minHeight","isOverflowing","setIsOverflowing","useState","textareaRef","useRef","browser","getDevice","adjustTextareaHeight","useCallback","current","style","height","scrollHeight","parseInt","toString","useEffect","length","
|
|
1
|
+
{"version":3,"file":"TextArea.js","names":["_chaynsApi","require","_react","_interopRequireWildcard","_AreaContextProvider","_TextArea","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","TextArea","placeholder","value","onChange","onBlur","maxHeight","minHeight","isOverflowing","setIsOverflowing","useState","areaProvider","useContext","AreaContext","textareaRef","useRef","browser","getDevice","shouldChangeColor","useMemo","adjustTextareaHeight","useCallback","current","style","height","scrollHeight","parseInt","toString","useEffect","length","createElement","StyledTextArea","StyledTextAreaInput","$shouldChangeColor","$browser","name","ref","$maxHeight","$minHeight","$isOverflowing","rows","StyledTextAreaLabelWrapper","StyledTextAreaLabel","displayName","_default","exports"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n FC,\n FocusEventHandler,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport {\n StyledTextArea,\n StyledTextAreaInput,\n StyledTextAreaLabel,\n StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\n\nexport type TextAreaProps = {\n /**\n * The maximum height of the text area.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * The minimum height of the text area.\n */\n minHeight?: CSSProperties['minHeight'];\n /**\n * Function that is executed when the text area loses focus.\n */\n onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when the text of the text area changes.\n */\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n /**\n * Placeholder for the text area field.\n */\n placeholder?: string | ReactElement;\n /**\n * Value if the text area should be controlled.\n */\n value?: string;\n};\n\nconst TextArea: FC<TextAreaProps> = ({\n placeholder,\n value,\n onChange,\n onBlur,\n maxHeight = '120px',\n minHeight = '41px',\n}) => {\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n const areaProvider = useContext(AreaContext);\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n const { browser } = getDevice();\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const adjustTextareaHeight = useCallback(() => {\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));\n }\n }, [maxHeight]);\n\n /**\n * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n * To maintain the functionality while clearing the input, the length need to be greater than -1.\n */\n useEffect(() => {\n if (value && value.length > -1) {\n adjustTextareaHeight();\n }\n }, [adjustTextareaHeight, value]);\n\n return useMemo(\n () => (\n <StyledTextArea>\n <StyledTextAreaInput\n $shouldChangeColor={shouldChangeColor}\n $browser={browser?.name}\n ref={textareaRef}\n value={value}\n onBlur={onBlur}\n onChange={onChange}\n $maxHeight={maxHeight}\n $minHeight={minHeight}\n $isOverflowing={isOverflowing}\n rows={1}\n />\n {!value && (\n <StyledTextAreaLabelWrapper>\n {' '}\n <StyledTextAreaLabel>{placeholder}</StyledTextAreaLabel>\n </StyledTextAreaLabelWrapper>\n )}\n </StyledTextArea>\n ),\n [\n browser?.name,\n isOverflowing,\n maxHeight,\n minHeight,\n onBlur,\n onChange,\n placeholder,\n shouldChangeColor,\n value,\n ],\n );\n};\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -17,8 +17,9 @@ const StyledTextAreaInput = exports.StyledTextAreaInput = _styledComponents.defa
|
|
|
17
17
|
border-radius: 3px;
|
|
18
18
|
border: 1px solid rgba(160, 160, 160, 0.3);
|
|
19
19
|
background-color: ${({
|
|
20
|
-
theme
|
|
21
|
-
|
|
20
|
+
theme,
|
|
21
|
+
$shouldChangeColor
|
|
22
|
+
}) => theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};
|
|
22
23
|
color: ${({
|
|
23
24
|
theme
|
|
24
25
|
}) => theme.text};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledTextArea","exports","styled","div","StyledTextAreaInput","textarea","theme","text","$isOverflowing","$maxHeight","$minHeight","$browser","css","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"TextArea.styles.js","names":["_styledComponents","_interopRequireWildcard","require","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","StyledTextArea","exports","styled","div","StyledTextAreaInput","textarea","theme","$shouldChangeColor","colorMode","text","$isOverflowing","$maxHeight","$minHeight","$browser","css","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTextArea = styled.div`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n position: relative;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n $shouldChangeColor: boolean;\n $isOverflowing: boolean;\n $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n border-radius: 3px;\n border: 1px solid rgba(160, 160, 160, 0.3);\n background-color: ${({ theme, $shouldChangeColor }: StyledTextAreaInputProps) =>\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n color: ${({ theme }: StyledTextAreaInputProps) => theme.text};\n resize: none;\n overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n max-height: ${({ $maxHeight }: StyledTextAreaInputProps) => $maxHeight};\n min-height: ${({ $minHeight }: StyledTextAreaInputProps) => $minHeight};\n width: 100%;\n padding: 8px 10px;\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledTextAreaInputProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n background-clip: padding-box;\n border: solid 3px transparent;\n }\n `}\n`;\n\nexport const StyledTextAreaLabelWrapper = styled.label`\n left: 10px;\n top: 12px;\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n width: calc(100% - 20px);\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<unknown>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n color: rgba(${({ theme }: StyledTextAreaLabelProps) => theme['text-rgb']}, 0.45);\n line-height: 1.3;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -60,6 +60,8 @@ const ContextMenuContent = /*#__PURE__*/React.forwardRef((_ref, ref) => {
|
|
|
60
60
|
return /*#__PURE__*/React.createElement(StyledContextMenuContentItem, {
|
|
61
61
|
key: key,
|
|
62
62
|
onClick: event => {
|
|
63
|
+
event.preventDefault();
|
|
64
|
+
event.stopPropagation();
|
|
63
65
|
void onClick(event);
|
|
64
66
|
}
|
|
65
67
|
}, /*#__PURE__*/React.createElement(StyledContextMenuContentItemIconWrapper, null, /*#__PURE__*/React.createElement(Icon, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContextMenuContent.js","names":["React","ContextMenuAlignment","Icon","StyledContextMenuContentItem","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText","StyledMotionContextMenuContent","ContextMenuContent","forwardRef","_ref","ref","alignment","coordinates","items","isBottomLeftAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","animate","opacity","y","exit","initial","$position","style","left","x","top","transition","type","transformTemplate","_ref2","map","_ref3","icons","key","onClick","text","event","displayName"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.tsx"],"sourcesContent":["import React from 'react';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\nimport Icon from '../../icon/Icon';\nimport type { ContextMenuCoordinates, ContextMenuItem } from '../ContextMenu';\nimport {\n StyledContextMenuContentItem,\n StyledContextMenuContentItemIconWrapper,\n StyledContextMenuContentItemText,\n StyledMotionContextMenuContent,\n} from './ContextMenuContent.styles';\n\ntype ContextMenuContentProps = {\n alignment: ContextMenuAlignment;\n coordinates: ContextMenuCoordinates;\n items: ContextMenuItem[];\n};\n\nconst ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(\n ({ alignment, coordinates, items }, ref) => {\n const isBottomLeftAlignment = alignment === ContextMenuAlignment.BottomLeft;\n const isTopLeftAlignment = alignment === ContextMenuAlignment.TopLeft;\n const isTopRightAlignment = alignment === ContextMenuAlignment.TopRight;\n\n const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n return (\n <StyledMotionContextMenuContent\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: exitAndInitialY }}\n initial={{ opacity: 0, y: exitAndInitialY }}\n $position={alignment}\n ref={ref}\n style={{ left: coordinates.x, top: coordinates.y }}\n transition={{ type: 'tween' }}\n transformTemplate={({ y = '0px' }) => `\n translateX(${percentageOffsetX}%)\n translateY(${percentageOffsetY}%)\n translateX(${anchorOffsetX}px)\n translateY(${anchorOffsetY}px)\n translateY(${y})\n `}\n >\n {items.map(({ icons, key, onClick, text }) => (\n <StyledContextMenuContentItem\n key={key}\n onClick={(event) => {\n void onClick(event);\n }}\n >\n <StyledContextMenuContentItemIconWrapper>\n <Icon icons={icons} />\n </StyledContextMenuContentItemIconWrapper>\n <StyledContextMenuContentItemText>{text}</StyledContextMenuContentItemText>\n </StyledContextMenuContentItem>\n ))}\n </StyledMotionContextMenuContent>\n );\n },\n);\n\nContextMenuContent.displayName = 'ContextMenuContent';\n\nexport default ContextMenuContent;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,oBAAoB,QAAQ,4BAA4B;AACjE,OAAOC,IAAI,MAAM,iBAAiB;AAElC,SACIC,4BAA4B,EAC5BC,uCAAuC,EACvCC,gCAAgC,EAChCC,8BAA8B,QAC3B,6BAA6B;AAQpC,MAAMC,kBAAkB,gBAAGP,KAAK,CAACQ,UAAU,CACvC,CAAAC,IAAA,EAAoCC,GAAG,KAAK;EAAA,IAA3C;IAAEC,SAAS;IAAEC,WAAW;IAAEC;EAAM,CAAC,GAAAJ,IAAA;EAC9B,MAAMK,qBAAqB,GAAGH,SAAS,KAAKV,oBAAoB,CAACc,UAAU;EAC3E,MAAMC,kBAAkB,GAAGL,SAAS,KAAKV,oBAAoB,CAACgB,OAAO;EACrE,MAAMC,mBAAmB,GAAGP,SAAS,KAAKV,oBAAoB,CAACkB,QAAQ;EAEvE,MAAMC,iBAAiB,GAAGN,qBAAqB,IAAIE,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAChF,MAAMK,iBAAiB,GAAGH,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,GAAG,GAAG,CAAC;EAE9E,MAAMM,aAAa,GAAGR,qBAAqB,IAAIE,kBAAkB,GAAG,EAAE,GAAG,CAAC,EAAE;EAC5E,MAAMO,aAAa,GAAGL,mBAAmB,IAAIF,kBAAkB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE1E,MAAMQ,eAAe,GAAGR,kBAAkB,IAAIE,mBAAmB,GAAG,CAAC,EAAE,GAAG,EAAE;EAE5E,oBACIlB,KAAA,CAAAyB,aAAA,CAACnB,8BAA8B;IAC3BoB,OAAO,EAAE;MAAEC,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAE;IAAE,CAAE;IAC9BC,IAAI,EAAE;MAAEF,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IACzCM,OAAO,EAAE;MAAEH,OAAO,EAAE,CAAC;MAAEC,CAAC,EAAEJ;IAAgB,CAAE;IAC5CO,SAAS,EAAEpB,SAAU;IACrBD,GAAG,EAAEA,GAAI;IACTsB,KAAK,EAAE;MAAEC,IAAI,EAAErB,WAAW,CAACsB,CAAC;MAAEC,GAAG,EAAEvB,WAAW,CAACgB;IAAE,CAAE;IACnDQ,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ,CAAE;IAC9BC,iBAAiB,EAAEC,KAAA;MAAA,IAAC;QAAEX,CAAC,GAAG;MAAM,CAAC,GAAAW,KAAA;MAAA,OAAM;AACvD,iCAAiCnB,iBAAkB;AACnD,iCAAiCC,iBAAkB;AACnD,iCAAiCC,aAAc;AAC/C,iCAAiCC,aAAc;AAC/C,iCAAiCK,CAAE;AACnC,iBAAiB;IAAA;EAAC,GAEDf,KAAK,CAAC2B,GAAG,CAACC,KAAA;IAAA,IAAC;MAAEC,KAAK;MAAEC,GAAG;MAAEC,OAAO;MAAEC;IAAK,CAAC,GAAAJ,KAAA;IAAA,oBACrCzC,KAAA,CAAAyB,aAAA,CAACtB,4BAA4B;MACzBwC,GAAG,EAAEA,GAAI;MACTC,OAAO,EAAGE,KAAK,IAAK;
|
|
1
|
+
{"version":3,"file":"ContextMenuContent.js","names":["React","ContextMenuAlignment","Icon","StyledContextMenuContentItem","StyledContextMenuContentItemIconWrapper","StyledContextMenuContentItemText","StyledMotionContextMenuContent","ContextMenuContent","forwardRef","_ref","ref","alignment","coordinates","items","isBottomLeftAlignment","BottomLeft","isTopLeftAlignment","TopLeft","isTopRightAlignment","TopRight","percentageOffsetX","percentageOffsetY","anchorOffsetX","anchorOffsetY","exitAndInitialY","createElement","animate","opacity","y","exit","initial","$position","style","left","x","top","transition","type","transformTemplate","_ref2","map","_ref3","icons","key","onClick","text","event","preventDefault","stopPropagation","displayName"],"sources":["../../../../../src/components/context-menu/context-menu-content/ContextMenuContent.tsx"],"sourcesContent":["import React from 'react';\nimport { ContextMenuAlignment } from '../../../types/contextMenu';\nimport Icon from '../../icon/Icon';\nimport type { ContextMenuCoordinates, ContextMenuItem } from '../ContextMenu';\nimport {\n StyledContextMenuContentItem,\n StyledContextMenuContentItemIconWrapper,\n StyledContextMenuContentItemText,\n StyledMotionContextMenuContent,\n} from './ContextMenuContent.styles';\n\ntype ContextMenuContentProps = {\n alignment: ContextMenuAlignment;\n coordinates: ContextMenuCoordinates;\n items: ContextMenuItem[];\n};\n\nconst ContextMenuContent = React.forwardRef<HTMLDivElement, ContextMenuContentProps>(\n ({ alignment, coordinates, items }, ref) => {\n const isBottomLeftAlignment = alignment === ContextMenuAlignment.BottomLeft;\n const isTopLeftAlignment = alignment === ContextMenuAlignment.TopLeft;\n const isTopRightAlignment = alignment === ContextMenuAlignment.TopRight;\n\n const percentageOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? -100 : 0;\n const percentageOffsetY = isTopRightAlignment || isTopLeftAlignment ? -100 : 0;\n\n const anchorOffsetX = isBottomLeftAlignment || isTopLeftAlignment ? 21 : -21;\n const anchorOffsetY = isTopRightAlignment || isTopLeftAlignment ? -21 : 21;\n\n const exitAndInitialY = isTopLeftAlignment || isTopRightAlignment ? -16 : 16;\n\n return (\n <StyledMotionContextMenuContent\n animate={{ opacity: 1, y: 0 }}\n exit={{ opacity: 0, y: exitAndInitialY }}\n initial={{ opacity: 0, y: exitAndInitialY }}\n $position={alignment}\n ref={ref}\n style={{ left: coordinates.x, top: coordinates.y }}\n transition={{ type: 'tween' }}\n transformTemplate={({ y = '0px' }) => `\n translateX(${percentageOffsetX}%)\n translateY(${percentageOffsetY}%)\n translateX(${anchorOffsetX}px)\n translateY(${anchorOffsetY}px)\n translateY(${y})\n `}\n >\n {items.map(({ icons, key, onClick, text }) => (\n <StyledContextMenuContentItem\n key={key}\n onClick={(event) => {\n event.preventDefault();\n event.stopPropagation();\n\n void onClick(event);\n }}\n >\n <StyledContextMenuContentItemIconWrapper>\n <Icon icons={icons} />\n </StyledContextMenuContentItemIconWrapper>\n <StyledContextMenuContentItemText>{text}</StyledContextMenuContentItemText>\n </StyledContextMenuContentItem>\n ))}\n </StyledMotionContextMenuContent>\n );\n },\n);\n\nContextMenuContent.displayName = 'ContextMenuContent';\n\nexport default ContextMenuContent;\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { getDevice } from 'chayns-api';
|
|
2
|
-
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
|
2
|
+
import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
|
|
3
|
+
import { AreaContext } from '../area-provider/AreaContextProvider';
|
|
3
4
|
import { StyledTextArea, StyledTextAreaInput, StyledTextAreaLabel, StyledTextAreaLabelWrapper } from './TextArea.styles';
|
|
4
5
|
const TextArea = _ref => {
|
|
5
6
|
let {
|
|
@@ -11,10 +12,12 @@ const TextArea = _ref => {
|
|
|
11
12
|
minHeight = '41px'
|
|
12
13
|
} = _ref;
|
|
13
14
|
const [isOverflowing, setIsOverflowing] = useState(false);
|
|
15
|
+
const areaProvider = useContext(AreaContext);
|
|
14
16
|
const textareaRef = useRef(null);
|
|
15
17
|
const {
|
|
16
18
|
browser
|
|
17
19
|
} = getDevice();
|
|
20
|
+
const shouldChangeColor = useMemo(() => areaProvider.shouldChangeColor ?? false, [areaProvider.shouldChangeColor]);
|
|
18
21
|
const adjustTextareaHeight = useCallback(() => {
|
|
19
22
|
if (textareaRef.current) {
|
|
20
23
|
textareaRef.current.style.height = 'auto';
|
|
@@ -33,6 +36,7 @@ const TextArea = _ref => {
|
|
|
33
36
|
}
|
|
34
37
|
}, [adjustTextareaHeight, value]);
|
|
35
38
|
return useMemo(() => /*#__PURE__*/React.createElement(StyledTextArea, null, /*#__PURE__*/React.createElement(StyledTextAreaInput, {
|
|
39
|
+
$shouldChangeColor: shouldChangeColor,
|
|
36
40
|
$browser: browser?.name,
|
|
37
41
|
ref: textareaRef,
|
|
38
42
|
value: value,
|
|
@@ -42,7 +46,7 @@ const TextArea = _ref => {
|
|
|
42
46
|
$minHeight: minHeight,
|
|
43
47
|
$isOverflowing: isOverflowing,
|
|
44
48
|
rows: 1
|
|
45
|
-
}), !value && /*#__PURE__*/React.createElement(StyledTextAreaLabelWrapper, null, ' ', /*#__PURE__*/React.createElement(StyledTextAreaLabel, null, placeholder))), [browser?.name, isOverflowing, maxHeight, minHeight, onBlur, onChange, placeholder, value]);
|
|
49
|
+
}), !value && /*#__PURE__*/React.createElement(StyledTextAreaLabelWrapper, null, ' ', /*#__PURE__*/React.createElement(StyledTextAreaLabel, null, placeholder))), [browser?.name, isOverflowing, maxHeight, minHeight, onBlur, onChange, placeholder, shouldChangeColor, value]);
|
|
46
50
|
};
|
|
47
51
|
TextArea.displayName = 'TextArea';
|
|
48
52
|
export default TextArea;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.js","names":["getDevice","React","useCallback","useEffect","useMemo","useRef","useState","StyledTextArea","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","TextArea","_ref","placeholder","value","onChange","onBlur","maxHeight","minHeight","isOverflowing","setIsOverflowing","textareaRef","browser","adjustTextareaHeight","current","style","height","scrollHeight","parseInt","toString","length","createElement","$browser","name","ref","$maxHeight","$minHeight","$isOverflowing","rows","displayName"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n FC,\n FocusEventHandler,\n ReactElement,\n useCallback,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport {\n StyledTextArea,\n StyledTextAreaInput,\n StyledTextAreaLabel,\n StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\n\nexport type TextAreaProps = {\n /**\n * The maximum height of the text area.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * The minimum height of the text area.\n */\n minHeight?: CSSProperties['minHeight'];\n /**\n * Function that is executed when the text area loses focus.\n */\n onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when the text of the text area changes.\n */\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n /**\n * Placeholder for the text area field.\n */\n placeholder?: string | ReactElement;\n /**\n * Value if the text area should be controlled.\n */\n value?: string;\n};\n\nconst TextArea: FC<TextAreaProps> = ({\n placeholder,\n value,\n onChange,\n onBlur,\n maxHeight = '120px',\n minHeight = '41px',\n}) => {\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n const { browser } = getDevice();\n\n const adjustTextareaHeight = useCallback(() => {\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));\n }\n }, [maxHeight]);\n\n /**\n * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n * To maintain the functionality while clearing the input, the length need to be greater than -1.\n */\n useEffect(() => {\n if (value && value.length > -1) {\n adjustTextareaHeight();\n }\n }, [adjustTextareaHeight, value]);\n\n return useMemo(\n () => (\n <StyledTextArea>\n <StyledTextAreaInput\n $browser={browser?.name}\n ref={textareaRef}\n value={value}\n onBlur={onBlur}\n onChange={onChange}\n $maxHeight={maxHeight}\n $minHeight={minHeight}\n $isOverflowing={isOverflowing}\n rows={1}\n />\n {!value && (\n <StyledTextAreaLabelWrapper>\n {' '}\n <StyledTextAreaLabel>{placeholder}</StyledTextAreaLabel>\n </StyledTextAreaLabelWrapper>\n )}\n </StyledTextArea>\n ),\n [browser?.name
|
|
1
|
+
{"version":3,"file":"TextArea.js","names":["getDevice","React","useCallback","useContext","useEffect","useMemo","useRef","useState","AreaContext","StyledTextArea","StyledTextAreaInput","StyledTextAreaLabel","StyledTextAreaLabelWrapper","TextArea","_ref","placeholder","value","onChange","onBlur","maxHeight","minHeight","isOverflowing","setIsOverflowing","areaProvider","textareaRef","browser","shouldChangeColor","adjustTextareaHeight","current","style","height","scrollHeight","parseInt","toString","length","createElement","$shouldChangeColor","$browser","name","ref","$maxHeight","$minHeight","$isOverflowing","rows","displayName"],"sources":["../../../../src/components/text-area/TextArea.tsx"],"sourcesContent":["import { getDevice } from 'chayns-api';\nimport React, {\n ChangeEventHandler,\n CSSProperties,\n FC,\n FocusEventHandler,\n ReactElement,\n useCallback,\n useContext,\n useEffect,\n useMemo,\n useRef,\n useState,\n} from 'react';\nimport { AreaContext } from '../area-provider/AreaContextProvider';\nimport {\n StyledTextArea,\n StyledTextAreaInput,\n StyledTextAreaLabel,\n StyledTextAreaLabelWrapper,\n} from './TextArea.styles';\n\nexport type TextAreaProps = {\n /**\n * The maximum height of the text area.\n */\n maxHeight?: CSSProperties['maxHeight'];\n /**\n * The minimum height of the text area.\n */\n minHeight?: CSSProperties['minHeight'];\n /**\n * Function that is executed when the text area loses focus.\n */\n onBlur?: FocusEventHandler<HTMLTextAreaElement>;\n /**\n * Function that is executed when the text of the text area changes.\n */\n onChange?: ChangeEventHandler<HTMLTextAreaElement>;\n /**\n * Placeholder for the text area field.\n */\n placeholder?: string | ReactElement;\n /**\n * Value if the text area should be controlled.\n */\n value?: string;\n};\n\nconst TextArea: FC<TextAreaProps> = ({\n placeholder,\n value,\n onChange,\n onBlur,\n maxHeight = '120px',\n minHeight = '41px',\n}) => {\n const [isOverflowing, setIsOverflowing] = useState(false);\n\n const areaProvider = useContext(AreaContext);\n\n const textareaRef = useRef<HTMLTextAreaElement>(null);\n\n const { browser } = getDevice();\n\n const shouldChangeColor = useMemo(\n () => areaProvider.shouldChangeColor ?? false,\n [areaProvider.shouldChangeColor],\n );\n\n const adjustTextareaHeight = useCallback(() => {\n if (textareaRef.current) {\n textareaRef.current.style.height = 'auto';\n textareaRef.current.style.height = `${textareaRef.current.scrollHeight}px`;\n\n setIsOverflowing(textareaRef.current.scrollHeight > parseInt(maxHeight.toString(), 10));\n }\n }, [maxHeight]);\n\n /**\n * This hook calculates the height of the TextArea after the displayValue is changed and the content is inside the \"textareaRef\".\n * To maintain the functionality while clearing the input, the length need to be greater than -1.\n */\n useEffect(() => {\n if (value && value.length > -1) {\n adjustTextareaHeight();\n }\n }, [adjustTextareaHeight, value]);\n\n return useMemo(\n () => (\n <StyledTextArea>\n <StyledTextAreaInput\n $shouldChangeColor={shouldChangeColor}\n $browser={browser?.name}\n ref={textareaRef}\n value={value}\n onBlur={onBlur}\n onChange={onChange}\n $maxHeight={maxHeight}\n $minHeight={minHeight}\n $isOverflowing={isOverflowing}\n rows={1}\n />\n {!value && (\n <StyledTextAreaLabelWrapper>\n {' '}\n <StyledTextAreaLabel>{placeholder}</StyledTextAreaLabel>\n </StyledTextAreaLabelWrapper>\n )}\n </StyledTextArea>\n ),\n [\n browser?.name,\n isOverflowing,\n maxHeight,\n minHeight,\n onBlur,\n onChange,\n placeholder,\n shouldChangeColor,\n value,\n ],\n );\n};\n\nTextArea.displayName = 'TextArea';\n\nexport default TextArea;\n"],"mappings":"AAAA,SAASA,SAAS,QAAQ,YAAY;AACtC,OAAOC,KAAK,IAMRC,WAAW,EACXC,UAAU,EACVC,SAAS,EACTC,OAAO,EACPC,MAAM,EACNC,QAAQ,QACL,OAAO;AACd,SAASC,WAAW,QAAQ,sCAAsC;AAClE,SACIC,cAAc,EACdC,mBAAmB,EACnBC,mBAAmB,EACnBC,0BAA0B,QACvB,mBAAmB;AA6B1B,MAAMC,QAA2B,GAAGC,IAAA,IAO9B;EAAA,IAP+B;IACjCC,WAAW;IACXC,KAAK;IACLC,QAAQ;IACRC,MAAM;IACNC,SAAS,GAAG,OAAO;IACnBC,SAAS,GAAG;EAChB,CAAC,GAAAN,IAAA;EACG,MAAM,CAACO,aAAa,EAAEC,gBAAgB,CAAC,GAAGf,QAAQ,CAAC,KAAK,CAAC;EAEzD,MAAMgB,YAAY,GAAGpB,UAAU,CAACK,WAAW,CAAC;EAE5C,MAAMgB,WAAW,GAAGlB,MAAM,CAAsB,IAAI,CAAC;EAErD,MAAM;IAAEmB;EAAQ,CAAC,GAAGzB,SAAS,CAAC,CAAC;EAE/B,MAAM0B,iBAAiB,GAAGrB,OAAO,CAC7B,MAAMkB,YAAY,CAACG,iBAAiB,IAAI,KAAK,EAC7C,CAACH,YAAY,CAACG,iBAAiB,CACnC,CAAC;EAED,MAAMC,oBAAoB,GAAGzB,WAAW,CAAC,MAAM;IAC3C,IAAIsB,WAAW,CAACI,OAAO,EAAE;MACrBJ,WAAW,CAACI,OAAO,CAACC,KAAK,CAACC,MAAM,GAAG,MAAM;MACzCN,WAAW,CAACI,OAAO,CAACC,KAAK,CAACC,MAAM,GAAI,GAAEN,WAAW,CAACI,OAAO,CAACG,YAAa,IAAG;MAE1ET,gBAAgB,CAACE,WAAW,CAACI,OAAO,CAACG,YAAY,GAAGC,QAAQ,CAACb,SAAS,CAACc,QAAQ,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC;IAC3F;EACJ,CAAC,EAAE,CAACd,SAAS,CAAC,CAAC;;EAEf;AACJ;AACA;AACA;EACIf,SAAS,CAAC,MAAM;IACZ,IAAIY,KAAK,IAAIA,KAAK,CAACkB,MAAM,GAAG,CAAC,CAAC,EAAE;MAC5BP,oBAAoB,CAAC,CAAC;IAC1B;EACJ,CAAC,EAAE,CAACA,oBAAoB,EAAEX,KAAK,CAAC,CAAC;EAEjC,OAAOX,OAAO,CACV,mBACIJ,KAAA,CAAAkC,aAAA,CAAC1B,cAAc,qBACXR,KAAA,CAAAkC,aAAA,CAACzB,mBAAmB;IAChB0B,kBAAkB,EAAEV,iBAAkB;IACtCW,QAAQ,EAAEZ,OAAO,EAAEa,IAAK;IACxBC,GAAG,EAAEf,WAAY;IACjBR,KAAK,EAAEA,KAAM;IACbE,MAAM,EAAEA,MAAO;IACfD,QAAQ,EAAEA,QAAS;IACnBuB,UAAU,EAAErB,SAAU;IACtBsB,UAAU,EAAErB,SAAU;IACtBsB,cAAc,EAAErB,aAAc;IAC9BsB,IAAI,EAAE;EAAE,CACX,CAAC,EACD,CAAC3B,KAAK,iBACHf,KAAA,CAAAkC,aAAA,CAACvB,0BAA0B,QACtB,GAAG,eACJX,KAAA,CAAAkC,aAAA,CAACxB,mBAAmB,QAAEI,WAAiC,CAC/B,CAEpB,CACnB,EACD,CACIU,OAAO,EAAEa,IAAI,EACbjB,aAAa,EACbF,SAAS,EACTC,SAAS,EACTF,MAAM,EACND,QAAQ,EACRF,WAAW,EACXW,iBAAiB,EACjBV,KAAK,CAEb,CAAC;AACL,CAAC;AAEDH,QAAQ,CAAC+B,WAAW,GAAG,UAAU;AAEjC,eAAe/B,QAAQ","ignoreList":[]}
|
|
@@ -10,9 +10,10 @@ export const StyledTextAreaInput = styled.textarea`
|
|
|
10
10
|
border: 1px solid rgba(160, 160, 160, 0.3);
|
|
11
11
|
background-color: ${_ref => {
|
|
12
12
|
let {
|
|
13
|
-
theme
|
|
13
|
+
theme,
|
|
14
|
+
$shouldChangeColor
|
|
14
15
|
} = _ref;
|
|
15
|
-
return theme['100'];
|
|
16
|
+
return theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100'];
|
|
16
17
|
}};
|
|
17
18
|
color: ${_ref2 => {
|
|
18
19
|
let {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TextArea.styles.js","names":["styled","css","StyledTextArea","div","StyledTextAreaInput","textarea","_ref","theme","_ref2","text","_ref3","$isOverflowing","_ref4","$maxHeight","_ref5","$minHeight","_ref6","$browser","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel","_ref7"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type {
|
|
1
|
+
{"version":3,"file":"TextArea.styles.js","names":["styled","css","StyledTextArea","div","StyledTextAreaInput","textarea","_ref","theme","$shouldChangeColor","colorMode","_ref2","text","_ref3","$isOverflowing","_ref4","$maxHeight","_ref5","$minHeight","_ref6","$browser","StyledTextAreaLabelWrapper","label","StyledTextAreaLabel","_ref7"],"sources":["../../../../src/components/text-area/TextArea.styles.ts"],"sourcesContent":["import type { Browser } from 'detect-browser';\nimport type { CSSProperties } from 'react';\nimport styled, { css } from 'styled-components';\nimport type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';\n\nexport const StyledTextArea = styled.div`\n display: flex;\n flex: 1 1 auto;\n min-width: 0;\n position: relative;\n`;\n\ntype StyledTextAreaInputProps = WithTheme<{\n $maxHeight: CSSProperties['maxHeight'];\n $minHeight: CSSProperties['minHeight'];\n $shouldChangeColor: boolean;\n $isOverflowing: boolean;\n $browser: Browser | 'bot' | null | undefined;\n}>;\n\nexport const StyledTextAreaInput = styled.textarea<StyledTextAreaInputProps>`\n border-radius: 3px;\n border: 1px solid rgba(160, 160, 160, 0.3);\n background-color: ${({ theme, $shouldChangeColor }: StyledTextAreaInputProps) =>\n theme.colorMode === 'classic' || $shouldChangeColor ? theme['000'] : theme['100']};\n color: ${({ theme }: StyledTextAreaInputProps) => theme.text};\n resize: none;\n overflow-y: ${({ $isOverflowing }) => ($isOverflowing ? 'scroll' : 'hidden')};\n max-height: ${({ $maxHeight }: StyledTextAreaInputProps) => $maxHeight};\n min-height: ${({ $minHeight }: StyledTextAreaInputProps) => $minHeight};\n width: 100%;\n padding: 8px 10px;\n\n // Styles for custom scrollbar\n ${({ $browser, theme }: StyledTextAreaInputProps) =>\n $browser === 'firefox'\n ? css`\n scrollbar-color: rgba(${theme['text-rgb']}, 0.15) transparent;\n scrollbar-width: thin;\n `\n : css`\n &::-webkit-scrollbar {\n width: 10px;\n }\n\n &::-webkit-scrollbar-track {\n background-color: transparent;\n }\n\n &::-webkit-scrollbar-button {\n background-color: transparent;\n height: 5px;\n }\n\n &::-webkit-scrollbar-thumb {\n background-color: rgba(${theme['text-rgb']}, 0.15);\n border-radius: 20px;\n background-clip: padding-box;\n border: solid 3px transparent;\n }\n `}\n`;\n\nexport const StyledTextAreaLabelWrapper = styled.label`\n left: 10px;\n top: 12px;\n align-items: baseline;\n display: flex;\n flex: 0 0 auto;\n gap: 4px;\n line-height: 1.3;\n pointer-events: none;\n position: absolute;\n user-select: none;\n width: calc(100% - 20px);\n`;\n\ntype StyledTextAreaLabelProps = WithTheme<unknown>;\n\nexport const StyledTextAreaLabel = styled.label<StyledTextAreaLabelProps>`\n color: rgba(${({ theme }: StyledTextAreaLabelProps) => theme['text-rgb']}, 0.45);\n line-height: 1.3;\n width: 100%;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n`;\n"],"mappings":"AAEA,OAAOA,MAAM,IAAIC,GAAG,QAAQ,mBAAmB;AAG/C,OAAO,MAAMC,cAAc,GAAGF,MAAM,CAACG,GAAI;AACzC;AACA;AACA;AACA;AACA,CAAC;AAUD,OAAO,MAAMC,mBAAmB,GAAGJ,MAAM,CAACK,QAAmC;AAC7E;AACA;AACA,wBAAwBC,IAAA;EAAA,IAAC;IAAEC,KAAK;IAAEC;EAA6C,CAAC,GAAAF,IAAA;EAAA,OACxEC,KAAK,CAACE,SAAS,KAAK,SAAS,IAAID,kBAAkB,GAAGD,KAAK,CAAC,KAAK,CAAC,GAAGA,KAAK,CAAC,KAAK,CAAC;AAAA,CAAC;AAC1F,aAAaG,KAAA;EAAA,IAAC;IAAEH;EAAgC,CAAC,GAAAG,KAAA;EAAA,OAAKH,KAAK,CAACI,IAAI;AAAA,CAAC;AACjE;AACA,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAe,CAAC,GAAAD,KAAA;EAAA,OAAMC,cAAc,GAAG,QAAQ,GAAG,QAAQ;AAAA,CAAE;AACjF,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,KAAA;EAAA,OAAKC,UAAU;AAAA,CAAC;AAC3E,kBAAkBC,KAAA;EAAA,IAAC;IAAEC;EAAqC,CAAC,GAAAD,KAAA;EAAA,OAAKC,UAAU;AAAA,CAAC;AAC3E;AACA;AACA;AACA;AACA,MAAMC,KAAA;EAAA,IAAC;IAAEC,QAAQ;IAAEZ;EAAgC,CAAC,GAAAW,KAAA;EAAA,OAC5CC,QAAQ,KAAK,SAAS,GAChBlB,GAAI;AAClB,0CAA0CM,KAAK,CAAC,UAAU,CAAE;AAC5D;AACA,eAAe,GACDN,GAAI;AAClB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,+CAA+CM,KAAK,CAAC,UAAU,CAAE;AACjE;AACA;AACA;AACA;AACA,eAAe;AAAA,CAAC;AAChB,CAAC;AAED,OAAO,MAAMa,0BAA0B,GAAGpB,MAAM,CAACqB,KAAM;AACvD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,CAAC;AAID,OAAO,MAAMC,mBAAmB,GAAGtB,MAAM,CAACqB,KAAgC;AAC1E,kBAAkBE,KAAA;EAAA,IAAC;IAAEhB;EAAgC,CAAC,GAAAgB,KAAA;EAAA,OAAKhB,KAAK,CAAC,UAAU,CAAC;AAAA,CAAC;AAC7E;AACA;AACA;AACA;AACA;AACA,CAAC","ignoreList":[]}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import type { CSSProperties } from 'react';
|
|
2
1
|
import type { Browser } from 'detect-browser';
|
|
2
|
+
import type { CSSProperties } from 'react';
|
|
3
3
|
import type { WithTheme } from '../color-scheme-provider/ColorSchemeProvider';
|
|
4
4
|
export declare const StyledTextArea: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
|
|
5
5
|
type StyledTextAreaInputProps = WithTheme<{
|
|
6
6
|
$maxHeight: CSSProperties['maxHeight'];
|
|
7
7
|
$minHeight: CSSProperties['minHeight'];
|
|
8
|
+
$shouldChangeColor: boolean;
|
|
8
9
|
$isOverflowing: boolean;
|
|
9
10
|
$browser: Browser | 'bot' | null | undefined;
|
|
10
11
|
}>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.585",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -83,5 +83,5 @@
|
|
|
83
83
|
"publishConfig": {
|
|
84
84
|
"access": "public"
|
|
85
85
|
},
|
|
86
|
-
"gitHead": "
|
|
86
|
+
"gitHead": "9ae196d3f395e90749eee152d4ac1fd60b971e34"
|
|
87
87
|
}
|