@fluentui/react-spinbutton 9.0.0-beta.7 → 9.0.0

package/lib/components/SpinButton/SpinButton.types.d.ts

@@ -1,149 +0,0 @@
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import * as React from 'react';
-export declare type SpinButtonSlots = {
-    /**
-     * The root element of SpinButton is a container `<div>`.
-     * The root slot receives the `className` and `style` specified on the `<SpinButton>`.
-     * All other native props are applied to the primary slot: `input`.
-     */
-    root: NonNullable<Slot<'span'>>;
-    /**
-     * Input that displays the current value and accepts direct input from the user.
-     * Displayed value is formatted.
-     *
-     * This is the primary slot.
-     */
-    input: NonNullable<Slot<'input'>>;
-    /**
-     * Renders the increment control.
-     */
-    incrementButton: NonNullable<Slot<'button'>>;
-    /**
-     * Renders the decrement control.
-     */
-    decrementButton: NonNullable<Slot<'button'>>;
-};
-export declare type SpinButtonCommons = {
-    /**
-     * Initial value of the control (assumed to be valid). Updates to this prop will not be respected.
-     *
-     * Use this if you intend for the SpinButton to be an uncontrolled component which maintains its
-     * own value. For a controlled component, use `value` instead. (Mutually exclusive with `value`.)
-     */
-    defaultValue: number;
-    /**
-     * Current value of the control (assumed to be valid).
-     *
-     * Only provide this if the SpinButton is a controlled component where you are maintaining its
-     * current state and passing updates based on change events; otherwise, use the `defaultValue`
-     * property. (Mutually exclusive with `defaultValue`.)
-     */
-    value: number;
-    /**
-     * String representation of `value`.
-     *
-     * Use this when displaying the value to users as something other than a plain number.
-     * For example, when displaying currency values this might be "$1.00" when value is `1`.
-     *
-     * Only provide this if the SpinButton is a controlled component where you are maintaining its
-     * current state and passing updates based on change events. When SpinButton is used as an
-     * uncontrolled component this prop is ignored.
-     */
-    displayValue: string;
-    /**
-     * Min value of the control. If not provided, the control has no minimum value.
-     */
-    min: number;
-    /**
-     * Max value of the control. If not provided, the control has no maximum value.
-     */
-    max: number;
-    /**
-     * Difference between two adjacent values of the control.
-     * This value is used to calculate the precision of the input if no `precision` is given.
-     * The precision calculated this way will always be greater than or equal 0.
-     * @default 1
-     */
-    step: number;
-    /**
-     * Large difference between two values. This should be greater than `step` and is used
-     * when users hit the Page Up or Page Down keys.
-     * @default 1
-     */
-    stepPage: number;
-    /**
-     * Callback for when the committed value changes.
-     * - User presses the up/down buttons (on single press or every spin)
-     * - User presses the up/down arrow keys (on single press or every spin)
-     * - User *commits* edits to the input text by focusing away (blurring) or pressing enter.
-     *   Note that this is NOT called for every key press while the user is editing.
-     */
-    onChange: (event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => void;
-    /**
-     * How many decimal places the value should be rounded to.
-     *
-     * The default is calculated based on the precision of `step`: i.e. if step = 1, precision = 0.
-     * step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2.
-     */
-    precision: number;
-    /**
-     * Controls the colors and borders of the input.
-     * @default 'outline'
-     */
-    appearance: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
-    /**
-     * Size of the input.
-     * @default 'medium'
-     */
-    size: 'small' | 'medium';
-    /**
-     * Controls which input types update the value.
-     *
-     * - 'all': both the spinner buttons and input field are enabled.
-     * - 'spinners-only': only the spinner buttons are enabled.
-     * @default all
-     */
-    inputType: 'all' | 'spinners-only';
-    /**
-     * Strings for localizing text in the control.
-     */
-    strings?: SpinButtonStrings;
-};
-/**
- * SpinButton Props
- */
-export declare type SpinButtonProps = Omit<ComponentProps<Partial<SpinButtonSlots>, 'input'>, 'onChange' | 'size'> & Partial<SpinButtonCommons>;
-/**
- * State used in rendering SpinButton
- */
-export declare type SpinButtonState = ComponentState<SpinButtonSlots> & Partial<SpinButtonCommons> & Pick<SpinButtonCommons, 'appearance' | 'size'> & {
-    /**
-     * State used to track which direction, if any, SpinButton is currently spinning.
-     * @default 'rest'
-     */
-    spinState: SpinButtonSpinState;
-    /**
-     * State used to track if the value is at the range bounds of [min-max].
-     * @default 'none'
-     */
-    atBound: SpinButtonBounds;
-};
-export declare type SpinButtonChangeEvent = React.MouseEvent<HTMLButtonElement> | React.ChangeEvent<HTMLElement> | React.FocusEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>;
-export declare type SpinButtonOnChangeData = {
-    value?: number;
-    displayValue?: string;
-};
-export declare type SpinButtonSpinState = 'rest' | 'up' | 'down';
-export declare type SpinButtonBounds = 'none' | 'min' | 'max' | 'both';
-export declare type SpinButtonStrings = {
-    /**
-     * Label applied to the increment button.
-     * Can include the token "\{step\}" which will be replaced with the value of the `step` prop.
-     */
-    incrementButtonLabel: string;
-    /**
-     * Label applied to the decrement button.
-     * Can include the token "\{step\}" which will be replaced with the value of the `step` prop.
-     */
-    decrementButtonLabel: string;
-};

package/lib/components/SpinButton/index.d.ts

@@ -1,5 +0,0 @@
-export * from './SpinButton';
-export * from './SpinButton.types';
-export * from './renderSpinButton';
-export * from './useSpinButton';
-export * from './useSpinButtonStyles';

package/lib/components/SpinButton/renderSpinButton.d.ts

@@ -1,5 +0,0 @@
-import type { SpinButtonState } from './SpinButton.types';
-/**
- * Render the final JSX of SpinButton
- */
-export declare const renderSpinButton_unstable: (state: SpinButtonState) => JSX.Element;

package/lib/components/SpinButton/useSpinButton.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { SpinButtonProps, SpinButtonState } from './SpinButton.types';
-/**
- * Create the state required to render SpinButton.
- *
- * The returned state can be modified with hooks such as useSpinButtonStyles_unstable,
- * before being passed to renderSpinButton_unstable.
- *
- * @param props - props from this instance of SpinButton
- * @param ref - reference to root HTMLElement of SpinButton
- */
-export declare const useSpinButton_unstable: (props: SpinButtonProps, ref: React.Ref<HTMLInputElement>) => SpinButtonState;

package/lib/components/SpinButton/useSpinButtonStyles.d.ts

@@ -1,7 +0,0 @@
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';
-export declare const spinButtonClassNames: SlotClassNames<SpinButtonSlots>;
-/**
- * Apply styling to the SpinButton slots based on the state
- */
-export declare const useSpinButtonStyles_unstable: (state: SpinButtonState) => SpinButtonState;

package/lib/index.d.ts

@@ -1,2 +0,0 @@
-export { SpinButton, renderSpinButton_unstable, spinButtonClassNames, useSpinButtonStyles_unstable, useSpinButton_unstable, } from './SpinButton';
-export type { SpinButtonOnChangeData, SpinButtonChangeEvent, SpinButtonCommons, SpinButtonProps, SpinButtonSlots, SpinButtonState, SpinButtonSpinState, SpinButtonBounds, SpinButtonStrings, } from './SpinButton';

package/lib/utils/clamp.d.ts

@@ -1 +0,0 @@
-export declare const clampWhenInRange: (oldValue: number, newValue: number, min?: number | undefined, max?: number | undefined) => number;

package/lib/utils/getBound.d.ts

@@ -1,2 +0,0 @@
-import type { SpinButtonBounds } from '../SpinButton';
-export declare const getBound: (value: number, min?: number | undefined, max?: number | undefined) => SpinButtonBounds;

package/lib/utils/index.d.ts

@@ -1,3 +0,0 @@
-export * from './clamp';
-export * from './getBound';
-export * from './precision';

package/lib/utils/precision.d.ts

@@ -1,14 +0,0 @@
-/**
- * Calculates a number's precision based on the number of trailing
- * zeros if the number does not have a decimal indicated by a negative
- * precision. Otherwise, it calculates the number of digits after
- * the decimal point indicated by a positive precision.
- * @param value - the value to determine the precision of
- */
-export declare function calculatePrecision(value: number | string): number;
-/**
- * Rounds a number to a certain level of precision. Accepts negative precision.
- * @param value - The value that is being rounded.
- * @param precision - The number of decimal places to round the number to
- */
-export declare function precisionRound(value: number, precision: number, base?: number): number;

package/lib-commonjs/SpinButton.d.ts

@@ -1 +0,0 @@
-export * from './components/SpinButton/index';

package/lib-commonjs/components/SpinButton/SpinButton.d.ts

@@ -1,6 +0,0 @@
-import type { SpinButtonProps } from './SpinButton.types';
-import type { ForwardRefComponent } from '@fluentui/react-utilities';
-/**
- * A SpinButton allows someone to incrementally adjust a value in small steps.
- */
-export declare const SpinButton: ForwardRefComponent<SpinButtonProps>;

package/lib-commonjs/components/SpinButton/SpinButton.strings.d.ts

@@ -1,2 +0,0 @@
-import type { SpinButtonStrings } from './SpinButton.types';
-export declare const spinButtonDefaultStrings: SpinButtonStrings;

package/lib-commonjs/components/SpinButton/SpinButton.strings.js

@@ -1,11 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.spinButtonDefaultStrings = void 0;
-exports.spinButtonDefaultStrings = {
-  incrementButtonLabel: 'Increment by {step}',
-  decrementButtonLabel: 'Decrement by {step}'
-};
-//# sourceMappingURL=SpinButton.strings.js.map

package/lib-commonjs/components/SpinButton/SpinButton.strings.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["components/SpinButton/SpinButton.strings.ts"],"names":[],"mappings":";;;;;;AAEa,OAAA,CAAA,wBAAA,GAA8C;AACzD,EAAA,oBAAoB,EAAE,qBADmC;AAEzD,EAAA,oBAAoB,EAAE;AAFmC,CAA9C","sourcesContent":["import type { SpinButtonStrings } from './SpinButton.types';\n\nexport const spinButtonDefaultStrings: SpinButtonStrings = {\n  incrementButtonLabel: 'Increment by {step}',\n  decrementButtonLabel: 'Decrement by {step}',\n};\n"],"sourceRoot":"../src/"}

