@autoguru/overdrive 4.43.9-next.0 → 4.43.10-next.0

package/dist/components/Inline/Inline.js

@@ -1,64 +1,71 @@
 "use strict";
 
-import React, { Children, isValidElement, useMemo } from 'react';
+import * as React from 'react';
+import { Children, isValidElement } from 'react';
 import flattenChildren from 'react-keyed-flatten-children';
+import { useNegativeMarginLeft, useNegativeMarginTop } from "../../hooks/useNegativeMargin/useNegativeMargin.js";
 import { Box } from "../Box/Box.js";
-import { LIST_MAP } from "../Stack/Stack.js";
 import { Text } from "../Text/Text.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Divider = _ref => {
-  let {
-    children
-  } = _ref;
-  if (!children) return null;
-  if (typeof children === 'boolean') return _jsx(Text, {
-    "aria-hidden": true,
-    children: "\u2022"
-  });
-  if (isValidElement(children)) return _jsx("div", {
-    "aria-hidden": true,
-    children: children
-  });
-  return _jsx(Text, {
-    "aria-hidden": true,
-    children: children
-  });
-};
-export const Inline = _ref2 => {
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const supportedListTypes = ['ul', 'ol'];
+export const Inline = _ref => {
   let {
     as = 'div',
-    alignX,
-    alignY = 'center',
     children,
-    dividers,
-    noWrap,
     space = '2',
+    alignY = 'center',
+    alignX,
+    noWrap,
+    dividers,
     width
-  } = _ref2;
-  const items = useMemo(() => flattenChildren(children), [children]);
-  if (items.length === 0) {
-    return null;
+  } = _ref;
+  const negativeMarginLeft = useNegativeMarginLeft(space);
+  const negativeMarginTop = useNegativeMarginTop(space);
+  const items = flattenChildren(children);
+  if (items.length < 2) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: items
+    });
   }
-  const childEl = typeof as === 'string' && as in LIST_MAP ? LIST_MAP[as] : 'div';
-  return _jsx(Box, {
-    alignItems: alignY,
+  const divider = renderDivider(dividers);
+  let listItem = 'div';
+  if (typeof as === 'string') listItem = supportedListTypes.includes(as) ? 'li' : 'div';
+  return /*#__PURE__*/_jsx(Box, {
     as: as,
+    width: width,
+    position: "relative",
     display: "flex",
+    alignItems: alignY,
+    justifyContent: alignX,
     flexDirection: "row",
     flexWrap: noWrap ? 'nowrap' : 'wrap',
-    gap: space,
-    justifyContent: alignX,
-    odComponent: "inline",
-    width: width,
-    children: Children.map(items, (child, idx) => child && _jsxs(Box, {
-      alignItems: alignY,
-      as: childEl,
+    className: [negativeMarginTop, !dividers && negativeMarginLeft],
+    children: Children.map(items, (child, idx) => child !== null && child !== undefined ? /*#__PURE__*/_jsxs(Box, {
+      as: listItem,
       display: "flex",
+      flexDirection: "row",
       flexWrap: "nowrap",
-      useVar: "gap",
-      children: [dividers && idx > 0 && _jsx(Divider, {
-        children: dividers
-      }), child]
-    }))
+      alignItems: alignY,
+      paddingTop: space,
+      paddingLeft: dividers ? undefined : space,
+      children: [child, dividers && idx !== items.length - 1 ? /*#__PURE__*/_jsx(Box, {
+        paddingX: space,
+        children: divider
+      }) : null]
+    }) : null)
   });
-};
+};
+const renderDivider = dividers => {
+  if (typeof dividers === 'boolean') {
+    return dividers ? /*#__PURE__*/_jsx(Text, {
+      children: "\u2022"
+    }) : null;
+  }
+  if (/*#__PURE__*/isValidElement(dividers)) {
+    return dividers;
+  }
+  return /*#__PURE__*/_jsx(Text, {
+    children: dividers
+  });
+};
+export default Inline;

package/dist/components/IntentStripe/IntentStripe.js

