@elliemae/ds-page-header 3.16.0-next.21 → 3.16.0-next.22

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.
@@ -42,6 +42,7 @@ var import_ds_props_helpers = require("@elliemae/ds-props-helpers");
42
42
  var import_ds_utilities = require("@elliemae/ds-utilities");
43
43
  var import_PageHeaderTitle = require("./PageHeaderTitle.js");
44
44
  var import_exported_related = require("../exported-related/index.js");
45
+ const useMeasureSafe = import_ds_utilities.useMeasure.default ?? import_ds_utilities.useMeasure;
45
46
  const EditableContainer = (0, import_ds_system.styled)("div")`
46
47
  height: 32px;
47
48
  position: relative;
@@ -72,7 +73,7 @@ const PageHeaderEditableTitle = ({
72
73
  const [hovered, setHovered] = (0, import_react.useState)(false);
73
74
  const [editing, setEditing] = (0, import_ds_utilities.useDerivedStateFromProps)(editingProp || false);
74
75
  const titleRef = (0, import_react.useRef)(null);
75
- const { width } = (0, import_ds_utilities.useMeasure)(titleRef);
76
+ const { width } = useMeasureSafe(titleRef);
76
77
  const handleOnChange = (0, import_react.useCallback)((e) => {
77
78
  setTitleValue(e.target.value);
78
79
  }, []);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/v2/components/PageHeaderEditableTitle.tsx", "../../../../../../scripts/build/transpile/react-shim.js"],
4
- "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React, { useRef, useState, useCallback } from 'react';\nimport { DSInputText, DSInputTextName, DSInputTextSlots } from '@elliemae/ds-form-input-text';\nimport { styled } from '@elliemae/ds-system';\nimport { PropTypes, describe, useGetGlobalAttributes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { useDerivedStateFromProps, useMeasure } from '@elliemae/ds-utilities';\nimport { PageHeaderTitle } from './PageHeaderTitle.js';\nimport { DSPageHeaderDataTestIds } from '../exported-related/index.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 }\n }\n`;\n\nexport const PageHeaderEditableTitle = ({\n children: value,\n editing: editingProp = false,\n showMarker = false,\n ...rest\n}) => {\n const [titleValue, setTitleValue] = useState(value);\n const [hovered, setHovered] = useState(false);\n const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);\n const titleRef = useRef(null);\n const { width } = useMeasure(titleRef);\n\n const handleOnChange: React.FormEventHandler<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\nconst props = {\n ...globalAttributesPropTypes,\n /** The title text */\n children: PropTypes.string.description('The title text'),\n /** Whether the title is editing or not */\n editing: PropTypes.bool.description('Whether the title is editing or not'),\n /** Show error marker */\n showMarker: PropTypes.bool.description('Show error marker'),\n};\n\nPageHeaderEditableTitle.propTypes = props as WeakValidationMap<unknown>;\nPageHeaderEditableTitle.displayName = 'PageHeaderEditableTitle';\nconst DSPageHeaderEditableTitleWithSchema = describe(PageHeaderEditableTitle);\n\nDSPageHeaderEditableTitleWithSchema.propTypes = props as WeakValidationMap<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;ADkEnB;AAjEJ,mBAAqD;AACrD,gCAA+D;AAC/D,uBAAuB;AACvB,8BAAuF;AACvF,0BAAqD;AACrD,6BAAgC;AAChC,8BAAwC;AAExC,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;AAKjD,MAAM,0BAA0B,CAAC;AAAA,EACtC,UAAU;AAAA,EACV,SAAS,cAAc;AAAA,EACvB,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,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,qBAAO,IAAI;AAC5B,QAAM,EAAE,MAAM,QAAI,gCAAW,QAAQ;AAErC,QAAM,qBAA2D,0BAAY,CAAC,MAAM;AAClF,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,0CAAgB,YAAY,cAAc,CAAC,WAAW,CAAC,SAAU,sBAAW,GAC/E;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EACZ,GAAG;AAAA;AAAA,EAEH,UAAU,kCAAU,OAAO,YAAY,gBAAgB;AAAA;AAAA,EAEvD,SAAS,kCAAU,KAAK,YAAY,qCAAqC;AAAA;AAAA,EAEzE,YAAY,kCAAU,KAAK,YAAY,mBAAmB;AAC5D;AAEA,wBAAwB,YAAY;AACpC,wBAAwB,cAAc;AACtC,MAAM,0CAAsC,kCAAS,uBAAuB;AAE5E,oCAAoC,YAAY;AAEhD,IAAO,kCAAQ;",
4
+ "sourcesContent": ["import type { WeakValidationMap } from 'react';\nimport React, { useRef, useState, useCallback } from 'react';\nimport { DSInputText, DSInputTextName, DSInputTextSlots } from '@elliemae/ds-form-input-text';\nimport { styled } from '@elliemae/ds-system';\nimport { PropTypes, describe, useGetGlobalAttributes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { useDerivedStateFromProps, useMeasure } from '@elliemae/ds-utilities';\nimport { PageHeaderTitle } from './PageHeaderTitle.js';\nimport { DSPageHeaderDataTestIds } from '../exported-related/index.js';\n\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\nconst useMeasureSafe: typeof useMeasure = (useMeasure as unknown).default ?? useMeasure;\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 }\n }\n`;\n\nexport const PageHeaderEditableTitle = ({\n children: value,\n editing: editingProp = false,\n showMarker = false,\n ...rest\n}) => {\n const [titleValue, setTitleValue] = useState(value);\n const [hovered, setHovered] = useState(false);\n const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);\n const titleRef = useRef(null);\n const { width } = useMeasureSafe(titleRef);\n\n const handleOnChange: React.FormEventHandler<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\nconst props = {\n ...globalAttributesPropTypes,\n /** The title text */\n children: PropTypes.string.description('The title text'),\n /** Whether the title is editing or not */\n editing: PropTypes.bool.description('Whether the title is editing or not'),\n /** Show error marker */\n showMarker: PropTypes.bool.description('Show error marker'),\n};\n\nPageHeaderEditableTitle.propTypes = props as WeakValidationMap<unknown>;\nPageHeaderEditableTitle.displayName = 'PageHeaderEditableTitle';\nconst DSPageHeaderEditableTitleWithSchema = describe(PageHeaderEditableTitle);\n\nDSPageHeaderEditableTitleWithSchema.propTypes = props as WeakValidationMap<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;ADqEnB;AApEJ,mBAAqD;AACrD,gCAA+D;AAC/D,uBAAuB;AACvB,8BAAuF;AACvF,0BAAqD;AACrD,6BAAgC;AAChC,8BAAwC;AAGxC,MAAM,iBAAqC,+BAAuB,WAAW;AAE7E,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;AAKjD,MAAM,0BAA0B,CAAC;AAAA,EACtC,UAAU;AAAA,EACV,SAAS,cAAc;AAAA,EACvB,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,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,qBAAO,IAAI;AAC5B,QAAM,EAAE,MAAM,IAAI,eAAe,QAAQ;AAEzC,QAAM,qBAA2D,0BAAY,CAAC,MAAM;AAClF,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,0CAAgB,YAAY,cAAc,CAAC,WAAW,CAAC,SAAU,sBAAW,GAC/E;AAAA;AAAA;AAAA,EACF;AAEJ;AAEA,MAAM,QAAQ;AAAA,EACZ,GAAG;AAAA;AAAA,EAEH,UAAU,kCAAU,OAAO,YAAY,gBAAgB;AAAA;AAAA,EAEvD,SAAS,kCAAU,KAAK,YAAY,qCAAqC;AAAA;AAAA,EAEzE,YAAY,kCAAU,KAAK,YAAY,mBAAmB;AAC5D;AAEA,wBAAwB,YAAY;AACpC,wBAAwB,cAAc;AACtC,MAAM,0CAAsC,kCAAS,uBAAuB;AAE5E,oCAAoC,YAAY;AAEhD,IAAO,kCAAQ;",
6
6
  "names": []
7
7
  }
