@autoguru/overdrive 4.23.1 → 4.23.2

package/dist/components/EditableText/EditableText.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EditableText.d.ts","sourceRoot":"","sources":["../../../lib/components/EditableText/EditableText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EAEd,mBAAmB,EAEnB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,IAAI,EAAiB,MAAM,SAAS,CAAC;AAI9C,KAAK,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7D,KAAK,SAAS,GAAG,IAAI,CACpB,cAAc,CAAC,OAAO,IAAI,CAAC,EAC3B,IAAI,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAC5D,CAAC;AACF,KAAK,UAAU,GAAG,IAAI,CACrB,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,OAAO,GACP,IAAI,GACJ,WAAW,GACX,OAAO,GACP,QAAQ,GACR,MAAM,SAAS,GACf,MAAM,QAAQ,CAChB,CAAC;AAEF,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,UAAU,EAAE,QAAQ;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,iFA6DxB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"EditableText.d.ts","sourceRoot":"","sources":["../../../lib/components/EditableText/EditableText.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EAEd,mBAAmB,EAGnB,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,IAAI,EAAiB,MAAM,SAAS,CAAC;AAK9C,KAAK,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,SAAS,CAAC,CAAC;AAC7D,KAAK,SAAS,GAAG,IAAI,CACpB,cAAc,CAAC,OAAO,IAAI,CAAC,EAC3B,IAAI,GAAG,QAAQ,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,QAAQ,CAC5D,CAAC;AACF,KAAK,UAAU,GAAG,IAAI,CACrB,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,OAAO,GACP,IAAI,GACJ,WAAW,GACX,OAAO,GACP,QAAQ,GACR,MAAM,SAAS,GACf,MAAM,QAAQ,CAChB,CAAC;AAEF,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,UAAU,EAAE,QAAQ;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,YAAY,iFAiExB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/EditableText/EditableText.js

@@ -7,13 +7,15 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import clsx from 'clsx';
 import * as React from 'react';
-import { forwardRef, useState } from 'react';
-import { Box } from "../Box/index.js";
+import { forwardRef, useRef, useState } from 'react';
+import { Box, useBoxStyles } from "../Box/index.js";
 import { Text, useTextStyles } from "../Text/index.js";
 import * as inputStyles from "../private/InputBase/withEnhancedInput.css.js";
 import * as styles from "./EditableText.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
+import { jsxs as _jsxs } from "react/jsx-runtime";
 export const EditableText = forwardRef((_ref, ref) => {
+  var _textRef$current;
   let {
       is,
       colour = 'muted',
@@ -22,6 +24,7 @@ export const EditableText = forwardRef((_ref, ref) => {
       value
     } = _ref,
     inputProps = _objectWithoutProperties(_ref, _excluded);
+  const textRef = useRef(null);
   const [isEditing, setIsEditing] = useState(false);
   const onRequestEdit = () => setIsEditing(true);
   const textStyles = useTextStyles({
@@ -29,14 +32,10 @@ export const EditableText = forwardRef((_ref, ref) => {
     colour,
     size
   });
-  const width = value ? "".concat(value.toString().length, "ch") : void 0;
-  return _jsx(Box, {
+  return _jsxs(Box, {
     ref: ref,
     display: display,
     className: styles.root,
-    style: {
-      maxWidth: width
-    },
     onClick: onRequestEdit,
     onFocus: onRequestEdit,
     onBlur: () => setIsEditing(false),
@@ -45,25 +44,25 @@ export const EditableText = forwardRef((_ref, ref) => {
         setIsEditing(false);
       }
     },
-    children: isEditing ? _jsx(Box, _objectSpread(_objectSpread({
+    children: [isEditing && _jsx(Box, _objectSpread(_objectSpread({
       is: "input"
     }, inputProps), {}, {
       autoFocus: true,
       value: value,
       className: clsx(textStyles, inputStyles.input.itself.root),
       style: {
-        width
+        width: (_textRef$current = textRef.current) === null || _textRef$current === void 0 ? void 0 : _textRef$current.offsetWidth
       }
-    })) : _jsx(Text, {
+    })), _jsx(Text, {
       noWrap: true,
+      ref: textRef,
       is: is,
       colour: colour,
-      className: clsx(textStyles, styles.text),
-      style: {
-        maxWidth: width
-      },
+      className: clsx(textStyles, styles.text, useBoxStyles({
+        display: isEditing ? 'none' : display
+      })),
       children: value
-    })
+    })]
   });
 });
 export default EditableText;

package/dist/components/EditableText/stories.js

@@ -44,9 +44,16 @@ const dateProps = {
   value: todayStr,
   type: 'date'
 };
+const narrowCharactersProps = {
+  colour: 'muted',
+  value: 'Price is $111.01',
+  type: 'text'
+};
 export const text = template.bind(textProps);
 export const number = template.bind(numberProps);
 export const date = template.bind(dateProps);
+export const narrowCharacters = template.bind(narrowCharactersProps);
 text.args = textProps;
 number.args = numberProps;
-date.args = dateProps;
+date.args = dateProps;
+narrowCharacters.args = narrowCharactersProps;

package/dist/components/Text/Text.d.ts

@@ -1,4 +1,5 @@
-import type { FunctionComponent, ReactNode, CSSProperties } from 'react';
+import type { CSSProperties, ReactNode } from 'react';
+import * as React from 'react';
 import type { BoxStyleProps } from '../Box';
 import { TextStyleProps } from './useTextStyles';
 export interface Props extends TextStyleProps {
@@ -9,6 +10,6 @@ export interface Props extends TextStyleProps {
     display?: Extract<BoxStyleProps['display'], 'inline' | 'inlineBlock' | 'block'>;
     style?: CSSProperties;
 }
-export declare const Text: FunctionComponent<Props>;
+export declare const Text: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;
 export default Text;
 //# sourceMappingURL=Text.d.ts.map

package/dist/components/Text/Text.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,iBAAiB,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGzE,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAiB,MAAM,iBAAiB,CAAC;AAEhE,MAAM,WAAW,KAAM,SAAQ,cAAc;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAChB,aAAa,CAAC,SAAS,CAAC,EACxB,QAAQ,GAAG,aAAa,GAAG,OAAO,CAClC,CAAC;IACF,KAAK,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,eAAO,MAAM,IAAI,EAAE,iBAAiB,CAAC,KAAK,CAmCzC,CAAC;AAEF,eAAe,IAAI,CAAC"}
+{"version":3,"file":"Text.d.ts","sourceRoot":"","sources":["../../../lib/components/Text/Text.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AACtD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,QAAQ,CAAC;AAG5C,OAAO,EAAE,cAAc,EAAiB,MAAM,iBAAiB,CAAC;AAEhE,MAAM,WAAW,KAAM,SAAQ,cAAc;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,GAAG,GAAG,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAChB,aAAa,CAAC,SAAS,CAAC,EACxB,QAAQ,GAAG,aAAa,GAAG,OAAO,CAClC,CAAC;IACF,KAAK,CAAC,EAAE,aAAa,CAAC;CACtB;AAED,eAAO,MAAM,IAAI,2EAyChB,CAAC;AAEF,eAAe,IAAI,CAAC"}

package/dist/components/Text/Text.js

@@ -1,10 +1,11 @@
 "use strict";
 
 import * as React from 'react';
+import { forwardRef } from 'react';
 import { Box } from "../Box/index.js";
 import { useTextStyles } from "./useTextStyles.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const Text = _ref => {
+export const Text = forwardRef((_ref, ref) => {
   let {
     children,
     className = '',
@@ -22,6 +23,7 @@ export const Text = _ref => {
   } = _ref;
   return _jsx(Box, {
     is: Component,
+    ref: ref,
     display: display,
     textAlign: align,
     className: [useTextStyles({
@@ -36,5 +38,5 @@ export const Text = _ref => {
     style: style,
     children: children
   });
-};
+});
 export default Text;

package/dist/components/TextLink/TextLink.d.ts

@@ -11,6 +11,6 @@ export interface Props extends TextProps, AnchorProps {
     muted?: boolean;
     icon?: IconType;
 }
-export declare const TextLink: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLAnchorElement>>;
+export declare const TextLink: React.ForwardRefExoticComponent<Omit<Props, "ref"> & React.RefAttributes<HTMLAnchorElement>>;
 export default TextLink;
 //# sourceMappingURL=TextLink.d.ts.map

package/dist/components/TextLink/TextLink.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextLink.d.ts","sourceRoot":"","sources":["../../../lib/components/TextLink/TextLink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,oBAAoB,EAEpB,cAAc,EAEd,WAAW,EAGX,YAAY,EACZ,SAAS,EACT,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC,CAAC;AACpE,KAAK,WAAW,GAAG,IAAI,CACtB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,SAAS,CAC7C,CAAC;AAEF,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,WAAW;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,eAAO,MAAM,QAAQ,iFAyEpB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"TextLink.d.ts","sourceRoot":"","sources":["../../../lib/components/TextLink/TextLink.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAG3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,oBAAoB,EAEpB,cAAc,EAEd,WAAW,EAGX,YAAY,EACZ,SAAS,EACT,MAAM,OAAO,CAAC;AAIf,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAI/B,KAAK,SAAS,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,IAAI,CAAC,EAAE,IAAI,GAAG,QAAQ,CAAC,CAAC;AACpE,KAAK,WAAW,GAAG,IAAI,CACtB,oBAAoB,CAAC,iBAAiB,CAAC,EACvC,UAAU,GAAG,OAAO,GAAG,IAAI,GAAG,MAAM,SAAS,CAC7C,CAAC;AAEF,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,WAAW;IACpD,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,QAAQ,CAAC;CAChB;AAED,eAAO,MAAM,QAAQ,8FAyEpB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/utils/estimateTextWidth.d.ts

@@ -0,0 +1,2 @@
+export declare const estimateTextWidth: (value: string) => string;
+//# sourceMappingURL=estimateTextWidth.d.ts.map

package/dist/utils/estimateTextWidth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"estimateTextWidth.d.ts","sourceRoot":"","sources":["../../lib/utils/estimateTextWidth.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,iBAAiB,UAAW,MAAM,WAQ9C,CAAC"}

package/dist/utils/estimateTextWidth.js

@@ -0,0 +1,15 @@
+"use strict";
+
+const narrowChars = /[!"'()*+,./:;<=>?I[\\\]^_`b-vx-z{|}~\-]/g;
+const wideChars = /[\dA-HJ-Z]/g;
+const narrowCharWidth = 0.5;
+const defaultCharWidth = 0.8;
+export const estimateTextWidth = value => {
+  if (!value) return '0ch';
+  const charWidths = value.split('').map(char => {
+    if (narrowChars.test(char)) return narrowCharWidth;
+    if (wideChars.test(char)) return 1;
+    return defaultCharWidth;
+  });
+  return charWidths.reduce((sum, width) => sum + width, 0) + 'ch';
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.23.1",
+	"version": "4.23.2",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",