package/lib-commonjs/components/SpinButton/SpinButton.types.d.ts

@@ -1,149 +0,0 @@
-import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities';
-import * as React from 'react';
-export declare type SpinButtonSlots = {
-    /**
-     * The root element of SpinButton is a container `<div>`.
-     * The root slot receives the `className` and `style` specified on the `<SpinButton>`.
-     * All other native props are applied to the primary slot: `input`.
-     */
-    root: NonNullable<Slot<'span'>>;
-    /**
-     * Input that displays the current value and accepts direct input from the user.
-     * Displayed value is formatted.
-     *
-     * This is the primary slot.
-     */
-    input: NonNullable<Slot<'input'>>;
-    /**
-     * Renders the increment control.
-     */
-    incrementButton: NonNullable<Slot<'button'>>;
-    /**
-     * Renders the decrement control.
-     */
-    decrementButton: NonNullable<Slot<'button'>>;
-};
-export declare type SpinButtonCommons = {
-    /**
-     * Initial value of the control (assumed to be valid). Updates to this prop will not be respected.
-     *
-     * Use this if you intend for the SpinButton to be an uncontrolled component which maintains its
-     * own value. For a controlled component, use `value` instead. (Mutually exclusive with `value`.)
-     */
-    defaultValue: number;
-    /**
-     * Current value of the control (assumed to be valid).
-     *
-     * Only provide this if the SpinButton is a controlled component where you are maintaining its
-     * current state and passing updates based on change events; otherwise, use the `defaultValue`
-     * property. (Mutually exclusive with `defaultValue`.)
-     */
-    value: number;
-    /**
-     * String representation of `value`.
-     *
-     * Use this when displaying the value to users as something other than a plain number.
-     * For example, when displaying currency values this might be "$1.00" when value is `1`.
-     *
-     * Only provide this if the SpinButton is a controlled component where you are maintaining its
-     * current state and passing updates based on change events. When SpinButton is used as an
-     * uncontrolled component this prop is ignored.
-     */
-    displayValue: string;
-    /**
-     * Min value of the control. If not provided, the control has no minimum value.
-     */
-    min: number;
-    /**
-     * Max value of the control. If not provided, the control has no maximum value.
-     */
-    max: number;
-    /**
-     * Difference between two adjacent values of the control.
-     * This value is used to calculate the precision of the input if no `precision` is given.
-     * The precision calculated this way will always be greater than or equal 0.
-     * @default 1
-     */
-    step: number;
-    /**
-     * Large difference between two values. This should be greater than `step` and is used
-     * when users hit the Page Up or Page Down keys.
-     * @default 1
-     */
-    stepPage: number;
-    /**
-     * Callback for when the committed value changes.
-     * - User presses the up/down buttons (on single press or every spin)
-     * - User presses the up/down arrow keys (on single press or every spin)
-     * - User *commits* edits to the input text by focusing away (blurring) or pressing enter.
-     *   Note that this is NOT called for every key press while the user is editing.
-     */
-    onChange: (event: SpinButtonChangeEvent, data: SpinButtonOnChangeData) => void;
-    /**
-     * How many decimal places the value should be rounded to.
-     *
-     * The default is calculated based on the precision of `step`: i.e. if step = 1, precision = 0.
-     * step = 0.0089, precision = 4. step = 300, precision = 2. step = 23.00, precision = 2.
-     */
-    precision: number;
-    /**
-     * Controls the colors and borders of the input.
-     * @default 'outline'
-     */
-    appearance: 'outline' | 'underline' | 'filledDarker' | 'filledLighter';
-    /**
-     * Size of the input.
-     * @default 'medium'
-     */
-    size: 'small' | 'medium';
-    /**
-     * Controls which input types update the value.
-     *
-     * - 'all': both the spinner buttons and input field are enabled.
-     * - 'spinners-only': only the spinner buttons are enabled.
-     * @default all
-     */
-    inputType: 'all' | 'spinners-only';
-    /**
-     * Strings for localizing text in the control.
-     */
-    strings?: SpinButtonStrings;
-};
-/**
- * SpinButton Props
- */
-export declare type SpinButtonProps = Omit<ComponentProps<Partial<SpinButtonSlots>, 'input'>, 'onChange' | 'size'> & Partial<SpinButtonCommons>;
-/**
- * State used in rendering SpinButton
- */
-export declare type SpinButtonState = ComponentState<SpinButtonSlots> & Partial<SpinButtonCommons> & Pick<SpinButtonCommons, 'appearance' | 'size'> & {
-    /**
-     * State used to track which direction, if any, SpinButton is currently spinning.
-     * @default 'rest'
-     */
-    spinState: SpinButtonSpinState;
-    /**
-     * State used to track if the value is at the range bounds of [min-max].
-     * @default 'none'
-     */
-    atBound: SpinButtonBounds;
-};
-export declare type SpinButtonChangeEvent = React.MouseEvent<HTMLButtonElement> | React.ChangeEvent<HTMLElement> | React.FocusEvent<HTMLInputElement> | React.KeyboardEvent<HTMLInputElement>;
-export declare type SpinButtonOnChangeData = {
-    value?: number;
-    displayValue?: string;
-};
-export declare type SpinButtonSpinState = 'rest' | 'up' | 'down';
-export declare type SpinButtonBounds = 'none' | 'min' | 'max' | 'both';
-export declare type SpinButtonStrings = {
-    /**
-     * Label applied to the increment button.
-     * Can include the token "\{step\}" which will be replaced with the value of the `step` prop.
-     */
-    incrementButtonLabel: string;
-    /**
-     * Label applied to the decrement button.
-     * Can include the token "\{step\}" which will be replaced with the value of the `step` prop.
-     */
-    decrementButtonLabel: string;
-};

