@snack-uikit/fields 0.12.2 → 0.13.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.13.0 (2024-02-08)
+
+
+### Features
+
+* **FF-4211:** add field-stepper ([168e84e](https://github.com/cloud-ru-tech/snack-uikit/commit/168e84ec225c960c441cc73b85ceb53fc68b0234))
+
+
+
+
+
+## 0.12.3 (2024-02-07)
+
+### Only dependencies have been changed
+* [@snack-uikit/calendar@0.7.1](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/calendar/CHANGELOG.md)
+
+
+
+
+
 ## 0.12.2 (2024-02-06)
 
 ### Only dependencies have been changed

package/README.md

@@ -191,7 +191,7 @@ const [isOpen, setIsOpen] = useState(false);
 | id | `string` | - | Значение html-атрибута id |
 | name | `string` | - | Значение html-атрибута name |
 | placeholder | `string` | - | Значение плейсхолдера |
-| maxLength | `number` | - |  |
+| maxLength | `number` | - | Максимальная длина вводимого значения |
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
 | className | `string` | - | CSS-класс |
@@ -251,7 +251,7 @@ const [isOpen, setIsOpen] = useState(false);
 | id | `string` | - | Значение html-атрибута id |
 | name | `string` | - | Значение html-атрибута name |
 | placeholder | `string` | - | Значение плейсхолдера |
-| maxLength | `number` | - |  |
+| maxLength | `number` | - | Максимальная длина вводимого значения |
 | onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
 | onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
 | className | `string` | - | CSS-класс |
@@ -333,6 +333,33 @@ const [isOpen, setIsOpen] = useState(false);
 | ref | `Ref<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
 | key | `Key` | - |  |
 | getSelectedItemsText | `(amount: number) => string` | - | Колбек формирования текста |
+## FieldStepper
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| value | `number` | - | Значение поля |
+| onChange | `(value: number, e?: ChangeEvent<HTMLInputElement>) => void` | - | Колбек смены значения |
+| step | `number` | 1 | Шаг поля |
+| allowMoreThanLimits | `boolean` | true | Можно ли вводить c клавиатуры числа, выходящие за пределы min/max |
+| disabled | `boolean` | - | Является ли поле деактивированным |
+| readonly | `boolean` | - | Является ли поле доступным только для чтения |
+| id | `string` | - | Значение html-атрибута id |
+| name | `string` | - | Значение html-атрибута name |
+| onFocus | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки получения фокуса |
+| onBlur | `FocusEventHandler<HTMLInputElement>` | - | Колбек обработки потери фокуса |
+| min | `number` | - | Минимальное значение поля |
+| max | `number` | - | Максимальное значение поля |
+| className | `string` | - | CSS-класс |
+| label | `string` | - | Лейбл |
+| labelTooltip | `string` | - | Всплывающая подсказка лейбла |
+| required | `boolean` | - | Является ли поле обязательным |
+| size | enum Size: `"s"`, `"m"`, `"l"` | SIZE.S | Размер |
+| labelTooltipPlacement | enum Placement: `"left"`, `"left-start"`, `"left-end"`, `"right"`, `"right-start"`, `"right-end"`, `"top"`, `"top-start"`, `"top-end"`, `"bottom"`, `"bottom-start"`, `"bottom-end"` | top | Расположение подсказки лейбла |
+| hint | `string` | - | Подсказка внизу |
+| validationState | enum ValidationState: `"default"`, `"error"`, `"warning"`, `"success"` | default | Состояние валидации |
+| showHintIcon | `boolean` | - | Отображать иконку подсказки |
+| ref | `Ref<HTMLInputElement>` | - | Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom |
+| key | `Key` | - |  |
 
 
 [//]: DOCUMENTATION_SECTION_END

package/dist/components/FieldStepper/FieldStepper.d.ts

@@ -0,0 +1,21 @@
+import { ChangeEvent } from 'react';
+import { InputPrivateProps } from '@snack-uikit/input-private';
+import { WithSupportProps } from '@snack-uikit/utils';
+import { FieldDecoratorProps } from '../FieldDecorator';
+type InputProps = Pick<InputPrivateProps, 'id' | 'name' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'min' | 'max'>;
+type WrapperProps = Pick<FieldDecoratorProps, 'className' | 'label' | 'labelTooltip' | 'required' | 'hint' | 'showHintIcon' | 'size' | 'validationState' | 'labelTooltipPlacement'>;
+type FieldStepperOwnProps = {
+    /** Значение поля */
+    value?: number;
+    /** Колбек смены значения */
+    onChange?(value: number, e?: ChangeEvent<HTMLInputElement>): void;
+    /** Шаг поля */
+    step?: number;
+    /** Можно ли вводить c клавиатуры числа, выходящие за пределы min/max */
+    allowMoreThanLimits?: boolean;
+};
+export type FieldStepperProps = WithSupportProps<FieldStepperOwnProps & InputProps & WrapperProps>;
+export declare const FieldStepper: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string | undefined;
+} & import("react").AriaAttributes & FieldStepperOwnProps & InputProps & WrapperProps & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/FieldStepper/FieldStepper.js

@@ -0,0 +1,113 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import mergeRefs from 'merge-refs';
+import { forwardRef, useEffect, useRef, useState, } from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+import { ButtonFunction } from '@snack-uikit/button';
+import { MinusSVG, PlusSVG } from '@snack-uikit/icons';
+import { InputPrivate, SIZE } from '@snack-uikit/input-private';
+import { useLocale } from '@snack-uikit/locale';
+import { Tooltip } from '@snack-uikit/tooltip';
+import { extractSupportProps } from '@snack-uikit/utils';
+import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
+import { FieldContainerPrivate } from '../../helperComponents';
+import { FieldDecorator } from '../FieldDecorator';
+import styles from './styles.module.css';
+const TOOLTIP_TIMEOUT = 2000;
+export const FieldStepper = forwardRef((_a, ref) => {
+    var { id, name, value: valueProp, min, max, step = 1, disabled = false, readonly = false, allowMoreThanLimits = true, onChange: onChangeProp, onFocus, onBlur, className, label, labelTooltip, labelTooltipPlacement, required = false, hint, showHintIcon, size = SIZE.S, validationState = VALIDATION_STATE.Default } = _a, rest = __rest(_a, ["id", "name", "value", "min", "max", "step", "disabled", "readonly", "allowMoreThanLimits", "onChange", "onFocus", "onBlur", "className", "label", "labelTooltip", "labelTooltipPlacement", "required", "hint", "showHintIcon", "size", "validationState"]);
+    const [locales] = useLocale('Fields');
+    const [value, setValue] = useUncontrolledProp(valueProp, 0, onChangeProp);
+    const [tooltipOpen, setTooltipOpen] = useState(false);
+    const [tooltip, setTooltip] = useState('');
+    const timerRef = useRef();
+    const inputRef = useRef(null);
+    const minusButtonRef = useRef(null);
+    const plusButtonRef = useRef(null);
+    const isMinusButtonDisabled = value === min || readonly || disabled;
+    const isPlusButtonDisabled = value === max || readonly || disabled;
+    const adjustValue = (value) => {
+        setValue(value);
+        setTooltipOpen(true);
+        timerRef.current = setTimeout(() => {
+            setTooltipOpen(false);
+            setTooltip('');
+        }, TOOLTIP_TIMEOUT);
+    };
+    useEffect(() => () => {
+        clearTimeout(timerRef.current);
+    }, []);
+    const handleInputBlur = (event) => {
+        if (!allowMoreThanLimits) {
+            if (max !== undefined && value > max) {
+                setTooltip(`${locales.limitTooltip.max}${max}`);
+                adjustValue(max);
+            }
+            if (min !== undefined && value < min) {
+                setTooltip(`${locales.limitTooltip.min}${min}`);
+                adjustValue(min);
+            }
+        }
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+    };
+    const handleInputFocus = (event) => {
+        clearTimeout(timerRef.current);
+        setTooltipOpen(false);
+        setTooltip('');
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event);
+    };
+    const handleInputChange = (value, event) => setValue(Number(value), event);
+    const handleInputKeyDown = event => {
+        var _a, _b;
+        if (readonly || disabled) {
+            return;
+        }
+        if (event.key === 'ArrowRight' && !isPlusButtonDisabled) {
+            (_a = plusButtonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        if (event.key === 'ArrowLeft' && !isMinusButtonDisabled) {
+            (_b = minusButtonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
+        }
+    };
+    const handleMinusButtonClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setValue(min !== undefined ? Math.max(min, value - step) : value - step);
+    };
+    const handlePlusButtonClick = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setValue(max !== undefined ? Math.min(max, value + step) : value + step);
+    };
+    const handleMinusButtonKeyDown = event => {
+        var _a;
+        if (readonly || disabled) {
+            return;
+        }
+        if (event.key === 'ArrowRight') {
+            event.preventDefault();
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    const handlePlusButtonKeyDown = event => {
+        var _a;
+        if (readonly || disabled) {
+            return;
+        }
+        if (event.key === 'ArrowLeft') {
+            event.preventDefault();
+            (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+    };
+    return (_jsx(FieldDecorator, Object.assign({ className: className, label: label, labelTooltip: labelTooltip, labelTooltipPlacement: labelTooltipPlacement, labelFor: id, required: required, hint: hint, disabled: disabled, readonly: readonly, showHintIcon: showHintIcon, size: size, validationState: validationState }, extractSupportProps(rest), { children: _jsx(Tooltip, { tip: tooltip, open: allowMoreThanLimits ? false : tooltipOpen, "data-test-id": 'field-stepper__limit-tooltip', children: _jsx(FieldContainerPrivate, { size: size, validationState: validationState, disabled: disabled, readonly: readonly, variant: CONTAINER_VARIANT.SingleLine, inputRef: inputRef, prefix: _jsx(ButtonFunction, { tabIndex: -1, ref: minusButtonRef, size: 'xs', className: styles.button, icon: _jsx(MinusSVG, {}), onClick: handleMinusButtonClick, onKeyDown: handleMinusButtonKeyDown, disabled: isMinusButtonDisabled, "data-test-id": 'field-stepper__minus-button' }), postfix: _jsx(ButtonFunction, { ref: plusButtonRef, tabIndex: -1, size: 'xs', className: styles.button, icon: _jsx(PlusSVG, {}), onClick: handlePlusButtonClick, onKeyDown: handlePlusButtonKeyDown, disabled: isPlusButtonDisabled, "data-test-id": 'field-stepper__plus-button' }), children: _jsx(InputPrivate, { ref: mergeRefs(ref, inputRef), className: styles.stepper, "data-size": size, value: String(value), tabIndex: 0, onKeyDown: handleInputKeyDown, onChange: handleInputChange, onBlur: handleInputBlur, onFocus: handleInputFocus, disabled: disabled, readonly: readonly, type: 'number', id: id, name: name, min: min, max: max, "data-test-id": 'field-stepper__input' }) }) }) })));
+});

package/dist/components/FieldStepper/index.d.ts

@@ -0,0 +1 @@
+export * from './FieldStepper';

package/dist/components/FieldStepper/index.js

@@ -0,0 +1 @@
+export * from './FieldStepper';

package/dist/components/FieldStepper/styles.module.css

@@ -0,0 +1,10 @@
+.stepper{
+  text-align:center;
+}
+
+.button *{
+  cursor:pointer;
+}
+.button[data-disabled] *{
+  cursor:not-allowed;
+}

package/dist/components/index.d.ts

@@ -4,3 +4,4 @@ export * from './FieldTextArea';
 export * from './FieldSecure';
 export * from './FieldDate';
 export * from './FieldSelect';
+export * from './FieldStepper';

package/dist/components/index.js

@@ -4,3 +4,4 @@ export * from './FieldTextArea';
 export * from './FieldSecure';
 export * from './FieldDate';
 export * from './FieldSelect';
+export * from './FieldStepper';

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Fields",
-  "version": "0.12.2",
+  "version": "0.13.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -32,10 +32,12 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/calendar": "0.7.0",
+    "@snack-uikit/button": "0.16.0",
+    "@snack-uikit/calendar": "0.7.2",
     "@snack-uikit/droplist": "0.13.3",
     "@snack-uikit/icons": "0.20.1",
-    "@snack-uikit/input-private": "3.0.4",
+    "@snack-uikit/input-private": "3.1.0",
+    "@snack-uikit/locale": "0.2.0",
     "@snack-uikit/scroll": "0.5.0",
     "@snack-uikit/tooltip": "0.11.1",
     "@snack-uikit/truncate-string": "0.4.7",
@@ -49,5 +51,5 @@
   "devDependencies": {
     "@types/merge-refs": "1.0.0"
   },
-  "gitHead": "e38849932e4595cfeaf19733fcd296ffcfc7322e"
+  "gitHead": "eb20092ecd05743f00831dfa51a3f5db2416be8f"
 }

package/src/components/FieldStepper/FieldStepper.tsx

@@ -0,0 +1,268 @@
+import mergeRefs from 'merge-refs';
+import {
+  ChangeEvent,
+  FocusEvent,
+  forwardRef,
+  KeyboardEventHandler,
+  MouseEvent,
+  useEffect,
+  useRef,
+  useState,
+} from 'react';
+import { useUncontrolledProp } from 'uncontrollable';
+
+import { ButtonFunction } from '@snack-uikit/button';
+import { MinusSVG, PlusSVG } from '@snack-uikit/icons';
+import { InputPrivate, InputPrivateProps, SIZE } from '@snack-uikit/input-private';
+import { useLocale } from '@snack-uikit/locale';
+import { Tooltip } from '@snack-uikit/tooltip';
+import { extractSupportProps, WithSupportProps } from '@snack-uikit/utils';
+
+import { CONTAINER_VARIANT, VALIDATION_STATE } from '../../constants';
+import { FieldContainerPrivate } from '../../helperComponents';
+import { FieldDecorator, FieldDecoratorProps } from '../FieldDecorator';
+import styles from './styles.module.scss';
+
+type InputProps = Pick<
+  InputPrivateProps,
+  'id' | 'name' | 'disabled' | 'readonly' | 'onFocus' | 'onBlur' | 'min' | 'max'
+>;
+
+type WrapperProps = Pick<
+  FieldDecoratorProps,
+  | 'className'
+  | 'label'
+  | 'labelTooltip'
+  | 'required'
+  | 'hint'
+  | 'showHintIcon'
+  | 'size'
+  | 'validationState'
+  | 'labelTooltipPlacement'
+>;
+
+type FieldStepperOwnProps = {
+  /** Значение поля */
+  value?: number;
+  /** Колбек смены значения */
+  onChange?(value: number, e?: ChangeEvent<HTMLInputElement>): void;
+  /** Шаг поля */
+  step?: number;
+  /** Можно ли вводить c клавиатуры числа, выходящие за пределы min/max */
+  allowMoreThanLimits?: boolean;
+};
+
+export type FieldStepperProps = WithSupportProps<FieldStepperOwnProps & InputProps & WrapperProps>;
+
+const TOOLTIP_TIMEOUT = 2000;
+
+export const FieldStepper = forwardRef<HTMLInputElement, FieldStepperProps>(
+  (
+    {
+      id,
+      name,
+      value: valueProp,
+      min,
+      max,
+      step = 1,
+      disabled = false,
+      readonly = false,
+      allowMoreThanLimits = true,
+      onChange: onChangeProp,
+      onFocus,
+      onBlur,
+      className,
+      label,
+      labelTooltip,
+      labelTooltipPlacement,
+      required = false,
+      hint,
+      showHintIcon,
+      size = SIZE.S,
+      validationState = VALIDATION_STATE.Default,
+      ...rest
+    },
+    ref,
+  ) => {
+    const [locales] = useLocale('Fields');
+    const [value, setValue] = useUncontrolledProp(valueProp, 0, onChangeProp);
+    const [tooltipOpen, setTooltipOpen] = useState(false);
+    const [tooltip, setTooltip] = useState('');
+    const timerRef = useRef<ReturnType<typeof setTimeout>>();
+    const inputRef = useRef<HTMLInputElement>(null);
+    const minusButtonRef = useRef<HTMLButtonElement>(null);
+    const plusButtonRef = useRef<HTMLButtonElement>(null);
+    const isMinusButtonDisabled = value === min || readonly || disabled;
+    const isPlusButtonDisabled = value === max || readonly || disabled;
+
+    const adjustValue = (value: number) => {
+      setValue(value);
+      setTooltipOpen(true);
+
+      timerRef.current = setTimeout(() => {
+        setTooltipOpen(false);
+        setTooltip('');
+      }, TOOLTIP_TIMEOUT);
+    };
+
+    useEffect(
+      () => () => {
+        clearTimeout(timerRef.current);
+      },
+      [],
+    );
+
+    const handleInputBlur = (event: FocusEvent<HTMLInputElement>) => {
+      if (!allowMoreThanLimits) {
+        if (max !== undefined && value > max) {
+          setTooltip(`${locales.limitTooltip.max}${max}`);
+          adjustValue(max);
+        }
+
+        if (min !== undefined && value < min) {
+          setTooltip(`${locales.limitTooltip.min}${min}`);
+          adjustValue(min);
+        }
+      }
+
+      onBlur?.(event);
+    };
+
+    const handleInputFocus = (event: FocusEvent<HTMLInputElement>) => {
+      clearTimeout(timerRef.current);
+      setTooltipOpen(false);
+      setTooltip('');
+
+      onFocus?.(event);
+    };
+
+    const handleInputChange = (value: string, event: ChangeEvent<HTMLInputElement>) => setValue(Number(value), event);
+
+    const handleInputKeyDown: KeyboardEventHandler<HTMLInputElement> = event => {
+      if (readonly || disabled) {
+        return;
+      }
+
+      if (event.key === 'ArrowRight' && !isPlusButtonDisabled) {
+        plusButtonRef.current?.focus();
+      }
+
+      if (event.key === 'ArrowLeft' && !isMinusButtonDisabled) {
+        minusButtonRef.current?.focus();
+      }
+    };
+
+    const handleMinusButtonClick = (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setValue(min !== undefined ? Math.max(min, value - step) : value - step);
+    };
+
+    const handlePlusButtonClick = (e: MouseEvent) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setValue(max !== undefined ? Math.min(max, value + step) : value + step);
+    };
+
+    const handleMinusButtonKeyDown: KeyboardEventHandler<HTMLInputElement> = event => {
+      if (readonly || disabled) {
+        return;
+      }
+
+      if (event.key === 'ArrowRight') {
+        event.preventDefault();
+        inputRef.current?.focus();
+      }
+    };
+
+    const handlePlusButtonKeyDown: KeyboardEventHandler<HTMLInputElement> = event => {
+      if (readonly || disabled) {
+        return;
+      }
+
+      if (event.key === 'ArrowLeft') {
+        event.preventDefault();
+        inputRef.current?.focus();
+      }
+    };
+
+    return (
+      <FieldDecorator
+        className={className}
+        label={label}
+        labelTooltip={labelTooltip}
+        labelTooltipPlacement={labelTooltipPlacement}
+        labelFor={id}
+        required={required}
+        hint={hint}
+        disabled={disabled}
+        readonly={readonly}
+        showHintIcon={showHintIcon}
+        size={size}
+        validationState={validationState}
+        {...extractSupportProps(rest)}
+      >
+        <Tooltip
+          tip={tooltip}
+          open={allowMoreThanLimits ? false : tooltipOpen}
+          data-test-id='field-stepper__limit-tooltip'
+        >
+          <FieldContainerPrivate
+            size={size}
+            validationState={validationState}
+            disabled={disabled}
+            readonly={readonly}
+            variant={CONTAINER_VARIANT.SingleLine}
+            inputRef={inputRef}
+            prefix={
+              <ButtonFunction
+                tabIndex={-1}
+                ref={minusButtonRef}
+                size='xs'
+                className={styles.button}
+                icon={<MinusSVG />}
+                onClick={handleMinusButtonClick}
+                onKeyDown={handleMinusButtonKeyDown}
+                disabled={isMinusButtonDisabled}
+                data-test-id='field-stepper__minus-button'
+              />
+            }
+            postfix={
+              <ButtonFunction
+                ref={plusButtonRef}
+                tabIndex={-1}
+                size='xs'
+                className={styles.button}
+                icon={<PlusSVG />}
+                onClick={handlePlusButtonClick}
+                onKeyDown={handlePlusButtonKeyDown}
+                disabled={isPlusButtonDisabled}
+                data-test-id='field-stepper__plus-button'
+              />
+            }
+          >
+            <InputPrivate
+              ref={mergeRefs(ref, inputRef)}
+              className={styles.stepper}
+              data-size={size}
+              value={String(value)}
+              tabIndex={0}
+              onKeyDown={handleInputKeyDown}
+              onChange={handleInputChange}
+              onBlur={handleInputBlur}
+              onFocus={handleInputFocus}
+              disabled={disabled}
+              readonly={readonly}
+              type='number'
+              id={id}
+              name={name}
+              min={min}
+              max={max}
+              data-test-id='field-stepper__input'
+            />
+          </FieldContainerPrivate>
+        </Tooltip>
+      </FieldDecorator>
+    );
+  },
+);

package/src/components/FieldStepper/index.ts

@@ -0,0 +1 @@
+export * from './FieldStepper';

package/src/components/FieldStepper/styles.module.scss

@@ -0,0 +1,13 @@
+.stepper {
+  text-align: center;
+}
+
+.button {
+  & * {
+    cursor: pointer;
+  }
+
+  &[data-disabled] * {
+    cursor: not-allowed;
+  }
+}

package/src/components/index.ts

@@ -4,3 +4,4 @@ export * from './FieldTextArea';
 export * from './FieldSecure';
 export * from './FieldDate';
 export * from './FieldSelect';
+export * from './FieldStepper';