@autoguru/overdrive 4.8.0 → 4.9.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.
Files changed (39) hide show
  1. package/dist/components/AutoSuggest/AutoSuggest.d.ts.map +1 -1
  2. package/dist/components/AutoSuggest/AutoSuggest.js +2 -12
  3. package/dist/components/AutoSuggest/stories.js +30 -2
  4. package/dist/components/Box/useBoxStyles.css.d.ts.map +1 -1
  5. package/dist/components/Box/useBoxStyles.css.js +1 -0
  6. package/dist/components/Button/Button.d.ts.map +1 -1
  7. package/dist/components/Button/Button.js +1 -0
  8. package/dist/components/ColourInput/ColourInput.css.d.ts +6 -0
  9. package/dist/components/ColourInput/ColourInput.css.d.ts.map +1 -0
  10. package/dist/components/ColourInput/ColourInput.css.js +29 -0
  11. package/dist/components/ColourInput/ColourInput.d.ts +4 -0
  12. package/dist/components/ColourInput/ColourInput.d.ts.map +1 -0
  13. package/dist/components/ColourInput/ColourInput.js +22 -0
  14. package/dist/components/ColourInput/index.d.ts +2 -0
  15. package/dist/components/ColourInput/index.d.ts.map +1 -0
  16. package/dist/components/ColourInput/index.js +1 -0
  17. package/dist/components/ColourInput/stories.js +183 -0
  18. package/dist/components/DateInput/stories.js +1 -1
  19. package/dist/components/Flyout/stories.js +1 -1
  20. package/dist/components/Positioner/stories.js +1 -1
  21. package/dist/components/SelectInput/stories.js +1 -1
  22. package/dist/components/Switch/Switch.d.ts.map +1 -1
  23. package/dist/components/Switch/Switch.js +1 -1
  24. package/dist/components/TextAreaInput/stories.js +1 -1
  25. package/dist/components/TextInput/stories.js +1 -1
  26. package/dist/components/index.d.ts +1 -0
  27. package/dist/components/index.d.ts.map +1 -1
  28. package/dist/components/index.js +1 -0
  29. package/dist/components/private/CheckableBase/CheckableBase.d.ts.map +1 -1
  30. package/dist/components/private/CheckableBase/CheckableBase.js +1 -1
  31. package/dist/components/private/InputBase/withEnhancedInput.css.d.ts.map +1 -1
  32. package/dist/components/private/InputBase/withEnhancedInput.css.js +1 -0
  33. package/dist/components/private/InputBase/withEnhancedInput.d.ts +4 -3
  34. package/dist/components/private/InputBase/withEnhancedInput.d.ts.map +1 -1
  35. package/dist/components/private/InputBase/withEnhancedInput.js +1 -1
  36. package/dist/hooks/useWindowScrollLock/index.d.ts +2 -0
  37. package/dist/hooks/useWindowScrollLock/index.d.ts.map +1 -0
  38. package/dist/hooks/useWindowScrollLock/index.js +15 -0
  39. package/package.json +3 -3
