@jobber/components 8.16.0 → 8.18.0

package/dist/InputNumberExperimental-cjs.js

@@ -611,12 +611,14 @@ var styles = {"container":"_6HZLFIOZh4s-","inline":"_-6ndFYNKKaM-","wrapper":"c2
 
 /**
  * Default formatting used only when the consumer does not pass `format`.
- * Preserves user-typed decimals on blur: without `maximumFractionDigits: 20`,
- * `Intl.NumberFormat` rounds to 3 digits and silently truncates input.
+ * Base UI rounds committed values to `maximumFractionDigits`, so this cap also
+ * scrubs IEEE-754 step drift (keeps `3.14 + 1` from committing
+ * `4.140000000000001`). 12 sits below that noise floor while keeping more
+ * precision than a numeric field needs.
  */
 const DEFAULT_FORMAT = {
     useGrouping: false,
-    maximumFractionDigits: 20,
+    maximumFractionDigits: 12,
 };
 const InputNumberExperimentalContext = React.createContext(null);
 function useInputNumberExperimentalContext(consumer) {
@@ -628,7 +630,7 @@ function useInputNumberExperimentalContext(consumer) {
 }
 // eslint-disable-next-line max-statements
 function InputNumberExperimentalInternal(props, ref) {
-    const { align, autocomplete, children, description, disabled, error, format, id: idProp, inline, invalid, keyboard, loading, max, maxLength, min, name, onBlur, onChange, onEnter, onFocus, onKeyDown, onKeyUp, onValueChange, placeholder, prefix, readonly, showMiniLabel = true, size = "default", suffix, value, } = props;
+    const { align, autocomplete, children, description, disabled, error, format, id: idProp, inline, invalid, keyboard, loading, max, maxLength, min, name, onBlur, onChange, onEnter, onFocus, onKeyDown, onKeyUp, onValueChange, placeholder, prefix, readonly, showMiniLabel = true, size = "default", step = 1, suffix, value, } = props;
     const generatedId = React.useId();
     const id = idProp !== null && idProp !== void 0 ? idProp : generatedId;
     const innerInputRef = React.useRef(null);
@@ -705,7 +707,7 @@ function InputNumberExperimentalInternal(props, ref) {
     const fieldInvalid = invalid || Boolean(error);
     return (React.createElement(FieldRoot, { className: classnames(styles.container, inline && styles.inline), disabled: disabled, invalid: fieldInvalid, name: name },
         React.createElement(InputNumberExperimentalContext.Provider, { value: contextValue },
-            React.createElement(NumberFieldInput.NumberFieldRoot, { allowOutOfRange: true, format: format !== null && format !== void 0 ? format : DEFAULT_FORMAT, id: id, max: max, min: min, onValueChange: handleValueChange, onValueCommitted: handleValueCommitted, readOnly: readonly, value: value !== null && value !== void 0 ? value : null },
+            React.createElement(NumberFieldInput.NumberFieldRoot, { allowOutOfRange: true, format: format !== null && format !== void 0 ? format : DEFAULT_FORMAT, id: id, max: max, min: min, onValueChange: handleValueChange, onValueCommitted: handleValueCommitted, readOnly: readonly, step: step, value: value !== null && value !== void 0 ? value : null },
                 React.createElement(NumberFieldInput.NumberFieldGroup, { className: classnames(styles.wrapper, align && styles[align], disabled && styles.disabled, size !== "default" && styles[size]) }, isUsingCompoundPattern
                     ? children
                     : renderDefaultComposition({ prefix, suffix, size })))),
@@ -760,8 +762,10 @@ function InputNumberExperimentalStepperCompound({ incrementLabel, decrementLabel
     const resolvedDecrementLabel = decrementLabel !== null && decrementLabel !== void 0 ? decrementLabel : `Decrease ${labelTarget}`;
     const rootProps = useRenderElement.mergeProps({ className: styles.stepper }, { className, style });
     return (React.createElement("div", Object.assign({}, rootProps),
-        React.createElement(NumberFieldInput.NumberFieldIncrement, { "aria-label": resolvedIncrementLabel, className: styles.stepperButton }, "\u25B2"),
-        React.createElement(NumberFieldInput.NumberFieldDecrement, { "aria-label": resolvedDecrementLabel, className: styles.stepperButton }, "\u25BC")));
+        React.createElement(NumberFieldInput.NumberFieldIncrement, { "aria-label": resolvedIncrementLabel, className: styles.stepperButton },
+            React.createElement(Icon.Icon, { name: "arrowUp", size: "small", customColor: "currentColor" })),
+        React.createElement(NumberFieldInput.NumberFieldDecrement, { "aria-label": resolvedDecrementLabel, className: styles.stepperButton },
+            React.createElement(Icon.Icon, { name: "arrowDown", size: "small", customColor: "currentColor" }))));
 }
 function AffixIconSlot({ variation, icon, size, onClick, ariaLabel, }) {
     return (React.createElement("div", { className: classnames(styles.affixIcon, variation === "suffix" && styles.suffix) },

package/dist/InputNumberExperimental-es.js

@@ -591,12 +591,14 @@ var styles = {"container":"_6HZLFIOZh4s-","inline":"_-6ndFYNKKaM-","wrapper":"c2
 
 /**
  * Default formatting used only when the consumer does not pass `format`.
- * Preserves user-typed decimals on blur: without `maximumFractionDigits: 20`,
- * `Intl.NumberFormat` rounds to 3 digits and silently truncates input.
+ * Base UI rounds committed values to `maximumFractionDigits`, so this cap also
+ * scrubs IEEE-754 step drift (keeps `3.14 + 1` from committing
+ * `4.140000000000001`). 12 sits below that noise floor while keeping more
+ * precision than a numeric field needs.
  */
 const DEFAULT_FORMAT = {
     useGrouping: false,
-    maximumFractionDigits: 20,
+    maximumFractionDigits: 12,
 };
 const InputNumberExperimentalContext = createContext(null);
 function useInputNumberExperimentalContext(consumer) {
@@ -608,7 +610,7 @@ function useInputNumberExperimentalContext(consumer) {
 }
 // eslint-disable-next-line max-statements
 function InputNumberExperimentalInternal(props, ref) {
-    const { align, autocomplete, children, description, disabled, error, format, id: idProp, inline, invalid, keyboard, loading, max, maxLength, min, name, onBlur, onChange, onEnter, onFocus, onKeyDown, onKeyUp, onValueChange, placeholder, prefix, readonly, showMiniLabel = true, size = "default", suffix, value, } = props;
+    const { align, autocomplete, children, description, disabled, error, format, id: idProp, inline, invalid, keyboard, loading, max, maxLength, min, name, onBlur, onChange, onEnter, onFocus, onKeyDown, onKeyUp, onValueChange, placeholder, prefix, readonly, showMiniLabel = true, size = "default", step = 1, suffix, value, } = props;
     const generatedId = useId();
     const id = idProp !== null && idProp !== void 0 ? idProp : generatedId;
     const innerInputRef = useRef(null);
@@ -685,7 +687,7 @@ function InputNumberExperimentalInternal(props, ref) {
     const fieldInvalid = invalid || Boolean(error);
     return (React__default.createElement(FieldRoot, { className: classnames(styles.container, inline && styles.inline), disabled: disabled, invalid: fieldInvalid, name: name },
         React__default.createElement(InputNumberExperimentalContext.Provider, { value: contextValue },
-            React__default.createElement(NumberFieldRoot, { allowOutOfRange: true, format: format !== null && format !== void 0 ? format : DEFAULT_FORMAT, id: id, max: max, min: min, onValueChange: handleValueChange, onValueCommitted: handleValueCommitted, readOnly: readonly, value: value !== null && value !== void 0 ? value : null },
+            React__default.createElement(NumberFieldRoot, { allowOutOfRange: true, format: format !== null && format !== void 0 ? format : DEFAULT_FORMAT, id: id, max: max, min: min, onValueChange: handleValueChange, onValueCommitted: handleValueCommitted, readOnly: readonly, step: step, value: value !== null && value !== void 0 ? value : null },
                 React__default.createElement(NumberFieldGroup, { className: classnames(styles.wrapper, align && styles[align], disabled && styles.disabled, size !== "default" && styles[size]) }, isUsingCompoundPattern
                     ? children
                     : renderDefaultComposition({ prefix, suffix, size })))),
@@ -740,8 +742,10 @@ function InputNumberExperimentalStepperCompound({ incrementLabel, decrementLabel
     const resolvedDecrementLabel = decrementLabel !== null && decrementLabel !== void 0 ? decrementLabel : `Decrease ${labelTarget}`;
     const rootProps = mergeProps({ className: styles.stepper }, { className, style });
     return (React__default.createElement("div", Object.assign({}, rootProps),
-        React__default.createElement(NumberFieldIncrement, { "aria-label": resolvedIncrementLabel, className: styles.stepperButton }, "\u25B2"),
-        React__default.createElement(NumberFieldDecrement, { "aria-label": resolvedDecrementLabel, className: styles.stepperButton }, "\u25BC")));
+        React__default.createElement(NumberFieldIncrement, { "aria-label": resolvedIncrementLabel, className: styles.stepperButton },
+            React__default.createElement(Icon, { name: "arrowUp", size: "small", customColor: "currentColor" })),
+        React__default.createElement(NumberFieldDecrement, { "aria-label": resolvedDecrementLabel, className: styles.stepperButton },
+            React__default.createElement(Icon, { name: "arrowDown", size: "small", customColor: "currentColor" }))));
 }
 function AffixIconSlot({ variation, icon, size, onClick, ariaLabel, }) {
     return (React__default.createElement("div", { className: classnames(styles.affixIcon, variation === "suffix" && styles.suffix) },

package/dist/docs/Countdown/Countdown.md

@@ -29,11 +29,6 @@ Consider the context of the countdown and whether the user will have enough
 context to interpret appropriately without labeled units when making the
 decision on whether to show or hide the units.
 
-## Related components
-
-* To display a unit of time that has already passed, use
-  [FormatRelativeDateTime](../FormatRelativeDateTime/FormatRelativeDateTime.md)
-
 
 ## Props
 

package/dist/docs/Datepicker/Datepicker.md

@@ -54,5 +54,3 @@ If using a custom activator, ensure that the activator is keyboard-operable.
 * If you are looking to use the `DatePicker` in a `Form`, consider the
   [InputDate](../InputDate/InputDate.md) component.
 * For a time input, use [InputTime](../InputTime/InputTime.md)
-* To represent past or future dates and times, use
-  [FormatRelativeDateTime](../FormatRelativeDateTime/FormatRelativeDateTime.md)

package/dist/docs/index.md

@@ -40,7 +40,6 @@
 [FilterPicker](./FilterPicker/FilterPicker.md)
 [Flex](./Flex/Flex.md)
 [FormatFile](./FormatFile/FormatFile.md)
-[FormatRelativeDateTime](./FormatRelativeDateTime/FormatRelativeDateTime.md)
 [formatting](./formatting/formatting.md)
 [Frame](./Frame/Frame.md)
 [Gallery](./Gallery/Gallery.md)

package/dist/index.cjs

@@ -43,7 +43,6 @@ var Flex = require('./Flex-cjs.js');
 var useAtlantisFormFieldName = require('./useAtlantisFormFieldName-cjs.js');
 var FormFieldWrapper = require('./FormFieldWrapper-cjs.js');
 var FormatFile = require('./FormatFile-cjs.js');
-var FormatRelativeDateTime = require('./FormatRelativeDateTime-cjs.js');
 var Frame = require('./Frame-cjs.js');
 var Gallery = require('./Gallery-cjs.js');
 var Glimmer = require('./Glimmer-cjs.js');
@@ -261,7 +260,6 @@ exports.useFormFieldWrapperStyles = FormFieldWrapper.useFormFieldWrapperStyles;
 exports.FormatFile = FormatFile.FormatFile;
 exports.useFormatFile = FormatFile.useFormatFile;
 exports.useFormatFileStyles = FormatFile.useFormatFileStyles;
-exports.FormatRelativeDateTime = FormatRelativeDateTime.FormatRelativeDateTime;
 exports.Frame = Frame.Frame;
 exports.Gallery = Gallery.Gallery;
 exports.GLIMMER_TEST_ID = Glimmer.GLIMMER_TEST_ID;

package/dist/index.d.mts

@@ -32,7 +32,6 @@ export * from "./FeatureSwitch";
 export * from "./Flex";
 export * from "./FormField";
 export * from "./FormatFile";
-export * from "./FormatRelativeDateTime";
 export * from "./Frame";
 export * from "./Gallery";
 export * from "./Glimmer";

package/dist/index.d.ts

@@ -32,7 +32,6 @@ export * from "./FeatureSwitch";
 export * from "./Flex";
 export * from "./FormField";
 export * from "./FormatFile";
-export * from "./FormatRelativeDateTime";
 export * from "./Frame";
 export * from "./Gallery";
 export * from "./Glimmer";

package/dist/index.mjs

@@ -41,7 +41,6 @@ export { F as Flex } from './Flex-es.js';
 export { u as useAtlantisFormFieldName } from './useAtlantisFormFieldName-es.js';
 export { A as AffixIcon, f as AffixLabel, F as FormFieldInputHorizontalWrapper, a as FormFieldInputWrapperStyles, b as FormFieldLabel, c as FormFieldWrapper, d as FormFieldWrapperMain, e as FormFieldWrapperToolbar, u as useFormFieldWrapperStyles } from './FormFieldWrapper-es.js';
 export { F as FormatFile, u as useFormatFile, a as useFormatFileStyles } from './FormatFile-es.js';
-export { F as FormatRelativeDateTime } from './FormatRelativeDateTime-es.js';
 export { F as Frame } from './Frame-es.js';
 export { G as Gallery } from './Gallery-es.js';
 export { a as GLIMMER_TEST_ID, G as Glimmer } from './Glimmer-es.js';

package/dist/primitives/InputNumberExperimental/types.d.ts

@@ -111,6 +111,11 @@ export interface InputNumberExperimentalProps {
     /** Default `true`. When `false`, the floating mini-label is hidden. */
     readonly showMiniLabel?: boolean;
     readonly size?: InputNumberExperimentalSize;
+    /**
+     * Amount the stepper buttons and ArrowUp/ArrowDown keys change the value by.
+     * Default `1`.
+     */
+    readonly step?: number;
     readonly suffix?: InputNumberExperimentalSuffixProp;
     /**
      * Value of the field. Controlled-only — pair with `onChange` and drive from

package/dist/styles.css

@@ -4613,8 +4613,7 @@ a._7BLGtYNuJOU-.zgRx3ehZ2z8-:hover {
   border: none;
   color: hsl(197, 21%, 36%);
   color: var(--color-text--secondary);
-  font-size: 8px;
-  line-height: 1;
+  line-height: 0;
   background: transparent;
   cursor: pointer;
   -ms-flex-align: center;

package/dist/utils/meta/meta.json

@@ -97,7 +97,6 @@
     "FormatFile.ProgressContainer",
     "FormatFile.ThumbnailContainer",
     "FormatFile.Wrapper",
-    "FormatRelativeDateTime",
     "Frame",
     "Gallery",
     "Glimmer",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jobber/components",
-  "version": "8.16.0",
+  "version": "8.18.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.cjs",
@@ -195,11 +195,6 @@
       "import": "./dist/FormatFile/index.mjs",
       "require": "./dist/FormatFile/index.cjs"
     },
-    "./FormatRelativeDateTime": {
-      "types": "./dist/FormatRelativeDateTime/index.d.ts",
-      "import": "./dist/FormatRelativeDateTime/index.mjs",
-      "require": "./dist/FormatRelativeDateTime/index.cjs"
-    },
     "./Frame": {
       "types": "./dist/Frame/index.d.ts",
       "import": "./dist/Frame/index.mjs",
@@ -546,5 +541,5 @@
     "> 1%",
     "IE 10"
   ],
-  "gitHead": "4e229c9d1f28566fb9117dd4b199efd2cbcebf9f"
+  "gitHead": "3239b2d272d46f01faf5f677af8c756028c3a6d8"
 }

package/FormatRelativeDateTime.d.ts

@@ -1 +0,0 @@
-export * from "./dist/FormatRelativeDateTime";

package/FormatRelativeDateTime.js

@@ -1,17 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true,
-});
-
-var FormatRelativeDateTime = require("./dist/FormatRelativeDateTime");
-
-Object.keys(FormatRelativeDateTime).forEach(function(key) {
-  if (key === "default" || key === "__esModule") return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return FormatRelativeDateTime[key];
-    },
-  });
-});

package/dist/FormatRelativeDateTime/FormatRelativeDateTime.d.ts

@@ -1,11 +0,0 @@
-import React from "react";
-interface FormatRelativeDateTimeProps {
-    /**
-     * Date to be displayed.
-     *
-     * A `string` should be an ISO 8601 format date string.
-     */
-    readonly date: Date | string;
-}
-export declare function FormatRelativeDateTime({ date: inputDate, }: FormatRelativeDateTimeProps): React.JSX.Element;
-export {};

package/dist/FormatRelativeDateTime/index.cjs

@@ -1,8 +0,0 @@
-'use strict';
-
-var FormatRelativeDateTime = require('../FormatRelativeDateTime-cjs.js');
-require('react');
-
-
-
-exports.FormatRelativeDateTime = FormatRelativeDateTime.FormatRelativeDateTime;

package/dist/FormatRelativeDateTime/index.d.ts

@@ -1 +0,0 @@
-export { FormatRelativeDateTime } from "./FormatRelativeDateTime";

package/dist/FormatRelativeDateTime/index.mjs

@@ -1,2 +0,0 @@
-export { F as FormatRelativeDateTime } from '../FormatRelativeDateTime-es.js';
-import 'react';

package/dist/FormatRelativeDateTime-cjs.js

@@ -1,63 +0,0 @@
-'use strict';
-
-var React = require('react');
-
-function FormatRelativeDateTime({ date: inputDate, }) {
-    let dateObject;
-    if (inputDate instanceof Date) {
-        dateObject = inputDate;
-    }
-    else {
-        dateObject = new Date(inputDate);
-    }
-    const now = Date.now() / 1000; //seconds
-    const date = dateObject;
-    const delta = now - date.getTime() / 1000; //seconds;
-    switch (relativeTimeRange(delta)) {
-        case "less than an hour":
-            return React.createElement(React.Fragment, null, showMinutes(Math.round(delta / 60)));
-        case "less then a day":
-            return (React.createElement(React.Fragment, null, date.toLocaleTimeString(undefined, {
-                hour: "numeric",
-                minute: "numeric",
-            })));
-        case "less than a week":
-            return React.createElement(React.Fragment, null, strFormatDate(date, { weekday: "short" }));
-        case "less than a year":
-            return React.createElement(React.Fragment, null, strFormatDate(date, { month: "short", day: "numeric" }));
-        default:
-            return (React.createElement(React.Fragment, null, strFormatDate(date, {
-                month: "short",
-                day: "numeric",
-                year: "numeric",
-            })));
-    }
-}
-function relativeTimeRange(delta) {
-    delta = delta / 60;
-    if (delta < 60)
-        return "less than an hour";
-    delta = delta / 60;
-    if (delta < 24)
-        return "less then a day";
-    delta = delta / 24;
-    if (delta < 7)
-        return "less than a week";
-    delta = delta / 365;
-    if (delta < 1)
-        return "less than a year";
-    return "a year or more";
-}
-function strFormatDate(date, options) {
-    return date.toLocaleDateString(undefined, options);
-}
-function showMinutes(minutes) {
-    if (minutes <= 1) {
-        return "1 minute ago";
-    }
-    else {
-        return minutes + " minutes ago";
-    }
-}
-
-exports.FormatRelativeDateTime = FormatRelativeDateTime;

package/dist/FormatRelativeDateTime-es.js

@@ -1,61 +0,0 @@
-import React__default from 'react';
-
-function FormatRelativeDateTime({ date: inputDate, }) {
-    let dateObject;
-    if (inputDate instanceof Date) {
-        dateObject = inputDate;
-    }
-    else {
-        dateObject = new Date(inputDate);
-    }
-    const now = Date.now() / 1000; //seconds
-    const date = dateObject;
-    const delta = now - date.getTime() / 1000; //seconds;
-    switch (relativeTimeRange(delta)) {
-        case "less than an hour":
-            return React__default.createElement(React__default.Fragment, null, showMinutes(Math.round(delta / 60)));
-        case "less then a day":
-            return (React__default.createElement(React__default.Fragment, null, date.toLocaleTimeString(undefined, {
-                hour: "numeric",
-                minute: "numeric",
-            })));
-        case "less than a week":
-            return React__default.createElement(React__default.Fragment, null, strFormatDate(date, { weekday: "short" }));
-        case "less than a year":
-            return React__default.createElement(React__default.Fragment, null, strFormatDate(date, { month: "short", day: "numeric" }));
-        default:
-            return (React__default.createElement(React__default.Fragment, null, strFormatDate(date, {
-                month: "short",
-                day: "numeric",
-                year: "numeric",
-            })));
-    }
-}
-function relativeTimeRange(delta) {
-    delta = delta / 60;
-    if (delta < 60)
-        return "less than an hour";
-    delta = delta / 60;
-    if (delta < 24)
-        return "less then a day";
-    delta = delta / 24;
-    if (delta < 7)
-        return "less than a week";
-    delta = delta / 365;
-    if (delta < 1)
-        return "less than a year";
-    return "a year or more";
-}
-function strFormatDate(date, options) {
-    return date.toLocaleDateString(undefined, options);
-}
-function showMinutes(minutes) {
-    if (minutes <= 1) {
-        return "1 minute ago";
-    }
-    else {
-        return minutes + " minutes ago";
-    }
-}
-
-export { FormatRelativeDateTime as F };

package/dist/docs/FormatRelativeDateTime/FormatRelativeDateTime.md

@@ -1,30 +0,0 @@
-# FormatRelativeDateTime
-
-A FormatRelateDateTime displays the date and time using relative wording or
-approximate values. This component only represents current date and dates in the
-past. No future dating.
-
-## Rules
-
-If the message was received less than an hour ago the format is x minutes ago.
-
-If the message was received today, but more than an hour ago, the format becomes
-the hours and minutes it was received at.
-
-If the message was received within the last six days, the format is Sun, Mon,
-Tue, Wed, Thu, Fri, Sat.
-
-If the message was received between six days ago and yesterday’s date one year
-previous, the format is Month Date.
-
-If the message was received exactly one year ago or more than one year ago, the
-format is Month Day, Year.
-
-
-## Props
-
-### Web
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `date` | `Date | string` | Yes | — | Date to be displayed.  A `string` should be an ISO 8601 format date string. |