package/lib-commonjs/components/SpinButton/index.d.ts

@@ -1,5 +0,0 @@
-export * from './SpinButton';
-export * from './SpinButton.types';
-export * from './renderSpinButton';
-export * from './useSpinButton';
-export * from './useSpinButtonStyles';

package/lib-commonjs/components/SpinButton/renderSpinButton.d.ts

@@ -1,5 +0,0 @@
-import type { SpinButtonState } from './SpinButton.types';
-/**
- * Render the final JSX of SpinButton
- */
-export declare const renderSpinButton_unstable: (state: SpinButtonState) => JSX.Element;

package/lib-commonjs/components/SpinButton/useSpinButton.d.ts

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import { SpinButtonProps, SpinButtonState } from './SpinButton.types';
-/**
- * Create the state required to render SpinButton.
- *
- * The returned state can be modified with hooks such as useSpinButtonStyles_unstable,
- * before being passed to renderSpinButton_unstable.
- *
- * @param props - props from this instance of SpinButton
- * @param ref - reference to root HTMLElement of SpinButton
- */
-export declare const useSpinButton_unstable: (props: SpinButtonProps, ref: React.Ref<HTMLInputElement>) => SpinButtonState;

package/lib-commonjs/components/SpinButton/useSpinButtonStyles.d.ts

