@elliemae/ds-page-header-v2 3.35.0 → 3.36.0-rc.0
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/page-header-editable-title/PageHeaderEditableTitle.js +1 -1
- package/dist/cjs/components/page-header-editable-title/PageHeaderEditableTitle.js.map +2 -2
- package/dist/esm/components/page-header-editable-title/PageHeaderEditableTitle.js +2 -2
- package/dist/esm/components/page-header-editable-title/PageHeaderEditableTitle.js.map +2 -2
- package/package.json +14 -14
|
@@ -71,7 +71,7 @@ const PageHeaderEditableTitle = (props) => {
|
|
|
71
71
|
const [hovered, setHovered] = (0, import_react.useState)(false);
|
|
72
72
|
const [editing, setEditing] = (0, import_ds_utilities.useDerivedStateFromProps)(editingProp || false);
|
|
73
73
|
const titleRef = (0, import_react.useRef)(null);
|
|
74
|
-
const
|
|
74
|
+
const width = titleRef.current?.offsetWidth || 0;
|
|
75
75
|
const handleOnChange = (0, import_react.useCallback)((e) => {
|
|
76
76
|
setTitleValue(e.target.value);
|
|
77
77
|
}, []);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/components/page-header-editable-title/PageHeaderEditableTitle.tsx", "../../../../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["import React, { useRef, useState, useCallback } from 'react';\nimport { DSInputText, DSInputTextName, DSInputTextSlots } from '@elliemae/ds-form-input-text';\nimport { styled } from '@elliemae/ds-system';\nimport { describe, useGetGlobalAttributes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { useDerivedStateFromProps
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgEnB;AAhEJ,mBAAqD;AACrD,gCAA+D;AAC/D,uBAAuB;AACvB,8BAAqE;AACrE,
|
|
4
|
+
"sourcesContent": ["import React, { useRef, useState, useCallback } from 'react';\nimport { DSInputText, DSInputTextName, DSInputTextSlots } from '@elliemae/ds-form-input-text';\nimport { styled } from '@elliemae/ds-system';\nimport { describe, useGetGlobalAttributes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { useDerivedStateFromProps } from '@elliemae/ds-utilities';\nimport { PageHeaderTitle } from '../page-header-title/index.js';\nimport { DSPageHeaderDataTestIds } from '../../exported-related/index.js';\nimport { PageHeaderEditableTitlePropTypes, type PageHeaderEditableTitleT } from './react-desc-prop-types.js';\n\nconst EditableContainer = styled('div')`\n height: 32px;\n position: relative;\n overflow: hidden;\n &.editable-title-component {\n position: relative;\n left: -7px;\n top: -1px;\n margin-left: -2px;\n margin-right: -9px;\n & .${DSInputTextName}-${DSInputTextSlots.INPUT_WRAPPER} {\n height: 32px;\n }\n & .${DSInputTextName}-${DSInputTextSlots.INPUT} {\n font-size: ${({ theme }) => theme.fontSizes.title[800]};\n line-height: normal;\n color: ${({ theme }) => theme.colors.neutral['700']};\n padding-top: 0px;\n padding-bottom: 0px;\n }\n }\n`;\n\nexport const PageHeaderEditableTitle = (props: PageHeaderEditableTitleT.Props) => {\n const { children: value, editing: editingProp, showMarker, ...rest } = props;\n const [titleValue, setTitleValue] = useState(value);\n const [hovered, setHovered] = useState(false);\n const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);\n const titleRef = useRef<HTMLDivElement>(null);\n const width = titleRef.current?.offsetWidth || 0;\n\n const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((e) => {\n setTitleValue(e.target.value);\n }, []);\n\n const handleOnFocus: React.FocusEventHandler = useCallback(() => {\n setEditing(true);\n }, [setEditing]);\n\n const handleOnBlur: React.FocusEventHandler = useCallback(() => {\n setEditing(false);\n }, [setEditing]);\n\n const handleOnMouseOut: React.MouseEventHandler = useCallback(() => {\n setHovered(false);\n }, []);\n\n const globals = useGetGlobalAttributes(rest, {\n onFocus: handleOnFocus,\n onMouseOut: handleOnMouseOut,\n onChange: handleOnChange,\n onBlur: handleOnBlur,\n });\n\n return (\n <EditableContainer\n className={hovered || editing ? 'editable-title-component' : ''}\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n data-testid={DSPageHeaderDataTestIds.EDITABLE_HEADER_TITLE}\n >\n {(hovered || editing) && (\n <DSInputText\n onChange={handleOnChange}\n {...rest}\n {...globals}\n placeholder=\"\"\n style={{ width: width + 10, minWidth: '260px', maxWidth: '100%' }}\n value={titleValue}\n />\n )}\n <div ref={titleRef} style={{ width: 'fit-content' }}>\n <PageHeaderTitle showMarker={showMarker && !hovered && !editing}>{titleValue}</PageHeaderTitle>\n </div>\n </EditableContainer>\n );\n};\n\nPageHeaderEditableTitle.propTypes = PageHeaderEditableTitlePropTypes as ValidationMap<unknown>;\nPageHeaderEditableTitle.displayName = 'PageHeaderEditableTitle';\nconst DSPageHeaderEditableTitleWithSchema = describe(PageHeaderEditableTitle);\n\nDSPageHeaderEditableTitleWithSchema.propTypes = PageHeaderEditableTitlePropTypes as ValidationMap<unknown>;\n\nexport default PageHeaderEditableTitle;\n\nexport { DSPageHeaderEditableTitleWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADgEnB;AAhEJ,mBAAqD;AACrD,gCAA+D;AAC/D,uBAAuB;AACvB,8BAAqE;AACrE,0BAAyC;AACzC,+BAAgC;AAChC,8BAAwC;AACxC,mCAAgF;AAEhF,MAAM,wBAAoB,yBAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAU7B,6CAAmB,2CAAiB;AAAA;AAAA;AAAA,SAGpC,6CAAmB,2CAAiB;AAAA,mBAC1B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG;AAAA;AAAA,eAE5C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjD,MAAM,0BAA0B,CAAC,UAA0C;AAChF,QAAM,EAAE,UAAU,OAAO,SAAS,aAAa,YAAY,GAAG,KAAK,IAAI;AACvE,QAAM,CAAC,YAAY,aAAa,QAAI,uBAAS,KAAK;AAClD,QAAM,CAAC,SAAS,UAAU,QAAI,uBAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,UAAU,QAAI,8CAAyB,eAAe,KAAK;AAC3E,QAAM,eAAW,qBAAuB,IAAI;AAC5C,QAAM,QAAQ,SAAS,SAAS,eAAe;AAE/C,QAAM,qBAA6D,0BAAY,CAAC,MAAM;AACpF,kBAAc,EAAE,OAAO,KAAK;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,oBAAyC,0BAAY,MAAM;AAC/D,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,mBAAwC,0BAAY,MAAM;AAC9D,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,uBAA4C,0BAAY,MAAM;AAClE,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,QAAM,cAAU,gDAAuB,MAAM;AAAA,IAC3C,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,EACV,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW,UAAU,6BAA6B;AAAA,MAC7D,cAAc,MAAM,WAAW,IAAI;AAAA,MACnC,cAAc,MAAM,WAAW,KAAK;AAAA,MACpC,eAAa,gDAAwB;AAAA,MAEnC;AAAA,oBAAW,YACX;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACT,GAAG;AAAA,YACH,GAAG;AAAA,YACJ,aAAY;AAAA,YACZ,OAAO,EAAE,OAAO,QAAQ,IAAI,UAAU,SAAS,UAAU,OAAO;AAAA,YAChE,OAAO;AAAA;AAAA,QACT;AAAA,QAEF,4CAAC,SAAI,KAAK,UAAU,OAAO,EAAE,OAAO,cAAc,GAChD,sDAAC,4CAAgB,YAAY,cAAc,CAAC,WAAW,CAAC,SAAU,sBAAW,GAC/E;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,wBAAwB,YAAY;AACpC,wBAAwB,cAAc;AACtC,MAAM,0CAAsC,kCAAS,uBAAuB;AAE5E,oCAAoC,YAAY;AAEhD,IAAO,kCAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -4,7 +4,7 @@ import { useRef, useState, useCallback } from "react";
|
|
|
4
4
|
import { DSInputText, DSInputTextName, DSInputTextSlots } from "@elliemae/ds-form-input-text";
|
|
5
5
|
import { styled } from "@elliemae/ds-system";
|
|
6
6
|
import { describe, useGetGlobalAttributes } from "@elliemae/ds-props-helpers";
|
|
7
|
-
import { useDerivedStateFromProps
|
|
7
|
+
import { useDerivedStateFromProps } from "@elliemae/ds-utilities";
|
|
8
8
|
import { PageHeaderTitle } from "../page-header-title/index.js";
|
|
9
9
|
import { DSPageHeaderDataTestIds } from "../../exported-related/index.js";
|
|
10
10
|
import { PageHeaderEditableTitlePropTypes } from "./react-desc-prop-types.js";
|
|
@@ -36,7 +36,7 @@ const PageHeaderEditableTitle = (props) => {
|
|
|
36
36
|
const [hovered, setHovered] = useState(false);
|
|
37
37
|
const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);
|
|
38
38
|
const titleRef = useRef(null);
|
|
39
|
-
const
|
|
39
|
+
const width = titleRef.current?.offsetWidth || 0;
|
|
40
40
|
const handleOnChange = useCallback((e) => {
|
|
41
41
|
setTitleValue(e.target.value);
|
|
42
42
|
}, []);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/components/page-header-editable-title/PageHeaderEditableTitle.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useState, useCallback } from 'react';\nimport { DSInputText, DSInputTextName, DSInputTextSlots } from '@elliemae/ds-form-input-text';\nimport { styled } from '@elliemae/ds-system';\nimport { describe, useGetGlobalAttributes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { useDerivedStateFromProps
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACgEnB,SAOI,KAPJ;AAhEJ,SAAgB,QAAQ,UAAU,mBAAmB;AACrD,SAAS,aAAa,iBAAiB,wBAAwB;AAC/D,SAAS,cAAc;AACvB,SAAS,UAAU,8BAAkD;AACrE,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { useRef, useState, useCallback } from 'react';\nimport { DSInputText, DSInputTextName, DSInputTextSlots } from '@elliemae/ds-form-input-text';\nimport { styled } from '@elliemae/ds-system';\nimport { describe, useGetGlobalAttributes, type ValidationMap } from '@elliemae/ds-props-helpers';\nimport { useDerivedStateFromProps } from '@elliemae/ds-utilities';\nimport { PageHeaderTitle } from '../page-header-title/index.js';\nimport { DSPageHeaderDataTestIds } from '../../exported-related/index.js';\nimport { PageHeaderEditableTitlePropTypes, type PageHeaderEditableTitleT } from './react-desc-prop-types.js';\n\nconst EditableContainer = styled('div')`\n height: 32px;\n position: relative;\n overflow: hidden;\n &.editable-title-component {\n position: relative;\n left: -7px;\n top: -1px;\n margin-left: -2px;\n margin-right: -9px;\n & .${DSInputTextName}-${DSInputTextSlots.INPUT_WRAPPER} {\n height: 32px;\n }\n & .${DSInputTextName}-${DSInputTextSlots.INPUT} {\n font-size: ${({ theme }) => theme.fontSizes.title[800]};\n line-height: normal;\n color: ${({ theme }) => theme.colors.neutral['700']};\n padding-top: 0px;\n padding-bottom: 0px;\n }\n }\n`;\n\nexport const PageHeaderEditableTitle = (props: PageHeaderEditableTitleT.Props) => {\n const { children: value, editing: editingProp, showMarker, ...rest } = props;\n const [titleValue, setTitleValue] = useState(value);\n const [hovered, setHovered] = useState(false);\n const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);\n const titleRef = useRef<HTMLDivElement>(null);\n const width = titleRef.current?.offsetWidth || 0;\n\n const handleOnChange: React.ChangeEventHandler<HTMLInputElement> = useCallback((e) => {\n setTitleValue(e.target.value);\n }, []);\n\n const handleOnFocus: React.FocusEventHandler = useCallback(() => {\n setEditing(true);\n }, [setEditing]);\n\n const handleOnBlur: React.FocusEventHandler = useCallback(() => {\n setEditing(false);\n }, [setEditing]);\n\n const handleOnMouseOut: React.MouseEventHandler = useCallback(() => {\n setHovered(false);\n }, []);\n\n const globals = useGetGlobalAttributes(rest, {\n onFocus: handleOnFocus,\n onMouseOut: handleOnMouseOut,\n onChange: handleOnChange,\n onBlur: handleOnBlur,\n });\n\n return (\n <EditableContainer\n className={hovered || editing ? 'editable-title-component' : ''}\n onMouseEnter={() => setHovered(true)}\n onMouseLeave={() => setHovered(false)}\n data-testid={DSPageHeaderDataTestIds.EDITABLE_HEADER_TITLE}\n >\n {(hovered || editing) && (\n <DSInputText\n onChange={handleOnChange}\n {...rest}\n {...globals}\n placeholder=\"\"\n style={{ width: width + 10, minWidth: '260px', maxWidth: '100%' }}\n value={titleValue}\n />\n )}\n <div ref={titleRef} style={{ width: 'fit-content' }}>\n <PageHeaderTitle showMarker={showMarker && !hovered && !editing}>{titleValue}</PageHeaderTitle>\n </div>\n </EditableContainer>\n );\n};\n\nPageHeaderEditableTitle.propTypes = PageHeaderEditableTitlePropTypes as ValidationMap<unknown>;\nPageHeaderEditableTitle.displayName = 'PageHeaderEditableTitle';\nconst DSPageHeaderEditableTitleWithSchema = describe(PageHeaderEditableTitle);\n\nDSPageHeaderEditableTitleWithSchema.propTypes = PageHeaderEditableTitlePropTypes as ValidationMap<unknown>;\n\nexport default PageHeaderEditableTitle;\n\nexport { DSPageHeaderEditableTitleWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACgEnB,SAOI,KAPJ;AAhEJ,SAAgB,QAAQ,UAAU,mBAAmB;AACrD,SAAS,aAAa,iBAAiB,wBAAwB;AAC/D,SAAS,cAAc;AACvB,SAAS,UAAU,8BAAkD;AACrE,SAAS,gCAAgC;AACzC,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AACxC,SAAS,wCAAuE;AAEhF,MAAM,oBAAoB,OAAO,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAU7B,mBAAmB,iBAAiB;AAAA;AAAA;AAAA,SAGpC,mBAAmB,iBAAiB;AAAA,mBAC1B,CAAC,EAAE,MAAM,MAAM,MAAM,UAAU,MAAM,GAAG;AAAA;AAAA,eAE5C,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjD,MAAM,0BAA0B,CAAC,UAA0C;AAChF,QAAM,EAAE,UAAU,OAAO,SAAS,aAAa,YAAY,GAAG,KAAK,IAAI;AACvE,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,KAAK;AAC5C,QAAM,CAAC,SAAS,UAAU,IAAI,yBAAyB,eAAe,KAAK;AAC3E,QAAM,WAAW,OAAuB,IAAI;AAC5C,QAAM,QAAQ,SAAS,SAAS,eAAe;AAE/C,QAAM,iBAA6D,YAAY,CAAC,MAAM;AACpF,kBAAc,EAAE,OAAO,KAAK;AAAA,EAC9B,GAAG,CAAC,CAAC;AAEL,QAAM,gBAAyC,YAAY,MAAM;AAC/D,eAAW,IAAI;AAAA,EACjB,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,eAAwC,YAAY,MAAM;AAC9D,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,UAAU,CAAC;AAEf,QAAM,mBAA4C,YAAY,MAAM;AAClE,eAAW,KAAK;AAAA,EAClB,GAAG,CAAC,CAAC;AAEL,QAAM,UAAU,uBAAuB,MAAM;AAAA,IAC3C,SAAS;AAAA,IACT,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,EACV,CAAC;AAED,SACE;AAAA,IAAC;AAAA;AAAA,MACC,WAAW,WAAW,UAAU,6BAA6B;AAAA,MAC7D,cAAc,MAAM,WAAW,IAAI;AAAA,MACnC,cAAc,MAAM,WAAW,KAAK;AAAA,MACpC,eAAa,wBAAwB;AAAA,MAEnC;AAAA,oBAAW,YACX;AAAA,UAAC;AAAA;AAAA,YACC,UAAU;AAAA,YACT,GAAG;AAAA,YACH,GAAG;AAAA,YACJ,aAAY;AAAA,YACZ,OAAO,EAAE,OAAO,QAAQ,IAAI,UAAU,SAAS,UAAU,OAAO;AAAA,YAChE,OAAO;AAAA;AAAA,QACT;AAAA,QAEF,oBAAC,SAAI,KAAK,UAAU,OAAO,EAAE,OAAO,cAAc,GAChD,8BAAC,mBAAgB,YAAY,cAAc,CAAC,WAAW,CAAC,SAAU,sBAAW,GAC/E;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,wBAAwB,YAAY;AACpC,wBAAwB,cAAc;AACtC,MAAM,sCAAsC,SAAS,uBAAuB;AAE5E,oCAAoC,YAAY;AAEhD,IAAO,kCAAQ;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-page-header-v2",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.36.0-rc.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Page Header V2",
|
|
6
6
|
"files": [
|
|
@@ -73,23 +73,23 @@
|
|
|
73
73
|
},
|
|
74
74
|
"dependencies": {
|
|
75
75
|
"prop-types": "~15.8.1",
|
|
76
|
-
"@elliemae/ds-breadcrumb": "3.
|
|
77
|
-
"@elliemae/ds-
|
|
78
|
-
"@elliemae/ds-
|
|
79
|
-
"@elliemae/ds-
|
|
80
|
-
"@elliemae/ds-
|
|
81
|
-
"@elliemae/ds-icon": "3.
|
|
82
|
-
"@elliemae/ds-
|
|
83
|
-
"@elliemae/ds-
|
|
84
|
-
"@elliemae/ds-
|
|
85
|
-
"@elliemae/ds-system": "3.
|
|
86
|
-
"@elliemae/ds-truncated-tooltip-text": "3.
|
|
87
|
-
"@elliemae/ds-utilities": "3.
|
|
76
|
+
"@elliemae/ds-breadcrumb": "3.36.0-rc.0",
|
|
77
|
+
"@elliemae/ds-button": "3.36.0-rc.0",
|
|
78
|
+
"@elliemae/ds-form": "3.36.0-rc.0",
|
|
79
|
+
"@elliemae/ds-form-input-text": "3.36.0-rc.0",
|
|
80
|
+
"@elliemae/ds-grid": "3.36.0-rc.0",
|
|
81
|
+
"@elliemae/ds-icon": "3.36.0-rc.0",
|
|
82
|
+
"@elliemae/ds-icons": "3.36.0-rc.0",
|
|
83
|
+
"@elliemae/ds-props-helpers": "3.36.0-rc.0",
|
|
84
|
+
"@elliemae/ds-skeleton": "3.36.0-rc.0",
|
|
85
|
+
"@elliemae/ds-system": "3.36.0-rc.0",
|
|
86
|
+
"@elliemae/ds-truncated-tooltip-text": "3.36.0-rc.0",
|
|
87
|
+
"@elliemae/ds-utilities": "3.36.0-rc.0"
|
|
88
88
|
},
|
|
89
89
|
"devDependencies": {
|
|
90
90
|
"@elliemae/pui-cli": "~9.0.0-next.31",
|
|
91
91
|
"styled-components": "~5.3.9",
|
|
92
|
-
"@elliemae/ds-monorepo-devops": "3.
|
|
92
|
+
"@elliemae/ds-monorepo-devops": "3.36.0-rc.0"
|
|
93
93
|
},
|
|
94
94
|
"peerDependencies": {
|
|
95
95
|
"lodash": "^4.17.21",
|