@@ -7,6 +7,7 @@ import { PropTypes, describe, useGetGlobalAttributes, globalAttributesPropTypes
7
7
  import { useDerivedStateFromProps, useMeasure } from "@elliemae/ds-utilities";
8
8
  import { PageHeaderTitle } from "./PageHeaderTitle.js";
9
9
  import { DSPageHeaderDataTestIds } from "../exported-related/index.js";
10
+ const useMeasureSafe = useMeasure.default ?? useMeasure;
10
11
  const EditableContainer = styled("div")`
11
12
  height: 32px;
12
13
  position: relative;
@@ -37,7 +38,7 @@ const PageHeaderEditableTitle = ({
37
38
  const [hovered, setHovered] = useState(false);
38
39
  const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);
39
40
  const titleRef = useRef(null);
40
- const { width } = useMeasure(titleRef);
41
+ const { width } = useMeasureSafe(titleRef);
41
42
  const handleOnChange = useCallback((e) => {
42
43
  setTitleValue(e.target.value);
43
44
  }, []);
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/v2/components/PageHeaderEditableTitle.tsx"],
4
- "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React, { useRef, useState, useCallback } from 'react';\nimport { DSInputText, DSInputTextName, DSInputTextSlots } from '@elliemae/ds-form-input-text';\nimport { styled } from '@elliemae/ds-system';\nimport { PropTypes, describe, useGetGlobalAttributes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { useDerivedStateFromProps, useMeasure } from '@elliemae/ds-utilities';\nimport { PageHeaderTitle } from './PageHeaderTitle.js';\nimport { DSPageHeaderDataTestIds } from '../exported-related/index.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 }\n }\n`;\n\nexport const PageHeaderEditableTitle = ({\n children: value,\n editing: editingProp = false,\n showMarker = false,\n ...rest\n}) => {\n const [titleValue, setTitleValue] = useState(value);\n const [hovered, setHovered] = useState(false);\n const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);\n const titleRef = useRef(null);\n const { width } = useMeasure(titleRef);\n\n const handleOnChange: React.FormEventHandler<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\nconst props = {\n ...globalAttributesPropTypes,\n /** The title text */\n children: PropTypes.string.description('The title text'),\n /** Whether the title is editing or not */\n editing: PropTypes.bool.description('Whether the title is editing or not'),\n /** Show error marker */\n showMarker: PropTypes.bool.description('Show error marker'),\n};\n\nPageHeaderEditableTitle.propTypes = props as WeakValidationMap<unknown>;\nPageHeaderEditableTitle.displayName = 'PageHeaderEditableTitle';\nconst DSPageHeaderEditableTitleWithSchema = describe(PageHeaderEditableTitle);\n\nDSPageHeaderEditableTitleWithSchema.propTypes = props as WeakValidationMap<unknown>;\n\nexport default PageHeaderEditableTitle;\n\nexport { DSPageHeaderEditableTitleWithSchema };\n"],
5
- "mappings": "AAAA,YAAY,WAAW;ACkEnB,SAOI,KAPJ;AAjEJ,SAAgB,QAAQ,UAAU,mBAAmB;AACrD,SAAS,aAAa,iBAAiB,wBAAwB;AAC/D,SAAS,cAAc;AACvB,SAAS,WAAW,UAAU,wBAAwB,iCAAiC;AACvF,SAAS,0BAA0B,kBAAkB;AACrD,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AAExC,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;AAKjD,MAAM,0BAA0B,CAAC;AAAA,EACtC,UAAU;AAAA,EACV,SAAS,cAAc;AAAA,EACvB,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,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,OAAO,IAAI;AAC5B,QAAM,EAAE,MAAM,IAAI,WAAW,QAAQ;AAErC,QAAM,iBAA2D,YAAY,CAAC,MAAM;AAClF,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,MAAM,QAAQ;AAAA,EACZ,GAAG;AAAA;AAAA,EAEH,UAAU,UAAU,OAAO,YAAY,gBAAgB;AAAA;AAAA,EAEvD,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA;AAAA,EAEzE,YAAY,UAAU,KAAK,YAAY,mBAAmB;AAC5D;AAEA,wBAAwB,YAAY;AACpC,wBAAwB,cAAc;AACtC,MAAM,sCAAsC,SAAS,uBAAuB;AAE5E,oCAAoC,YAAY;AAEhD,IAAO,kCAAQ;",
4
+ "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type { WeakValidationMap } from 'react';\nimport React, { useRef, useState, useCallback } from 'react';\nimport { DSInputText, DSInputTextName, DSInputTextSlots } from '@elliemae/ds-form-input-text';\nimport { styled } from '@elliemae/ds-system';\nimport { PropTypes, describe, useGetGlobalAttributes, globalAttributesPropTypes } from '@elliemae/ds-props-helpers';\nimport { useDerivedStateFromProps, useMeasure } from '@elliemae/ds-utilities';\nimport { PageHeaderTitle } from './PageHeaderTitle.js';\nimport { DSPageHeaderDataTestIds } from '../exported-related/index.js';\n\n// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment\nconst useMeasureSafe: typeof useMeasure = (useMeasure as unknown).default ?? useMeasure;\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 }\n }\n`;\n\nexport const PageHeaderEditableTitle = ({\n children: value,\n editing: editingProp = false,\n showMarker = false,\n ...rest\n}) => {\n const [titleValue, setTitleValue] = useState(value);\n const [hovered, setHovered] = useState(false);\n const [editing, setEditing] = useDerivedStateFromProps(editingProp || false);\n const titleRef = useRef(null);\n const { width } = useMeasureSafe(titleRef);\n\n const handleOnChange: React.FormEventHandler<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\nconst props = {\n ...globalAttributesPropTypes,\n /** The title text */\n children: PropTypes.string.description('The title text'),\n /** Whether the title is editing or not */\n editing: PropTypes.bool.description('Whether the title is editing or not'),\n /** Show error marker */\n showMarker: PropTypes.bool.description('Show error marker'),\n};\n\nPageHeaderEditableTitle.propTypes = props as WeakValidationMap<unknown>;\nPageHeaderEditableTitle.displayName = 'PageHeaderEditableTitle';\nconst DSPageHeaderEditableTitleWithSchema = describe(PageHeaderEditableTitle);\n\nDSPageHeaderEditableTitleWithSchema.propTypes = props as WeakValidationMap<unknown>;\n\nexport default PageHeaderEditableTitle;\n\nexport { DSPageHeaderEditableTitleWithSchema };\n"],
5
+ "mappings": "AAAA,YAAY,WAAW;ACqEnB,SAOI,KAPJ;AApEJ,SAAgB,QAAQ,UAAU,mBAAmB;AACrD,SAAS,aAAa,iBAAiB,wBAAwB;AAC/D,SAAS,cAAc;AACvB,SAAS,WAAW,UAAU,wBAAwB,iCAAiC;AACvF,SAAS,0BAA0B,kBAAkB;AACrD,SAAS,uBAAuB;AAChC,SAAS,+BAA+B;AAGxC,MAAM,iBAAqC,WAAuB,WAAW;AAE7E,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;AAKjD,MAAM,0BAA0B,CAAC;AAAA,EACtC,UAAU;AAAA,EACV,SAAS,cAAc;AAAA,EACvB,aAAa;AAAA,EACb,GAAG;AACL,MAAM;AACJ,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,OAAO,IAAI;AAC5B,QAAM,EAAE,MAAM,IAAI,eAAe,QAAQ;AAEzC,QAAM,iBAA2D,YAAY,CAAC,MAAM;AAClF,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,MAAM,QAAQ;AAAA,EACZ,GAAG;AAAA;AAAA,EAEH,UAAU,UAAU,OAAO,YAAY,gBAAgB;AAAA;AAAA,EAEvD,SAAS,UAAU,KAAK,YAAY,qCAAqC;AAAA;AAAA,EAEzE,YAAY,UAAU,KAAK,YAAY,mBAAmB;AAC5D;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",
3
- "version": "3.16.0-next.21",
3
+ "version": "3.16.0-next.22",
4
4
  "license": "MIT",
