@jobber/components 6.109.4 → 6.110.0

package/dist/Autocomplete/index.cjs

@@ -241,24 +241,6 @@ function createInteractionPointerDownHandler(isHandlingMenuInteractionRef) {
 function useAutocomplete(props) {
     const { menu, emptyActions, getOptionLabel: getOptionLabelProp, isOptionEqualToValue, inputValue, onInputChange, value, onChange, multiple, openOnFocus = true, readOnly = false, debounce: debounceMs = 300, } = props;
     const isHandlingMenuInteractionRef = React.useRef(false);
-    const isValidSingleSelection = (v) => {
-        if (v && typeof v === "object" && "label" in v && v.label) {
-            return true;
-        }
-        return false;
-    };
-    const getSingleSelection = (v) => {
-        if (isValidSingleSelection(v)) {
-            return v;
-        }
-        return undefined;
-    };
-    const getFirstItemFromMultiSelection = (v) => {
-        if (v && Array.isArray(v)) {
-            return v[0];
-        }
-        return undefined;
-    };
     // TODO: Clean up the types in these refs by enhancing the type system in useCallbackRef
     const getOptionLabelPropRef = jobberHooks.useCallbackRef((opt) => getOptionLabelProp === null || getOptionLabelProp === void 0 ? void 0 : getOptionLabelProp(opt));
     const getOptionLabel = React.useCallback((opt) => {
@@ -276,7 +258,8 @@ function useAutocomplete(props) {
             const current = (_a = value) !== null && _a !== void 0 ? _a : [];
             return current.some(v => equals(v, opt));
         }
-        return isValidSingleSelection(value) ? equals(value, opt) : false;
+        const current = value;
+        return current != null ? equals(current, opt) : false;
     }, [multiple, value, equals]);
     const flatInitial = React.useMemo(() => flattenMenu(menu), [menu]);
     const sections = flatInitial.sections;
@@ -361,7 +344,7 @@ function useAutocomplete(props) {
             const current = (_a = value) !== null && _a !== void 0 ? _a : [];
             return Array.isArray(current) && current.length > 0;
         }
-        return isValidSingleSelection(value);
+        return value != null;
     }, [multiple, value]);
     const headerInteractivePersistents = persistentsHeaders.filter(p => Boolean(p.onClick));
     const footerInteractivePersistents = persistentsFooters.filter(p => Boolean(p.onClick));