@@ -1 +1 @@
1
- {"version":3,"file":"AutoSuggest.d.ts","sourceRoot":"","sources":["../../../lib/components/AutoSuggest/AutoSuggest.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAIvE,OAAO,EACN,wBAAwB,EAIxB,YAAY,EAEZ,GAAG,EAQH,MAAM,OAAO,CAAC;AAWf,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,MAAM,WAAW,gBAAgB,CAAC,WAAW;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED,oBAAY,uBAAuB,CAAC,WAAW,IAAI,CAAC,KAAK,EAAE;IAC1D,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;CAClD,KAAK,YAAY,CAAC;AAiCnB,aAAK,WAAW,CAAC,WAAW,IAAI,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;AAErE,MAAM,WAAW,KAAK,CAAC,WAAW,CACjC,SAAQ,IAAI,CACX,wBAAwB,CAAC,OAAO,SAAS,CAAC,EAC1C,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,CAC5C;IACD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC5C,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC,YAAY,CAAC,EAAE,uBAAuB,CAAC,WAAW,CAAC,CAAC;IAEpD,QAAQ,CAAC,CAAC,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAEtD,OAAO,CAAC,CAAC,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;CACrD;AAwGD,eAAO,MAAM,WAAW;UA2FS,IAAI,gBAAgB,CAAC;MACjD,YAAY,CAAC;AAmiBlB,eAAe,WAAW,CAAC"}
1
+ {"version":3,"file":"AutoSuggest.d.ts","sourceRoot":"","sources":["../../../lib/components/AutoSuggest/AutoSuggest.tsx"],"names":[],"mappings":"AAAA,OAAO,EAA8B,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAIvE,OAAO,EACN,wBAAwB,EAIxB,YAAY,EAEZ,GAAG,EAQH,MAAM,OAAO,CAAC;AAYf,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAC;AAMzC,MAAM,WAAW,gBAAgB,CAAC,WAAW;IAC5C,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,WAAW,GAAG,IAAI,GAAG,SAAS,CAAC;IACxC,IAAI,CAAC,EAAE,OAAO,CAAC;CACf;AAED,oBAAY,uBAAuB,CAAC,WAAW,IAAI,CAAC,KAAK,EAAE;IAC1D,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,CAAC;IACrC,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;CAClD,KAAK,YAAY,CAAC;AAiCnB,aAAK,WAAW,CAAC,WAAW,IAAI,KAAK,CAAC,gBAAgB,CAAC,WAAW,CAAC,CAAC,CAAC;AAErE,MAAM,WAAW,KAAK,CAAC,WAAW,CACjC,SAAQ,IAAI,CACX,wBAAwB,CAAC,OAAO,SAAS,CAAC,EAC1C,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,YAAY,CAC5C;IACD,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,SAAS,CAAC,EAAE,QAAQ,CAAC;IACrB,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAC5C,WAAW,EAAE,WAAW,CAAC,WAAW,CAAC,CAAC;IAEtC,YAAY,CAAC,EAAE,uBAAuB,CAAC,WAAW,CAAC,CAAC;IAEpD,QAAQ,CAAC,CAAC,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;IAEtD,OAAO,CAAC,CAAC,KAAK,EAAE,gBAAgB,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;CACrD;AAwGD,eAAO,MAAM,WAAW;UA2FS,IAAI,gBAAgB,CAAC;MACjD,YAAY,CAAC;AAuhBlB,eAAe,WAAW,CAAC"}
@@ -4,6 +4,7 @@ import clsx from 'clsx';
4
4
  import * as React from 'react';
5
5
  import { forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useReducer, useRef, useState, } from 'react';
6
6
  import { useMedia } from '../../hooks/useMedia';
7
+ import { useWindowScrollLock } from '../../hooks/useWindowScrollLock';
7
8
  import { setRef, useId } from '../../utils';
8
9
  import { Box } from '../Box';
9
10
  import { Button } from '../Button';
@@ -147,18 +148,7 @@ export const AutoSuggest = forwardRef(function AutoSuggest({ autoFocus = false,
147
148
  });
148
149
  const AutoSuggestFullscreenInput = forwardRef(function AutoSuggestFullscreenInput({ closeModal, ...props }, ref) {
149
150
  const [showPortal, setShowPortal] = useState(false);
150
- useEffect(() => {
151
- document.documentElement.style.position = 'fixed';
152
- document.documentElement.style.overflow = 'hidden';
153
- document.documentElement.style.maxHeight = '100%';
154
- document.documentElement.style.width = '100%';
155
- return () => {
156
- document.documentElement.style.position = '';
157
- document.documentElement.style.overflow = '';
158
- document.documentElement.style.maxHeight = '';
159
- document.documentElement.style.width = '';
160
- };
161
- }, []);
151
+ useWindowScrollLock();
162
152
  useEffect(() => {
163
153
  const cb = requestAnimationFrame(() => setShowPortal(true));
164
154
  return () => {
@@ -9,8 +9,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
9
9
  import { AccountEditIcon, AlertCircleIcon, CalendarIcon, CarIcon, CarMultipleIcon, CheckIcon, CurrencyUsdIcon, MagnifyIcon, PlusIcon, StarIcon } from '@autoguru/icons';
10
10
  import { action } from '@storybook/addon-actions';
11
11
  import * as React from 'react';
12
+ import { Box } from "../Box/index.js";
13
+ import { Stack } from "../Stack/index.js";
14
+ import { Text } from "../Text/index.js";
12
15
  import { AutoSuggest } from "./index.js";
13
16
  import { jsx as _jsx } from "react/jsx-runtime";
17
+ import { jsxs as _jsxs } from "react/jsx-runtime";
14
18
  const mockSuggestions = ['Alfa Romeo', 'Aston Martin', 'Bentley', 'BMW', 'Bugatti', 'Ferrari', 'Jaguar', 'Koenigsegg', 'Lamborghini', 'Lotus', 'Maserati', 'McLaren', 'Pontiac', 'Porsche'].map(item => ({
15
19
  text: item,
16
20
  payload: item
@@ -78,12 +82,36 @@ export default {
78
82
  },
79
83
  parameters: {
80
84
  chromatic: {
81
- delay: 900
85
+ delay: 3000
82
86
  }
83
87
  }
84
88
  };
85
89
 
86
- const Template = args => _jsx(AutoSuggest, _objectSpread({}, args));
90
+ const Template = args => _jsxs(Stack, {
91
+ space: "5",
92
+ children: [_jsx(Box, {
93
+ paddingTop: "8",
94
+ children: _jsx(AutoSuggest, _objectSpread({}, args))
95
+ }), _jsx(Text, {
96
+ is: "p",
97
+ children: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis convallis neque a laoreet maximus. Vestibulum hendrerit quam at mi venenatis faucibus at vel nisi. In ut risus et ipsum tincidunt tempor. Suspendisse potenti. Praesent faucibus posuere risus, at congue mauris porttitor ut. Donec sit amet elit vitae purus dictum aliquet quis ut ligula. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum dui sapien, porttitor ac erat vel, malesuada rutrum mauris. Nam arcu tellus, pretium ut aliquet eget, ultrices vel est. Maecenas dapibus volutpat eros a volutpat."
98
+ }), _jsx(Text, {
99
+ is: "p",
100
+ children: "Sed ante dui, sagittis sit amet tortor nec, egestas tincidunt mauris. Phasellus sed felis arcu. Etiam sit amet pharetra risus, a posuere magna. Pellentesque finibus arcu vitae orci luctus sagittis. Proin porta metus ut dapibus pharetra. Sed interdum mi et tristique aliquam. Curabitur finibus at dolor eu fermentum. Cras diam mauris, malesuada quis lacinia eu, porttitor at lectus. Duis pellentesque ante eget efficitur lacinia. Vivamus ornare venenatis tortor euismod imperdiet."
101
+ }), _jsx(Text, {
102
+ is: "p",
103
+ children: "Nulla condimentum iaculis nisi, quis lobortis ligula. Nulla tempus semper velit, id ullamcorper orci molestie vel. Sed maximus nisi ac risus malesuada, quis varius purus interdum. Donec volutpat dolor in euismod hendrerit. Integer posuere tortor sit amet turpis viverra euismod. Mauris scelerisque ex diam, eget sodales erat accumsan vel. Etiam interdum odio a tortor fermentum, molestie interdum tellus bibendum. Vivamus vitae pulvinar ante. Aenean convallis aliquam velit congue ultricies. Aenean vel blandit erat. Mauris quis auctor nibh. Morbi dui ipsum, lobortis non nisi vitae, convallis pulvinar nunc."
104
+ }), _jsx(Text, {
105
+ is: "p",
106
+ children: "Morbi mollis massa in eros tempus, ut venenatis ligula posuere. Nam ut ante lectus. Integer congue risus arcu, et ornare odio hendrerit eu. Mauris arcu ligula, interdum vitae consectetur vitae, volutpat a elit. Nulla luctus faucibus ipsum vitae maximus. Quisque in est nec libero commodo egestas. Donec faucibus, felis eget euismod facilisis, urna tortor molestie ex, eu eleifend leo tellus vel ligula. Mauris et urna massa. Integer ultrices massa commodo eleifend facilisis. Vestibulum dapibus magna cursus metus pellentesque tempor. Donec blandit elementum feugiat. Sed nec congue est."
107
+ }), _jsx(Text, {
108
+ is: "p",
109
+ children: "Nulla quam magna, aliquet et odio non, porta condimentum tellus. Maecenas fringilla sodales erat eu facilisis. Nunc rutrum purus quis diam tempus laoreet. Fusce gravida arcu et lectus ultricies suscipit. Quisque sagittis tempus diam, malesuada posuere lorem sagittis et. Duis eget eros nibh. Aenean at augue tincidunt nunc consequat porta."
110
+ }), _jsx(Text, {
111
+ is: "p",
112
+ children: "Nunc ac congue lacus, ac vulputate lectus. Suspendisse vel malesuada tellus. In nec fringilla elit. Cras vitae metus et leo convallis consectetur. Cras quis congue sapien, vitae aliquet ante. Integer sed lorem pretium, vestibulum arcu eu, imperdiet mauris. Nam blandit pharetra feugiat. Maecenas eget ante metus. Vivamus pretium ipsum justo, a faucibus ex dictum non. Vestibulum et dui diam."
113
+ })]
114
+ });
87
115
 
88
116
  const standardProps = {
89
117
  value: null,
@@ -1 +1 @@
1
- {"version":3,"file":"useBoxStyles.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/useBoxStyles.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;CAKlB,CAAC;AAEF,eAAO,MAAM,SAAS,8BAAmD,CAAC;AAE1E,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAwBlB,CAAC;AAEF,eAAO,MAAM,YAAY,8BAGxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,ulBAQ7B,CAAC;AAEF,eAAO,MAAM,KAAK,wBAIhB,CAAC;AAEH,eAAO,MAAM,MAAM,wBAIjB,CAAC;AAEH,eAAO,MAAM,QAAQ,mDASpB,CAAC;AAEF,eAAO,MAAM,SAAS,6CASrB,CAAC;AAEF,eAAO,MAAM,QAAQ,0DAUpB,CAAC;AAEF,eAAO,MAAM,OAAO,kGAanB,CAAC;AAEF,eAAO,MAAM,OAAO,uBAGlB,CAAC;AAEH,eAAO,MAAM,UAAU,wBAErB,CAAC;AAIH,eAAO,MAAM,UAAU,8BAOtB,CAAC;AAEF,eAAO,MAAM,aAAa,8BAQzB,CAAC;AAEF,eAAO,MAAM,QAAQ,uBAQpB,CAAC;AAEF,eAAO,MAAM,UAAU,mBAOtB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAQpB,CAAC;AAEF,eAAO,MAAM,cAAc,8BAQ1B,CAAC;AAEF,eAAO,MAAM,aAAa,wBAExB,CAAC"}
1
+ {"version":3,"file":"useBoxStyles.css.d.ts","sourceRoot":"","sources":["../../../lib/components/Box/useBoxStyles.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,OAAO;;;;;CAKnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;CAKlB,CAAC;AAEF,eAAO,MAAM,SAAS,8BAAmD,CAAC;AAE1E,eAAO,MAAM,MAAM;;;;;;;;;;;;;;CAwBlB,CAAC;AAEF,eAAO,MAAM,YAAY,8BAGxB,CAAC;AAEF,eAAO,MAAM,iBAAiB,ulBAQ7B,CAAC;AAEF,eAAO,MAAM,KAAK,wBAIhB,CAAC;AAEH,eAAO,MAAM,MAAM,wBAIjB,CAAC;AAEH,eAAO,MAAM,QAAQ,mDASpB,CAAC;AAEF,eAAO,MAAM,SAAS,6CASrB,CAAC;AAEF,eAAO,MAAM,QAAQ,0DAUpB,CAAC;AAEF,eAAO,MAAM,OAAO,kGAanB,CAAC;AAEF,eAAO,MAAM,OAAO,uBAGlB,CAAC;AAEH,eAAO,MAAM,UAAU,wBAErB,CAAC;AAIH,eAAO,MAAM,UAAU,8BAOtB,CAAC;AAEF,eAAO,MAAM,aAAa,8BAQzB,CAAC;AAEF,eAAO,MAAM,QAAQ,uBAQpB,CAAC;AAEF,eAAO,MAAM,UAAU,mBAOtB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAQpB,CAAC;AAEF,eAAO,MAAM,cAAc,8BAS1B,CAAC;AAEF,eAAO,MAAM,aAAa,wBAExB,CAAC"}
@@ -106,6 +106,7 @@ export const justifyContent = makeResponsiveStyle({
106
106
  center: 'center',
107
107
  flexEnd: 'flex-end',
108
108
  spaceBetween: 'space-between',
109
+ spaceAround: 'space-around',
109
110
  }, 'justifyContent');
110
111
  export const pointerEvents = styleVariants({
111
112
  none: { pointerEvents: 'none' },
@@ -1 +1 @@
1
- {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EACd,oBAAoB,EAIpB,WAAW,EAIX,YAAY,EAKZ,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAEvC,aAAK,eAAe,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE/D,aAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,CAAC;AAIzC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC,EACrE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC;IACnC,QAAQ,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,CAAC;IACtC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B;AAqBD,eAAO,MAAM,MAAM,iFA+KlB,CAAC;AAqCF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../lib/components/Button/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EACd,oBAAoB,EAIpB,WAAW,EAIX,YAAY,EAKZ,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,MAAM,MAAM,cAAc,CAAC;AAEvC,aAAK,eAAe,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAE/D,aAAK,eAAe,GAAG,MAAM,GAAG,QAAQ,CAAC;AAIzC,MAAM,WAAW,KAChB,SAAQ,IAAI,CAAC,eAAe,EAAE,IAAI,GAAG,SAAS,GAAG,MAAM,GAAG,WAAW,CAAC,EACrE,IAAI,CAAC,cAAc,EAAE,YAAY,CAAC;IACnC,QAAQ,EAAE,eAAe,GAAG,eAAe,EAAE,CAAC;IAC9C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,WAAW,GAAG,YAAY,CAAC;IAChC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,IAAI,CAAC;IAChC,OAAO,CAAC,EAAE,MAAM,OAAO,MAAM,CAAC,OAAO,CAAC;IACtC,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC3B;AAqBD,eAAO,MAAM,MAAM,iFAgLlB,CAAC;AAqCF,eAAe,MAAM,CAAC"}
@@ -37,6 +37,7 @@ export const Button = forwardRef(({ children, className = '', disabled = false,
37
37
  id,
38
38
  onClick,
39
39
  disabled: disabled || isLoading,
40
+ tabIndex: disabled ? -1 : void 0,
40
41
  'aria-label': ariaLabel,
41
42
  className: clsx(useBoxStyles({
42
43
  is: typeof Component === 'string' ? Component : undefined,
@@ -0,0 +1,6 @@
1
+ export declare const input: string;
2
+ export declare const colouredBoxHolder: string;
3
+ export declare const colouredBoxHolderSize: Record<"small" | "medium", string>;
4
+ export declare const valueText: string;
5
+ export declare const valueTextSize: Record<"small" | "medium", string>;
6
+ //# sourceMappingURL=ColourInput.css.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ColourInput.css.d.ts","sourceRoot":"","sources":["../../../lib/components/ColourInput/ColourInput.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK,QAEhB,CAAC;AACH,eAAO,MAAM,iBAAiB,QAG5B,CAAC;AACH,eAAO,MAAM,qBAAqB,oCAOhC,CAAC;AACH,eAAO,MAAM,SAAS,QAGpB,CAAC;AACH,eAAO,MAAM,aAAa,oCAOxB,CAAC"}
@@ -0,0 +1,29 @@
1
+ import { style, styleVariants } from '@vanilla-extract/css';
2
+ import { vars } from '../../themes/base/vars.css';
3
+ export const input = style({
4
+ opacity: 0,
5
+ });
6
+ export const colouredBoxHolder = style({
7
+ top: '0',
8
+ left: '0',
9
+ });
10
+ export const colouredBoxHolderSize = styleVariants({
11
+ small: {
12
+ width: `calc(${vars.typography.size['3'].lineHeight} + (2* ${vars.space['2']}))`,
13
+ },
14
+ medium: {
15
+ width: vars.space['8'],
16
+ }
17
+ });
18
+ export const valueText = style({
19
+ top: '50%',
20
+ transform: 'translateY(-50%)',
21
+ });
22
+ export const valueTextSize = styleVariants({
23
+ small: {
24
+ left: `calc(${vars.typography.size['3'].lineHeight} + (2* ${vars.space['2']}))`,
25
+ },
26
+ medium: {
27
+ left: vars.space['8'],
28
+ }
29
+ });
@@ -0,0 +1,4 @@
1
+ import * as React from 'react';
2
+ export declare const ColourInput: React.ForwardRefExoticComponent<import("../private/InputBase/withEnhancedInput").EnhanceInputPrimitiveProps & import("../private/InputBase/withEnhancedInput").EventHandlers<HTMLInputElement> & import("../private/InputBase/withEnhancedInput").ValidationProps & React.RefAttributes<HTMLInputElement>>;
3
+ export default ColourInput;
4
+ //# sourceMappingURL=ColourInput.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ColourInput.d.ts","sourceRoot":"","sources":["../../../lib/components/ColourInput/ColourInput.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,eAAO,MAAM,WAAW,4SA8DvB,CAAC;AAEF,eAAe,WAAW,CAAC"}
@@ -0,0 +1,22 @@
1
+ import { warning } from '@autoguru/utilities';
2
+ import * as React from 'react';
3
+ import { Box, useBoxStyles } from '../Box';
4
+ import { withEnhancedInput } from '../private/InputBase';
5
+ import * as styles from './ColourInput.css';
6
+ import { Text } from '../Text';
7
+ import clsx from 'clsx';
8
+ export const ColourInput = withEnhancedInput(({ field, eventHandlers, validation, isLoading, suffixed, prefixed, size, ...rest }) => {
9
+ warning(field.value !== '', 'Colour Input does not support empty values.');
10
+ return ((React.createElement(Box, { display: 'flex', flexWrap: 'nowrap', alignItems: 'center', justifyContent: 'center', position: 'relative' },
11
+ React.createElement(Box, { className: [styles.colouredBoxHolder, styles.colouredBoxHolderSize[size]], display: 'flex', height: 'full', alignItems: 'center', justifyContent: 'spaceAround', flexShrink: 0, pointerEvents: 'none', position: 'absolute' },
12
+ React.createElement(Box, { style: { backgroundColor: field.value }, padding: size === 'medium' ? '3' : '2', borderRadius: '1' })),
13
+ React.createElement(Text, { display: 'block', className: clsx(styles.valueText, styles.valueTextSize[size], useBoxStyles({
14
+ position: 'absolute',
15
+ })) }, field.value),
16
+ React.createElement(Box, { is: 'input', type: 'color', flexGrow: 1, ...eventHandlers, ...field, ...rest, className: [styles.input, field.className], autoComplete: 'off' }))));
17
+ }, {
18
+ primitiveType: 'color',
19
+ withPrefixIcon: false,
20
+ defaultValue: '#000',
21
+ });
22
+ export default ColourInput;
@@ -0,0 +1,2 @@
1
+ export { ColourInput } from './ColourInput';
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/ColourInput/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
@@ -0,0 +1 @@
1
+ export { ColourInput } from './ColourInput';
@@ -0,0 +1,183 @@
1
+ "use strict";
2
+
3
+ import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
4
+
5
+ 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; }
6
+
7
+ 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; }
8
+
9
+ import { AccountEditIcon, AlertCircleIcon, CalendarIcon, CarIcon, CarMultipleIcon, CurrencyUsdIcon, PlusIcon, StarIcon } from '@autoguru/icons';
10
+ import { action } from '@storybook/addon-actions';
11
+ import * as React from 'react';
12
+ import { ColourInput } from "./index.js";
13
+ import { tokens } from "../../themes/base/tokens.js";
14
+ import { jsx as _jsx } from "react/jsx-runtime";
15
+ export default {
16
+ title: 'Components/Inputs/Colour',
17
+ component: ColourInput,
18
+ parameters: {
19
+ chromatic: {
20
+ delay: 3000
21
+ }
22
+ }
23
+ };
24
+ const defaultColour = tokens.colours.intent.primary.background.standard;
25
+ const iconOptions = {
26
+ CalendarIcon,
27
+ AccountEditIcon,
28
+ AlertCircleIcon,
29
+ CarMultipleIcon,
30
+ CurrencyUsdIcon,
31
+ PlusIcon,
32
+ StarIcon
33
+ };
34
+ const argTypes = {
35
+ value: {
36
+ control: {
37
+ type: 'date'
38
+ }
39
+ },
40
+ suffixIcon: {
41
+ defaultValue: null,
42
+ description: 'Input suffix Icon',
43
+ options: iconOptions,
44
+ control: {
45
+ type: 'select'
46
+ }
47
+ }
48
+ };
49
+
50
+ const Template = args => _jsx(ColourInput, _objectSpread({}, args));
51
+
52
+ const sharedProps = {
53
+ disabled: false,
54
+ name: 'date',
55
+ placeholder: 'Placeholder',
56
+ isValid: false,
57
+ isTouched: false,
58
+ isLoading: false,
59
+ isFocused: false,
60
+ reserveHintSpace: false,
61
+ hintText: '',
62
+ notch: true,
63
+ suffixIcon: void 0,
64
+ onChange: action('onChange'),
65
+ onFocus: action('onFocus'),
66
+ onBlur: action('onBlur')
67
+ };
68
+ const standardProps = sharedProps;
69
+
70
+ const withAValueProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
71
+ value: defaultColour,
72
+ placeholder: 'What is your favourite car colour?'
73
+ });
74
+
75
+ const withHintTextProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
76
+ hintText: 'Hint Text',
77
+ placeholder: 'What is your favourite car colour?'
78
+ });
79
+
80
+ const withIconProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
81
+ suffixIcon: CalendarIcon
82
+ });
83
+
84
+ const disabledProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
85
+ value: defaultColour,
86
+ placeholder: 'What is your favourite car colour?',
87
+ disabled: true
88
+ });
89
+
90
+ const validProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
91
+ value: defaultColour,
92
+ placeholder: 'What is your favourite car colour?',
93
+ isTouched: true,
94
+ isValid: true
95
+ });
96
+
97
+ const invalidProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
98
+ value: '#ffd402',
99
+ placeholder: 'What is your favourite car colour?',
100
+ isTouched: true,
101
+ isValid: false,
102
+ hintText: 'Invalid colour'
103
+ });
104
+
105
+ const noNotchProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
106
+ placeholder: 'What is your favourite car colour?',
107
+ notch: false
108
+ });
109
+
110
+ const noNotchWithValueProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
111
+ value: defaultColour,
112
+ placeholder: 'What is your favourite car colour?',
113
+ notch: false
114
+ });
115
+
116
+ const loadingProps = _objectSpread(_objectSpread({}, sharedProps), {}, {
117
+ isLoading: true
118
+ });
119
+
120
+ export const standard = Template.bind(standardProps);
121
+ standard.args = standardProps;
122
+ standard.argTypes = argTypes;
123
+ export const withAValue = Template.bind(withAValueProps);
124
+ withAValue.args = withAValueProps;
125
+ withAValue.argTypes = argTypes;
126
+ export const withHintText = Template.bind(withHintTextProps);
127
+ withHintText.args = withHintTextProps;
128
+ withHintText.argTypes = argTypes;
129
+ export const notchDisabled = Template.bind(noNotchProps);
130
+ notchDisabled.args = noNotchProps;
131
+ notchDisabled.argTypes = argTypes;
132
+ export const notchDisabledWithValue = Template.bind(noNotchWithValueProps);
133
+ notchDisabledWithValue.args = noNotchWithValueProps;
134
+ notchDisabledWithValue.argTypes = argTypes;
135
+ export const withPrefixIcon = Template.bind(withIconProps);
136
+ withPrefixIcon.args = withIconProps;
137
+ withPrefixIcon.argTypes = argTypes;
138
+ export const disabled = Template.bind(disabledProps);
139
+ disabled.args = disabledProps;
140
+ disabled.argTypes = argTypes;
141
+ export const valid = Template.bind(validProps);
142
+ valid.args = validProps;
143
+ valid.argTypes = argTypes;
144
+ export const invalid = Template.bind(invalidProps);
145
+ invalid.args = invalidProps;
146
+ invalid.argTypes = argTypes;
147
+ export const loading = Template.bind(loadingProps);
148
+ loading.args = loadingProps;
149
+ loading.argTypes = argTypes;
150
+
151
+ const smallProps = _objectSpread(_objectSpread({}, standardProps), {}, {
152
+ size: 'small'
153
+ });
154
+
155
+ export const small = Template.bind(smallProps);
156
+ small.args = smallProps;
157
+ small.argTypes = argTypes;
158
+
159
+ const withValueSmallProps = _objectSpread(_objectSpread({}, withAValueProps), {}, {
160
+ size: 'small'
161
+ });
162
+
163
+ export const withValueSmall = Template.bind(withValueSmallProps);
164
+ withValueSmall.args = withValueSmallProps;
165
+ withValueSmall.argTypes = argTypes;
166
+
167
+ const withIconSmallProps = _objectSpread(_objectSpread({}, withAValueProps), {}, {
168
+ suffixIcon: CarIcon,
169
+ size: 'small'
170
+ });
171
+
172
+ export const withIconSmall = Template.bind(withIconSmallProps);
173
+ withIconSmall.args = withIconSmallProps;
174
+ withIconSmall.argTypes = argTypes;
175
+
176
+ const loadingSmallProps = _objectSpread(_objectSpread({}, withAValueProps), {}, {
177
+ isLoading: true,
178
+ size: 'small'
179
+ });
180
+
181
+ export const loadingSmall = Template.bind(loadingSmallProps);
182
+ loadingSmall.args = loadingSmallProps;
183
+ loadingSmall.argTypes = argTypes;
@@ -27,7 +27,7 @@ export default {
27
27
  component: DateInput,
28
28
  parameters: {
29
29
  chromatic: {
30
- delay: 900
30
+ delay: 3000
31
31
  }
32
32
  }
33
33
  };
@@ -36,7 +36,7 @@ export default {
36
36
  },
37
37
  parameters: {
38
38
  chromatic: {
39
- delay: 900
39
+ delay: 3000
40
40
  }
41
41
  }
42
42
  };
@@ -21,7 +21,7 @@ export default {
21
21
  component: Positioner,
22
22
  parameters: {
23
23
  chromatic: {
24
- delay: 900
24
+ delay: 3000
25
25
  }
26
26
  },
27
27
  argTypes: {
@@ -22,7 +22,7 @@ export default {
22
22
  component: SelectInput,
23
23
  parameters: {
24
24
  chromatic: {
25
- delay: 900
25
+ delay: 3000
26
26
  }
27
27
  }
28
28
  };
@@ -1 +1 @@
1
- {"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAe,MAAM,OAAO,CAAC;AAOvD,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,QAAQ,CAAC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAqD3C,CAAC;AAEF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../lib/components/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAe,MAAM,OAAO,CAAC;AAOvD,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,QAAQ,CAAC,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,CAAC;CAChC;AAED,eAAO,MAAM,MAAM,EAAE,iBAAiB,CAAC,KAAK,CAsD3C,CAAC;AAEF,eAAe,MAAM,CAAC"}
@@ -17,7 +17,7 @@ export const Switch = ({ className = '', disabled = false, toggled = false, onCh
17
17
  [styles.toggled]: toggled,
18
18
  [styles.disabled.default]: disabled,
19
19
  [styles.disabled.toggled]: toggled && disabled,
20
- }, className), borderRadius: "pill", position: "relative", "aria-disabled": disabled, "aria-label": `toggle ${toggled ? 'on' : 'off'}`, onClick: onToggle },
20
+ }, className), tabIndex: disabled ? -1 : void 0, borderRadius: "pill", position: "relative", "aria-disabled": disabled, "aria-label": `toggle ${toggled ? 'on' : 'off'}`, onClick: onToggle },
21
21
  React.createElement(Box, { borderWidth: "1", position: "absolute", borderRadius: "pill", backgroundColour: "white", padding: "none", boxShadow: "2", className: clsx(styles.handle.default, useBoxStyles({ is: 'button' }), useTextStyles({ colour: 'white' }), {
22
22
  [styles.handle.transition]: toggled,
23
23
  }) })));