5
5
  "description": "ICE MT - Dimsum - Page Header",
6
6
  "files": [
@@ -104,19 +104,19 @@
104
104
  },
105
105
  "dependencies": {
106
106
  "prop-types": "~15.8.1",
107
- "@elliemae/ds-breadcrumb": "3.16.0-next.21",
108
- "@elliemae/ds-button": "3.16.0-next.21",
109
- "@elliemae/ds-classnames": "3.16.0-next.21",
110
- "@elliemae/ds-dropdownmenu": "3.16.0-next.21",
111
- "@elliemae/ds-form": "3.16.0-next.21",
112
- "@elliemae/ds-form-input-text": "3.16.0-next.21",
113
- "@elliemae/ds-grid": "3.16.0-next.21",
114
- "@elliemae/ds-icon": "3.16.0-next.21",
115
- "@elliemae/ds-icons": "3.16.0-next.21",
116
- "@elliemae/ds-props-helpers": "3.16.0-next.21",
117
- "@elliemae/ds-system": "3.16.0-next.21",
118
- "@elliemae/ds-truncated-tooltip-text": "3.16.0-next.21",
119
- "@elliemae/ds-utilities": "3.16.0-next.21"
107
+ "@elliemae/ds-breadcrumb": "3.16.0-next.22",
108
+ "@elliemae/ds-button": "3.16.0-next.22",
109
+ "@elliemae/ds-dropdownmenu": "3.16.0-next.22",
110
+ "@elliemae/ds-form": "3.16.0-next.22",
111
+ "@elliemae/ds-classnames": "3.16.0-next.22",
112
+ "@elliemae/ds-form-input-text": "3.16.0-next.22",
113
+ "@elliemae/ds-grid": "3.16.0-next.22",
114
+ "@elliemae/ds-icon": "3.16.0-next.22",
115
+ "@elliemae/ds-props-helpers": "3.16.0-next.22",
116
+ "@elliemae/ds-system": "3.16.0-next.22",
117
+ "@elliemae/ds-icons": "3.16.0-next.22",
118
+ "@elliemae/ds-truncated-tooltip-text": "3.16.0-next.22",
119
+ "@elliemae/ds-utilities": "3.16.0-next.22"
120
120
  },
121
121
  "devDependencies": {
122
122
  "@testing-library/react": "~12.1.3",