@autoguru/overdrive 4.25.2 → 4.26.0

package/dist/components/DropDown/DropDown.d.ts

@@ -10,14 +10,16 @@ export interface Props extends ButtonProps, FlyoutProps {
     children: ReactNode;
     label: string;
     icon?: IconType;
+    isOpen?: boolean;
     onClick?: ComponentProps<typeof Button>['onClick'];
 }
-export declare const DropDown: ({ children: options, label, icon, alignment, onClick: incomingOnClick, ...buttonProps }: {
+export declare const DropDown: ({ children: options, label, icon, alignment, isOpen: incomingIsOpen, onClick: incomingOnClick, ...buttonProps }: {
     [x: string]: any;
     children: any;
     label: any;
     icon?: React.ReactElement<React.SVGAttributes<SVGElement>, "svg"> | undefined;
     alignment?: EPositionerAlignment | undefined;
+    isOpen: any;
     onClick: any;
 }) => JSX.Element;
 export default DropDown;

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

@@ -1 +1 @@
-{"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../../lib/components/DropDown/DropDown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EAEd,SAAS,EAIT,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAGnC,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAIrD,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,IAAI,GAAG,UAAU,GAAG,SAAS,CAAC,CAAC;AACtF,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC;AAEpE,MAAM,WAAW,KAAM,SAAQ,WAAW,EAAE,WAAW;IACtD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,OAAO,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,QAAQ;;;;;;;iBAqCpB,CAAC;AAEF,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"DropDown.d.ts","sourceRoot":"","sources":["../../../lib/components/DropDown/DropDown.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EACN,cAAc,EAEd,SAAS,EAIT,MAAM,OAAO,CAAC;AAEf,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AACnC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAC;AAGnC,OAAO,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAIrD,KAAK,WAAW,GAAG,IAAI,CACtB,cAAc,CAAC,OAAO,MAAM,CAAC,EAC7B,IAAI,GAAG,UAAU,GAAG,SAAS,CAC7B,CAAC;AACF,KAAK,WAAW,GAAG,IAAI,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,EAAE,WAAW,CAAC,CAAC;AAEpE,MAAM,WAAW,KAAM,SAAQ,WAAW,EAAE,WAAW;IACtD,QAAQ,EAAE,SAAS,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,QAAQ;;;;;;;;iBAsCpB,CAAC;AAEF,eAAe,QAAQ,CAAC"}

package/dist/components/DropDown/DropDown.js

@@ -2,7 +2,7 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["children", "label", "icon", "alignment", "onClick"];
+const _excluded = ["children", "label", "icon", "alignment", "isOpen", "onClick"];
 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 { ChevronDownIcon } from '@autoguru/icons';
@@ -23,12 +23,13 @@ export const DropDown = _ref => {
       label,
       icon = ChevronDownIcon,
       alignment = EPositionerAlignment.BOTTOM_LEFT,
+      isOpen: incomingIsOpen,
       onClick: incomingOnClick
     } = _ref,
     buttonProps = _objectWithoutProperties(_ref, _excluded);
   const buttonRef = useRef(null);
   const menuRef = useRef(null);
-  const [isOpen, setIsOpen] = useState(false);
+  const [isOpen, setIsOpen] = useState(incomingIsOpen);
   const onMenuClick = useCallback(event => {
     if (typeof incomingOnClick === 'function') incomingOnClick(event);
     setIsOpen(!isOpen);

package/dist/components/DropDown/DropDownOption.css.d.ts

@@ -1,3 +1,4 @@
 export declare const root: string;
+export declare const disabled: string;
 export declare const action: string;
 //# sourceMappingURL=DropDownOption.css.d.ts.map

package/dist/components/DropDown/DropDownOption.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownOption.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DropDown/DropDownOption.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAOf,CAAC;AAEH,eAAO,MAAM,MAAM,QAWjB,CAAC"}
+{"version":3,"file":"DropDownOption.css.d.ts","sourceRoot":"","sources":["../../../lib/components/DropDown/DropDownOption.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,IAAI,QAOf,CAAC;AACH,eAAO,MAAM,QAAQ,QAGnB,CAAC;AACH,eAAO,MAAM,MAAM,QAWjB,CAAC"}

package/dist/components/DropDown/DropDownOption.css.js

@@ -11,6 +11,10 @@ export const root = style({
     backgroundColor: vars.colours.background.light
   }
 }, "root");
+export const disabled = style({
+  cursor: 'not-allowed',
+  opacity: '0.3'
+}, "disabled");
 export const action = style({
   transition: "opacity 0.3s ".concat(vars.animation.easing.standard, " 0.1s"),
   willChange: 'transform',

package/dist/components/DropDown/DropDownOption.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DropDownOption.d.ts","sourceRoot":"","sources":["../../../lib/components/DropDown/DropDownOption.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1D,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAG7B,OAAO,EAAE,IAAI,EAAiB,MAAM,SAAS,CAAC;AAI9C,UAAU,KACT,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACjE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,KAAK,CAmCnD,CAAC"}
+{"version":3,"file":"DropDownOption.d.ts","sourceRoot":"","sources":["../../../lib/components/DropDown/DropDownOption.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE3C,OAAO,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG1D,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAG7B,OAAO,EAAE,IAAI,EAAiB,MAAM,SAAS,CAAC;AAI9C,UAAU,KACT,SAAQ,IAAI,CAAC,cAAc,CAAC,OAAO,GAAG,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IACjE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,UAAU,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;CACnD;AAED,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,KAAK,CA0CnD,CAAC"}

package/dist/components/DropDown/DropDownOption.js

@@ -2,9 +2,10 @@
 
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-const _excluded = ["label", "icon", "className", "display", "iconColour", "is"];
+const _excluded = ["label", "icon", "className", "disabled", "display", "iconColour", "is", "alignItems", "width"];
 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';
 import * as React from 'react';
 import { Box } from "../Box/index.js";
 import { Icon } from "../Icon/index.js";
@@ -18,17 +19,24 @@ export const DropDownOption = _ref => {
       label,
       icon,
       className,
+      disabled = false,
       display = 'flex',
       iconColour = 'dark',
-      is = 'button'
+      is = 'button',
+      alignItems = 'space-between',
+      width = 'full'
     } = _ref,
     boxProps = _objectWithoutProperties(_ref, _excluded);
   const colourStyles = useTextStyles({
     colour: iconColour
   });
   return _jsx(Box, _objectSpread(_objectSpread({
-    className: [styles.root, className]
+    className: clsx(styles.root, className, {
+      [styles.disabled]: disabled
+    })
   }, boxProps), {}, {
+    width: width,
+    alignItems: alignItems,
     display: display,
     paddingX: "3",
     paddingY: "2",

package/dist/components/DropDown/DropDownOptionsList.css.js

@@ -4,7 +4,7 @@ import * as __vanilla_filescope__ from '@vanilla-extract/css/fileScope';
 __vanilla_filescope__.setFileScope("lib/components/DropDown/DropDownOptionsList.css.ts", "@autoguru/overdrive");
 import { style } from '@vanilla-extract/css';
 export const root = style({
-  minWidth: 250
+  minWidth: 200
 }, "root");
 export const list = style({
   maxHeight: 300

package/dist/components/DropDown/stories.js

@@ -3,7 +3,7 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 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 { DownloadIcon, SettingsIcon, TrashCanOutlineIcon } from '@autoguru/icons';
+import { DownloadIcon, SettingsIcon, SquareEditOutlineIcon, TrashCanOutlineIcon } from '@autoguru/icons';
 import { action } from '@storybook/addon-actions';
 import * as React from 'react';
 import { Fragment } from 'react';
@@ -60,15 +60,25 @@ const option2 = _jsx(DropDownOption, {
   label: "Delete",
   icon: TrashCanOutlineIcon
 });
+const optionDisabled = _jsx(DropDownOption, {
+  disabled: true,
+  label: "Edit",
+  icon: SquareEditOutlineIcon
+});
 const standardProps = {
   label: 'Attachment',
   children: _jsxs(_Fragment, {
-    children: [option1, option2]
+    children: [option1, option1, optionDisabled]
   }),
   onClick
 };
 export const primary = Template.bind(standardProps);
 primary.args = standardProps;
+const withOpenMenuProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+  isOpen: true
+});
+export const withOpenMenu = Template.bind(withOpenMenuProps);
+withOpenMenu.args = withOpenMenuProps;
 const secondaryProps = _objectSpread(_objectSpread({}, standardProps), {}, {
   variant: 'secondary'
 });
@@ -88,12 +98,13 @@ export const roundedSecondary = Template.bind(roundedSecondaryProps);
 roundedSecondary.args = roundedSecondaryProps;
 const withCustomIconProps = _objectSpread(_objectSpread({}, standardProps), {}, {
   variant: 'secondary',
-  minimal: true,
-  icon: SettingsIcon
+  icon: SettingsIcon,
+  isOpen: true
 });
 export const withCustomIcon = Template.bind(withCustomIconProps);
 withCustomIcon.args = withCustomIconProps;
 const withManyOptionsProps = _objectSpread(_objectSpread({}, standardProps), {}, {
+  isOpen: true,
   children: _jsx(_Fragment, {
     children: Array.from({
       length: 99

package/package.json

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