@@ -1,7 +0,0 @@
-import { SlotClassNames } from '@fluentui/react-utilities';
-import type { SpinButtonSlots, SpinButtonState } from './SpinButton.types';
-export declare const spinButtonClassNames: SlotClassNames<SpinButtonSlots>;
-/**
- * Apply styling to the SpinButton slots based on the state
- */
-export declare const useSpinButtonStyles_unstable: (state: SpinButtonState) => SpinButtonState;

package/lib-commonjs/index.d.ts

@@ -1,2 +0,0 @@
-export { SpinButton, renderSpinButton_unstable, spinButtonClassNames, useSpinButtonStyles_unstable, useSpinButton_unstable, } from './SpinButton';
-export type { SpinButtonOnChangeData, SpinButtonChangeEvent, SpinButtonCommons, SpinButtonProps, SpinButtonSlots, SpinButtonState, SpinButtonSpinState, SpinButtonBounds, SpinButtonStrings, } from './SpinButton';

package/lib-commonjs/utils/clamp.d.ts

@@ -1 +0,0 @@
-export declare const clampWhenInRange: (oldValue: number, newValue: number, min?: number | undefined, max?: number | undefined) => number;

package/lib-commonjs/utils/getBound.d.ts

@@ -1,2 +0,0 @@
-import type { SpinButtonBounds } from '../SpinButton';
-export declare const getBound: (value: number, min?: number | undefined, max?: number | undefined) => SpinButtonBounds;

package/lib-commonjs/utils/index.d.ts

@@ -1,3 +0,0 @@
-export * from './clamp';
-export * from './getBound';
-export * from './precision';

package/lib-commonjs/utils/precision.d.ts

@@ -1,14 +0,0 @@
-/**
- * Calculates a number's precision based on the number of trailing
- * zeros if the number does not have a decimal indicated by a negative
- * precision. Otherwise, it calculates the number of digits after
- * the decimal point indicated by a positive precision.
- * @param value - the value to determine the precision of
- */
-export declare function calculatePrecision(value: number | string): number;
-/**
- * Rounds a number to a certain level of precision. Accepts negative precision.
- * @param value - The value that is being rounded.
- * @param precision - The number of decimal places to round the number to
- */
-export declare function precisionRound(value: number, precision: number, base?: number): number;