@autoguru/overdrive 4.23.5 → 4.24.0

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

@@ -2,12 +2,14 @@ import * as React from 'react';
 import { ComponentProps, InputHTMLAttributes } from 'react';
 import { Box } from '../Box';
 import { Text } from '../Text';
-type BoxProps = Pick<ComponentProps<typeof Box>, 'display' | 'onFocus' | 'onBlur'>;
+type BoxProps = Pick<ComponentProps<typeof Box>, 'display' | 'onFocus' | 'onBlur' | 'onKeyDown'>;
 type TextProps = Pick<ComponentProps<typeof Text>, 'is' | 'colour' | 'size' | 'children' | 'noWrap'>;
-type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'style' | 'is' | 'autoFocus' | 'width' | 'height' | 'onFocus' | 'onBlur' | keyof TextProps | keyof BoxProps>;
+type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'style' | 'is' | 'autoFocus' | 'width' | 'height' | 'onFocus' | 'onBlur' | 'onKeyDown' | keyof TextProps | keyof BoxProps>;
 export interface Props extends TextProps, InputProps, BoxProps {
     className?: string;
+    onModeChange?: (mode: InputMode) => void;
 }
+type InputMode = 'TEXT' | 'INPUT';
 export declare const EditableText: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLAnchorElement>>;
 export default EditableText;
 //# sourceMappingURL=EditableText.d.ts.map

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,EAAE,cAAc,EAAc,mBAAmB,EAA+B,MAAM,OAAO,CAAC;AAErG,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,EAAE,IAAI,EAAiB,MAAM,SAAS,CAAC;AAK9C,KAAK,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAC;AACnF,KAAK,SAAS,GAAG,IAAI,CACpB,cAAc,CAAC,OAAO,IAAI,CAAC,EAC3B,IAAI,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAChD,CAAC;AACF,KAAK,UAAU,GAAG,IAAI,CACrB,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,OAAO,GACP,IAAI,GACJ,WAAW,GACX,OAAO,GACP,QAAQ,GACR,SAAS,GACT,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,iFA+ExB,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,EAAE,cAAc,EAAc,mBAAmB,EAA+B,MAAM,OAAO,CAAC;AAErG,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,EAAE,IAAI,EAAiB,MAAM,SAAS,CAAC;AAK9C,KAAK,QAAQ,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,SAAS,GAAG,SAAS,GAAG,QAAQ,GAAG,WAAW,CAAC,CAAC;AACjG,KAAK,SAAS,GAAG,IAAI,CACpB,cAAc,CAAC,OAAO,IAAI,CAAC,EAC3B,IAAI,GAAG,QAAQ,GAAG,MAAM,GAAG,UAAU,GAAG,QAAQ,CAChD,CAAC;AACF,KAAK,UAAU,GAAG,IAAI,CACrB,mBAAmB,CAAC,gBAAgB,CAAC,EACnC,OAAO,GACP,IAAI,GACJ,WAAW,GACX,OAAO,GACP,QAAQ,GACR,SAAS,GACT,QAAQ,GACR,WAAW,GACX,MAAM,SAAS,GACf,MAAM,QAAQ,CAChB,CAAC;AAEF,MAAM,WAAW,KAAM,SAAQ,SAAS,EAAE,UAAU,EAAE,QAAQ;IAC7D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,IAAI,CAAC;CACzC;AAED,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAClC,eAAO,MAAM,YAAY,iFAwFxB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/EditableText/EditableText.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["is", "colour", "size", "display", "value", "onFocus", "onBlur"];
+const _excluded = ["is", "colour", "size", "display", "value", "onFocus", "onBlur", "onKeyDown", "onModeChange"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 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';
@@ -22,12 +22,19 @@ export const EditableText = forwardRef((_ref, ref) => {
       display = 'inlineBlock',
       value,
       onFocus,
-      onBlur
+      onBlur,
+      onKeyDown,
+      onModeChange
     } = _ref,
     inputProps = _objectWithoutProperties(_ref, _excluded);
   const textRef = useRef(null);
-  const [isEditing, setIsEditing] = useState(false);
-  const onRequestEdit = () => setIsEditing(true);
+  const [mode, setMode] = useState('TEXT');
+  const onRequestModeChange = newMode => {
+    setMode(newMode);
+    if (typeof onModeChange === 'function') {
+      onModeChange(newMode);
+    }
+  };
   const textStyles = useTextStyles({
     is,
     colour,
@@ -44,21 +51,22 @@ export const EditableText = forwardRef((_ref, ref) => {
     display: display,
     position: "relative",
     className: styles.root,
-    onClick: onRequestEdit,
+    onClick: () => onRequestModeChange('INPUT'),
     onFocus: e => {
-      onRequestEdit();
       if (typeof onFocus === 'function') onFocus(e);
+      onRequestModeChange('INPUT');
     },
     onBlur: e => {
-      setIsEditing(false);
       if (typeof onBlur === 'function') onBlur(e);
+      onRequestModeChange('TEXT');
     },
     onKeyDown: e => {
+      if (typeof onKeyDown === 'function') onKeyDown(e);
       if (e.key === 'Enter' || e.key === 'Escape') {
-        setIsEditing(false);
+        onRequestModeChange('TEXT');
       }
     },
-    children: [isEditing && _jsx(Box, _objectSpread(_objectSpread({
+    children: [mode === 'INPUT' && _jsx(Box, _objectSpread(_objectSpread({
       is: "input"
     }, inputProps), {}, {
       autoFocus: true,
@@ -74,7 +82,7 @@ export const EditableText = forwardRef((_ref, ref) => {
       colour: colour,
       size: size,
       className: clsx(textStyles, styles.text, {
-        [styles.textHidden]: isEditing
+        [styles.textHidden]: mode === 'INPUT'
       }),
       children: value
     })]

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

@@ -1 +1 @@
-{"version":3,"file":"MinimalModal.d.ts","sourceRoot":"","sources":["../../../lib/components/MinimalModal/MinimalModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACX,cAAc,EACd,iBAAiB,EAEjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAA2B,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAIjC,MAAM,WAAW,KAChB,SAAQ,cAAc,CAAC,OAAO,KAAK,CAAC,EACnC,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,YAAY,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,KAAK,CA8EjD,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"MinimalModal.d.ts","sourceRoot":"","sources":["../../../lib/components/MinimalModal/MinimalModal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,iBAAiB,EAAqB,MAAM,OAAO,CAAC;AAElF,OAAO,EAAE,SAAS,EAA2B,MAAM,OAAO,CAAC;AAG3D,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAIjC,MAAM,WAAW,KAChB,SAAQ,cAAc,CAAC,OAAO,KAAK,CAAC,EACnC,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,YAAY,CAAC;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACrB;AAED,eAAO,MAAM,YAAY,EAAE,iBAAiB,CAAC,KAAK,CA0EjD,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/dist/components/MinimalModal/MinimalModal.js

@@ -1,5 +1,10 @@
 "use strict";
 
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["isOpen", "alignItems", "className", "children", "onRequestClose"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+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 * as React from 'react';
 import { useLayoutEffect, useRef } from 'react';
 import { isBrowser, useEventCallback, useId } from "../../utils/index.js";
@@ -9,15 +14,13 @@ import * as styles from "./MinimalModal.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
 export const MinimalModal = _ref => {
   let {
-    isOpen,
-    alignItems = 'center',
-    className = '',
-    container,
-    noThemedWrapper,
-    ref,
-    onRequestClose,
-    children
-  } = _ref;
+      isOpen,
+      alignItems = 'center',
+      className = '',
+      children,
+      onRequestClose
+    } = _ref,
+    modalProps = _objectWithoutProperties(_ref, _excluded);
   const titleId = useId();
   const locked = useRef(true);
   const unlockModal = useEventCallback(event => {
@@ -35,12 +38,10 @@ export const MinimalModal = _ref => {
       };
     }, [isOpen]);
   }
-  return _jsx(Modal, {
+  return _jsx(Modal, _objectSpread(_objectSpread({
     isOpen: isOpen,
-    onRequestClose: onRequestClose,
-    ref: ref,
-    noThemedWrapper: noThemedWrapper,
-    container: container,
+    onRequestClose: onRequestClose
+  }, modalProps), {}, {
     children: _jsx(Box, {
       className: [styles.container, className],
       height: "full",
@@ -69,6 +70,6 @@ export const MinimalModal = _ref => {
         })
       })
     })
-  });
+  }));
 };
 export default MinimalModal;

package/dist/components/Modal/Modal.d.ts

@@ -4,6 +4,7 @@ import { Portal } from '../Portal';
 export interface Props extends ComponentProps<typeof Portal> {
     isOpen: boolean;
     hideBackdrop?: boolean;
+    disableBackdropClick?: boolean;
     children?: ReactNode;
     onRequestClose?(e: 'backdrop' | 'escapeKeyDown' | string): void;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../lib/components/Modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACX,cAAc,EACd,aAAa,EACb,iBAAiB,EAEjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AAKzD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAInC,MAAM,WAAW,KAAM,SAAQ,cAAc,CAAC,OAAO,MAAM,CAAC;IAC3D,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,eAAe,GAAG,MAAM,GAAG,IAAI,CAAC;CAChE;AAqDD,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,KAAK,CA8E1C,CAAC;AAEF,eAAO,MAAM,SAAS,wIAmBpB,CAAC;AAEH,eAAe,KAAK,CAAC"}
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../lib/components/Modal/Modal.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EACX,cAAc,EACd,aAAa,EACb,iBAAiB,EAEjB,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,SAAS,EAAyB,MAAM,OAAO,CAAC;AAKzD,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAInC,MAAM,WAAW,KAAM,SAAQ,cAAc,CAAC,OAAO,MAAM,CAAC;IAC3D,MAAM,EAAE,OAAO,CAAC;IAChB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,cAAc,CAAC,CAAC,CAAC,EAAE,UAAU,GAAG,eAAe,GAAG,MAAM,GAAG,IAAI,CAAC;CAChE;AAqDD,eAAO,MAAM,KAAK,EAAE,iBAAiB,CAAC,KAAK,CA+E1C,CAAC;AAEF,eAAO,MAAM,SAAS,wIAmBpB,CAAC;AAEH,eAAe,KAAK,CAAC"}

package/dist/components/Modal/Modal.js

@@ -65,6 +65,7 @@ export const Modal = _ref => {
   let {
     isOpen,
     hideBackdrop = false,
+    disableBackdropClick = false,
     ref,
     noThemedWrapper,
     container,
@@ -101,7 +102,7 @@ export const Modal = _ref => {
       children: [_jsx(Box, {
         "aria-hidden": "true",
         position: "fixed",
-        pointerEvents: state === 'CLOSING' ? 'none' : undefined,
+        pointerEvents: disableBackdropClick || state === 'CLOSING' ? 'none' : undefined,
         opacity: state === 'OPEN' ? undefined : 0,
         backgroundColour: hideBackdrop ? 'transparent' : 'neutral',
         className: [styles.backdrop.root, styles.transition, hideBackdrop && styles.backdrop.invisible],

package/package.json

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