@@ -15,7 +15,7 @@ export default {
15
15
  component: TextAreaInput,
16
16
  parameters: {
17
17
  chromatic: {
18
- delay: 900
18
+ delay: 3000
19
19
  }
20
20
  }
21
21
  };
@@ -16,7 +16,7 @@ export default {
16
16
  component: TextInput,
17
17
  parameters: {
18
18
  chromatic: {
19
- delay: 900
19
+ delay: 3000
20
20
  }
21
21
  }
22
22
  };
@@ -52,4 +52,5 @@ export * from './MinimalModal';
52
52
  export * from './Image';
53
53
  export * from './NumberBubble';
54
54
  export * from './TextBubble';
55
+ export * from './ColourInput';
55
56
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAEhC,cAAc,WAAW,CAAC;AAC1B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,OAAO,CAAC;AACtB,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,aAAa,CAAC;AAC5B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,UAAU,CAAC;AACzB,cAAc,2BAA2B,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,QAAQ,CAAC;AACvB,cAAc,SAAS,CAAC;AACxB,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,mBAAmB,CAAC;AAClC,cAAc,SAAS,CAAC;AACxB,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,oBAAoB,CAAC;AACnC,cAAc,SAAS,CAAC;AACxB,cAAc,iBAAiB,CAAC;AAChC,cAAc,cAAc,CAAC;AAC7B,cAAc,WAAW,CAAC;AAC1B,cAAc,UAAU,CAAC;AACzB,cAAc,SAAS,CAAC;AACxB,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAChC,cAAc,iBAAiB,CAAC;AAChC,cAAc,aAAa,CAAC;AAC5B,cAAc,YAAY,CAAC;AAC3B,cAAc,WAAW,CAAC;AAC1B,cAAc,WAAW,CAAC;AAC1B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,SAAS,CAAC;AACxB,cAAc,gBAAgB,CAAC;AAC/B,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC"}
@@ -52,3 +52,4 @@ export * from './MinimalModal';
52
52
  export * from './Image';