@@ -372,8 +355,8 @@ function useAutocomplete(props) {
     // Compute the currently selected index in the global navigable list (header -> middle -> footer)
     const selectedIndex = React.useMemo(() => {
         const selectedValue = multiple
-            ? getFirstItemFromMultiSelection(value)
-            : getSingleSelection(value);
+            ? value === null || value === void 0 ? void 0 : value[0]
+            : value;
         if (!selectedValue)
             return null;
         const middleIndex = findNavigableIndexForValue(renderable, equals, selectedValue);
@@ -459,8 +442,8 @@ function useAutocomplete(props) {
         if (!hasSelection)
             return;
         const selectedValue = multiple
-            ? getFirstItemFromMultiSelection(value)
-            : getSingleSelection(value);
+            ? value === null || value === void 0 ? void 0 : value[0]
+            : value;
         if (!selectedValue)
             return;
         const idx = findNavigableIndexForValue(renderable, equals, selectedValue);
@@ -483,8 +466,8 @@ function useAutocomplete(props) {
         // - If there is a current selection, highlight that option
         // - Otherwise, leave the highlight unset (null)
         const selectedValue = multiple
-            ? getFirstItemFromMultiSelection(value)
-            : getSingleSelection(value);
+            ? value === null || value === void 0 ? void 0 : value[0]
+            : value;
         if (selectedValue) {
             const selectedNavigableIndex = findNavigableIndexForValue(renderable, equals, selectedValue);
             if (selectedNavigableIndex != null) {
@@ -538,8 +521,8 @@ function useAutocomplete(props) {
         if (props.allowFreeForm === true)
             return;
         const selectedValue = multiple
-            ? getFirstItemFromMultiSelection(value)
-            : getSingleSelection(value);
+            ? value === null || value === void 0 ? void 0 : value[0]
+            : value;
         if (!selectedValue)
             return;
         const selectedLabel = getOptionLabel(selectedValue);

package/dist/Autocomplete/index.mjs

@@ -239,24 +239,6 @@ function createInteractionPointerDownHandler(isHandlingMenuInteractionRef) {
 function useAutocomplete(props) {
     const { menu, emptyActions, getOptionLabel: getOptionLabelProp, isOptionEqualToValue, inputValue, onInputChange, value, onChange, multiple, openOnFocus = true, readOnly = false, debounce: debounceMs = 300, } = props;
     const isHandlingMenuInteractionRef = useRef(false);
-    const isValidSingleSelection = (v) => {
-        if (v && typeof v === "object" && "label" in v && v.label) {
-            return true;
-        }
-        return false;
-    };
-    const getSingleSelection = (v) => {
-        if (isValidSingleSelection(v)) {
-            return v;
-        }
-        return undefined;
-    };
-    const getFirstItemFromMultiSelection = (v) => {
-        if (v && Array.isArray(v)) {
-            return v[0];
-        }
-        return undefined;
-    };
     // TODO: Clean up the types in these refs by enhancing the type system in useCallbackRef
     const getOptionLabelPropRef = useCallbackRef((opt) => getOptionLabelProp === null || getOptionLabelProp === void 0 ? void 0 : getOptionLabelProp(opt));
     const getOptionLabel = useCallback((opt) => {
@@ -274,7 +256,8 @@ function useAutocomplete(props) {
             const current = (_a = value) !== null && _a !== void 0 ? _a : [];
             return current.some(v => equals(v, opt));
         }
-        return isValidSingleSelection(value) ? equals(value, opt) : false;
+        const current = value;
+        return current != null ? equals(current, opt) : false;
     }, [multiple, value, equals]);
     const flatInitial = useMemo(() => flattenMenu(menu), [menu]);
     const sections = flatInitial.sections;
@@ -359,7 +342,7 @@ function useAutocomplete(props) {
             const current = (_a = value) !== null && _a !== void 0 ? _a : [];
             return Array.isArray(current) && current.length > 0;
         }
-        return isValidSingleSelection(value);
+        return value != null;
     }, [multiple, value]);
     const headerInteractivePersistents = persistentsHeaders.filter(p => Boolean(p.onClick));
     const footerInteractivePersistents = persistentsFooters.filter(p => Boolean(p.onClick));
@@ -370,8 +353,8 @@ function useAutocomplete(props) {
     // Compute the currently selected index in the global navigable list (header -> middle -> footer)
     const selectedIndex = useMemo(() => {
         const selectedValue = multiple
-            ? getFirstItemFromMultiSelection(value)
-            : getSingleSelection(value);
+            ? value === null || value === void 0 ? void 0 : value[0]
+            : value;
         if (!selectedValue)
             return null;
         const middleIndex = findNavigableIndexForValue(renderable, equals, selectedValue);
@@ -457,8 +440,8 @@ function useAutocomplete(props) {
         if (!hasSelection)
             return;
         const selectedValue = multiple
-            ? getFirstItemFromMultiSelection(value)
-            : getSingleSelection(value);
+            ? value === null || value === void 0 ? void 0 : value[0]
+            : value;
         if (!selectedValue)
             return;
         const idx = findNavigableIndexForValue(renderable, equals, selectedValue);
@@ -481,8 +464,8 @@ function useAutocomplete(props) {
         // - If there is a current selection, highlight that option
         // - Otherwise, leave the highlight unset (null)
         const selectedValue = multiple
-            ? getFirstItemFromMultiSelection(value)
-            : getSingleSelection(value);
+            ? value === null || value === void 0 ? void 0 : value[0]
+            : value;
         if (selectedValue) {
             const selectedNavigableIndex = findNavigableIndexForValue(renderable, equals, selectedValue);
             if (selectedNavigableIndex != null) {
@@ -536,8 +519,8 @@ function useAutocomplete(props) {
         if (props.allowFreeForm === true)
             return;
         const selectedValue = multiple
-            ? getFirstItemFromMultiSelection(value)
-            : getSingleSelection(value);
+            ? value === null || value === void 0 ? void 0 : value[0]
+            : value;
         if (!selectedValue)
             return;
         const selectedLabel = getOptionLabel(selectedValue);

package/dist/FeatureSwitch/index.cjs

@@ -9,11 +9,11 @@ require('../Typography-cjs.js');
 require('../Text-cjs.js');
 require('../Content-cjs.js');
 require('../Switch-cjs.js');
+require('../Icon-cjs.js');
+require('@jobber/design');
 require('../Button-cjs.js');
 require('react-router-dom');
 require('../tslib.es6-cjs.js');
-require('../Icon-cjs.js');
-require('@jobber/design');
 require('../Emphasis-cjs.js');
 require('../Markdown-cjs.js');
 require('react/jsx-runtime');

package/dist/FeatureSwitch/index.mjs

@@ -7,11 +7,11 @@ import '../Typography-es.js';
 import '../Text-es.js';
 import '../Content-es.js';
 import '../Switch-es.js';
+import '../Icon-es.js';
+import '@jobber/design';
 import '../Button-es.js';
 import 'react-router-dom';
 import '../tslib.es6-es.js';
-import '../Icon-es.js';
-import '@jobber/design';
 import '../Emphasis-es.js';
 import '../Markdown-es.js';
 import 'react/jsx-runtime';

package/dist/Switch/index.cjs

@@ -3,7 +3,8 @@
 var Switch = require('../Switch-cjs.js');
 require('react');
 require('classnames');
-require('../Typography-cjs.js');
+require('../Icon-cjs.js');
+require('@jobber/design');
 
 
 

package/dist/Switch/index.mjs

@@ -1,4 +1,5 @@
 export { S as Switch } from '../Switch-es.js';
 import 'react';
 import 'classnames';
-import '../Typography-es.js';
+import '../Icon-es.js';
+import '@jobber/design';

package/dist/Switch-cjs.js

@@ -2,9 +2,9 @@
 
 var React = require('react');
 var classnames = require('classnames');
-var Typography = require('./Typography-cjs.js');
+var Icon = require('./Icon-cjs.js');
 
-var styles = {"switch":"rVg6dYYBFN4-","track":"yyISARGmmJo-","isChecked":"_40c6OIH33p8-","toggle":"zA0Fmn8IIZI-","label":"HLUIVXs3n5w-","pip":"PiwOCJz7Zto-","disabled":"e-cSZjkHGw8-","spinning":"_0lBGF-nXMrc-"};
+var styles = {"switch":"rVg6dYYBFN4-","track":"yyISARGmmJo-","isChecked":"_40c6OIH33p8-","toggle":"zA0Fmn8IIZI-","disabled":"e-cSZjkHGw8-","pip":"PiwOCJz7Zto-","icon":"JS-CLzHa9-I-","spinning":"_0lBGF-nXMrc-"};
 
 function Switch({ value: providedValue, ariaLabel, name, disabled, onChange, }) {
     const [statefulValue, setValue] = React.useState(false);
@@ -25,24 +25,21 @@ function Switch({ value: providedValue, ariaLabel, name, disabled, onChange, })
     });
     return (React.createElement(React.Fragment, null,
         React.createElement("button", { id: name, type: "button", role: "switch", "aria-checked": value, "aria-label": ariaLabel, className: className, onClick: toggleSwitch, disabled: disabled },
-            React.createElement("span", { className: styles.toggle },
-                React.createElement(Label, { as: "On", disabled: disabled }),
-                React.createElement("span", { className: styles.pip }),
-                React.createElement(Label, { as: "Off", disabled: disabled }))),
+            React.createElement("span", { className: styles.icon, "aria-hidden": "true" },
+                React.createElement(Icon.Icon, Object.assign({ size: "small", name: value ? "checkmark" : "cross" }, getIconColor(value, disabled !== null && disabled !== void 0 ? disabled : false)))),
+            React.createElement("span", { className: styles.toggle })),
         React.createElement("input", { name: name, type: "hidden", value: String(value) })));
 }
-function Label({ as, disabled }) {
-    const getTextColor = () => {
-        if (disabled) {
-            return "grey";
-        }
-        else if (as === "On") {
-            return "white";
-        }
-        return "greyBlue";
+function getIconColor(isChecked, isDisabled) {
+    const checkedColor = {
+        color: "surface",
+    };
+    const uncheckedColor = {
+        customColor: isDisabled
+            ? "var(--color-disabled)"
+            : "var(--color-inactive--onSurface)",
     };
-    return (React.createElement("span", { className: styles.label },
-        React.createElement(Typography.Typography, { element: "span", textColor: getTextColor(), size: "small", fontWeight: "bold", textCase: "uppercase" }, as)));
+    return isChecked ? checkedColor : uncheckedColor;
 }
 
 exports.Switch = Switch;

package/dist/Switch-es.js

@@ -1,8 +1,8 @@
 import React__default, { useState } from 'react';
 import classnames from 'classnames';
-import { T as Typography } from './Typography-es.js';
+import { I as Icon } from './Icon-es.js';
 
-var styles = {"switch":"rVg6dYYBFN4-","track":"yyISARGmmJo-","isChecked":"_40c6OIH33p8-","toggle":"zA0Fmn8IIZI-","label":"HLUIVXs3n5w-","pip":"PiwOCJz7Zto-","disabled":"e-cSZjkHGw8-","spinning":"_0lBGF-nXMrc-"};
+var styles = {"switch":"rVg6dYYBFN4-","track":"yyISARGmmJo-","isChecked":"_40c6OIH33p8-","toggle":"zA0Fmn8IIZI-","disabled":"e-cSZjkHGw8-","pip":"PiwOCJz7Zto-","icon":"JS-CLzHa9-I-","spinning":"_0lBGF-nXMrc-"};
 
 function Switch({ value: providedValue, ariaLabel, name, disabled, onChange, }) {
     const [statefulValue, setValue] = useState(false);
@@ -23,24 +23,21 @@ function Switch({ value: providedValue, ariaLabel, name, disabled, onChange, })
     });
     return (React__default.createElement(React__default.Fragment, null,
         React__default.createElement("button", { id: name, type: "button", role: "switch", "aria-checked": value, "aria-label": ariaLabel, className: className, onClick: toggleSwitch, disabled: disabled },
-            React__default.createElement("span", { className: styles.toggle },
-                React__default.createElement(Label, { as: "On", disabled: disabled }),
-                React__default.createElement("span", { className: styles.pip }),
-                React__default.createElement(Label, { as: "Off", disabled: disabled }))),
+            React__default.createElement("span", { className: styles.icon, "aria-hidden": "true" },
+                React__default.createElement(Icon, Object.assign({ size: "small", name: value ? "checkmark" : "cross" }, getIconColor(value, disabled !== null && disabled !== void 0 ? disabled : false)))),
+            React__default.createElement("span", { className: styles.toggle })),
         React__default.createElement("input", { name: name, type: "hidden", value: String(value) })));
 }
-function Label({ as, disabled }) {
-    const getTextColor = () => {
-        if (disabled) {
-            return "grey";
-        }
-        else if (as === "On") {
-            return "white";
-        }
-        return "greyBlue";
+function getIconColor(isChecked, isDisabled) {
+    const checkedColor = {
+        color: "surface",
+    };
+    const uncheckedColor = {
+        customColor: isDisabled
+            ? "var(--color-disabled)"
+            : "var(--color-inactive--onSurface)",
     };
-    return (React__default.createElement("span", { className: styles.label },
-        React__default.createElement(Typography, { element: "span", textColor: getTextColor(), size: "small", fontWeight: "bold", textCase: "uppercase" }, as)));
+    return isChecked ? checkedColor : uncheckedColor;
 }
 
 export { Switch as S };

package/dist/styles.css

@@ -7850,15 +7850,19 @@ h2.react-datepicker__current-month {
 .rVg6dYYBFN4- {
   --switch--width: 48px;
   --switch--pipSize: 16px;
-  --switch--labelWidth: calc(var(--switch--pipSize) * 1.3);
   --switch--borderOffset: var(--border-thick);
+  --switch-pipOnPosition: calc(
+    var(--switch--width) - var(--switch--pipSize) -
+      (var(--switch--borderOffset) * 2) - var(--space-smallest)
+  );
+  --switch-pipOffPosition: var(--space-smallest);
 }
 
 .yyISARGmmJo-,
 .yyISARGmmJo- * {
   box-sizing: border-box;
-  transition: all 200ms;
-  transition: all var(--timing-base);
+  transition: all 200ms ease-in-out;
+  transition: all var(--timing-base) ease-in-out;
 }
 
 .yyISARGmmJo- {
@@ -7872,8 +7876,8 @@ h2.react-datepicker__current-month {
   border-radius: var(--switch--pipSize);
   overflow: hidden;
   line-height: normal;
-  background-color: rgba(255, 255, 255, 1);
-  background-color: var(--color-surface);
+  background-color: hsl(195, 12%, 94%);
+  background-color: var(--color-inactive--surface);
   cursor: pointer;
   -webkit-appearance: none;
           appearance: none;
@@ -7900,78 +7904,46 @@ h2.react-datepicker__current-month {
   background-color: var(--color-interactive);
 }
 
-.zA0Fmn8IIZI- {
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  margin-left: calc(var(--switch--width) / -2);
-  pointer-events: none;
-  -ms-flex: 1 1 100%;
-      flex: 1 1 100%;
-  -ms-flex-align: center;
-      align-items: center;
-}
-
-._40c6OIH33p8- .zA0Fmn8IIZI- {
-  margin-left: 0;
-}
-
-.HLUIVXs3n5w- {
-  display: -ms-flexbox;
-  display: flex;
-  position: relative;
-  min-width: var(--switch--labelWidth);
-  margin-top: 1px;
-  margin-top: var(--space-minuscule);
-  -webkit-user-select: none;
-      -ms-user-select: none;
-          user-select: none;
-  pointer-events: none;
-  -ms-flex-align: center;
-      align-items: center;
-  -ms-flex-pack: center;
-      justify-content: center;
-  opacity: 0;
-}
-
-.HLUIVXs3n5w-:first-of-type {
-  padding-left: 8px;
-  padding-left: var(--space-small);
-}
-
-.HLUIVXs3n5w-:last-of-type {
-  padding-right: 8px;
-  padding-right: var(--space-small);
+._40c6OIH33p8-:hover {
+  border-color: hsl(107, 65%, 24%);
+  border-color: var(--color-interactive--hover);
+  background-color: hsl(107, 65%, 24%);
+  background-color: var(--color-interactive--hover);
 }
 
-.PiwOCJz7Zto- {
-  -ms-flex: 0 0 auto;
-      flex: 0 0 auto;
+.zA0Fmn8IIZI- {
   width: var(--switch--pipSize);
   height: var(--switch--pipSize);
   border: none;
   border-radius: 100%;
   border-radius: var(--radius-circle);
-  background-color: hsl(198, 35%, 21%);
-  background-color: var(--color-interactive--subtle);
-  transition: all 100ms ease-out;
-  transition: all var(--timing-quick) ease-out;
+  background-color: hsl(197, 90%, 12%);
+  background-color: var(--color-inactive--onSurface);
+  -webkit-transform: translateX(var(--switch-pipOffPosition));
+          transform: translateX(var(--switch-pipOffPosition));
 }
 
-._40c6OIH33p8- .PiwOCJz7Zto- {
+._40c6OIH33p8- .zA0Fmn8IIZI- {
   border-color: hsl(107, 58%, 33%);
   border-color: var(--color-interactive);
   background-color: rgba(255, 255, 255, 1);
   background-color: var(--color-surface);
+  -webkit-transform: translateX(var(--switch-pipOnPosition));
+          transform: translateX(var(--switch-pipOnPosition));
 }
 
-.e-cSZjkHGw8- .PiwOCJz7Zto- {
+.e-cSZjkHGw8- .zA0Fmn8IIZI- {
   border-color: hsl(0, 0%, 93%);
   border-color: var(--color-disabled--secondary);
   background-color: hsl(0, 0%, 58%);
   background-color: var(--color-disabled);
 }
 
+.e-cSZjkHGw8-._40c6OIH33p8- .zA0Fmn8IIZI- {
+  background-color: rgba(255, 255, 255, 1);
+  background-color: var(--color-surface);
+}
+
 .e-cSZjkHGw8- {
   border-color: hsl(0, 0%, 58%);
   border-color: var(--color-disabled);
@@ -7995,6 +7967,63 @@ h2.react-datepicker__current-month {
   border-color: var(--color-disabled);
 }
 
+.JS-CLzHa9-I- {
+  display: -ms-flexbox;
+  display: flex;
+  position: absolute;
+  -webkit-transform: translateX(
+    calc(
+      var(--switch-pipOffPosition) + var(--switch--pipSize) +
+        4px
+    )
+  );
+  -webkit-transform: translateX(
+    calc(
+      var(--switch-pipOffPosition) + var(--switch--pipSize) +
+        var(--space-smaller)
+    )
+  );
+          transform: translateX(
+    calc(
+      var(--switch-pipOffPosition) + var(--switch--pipSize) +
+        4px
+    )
+  );
+          transform: translateX(
+    calc(
+      var(--switch-pipOffPosition) + var(--switch--pipSize) +
+        var(--space-smaller)
+    )
+  );
+}
+
+._40c6OIH33p8- .JS-CLzHa9-I- {
+  -webkit-transform: translateX(
+    calc(
+      var(--switch-pipOnPosition) - var(--switch--pipSize) -
+        4px
+    )
+  );
+  -webkit-transform: translateX(
+    calc(
+      var(--switch-pipOnPosition) - var(--switch--pipSize) -
+        var(--space-smaller)
+    )
+  );
+          transform: translateX(
+    calc(
+      var(--switch-pipOnPosition) - var(--switch--pipSize) -
+        4px
+    )
+  );
+          transform: translateX(
+    calc(
+      var(--switch-pipOnPosition) - var(--switch--pipSize) -
+        var(--space-smaller)
+    )
+  );
+}
+
 .ViFkIUcS6PM- {
   font-style: normal;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "6.109.4",
+  "version": "6.110.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -538,5 +538,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "8774f1709929f5e6dec002492593914bd8cb035d"
+  "gitHead": "8c986f28ec1bc68fb16cc16110bb76af64ab3e1e"
 }