@@ -9,7 +9,7 @@ export const IntentStripe = _ref => {
     className = '',
     intent = 'success'
   } = _ref;
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     className: [className, styles.intentBox],
     position: "absolute",
     height: "full",

package/dist/components/LinearProgressIndicator/LinearProgressIndicator.js

@@ -5,23 +5,23 @@ import { memo } from 'react';
 import { Box } from "../Box/index.js";
 import * as styles from "./LinearProgressIndicator.css.js";
 import { jsx as _jsx } from "react/jsx-runtime";
-export const LinearProgressIndicator = memo(_ref => {
+export const LinearProgressIndicator = /*#__PURE__*/memo(_ref => {
   let {
     className = ''
   } = _ref;
-  return _jsx(Box, {
+  return /*#__PURE__*/_jsx(Box, {
     position: "relative",
     overflow: "hidden",
     width: "full",
     backgroundColour: "gray200",
     className: [styles.root, className],
     odComponent: "linear-progress-indicator",
-    children: _jsx(Box, {
+    children: /*#__PURE__*/_jsx(Box, {
       position: "absolute",
       width: "full",
       height: "full",
       className: styles.linearProgressBar,
-      children: _jsx(Box, {
+      children: /*#__PURE__*/_jsx(Box, {
         as: "span",
         backgroundColour: "green300",
         position: "absolute",

package/dist/components/LoadingBox/LoadingBox.js

@@ -19,7 +19,7 @@ export const LoadingBox = _ref => {
       as = 'span'
     } = _ref,
     boxStyles = _objectWithoutProperties(_ref, _excluded);
-  return _jsx(Box, _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
     as: as,
     display: display,
     width: randomWidth ? undefined : 'full',

package/dist/components/Meta/Meta.js

@@ -13,15 +13,15 @@ export const Meta = _ref => {
     variant = 'primary',
     breakWord
   } = _ref;
-  return _jsxs(Inline, {
+  return /*#__PURE__*/_jsxs(Inline, {
     noWrap: true,
     as: "span",
     space: "2",
     alignY: "center",
-    children: [icon && _jsx(Icon, {
+    children: [icon && /*#__PURE__*/_jsx(Icon, {
       icon: icon,
       className: styles.variant[variant]
-    }), _jsx(Text, {
+    }), /*#__PURE__*/_jsx(Text, {
       breakWord: breakWord,
       children: label
     })]

package/dist/components/MinimalModal/MinimalModal.js

@@ -38,11 +38,11 @@ export const MinimalModal = _ref => {
       };
     }, [isOpen]);
   }
-  return _jsx(Modal, _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsx(Modal, _objectSpread(_objectSpread({
     isOpen: isOpen,
     onRequestClose: onRequestClose
   }, modalProps), {}, {
-    children: _jsx(Box, {
+    children: /*#__PURE__*/_jsx(Box, {
       className: [styles.container, className],
       height: "full",
       display: "flex",
@@ -52,14 +52,14 @@ export const MinimalModal = _ref => {
       role: "none presentation",
       onMouseDown: unlockModal,
       onClick: backdropHandler,
-      children: _jsx(Box, {
+      children: /*#__PURE__*/_jsx(Box, {
         as: "article",
         role: "dialog",
         "aria-modal": "true",
         "aria-labelledby": titleId,
         display: "flex",
         flexDirection: "column",
-        children: _jsx(Box, {
+        children: /*#__PURE__*/_jsx(Box, {
           as: "main",
           display: "flex",
           flexDirection: "column",

package/dist/components/Modal/Modal.js

@@ -96,17 +96,17 @@ export const Modal = _ref => {
     }
     return () => {};
   }, [state]);
-  return _jsx(Portal, {
+  return /*#__PURE__*/_jsx(Portal, {
     ref: ref,
     noThemedWrapper: noThemedWrapper,
     container: container,
-    children: state === 'OPENING' || state === 'OPEN' || state === 'CLOSING' ? _jsxs(FocusLock, {
+    children: state === 'OPENING' || state === 'OPEN' || state === 'CLOSING' ? /*#__PURE__*/_jsxs(FocusLock, {
       returnFocus: true,
       autoFocus: false,
       onActivation: () => {
         dispatch('ANIMATION_COMPLETE');
       },
-      children: [_jsx(Box, {
+      children: [/*#__PURE__*/_jsx(Box, {
         "aria-hidden": "true",
         position: "fixed",
         pointerEvents: disableBackdropClick || state === 'CLOSING' ? 'none' : undefined,
@@ -114,7 +114,7 @@ export const Modal = _ref => {
         backgroundColour: hideBackdrop ? 'transparent' : 'neutral',
         className: [styles.backdrop.root, styles.transition, hideBackdrop && styles.backdrop.invisible],
         onClick: handleBackdropClick
-      }), _jsx(Box, {
+      }), /*#__PURE__*/_jsx(Box, {
         role: "presentation",
         position: "fixed",
         overflow: "hidden",
@@ -131,11 +131,12 @@ export const withModal = WrappedComponent => _ref2 => {
       isOpen
     } = _ref2,
     rest = _objectWithoutProperties(_ref2, _excluded);
+  // TODO: Deprecate me
   process.env.NODE_ENV !== "production" ? warning(false, 'Using withModal is now an anti-pattern. Use <Modal /> instead') : void 0;
-  return _jsx(Modal, {
+  return /*#__PURE__*/_jsx(Modal, {
     isOpen: isOpen,
     onRequestClose: onRequestClose,
-    children: _jsx(WrappedComponent, _objectSpread({
+    children: /*#__PURE__*/_jsx(WrappedComponent, _objectSpread({
       isOpen: isOpen,
       onRequestClose: onRequestClose
     }, rest))

package/dist/components/NumberBubble/NumberBubble.js

@@ -33,7 +33,7 @@ export const NumberBubble = _ref => {
     if (value >= 9999) return 'LARGE';
     return 'SMALL';
   }, [value]);
-  return _jsx(Box, _objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread({
     borderRadius: "full",
     backgroundColour: "gray900",
     display: "inline-block",
@@ -41,7 +41,7 @@ export const NumberBubble = _ref => {
     padding: valuePaddingMap[size],
     odComponent: "number-bubble"
   }, boxProps), {}, {
-    children: _jsx(Text, {
+    children: /*#__PURE__*/_jsx(Text, {
       size: "2",
       strong: true,
       className: clsx(styles.bubbleText, sprinkles({

package/dist/components/NumberInput/NumberInput.js

@@ -47,7 +47,7 @@ export const NumberInput = withEnhancedInput(_ref => {
     onChange: eventHandlers.onChange,
     value: incomingFieldProps.value
   });
-  return _jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
+  return /*#__PURE__*/_jsx(Box, _objectSpread(_objectSpread(_objectSpread(_objectSpread({
     as: "input",
     ref: inputRef
   }, eventHandlers), {}, {

package/dist/components/NumberInput/useNumberInputBehaviours.js

@@ -49,9 +49,15 @@ export const useNumberInputBehaviours = _ref => {
       });
     }
     return () => {
-      if (mouseWheelListener && inputRef.current) inputRef.current.removeEventListener('mousewheel', mouseWheelListener);
-      if (onWheelListener && inputRef.current) inputRef.current.removeEventListener('onwheel', onWheelListener);
-      if (wheelListener && inputRef.current) inputRef.current.removeEventListener('wheel', wheelListener);
+      if (mouseWheelListener && inputRef.current)
+        // Standard
+        inputRef.current.removeEventListener('mousewheel', mouseWheelListener);
+      if (onWheelListener && inputRef.current)
+        // Chrome
+        inputRef.current.removeEventListener('onwheel', onWheelListener);
+      if (wheelListener && inputRef.current)
+        // Safari
+        inputRef.current.removeEventListener('wheel', wheelListener);
     };
   }, [preventMouseWheel, inputRef.current]);
   return {

package/dist/components/OptionGrid/OptionGrid.css.js

@@ -8,12 +8,14 @@ import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
 import { sprinkles } from "../../styles/sprinkles.css.js";
 import { breakpoints } from "../../themes/makeTheme.js";
 import { overdriveTokens as tokens } from "../../themes/theme.css.js";
-import { interactionStyle, notDisabled, notSelected } from "../../utils/css.js";
+import { interactionStyle, notDisabled, notSelected } from "../../utils/css.js"; // === Container styles
 export const gridContainer = createContainer("gridContainer");
 export const gridContainerStyle = style({
   containerName: gridContainer,
   containerType: 'inline-size'
 }, "gridContainerStyle");
+
+// == Grid styles
 const minWidth1200 = '(min-width: 1200px)';
 const repeat2Col = 'repeat(2, 1fr)';
 const repeat3Col = 'repeat(3, 1fr)';
@@ -77,6 +79,7 @@ export const styledGrid = recipe({
     columns: '2'
   }
 }, "styledGrid");
+// === Option item styles
 const optionTransition = style({
   transition: 'background 100ms ease-in, border-color 100ms ease-in'
 }, "optionTransition");
@@ -124,6 +127,7 @@ export const styledGridItem = recipe({
     }
   }, optionTransition, focusOutlineStyle]
 }, "styledGridItem");
+// === Indicator styles
 export const styleIndicator = style({
   height: '26px',
   width: '26px'
@@ -199,6 +203,8 @@ export const styledRadioButton = recipe({
     }
   }, pseudoRadio, optionTransition]
 }, "styledRadioButton");
+// === Label styles
+
 export const labelStyle = style({
   fontSize: tokens.typography.size[4].fontSize
 }, "labelStyle");

package/dist/components/OptionGrid/OptionGrid.d.ts

@@ -8,15 +8,47 @@ export interface OptionItem {
     name: string;
     label: string;
     value?: string;
+    /**
+     * Optional custom icon from `@autoguru/icons` to display in unselected state
+     */
     icon?: IconEl;
     description?: string;
 }
 export interface OptionGridProps<T> extends Omit<ListBoxProps<T>, 'items'>, TestId {
+    /**
+     * Mandatory descriptive label that indicates the purpose of the group of options, used for assistive technologies
+     */
     label: string;
+    /**
+     * Pass in the content for the OptionGrid using the items array
+     */
     items: OptionItem[];
+    /**
+     * Toggle the indicator appearance between checkbox and radio button, visual effect only
+     */
     indicator?: 'none' | 'checkbox' | 'radio';
+    /**
+     * Toggle between single and multi selection mode
+     */
     selectionMode?: SelectionMode;
+    /**
+     * Number of columns to display the options in
+     */
     columns?: StyledGridProps['columns'];
 }
+/**
+ * The OptionGrid is primarily used in the booking flow to provide large selectable tiles to the user. It is not a form
+ * control as it is built on the react-aria ListBox ([docs](https://react-spectrum.adobe.com/react-aria/ListBox.html)),
+ * and implements a listbox behaviour without wrapping an input element. It supports controlled and uncontrolled usage.
+ * Following ARIA guidelines, the arrow keys can be used to navigate withing the group of options.
+ *
+ * See more details on react-aria [ListBox props](https://react-spectrum.adobe.com/react-aria/ListBox.html#listbox-1).
+ *
+ * Not yet implemented: disabled appearance, empty state, loading state, error state.
+ *
+ * Accessibility note: The ARIA spec prohibits listbox items from including interactive content such as buttons,
+ * tooltips, etc. For these cases a completely different implementation is required (e.g. react-aria [GridList](
+ * https://react-spectrum.adobe.com/react-aria/GridList.html))
+ */
 export declare const OptionGrid: ({ className, columns, indicator, label, layout, selectionMode, testId, ...props }: OptionGridProps<OptionItem>) => React.JSX.Element;
 //# sourceMappingURL=OptionGrid.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"OptionGrid.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionGrid/OptionGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIN,KAAK,YAAY,EACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAQ,KAAK,MAAM,EAAE,MAAM,SAAS,CAAC;AAE5C,OAAO,EASN,KAAK,eAAe,EACpB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,UAAU;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IAIf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AACD,MAAM,WAAW,eAAe,CAAC,CAAC,CACjC,SAAQ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EACrC,MAAM;IAIP,KAAK,EAAE,MAAM,CAAC;IAId,KAAK,EAAE,UAAU,EAAE,CAAC;IAIpB,SAAS,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;IAI1C,aAAa,CAAC,EAAE,aAAa,CAAC;IAI9B,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;CACrC;AAgBD,eAAO,MAAM,UAAU,GAAI,mFAUxB,eAAe,CAAC,UAAU,CAAC,sBA+E7B,CAAC"}
+{"version":3,"file":"OptionGrid.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionGrid/OptionGrid.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAIN,KAAK,YAAY,EACjB,MAAM,uBAAuB,CAAC;AAC/B,OAAO,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAC;AAEnD,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAE1C,OAAO,EAAQ,KAAK,MAAM,EAAE,MAAM,SAAS,CAAC;AAE5C,OAAO,EASN,KAAK,eAAe,EACpB,MAAM,kBAAkB,CAAC;AAE1B,MAAM,WAAW,UAAU;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;CACrB;AACD,MAAM,WAAW,eAAe,CAAC,CAAC,CACjC,SAAQ,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,OAAO,CAAC,EACrC,MAAM;IACP;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,CAAC;IAC1C;;OAEG;IACH,aAAa,CAAC,EAAE,aAAa,CAAC;IAC9B;;OAEG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;CACrC;AAED;;;;;;;;;;;;;GAaG;AACH,eAAO,MAAM,UAAU,GAAI,mFAUxB,eAAe,CAAC,UAAU,CAAC,sBA+E7B,CAAC"}

package/dist/components/OptionGrid/OptionGrid.js

@@ -13,6 +13,20 @@ import { dataAttrs } from "../../utils/dataAttrs.js";
 import { Icon } from "../Icon/index.js";
 import { descriptionStyle, gridContainerStyle, labelStyle, styledCheckbox, styledGrid, styledGridItem, styledRadioButton, styleIndicator } from "./OptionGrid.css.js";
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/**
+ * The OptionGrid is primarily used in the booking flow to provide large selectable tiles to the user. It is not a form
+ * control as it is built on the react-aria ListBox ([docs](https://react-spectrum.adobe.com/react-aria/ListBox.html)),
+ * and implements a listbox behaviour without wrapping an input element. It supports controlled and uncontrolled usage.
+ * Following ARIA guidelines, the arrow keys can be used to navigate withing the group of options.
+ *
+ * See more details on react-aria [ListBox props](https://react-spectrum.adobe.com/react-aria/ListBox.html#listbox-1).
+ *
+ * Not yet implemented: disabled appearance, empty state, loading state, error state.
+ *
+ * Accessibility note: The ARIA spec prohibits listbox items from including interactive content such as buttons,
+ * tooltips, etc. For these cases a completely different implementation is required (e.g. react-aria [GridList](
+ * https://react-spectrum.adobe.com/react-aria/GridList.html))
+ */
 export const OptionGrid = _ref => {
   let {
       className,
@@ -24,9 +38,9 @@ export const OptionGrid = _ref => {
       testId
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
-  return _jsx("div", {
+  return /*#__PURE__*/_jsx("div", {
     className: gridContainerStyle,
-    children: _jsx(ListBox, _objectSpread(_objectSpread(_objectSpread({
+    children: /*#__PURE__*/_jsx(ListBox, _objectSpread(_objectSpread(_objectSpread({
       "aria-label": label,
       layout: layout,
       selectionMode: selectionMode,
@@ -43,7 +57,7 @@ export const OptionGrid = _ref => {
           label,
           name
         } = _ref2;
-        return _jsx(ListBoxItem, {
+        return /*#__PURE__*/_jsx(ListBoxItem, {
           className: styledGridItem(),
           id: name,
           textValue: label,
@@ -56,34 +70,34 @@ export const OptionGrid = _ref => {
             const hasIndicator = indicator !== 'none';
             const hasNoInteraction = !isFocusVisible && !isHovered && !isSelected;
             const IndicatorIcon = () => {
-              if (icon && hasNoInteraction) return _jsx(Icon, {
+              if (icon && hasNoInteraction) return /*#__PURE__*/_jsx(Icon, {
                 icon: icon,
                 size: "100%"
               });
               const styledIndicator = indicator === 'radio' ? styledRadioButton : styledCheckbox;
-              return _jsx("div", _objectSpread(_objectSpread({
+              return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
                 className: styledIndicator()
               }, dataAttrs({
                 'focus-visible': isFocusVisible,
                 hover: isHovered,
                 selected: isSelected
               })), {}, {
-                children: indicator === 'checkbox' && _jsx(Icon, {
+                children: indicator === 'checkbox' && /*#__PURE__*/_jsx(Icon, {
                   icon: CheckIcon
                 })
               }));
             };
-            return _jsxs(_Fragment, {
-              children: [hasIndicator && _jsx("div", {
+            return /*#__PURE__*/_jsxs(_Fragment, {
+              children: [hasIndicator && /*#__PURE__*/_jsx("div", {
                 className: styleIndicator,
-                children: _jsx(IndicatorIcon, {})
-              }), _jsxs("div", {
-                children: [_jsx(Text, {
+                children: /*#__PURE__*/_jsx(IndicatorIcon, {})
+              }), /*#__PURE__*/_jsxs("div", {
+                children: [/*#__PURE__*/_jsx(Text, {
                   slot: "label",
                   elementType: "div",
                   className: labelStyle,
                   children: label
-                }), description && _jsx(Text, {
+                }), description && /*#__PURE__*/_jsx(Text, {
                   slot: "description",
                   elementType: "div",
                   className: descriptionStyle,

package/dist/components/OptionList/OptionList.css.js

@@ -7,7 +7,7 @@ import { recipe } from '@vanilla-extract/recipes';
 import { focusOutlineStyle } from "../../styles/focusOutline.css.js";
 import { sprinkles } from "../../styles/sprinkles.css.js";
 import { overdriveTokens as tokens } from "../../themes/theme.css.js";
-import { interactionStyle } from "../../utils/css.js";
+import { interactionStyle } from "../../utils/css.js"; // === Group styles
 export const groupStyle = style({
   marginTop: tokens.space['6']
 }, "groupStyle");
@@ -22,6 +22,8 @@ export const descriptionStyle = style({
   fontSize: tokens.typography.size[4].fontSize,
   lineHeight: tokens.typography.size[4].lineHeight
 }, "descriptionStyle");
+
+// === Option item styles
 const buttonBorderRadius = tokens.border.radius['md'];
 export const styledOptionItem = recipe({
   base: [{
@@ -68,6 +70,8 @@ export const itemLabelStyle = style({
   lineHeight: tokens.typography.size['3'].lineHeight,
   width: '100%'
 }, "itemLabelStyle");
+
+// === Checkbox styles
 const checkboxTransition = style({
   transitionProperty: 'background',
   transitionTimingFunction: 'ease-in',

package/dist/components/OptionList/OptionList.d.ts

@@ -4,15 +4,40 @@ import { type CheckboxGroupState } from 'react-stately';
 import type { TestId } from '../../types';
 type ElementAttributes = Pick<React.ComponentPropsWithRef<'div'>, 'className' | 'ref' | 'style'>;
 export interface OptionListProps extends AriaCheckboxGroupProps, ElementAttributes, TestId {
+    /**
+     * Label for the CheckboxButtons group needs to be provided at the component level for accessibility
+     */
     label: AriaCheckboxGroupProps['label'];
     description?: AriaCheckboxGroupProps['description'];
+    /**
+     * Populate with one or more CheckboxItem components
+     */
     children?: React.ReactNode;
     name?: AriaCheckboxGroupProps['name'];
     defaultValue?: AriaCheckboxGroupProps['defaultValue'];
+    /**
+     * Current selected value (controlled state)
+     */
     value?: AriaCheckboxGroupProps['value'];
+    /**
+     * Event handler when any checkbox button changes. Returned string array is the values of the inputs that are currently
+     * checked.
+     */
     onChange?: AriaCheckboxGroupProps['onChange'];
 }
 export declare const OptionListContext: React.Context<CheckboxGroupState | null>;
+/**
+ * The OptionList is a form control that groups selectable items that apear as an outlined list of options and
+ * implements React Aria `useCheckboxGroup`
+ * ([docs](https://react-spectrum.adobe.com/react-aria/useCheckboxGroup.html))
+ *
+ * Populate the OptionList group with the OptionListList, each item must have a `value` (unique) and be labelled.
+ * The `value` of all active items are passed as a string array to set `defaultValue` (uncontrolled), `value`
+ * (controlled) and is the format returned from the onChange handler as well.
+ *
+ * Used in the booking flow on the payment step for addons.
+ * Future enhancements might include: validation states/error handling
+ */
 export declare const OptionList: {
     (props: OptionListProps): React.JSX.Element;
     Item: {

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

@@ -1 +1 @@
-{"version":3,"file":"OptionList.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionList/OptionList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAoB,KAAK,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAC3E,OAAO,EAAE,KAAK,kBAAkB,EAAyB,MAAM,eAAe,CAAC;AAE/E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAU1C,KAAK,iBAAiB,GAAG,IAAI,CAC5B,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAClC,WAAW,GAAG,KAAK,GAAG,OAAO,CAC7B,CAAC;AAEF,MAAM,WAAW,eAChB,SAAQ,sBAAsB,EAC7B,iBAAiB,EACjB,MAAM;IAIP,KAAK,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IAIpD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,sBAAsB,CAAC,MAAM,CAAC,CAAC;IACtC,YAAY,CAAC,EAAE,sBAAsB,CAAC,cAAc,CAAC,CAAC;IAItD,KAAK,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IAKxC,QAAQ,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC,CAAC;CAC9C;AAED,eAAO,MAAM,iBAAiB,0CAAiD,CAAC;AAchF,eAAO,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BhD,CAAC"}
+{"version":3,"file":"OptionList.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionList/OptionList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAwB,MAAM,OAAO,CAAC;AAC7C,OAAO,EAAoB,KAAK,sBAAsB,EAAE,MAAM,YAAY,CAAC;AAC3E,OAAO,EAAE,KAAK,kBAAkB,EAAyB,MAAM,eAAe,CAAC;AAE/E,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAU1C,KAAK,iBAAiB,GAAG,IAAI,CAC5B,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAClC,WAAW,GAAG,KAAK,GAAG,OAAO,CAC7B,CAAC;AAEF,MAAM,WAAW,eAChB,SAAQ,sBAAsB,EAC7B,iBAAiB,EACjB,MAAM;IACP;;OAEG;IACH,KAAK,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACvC,WAAW,CAAC,EAAE,sBAAsB,CAAC,aAAa,CAAC,CAAC;IACpD;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,IAAI,CAAC,EAAE,sBAAsB,CAAC,MAAM,CAAC,CAAC;IACtC,YAAY,CAAC,EAAE,sBAAsB,CAAC,cAAc,CAAC,CAAC;IACtD;;OAEG;IACH,KAAK,CAAC,EAAE,sBAAsB,CAAC,OAAO,CAAC,CAAC;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,sBAAsB,CAAC,UAAU,CAAC,CAAC;CAC9C;AAED,eAAO,MAAM,iBAAiB,0CAAiD,CAAC;AAEhF;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,UAAU;YAAW,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BhD,CAAC"}

package/dist/components/OptionList/OptionList.js

@@ -10,7 +10,20 @@ import { dataAttrs } from "../../utils/dataAttrs.js";
 import { descriptionStyle, groupStyle, groupLabelStyle } from "./OptionList.css.js";
 import { OptionListItem, ItemSplitLabel } from "./OptionListItem.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export const OptionListContext = createContext(null);
+export const OptionListContext = /*#__PURE__*/createContext(null);
+
+/**
+ * The OptionList is a form control that groups selectable items that apear as an outlined list of options and
+ * implements React Aria `useCheckboxGroup`
+ * ([docs](https://react-spectrum.adobe.com/react-aria/useCheckboxGroup.html))
+ *
+ * Populate the OptionList group with the OptionListList, each item must have a `value` (unique) and be labelled.
+ * The `value` of all active items are passed as a string array to set `defaultValue` (uncontrolled), `value`
+ * (controlled) and is the format returned from the onChange handler as well.
+ *
+ * Used in the booking flow on the payment step for addons.
+ * Future enhancements might include: validation states/error handling
+ */
 export const OptionList = props => {
   const {
     children,
@@ -31,18 +44,18 @@ export const OptionList = props => {
     labelProps,
     descriptionProps
   } = useCheckboxGroup(props, state);
-  return _jsxs("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, groupProps), elementAttrs), dataAttrs({
+  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, groupProps), elementAttrs), dataAttrs({
     testid: props.testId
   })), {}, {
-    children: [_jsx("div", _objectSpread(_objectSpread({}, labelProps), {}, {
+    children: [/*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, labelProps), {}, {
       className: groupLabelStyle,
       children: label
-    })), description && _jsx("div", _objectSpread(_objectSpread({}, descriptionProps), {}, {
+    })), description && /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({}, descriptionProps), {}, {
       className: descriptionStyle,
       children: description
-    })), _jsx(OptionListContext.Provider, {
+    })), /*#__PURE__*/_jsx(OptionListContext.Provider, {
       value: state,
-      children: _jsx("div", {
+      children: /*#__PURE__*/_jsx("div", {
         className: groupStyle,
         children: children
       })

package/dist/components/OptionList/OptionListItem.d.ts

@@ -1,14 +1,24 @@
 import React from 'react';
 import { type AriaCheckboxGroupItemProps } from 'react-aria';
 type FilteredCheckboxProps = Omit<AriaCheckboxGroupItemProps, 'isIndeterminate'>;
+/**
+ * The OptionListItem is used to populate OptionList. They are outlined with a large interactive area and flexible
+ * label content layout.
+ */
 export declare const OptionListItem: {
     (props: FilteredCheckboxProps): React.JSX.Element;
     displayName: string;
 };
 export interface SplitLabelProps {
     children?: React.ReactNode;
+    /**
+     * convenience prop for passing through a string array instead of children
+     */
     content?: string[];
 }
+/**
+ * Helper component part to display a checkbox button label with a second column justified to the end
+ */
 export declare const ItemSplitLabel: {
     ({ children, content }: SplitLabelProps): React.JSX.Element | null;
     displayName: string;

package/dist/components/OptionList/OptionListItem.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"OptionListItem.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionList/OptionListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAClD,OAAO,EAIN,KAAK,0BAA0B,EAC/B,MAAM,YAAY,CAAC;AAUpB,KAAK,qBAAqB,GAAG,IAAI,CAChC,0BAA0B,EAC1B,iBAAiB,CACjB,CAAC;AAMF,eAAO,MAAM,cAAc;YAAW,qBAAqB;;CA+B1D,CAAC;AAIF,MAAM,WAAW,eAAe;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAI3B,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAKD,eAAO,MAAM,cAAc;4BAA2B,eAAe;;CAcpE,CAAC"}
+{"version":3,"file":"OptionListItem.d.ts","sourceRoot":"","sources":["../../../lib/components/OptionList/OptionListItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAClD,OAAO,EAIN,KAAK,0BAA0B,EAC/B,MAAM,YAAY,CAAC;AAUpB,KAAK,qBAAqB,GAAG,IAAI,CAChC,0BAA0B,EAC1B,iBAAiB,CACjB,CAAC;AAEF;;;GAGG;AACH,eAAO,MAAM,cAAc;YAAW,qBAAqB;;CA+B1D,CAAC;AAIF,MAAM,WAAW,eAAe;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;CACnB;AAED;;GAEG;AACH,eAAO,MAAM,cAAc;4BAA2B,eAAe;;CAcpE,CAAC"}