53
53
  export * from './NumberBubble';
54
54
  export * from './TextBubble';
55
+ export * from './ColourInput';
@@ -1 +1 @@
1
- {"version":3,"file":"CheckableBase.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/CheckableBase/CheckableBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA2B,SAAS,EAAE,MAAM,OAAO,CAAC;AAO3D,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,WAAW,CAAC,KAAK,KAAA,GAAG,IAAI,CAAC;IAEzB,YAAY,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,aAAa,gFAgGzB,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"CheckableBase.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/CheckableBase/CheckableBase.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAA2B,SAAS,EAAE,MAAM,OAAO,CAAC;AAO3D,MAAM,WAAW,KAAK;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,SAAS,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,SAAS,CAAC;IAErB,WAAW,CAAC,KAAK,KAAA,GAAG,IAAI,CAAC;IAEzB,YAAY,CAAC,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,aAAa,gFAiGzB,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -17,7 +17,7 @@ export const CheckableBase = forwardRef(({ className = '', label = '', checked =
17
17
  className,
18
18
  { [styles.disabled]: disabled },
19
19
  ] },
20
- React.createElement(Box, { ref: ref, is: "input", position: "absolute", width: "full", height: "full", margin: "none", padding: "none", name: inputName, value: value, checked: checked, disabled: disabled, type: inputType, pointerEvents: disabled ? 'none' : void 0, className: clsx(useBoxStyles({ is: 'button' }), styles.nativeInput.default, {
20
+ React.createElement(Box, { ref: ref, is: "input", position: "absolute", width: "full", height: "full", margin: "none", padding: "none", name: inputName, value: value, checked: checked, disabled: disabled, tabIndex: disabled ? -1 : void 0, type: inputType, pointerEvents: disabled ? 'none' : void 0, className: clsx(useBoxStyles({ is: 'button' }), styles.nativeInput.default, {
21
21
  [styles.nativeInput.checked]: checked,
22
22
  }), onClick: handleClick, onChange: onChange }),
23
23
  React.createElement(Box, { display: "flex", alignItems: "center", justifyContent: "center", position: "relative", className: [
@@ -1 +1 @@
1
- {"version":3,"file":"withEnhancedInput.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK;;CAqBjB,CAAC;AAIF,eAAO,MAAM,KAAK,4BAOhB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;CAe5B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;CAoD3B,CAAC;AAEF,eAAO,MAAM,QAAQ,QAKnB,CAAC;AAEH,eAAO,MAAM,UAAU,QAErB,CAAC;AACH,eAAO,MAAM,UAAU,QAErB,CAAC;AACH,eAAO,MAAM,QAAQ,oCAOnB,CAAC"}
1
+ {"version":3,"file":"withEnhancedInput.css.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,KAAK;;CAqBjB,CAAC;AAIF,eAAO,MAAM,KAAK,4BAOhB,CAAC;AAEH,eAAO,MAAM,gBAAgB;;;;;;;CAe5B,CAAC;AAEF,eAAO,MAAM,eAAe;;;;;;;;;;;CAqD3B,CAAC;AAEF,eAAO,MAAM,QAAQ,QAKnB,CAAC;AAEH,eAAO,MAAM,UAAU,QAErB,CAAC;AACH,eAAO,MAAM,UAAU,QAErB,CAAC;AACH,eAAO,MAAM,QAAQ,oCAOnB,CAAC"}
@@ -54,6 +54,7 @@ export const inputItselfSize = {
54
54
  fontSize: vars.typography.size['3'].fontSize,
55
55
  lineHeight: vars.typography.size['3'].lineHeight,
56
56
  padding: `${vars.space['2']}`,
57
+ minHeight: `calc(${vars.typography.size['3'].lineHeight} + (2* ${vars.space['2']}))`,
57
58
  },
58
59
  textarea: {
59
60
  padding: `0 ${vars.space['2']} ${vars.space['2']}`,
@@ -50,11 +50,12 @@ export declare type WrappedComponentProps<IncomingProps, PrimitiveElementType> =
50
50
  suffixed: boolean;
51
51
  isLoading: boolean;
52
52
  } & IncomingProps;
53
- interface EnhancedInputConfigs {
53
+ interface EnhancedInputConfigs<ValueType = string> {
54
+ defaultValue?: ValueType;
54
55
  withPrefixIcon?: boolean;
55
56
  withSuffixIcon?: boolean;
56
- primitiveType: 'textarea' | 'text' | 'number' | 'date' | 'select';
57
+ primitiveType: 'textarea' | 'text' | 'number' | 'date' | 'select' | 'color';
57
58
  }
58
- export declare const withEnhancedInput: <IncomingProps extends {} = {}, PrimitiveElementType extends HTMLElement = HTMLInputElement>(WrappingComponent: React.ComponentType<WrappedComponentProps<IncomingProps, PrimitiveElementType>>, { primitiveType, withPrefixIcon, withSuffixIcon, }?: EnhancedInputConfigs) => React.ForwardRefExoticComponent<React.PropsWithoutRef<EnhanceInputProps<IncomingProps, PrimitiveElementType>> & React.RefAttributes<PrimitiveElementType>>;
59
+ export declare const withEnhancedInput: <IncomingProps extends {} = {}, PrimitiveElementType extends HTMLElement = HTMLInputElement>(WrappingComponent: React.ComponentType<WrappedComponentProps<IncomingProps, PrimitiveElementType>>, { primitiveType, withPrefixIcon, withSuffixIcon, defaultValue, }?: EnhancedInputConfigs) => React.ForwardRefExoticComponent<React.PropsWithoutRef<EnhanceInputProps<IncomingProps, PrimitiveElementType>> & React.RefAttributes<PrimitiveElementType>>;
59
60
  export {};
60
61
  //# sourceMappingURL=withEnhancedInput.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"withEnhancedInput.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"withEnhancedInput.d.ts","sourceRoot":"","sources":["../../../../lib/components/private/InputBase/withEnhancedInput.tsx"],"names":[],"mappings":"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"}
@@ -10,7 +10,7 @@ import { HintText } from './HintText';
10
10
  import * as inputStateStyles from './InputState.css';
11
11
  import { NotchedBase } from './NotchedBase';
12
12
  import * as styles from './withEnhancedInput.css';
13
- export const withEnhancedInput = (WrappingComponent, { primitiveType = 'text', withPrefixIcon = true, withSuffixIcon = true, } = { primitiveType: 'text' }) => forwardRef(({ placeholder, name, id = name, hintText, disabled = false, className, isTouched, isValid, isLoading = false, notch = true, reserveHintSpace = false, size = 'medium', value: incomingValue = '', onChange: incomingOnChange, onReset, onMouseLeave, onMouseEnter, onBlur, onFocus, onKeyDown, prefixIcon, suffixIcon, wrapperRef, autoFocus, ...rest }, ref) => {
13
+ export const withEnhancedInput = (WrappingComponent, { primitiveType = 'text', withPrefixIcon = true, withSuffixIcon = true, defaultValue, } = { primitiveType: 'text', defaultValue: null }) => forwardRef(({ placeholder, name, id = name, hintText, disabled = false, className, isTouched, isValid, isLoading = false, notch = true, reserveHintSpace = false, size = 'medium', value: incomingValue = defaultValue || '', onChange: incomingOnChange, onReset, onMouseLeave, onMouseEnter, onBlur, onFocus, onKeyDown, prefixIcon, suffixIcon, wrapperRef, autoFocus, ...rest }, ref) => {
14
14
  invariant(!(prefixIcon && !withPrefixIcon), 'prefix icon is not supported for this component');
15
15
  invariant(!(suffixIcon && !withSuffixIcon), 'suffix icon is not supported for this component');
16
16
  const [value, onChange] = useInputControlledState(incomingValue, incomingOnChange);
@@ -0,0 +1,2 @@
1
+ export declare const useWindowScrollLock: () => void;
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/hooks/useWindowScrollLock/index.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,mBAAmB,YAezB,CAAC"}
@@ -0,0 +1,15 @@
1
+ import { useEffect } from 'react';
2
+ export const useWindowScrollLock = () => useEffect(() => {
3
+ const scrollPos = window.scrollY;
4
+ document.documentElement.style.position = 'fixed';
5
+ document.documentElement.style.overflow = 'hidden';
6
+ document.documentElement.style.maxHeight = '100%';
7
+ document.documentElement.style.width = '100%';
8
+ return () => {
9
+ document.documentElement.style.position = '';
10
+ document.documentElement.style.overflow = '';
11
+ document.documentElement.style.maxHeight = '';
12
+ document.documentElement.style.width = '';
13
+ window.scrollTo(0, scrollPos);
14
+ };
15
+ }, []);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@autoguru/overdrive",
3
- "version": "4.8.0",
3
+ "version": "4.9.0",
4
4
  "description": "Overdrive is a product component library, and design system for AutoGuru.",
5
5
  "types": "dist/index.d.ts",
6
6
  "main": "dist/index.js",
@@ -37,7 +37,7 @@
37
37
  "watch": "tsc --watch"
38
38
  },
39
39
  "devDependencies": {
40
- "@autoguru/icons": "1.7.18",
40
+ "@autoguru/icons": "1.7.27",
41
41
  "@autoguru/tsconfig": "1.0.79",
42
42
  "@autoguru/utilities": "1.1.1",
43
43
  "@popperjs/core": "2.11.2",
@@ -51,7 +51,7 @@
51
51
  "react-dom": "^18.1.0",
52
52
  "react-focus-lock": "2.8.1",
53
53
  "react-keyed-flatten-children": "1.3.0",
54
- "webpack": "5.69.0"
54
+ "webpack": "5.74.0"
55
55
  },
56
56
  "peerDependencies": {
57
57
  "@autoguru/icons": "^1.7.4",