@simplybusiness/mobius 5.32.1 → 5.32.2

package/dist/esm/index.js

@@ -3185,8 +3185,18 @@ import classNames38 from "classnames/dedupe";
 import { forwardRef as forwardRef35 } from "react";
 import { jsx as jsx45 } from "react/jsx-runtime";
 var NumberField = forwardRef35((props, ref) => {
-  const { minValue, maxValue, step, defaultValue, className, ...otherProps } = props;
-  const containerClasses = classNames38("mobius-number-field", className);
+  const {
+    minValue,
+    maxValue,
+    step,
+    defaultValue,
+    hideSpinButtons,
+    className,
+    ...otherProps
+  } = props;
+  const containerClasses = classNames38("mobius-number-field", className, {
+    "--hide-spin-buttons": hideSpinButtons
+  });
   const handleBeforeInput = (event) => {
     const { data } = event.nativeEvent;
     if (step != null && Number.isInteger(step) && data === ".") {

package/dist/types/src/components/NumberField/NumberField.d.ts

@@ -11,6 +11,8 @@ export interface NumberFieldProps extends Omit<TextFieldProps, "type" | "default
     step?: number;
     /** The default value for the input. */
     defaultValue?: number;
+    /** Flag to hide the spin buttons. */
+    hideSpinButtons?: boolean;
 }
 export type NumberFieldRef = Ref<NumberFieldElementType>;
 export declare const NumberField: ForwardedRefComponent<NumberFieldProps, NumberFieldElementType>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@simplybusiness/mobius",
   "license": "UNLICENSED",
-  "version": "5.32.1",
+  "version": "5.32.2",
   "description": "Core library of Mobius react components",
   "repository": {
     "type": "git",
@@ -83,7 +83,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "^0.27.12",
-    "@simplybusiness/icons": "^4.31.2",
+    "@simplybusiness/icons": "^4.32.0",
     "classnames": "^2.5.1",
     "dialog-polyfill": "^0.5.6",
     "lodash.debounce": "^4.0.8",

package/src/components/NumberField/NumberField.css

@@ -5,6 +5,18 @@
   &:where(.--is-optional) > :where(.mobius-label)::after {
     content: " (optional)";
   }
+
+  &.--hide-spin-buttons {
+    &::-webkit-outer-spin-button,
+    &::-webkit-inner-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+    & {
+      appearance: textfield;
+      -moz-appearance: textfield;
+    }
+  }
 }
 
 .mobius-number-field__input-wrapper {

package/src/components/NumberField/NumberField.tsx

@@ -24,6 +24,8 @@ export interface NumberFieldProps
   step?: number; // ??
   /** The default value for the input. */
   defaultValue?: number;
+  /** Flag to hide the spin buttons. */
+  hideSpinButtons?: boolean;
 }
 
 export type NumberFieldRef = Ref<NumberFieldElementType>;
@@ -32,10 +34,19 @@ export const NumberField: ForwardedRefComponent<
   NumberFieldProps,
   NumberFieldElementType
 > = forwardRef((props: NumberFieldProps, ref: NumberFieldRef) => {
-  const { minValue, maxValue, step, defaultValue, className, ...otherProps } =
-    props;
+  const {
+    minValue,
+    maxValue,
+    step,
+    defaultValue,
+    hideSpinButtons,
+    className,
+    ...otherProps
+  } = props;
 
-  const containerClasses = classNames("mobius-number-field", className);
+  const containerClasses = classNames("mobius-number-field", className, {
+    "--hide-spin-buttons": hideSpinButtons,
+  });
 
   const handleBeforeInput = (
     event: React.FormEvent<NumberFieldElementType>,