@salt-ds/lab 1.0.0-alpha.44 → 1.0.0-alpha.45

package/dist-cjs/date-picker/DatePickerPanel.js

@@ -0,0 +1,139 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var core = require('@salt-ds/core');
+var clsx = require('clsx');
+var DatePickerContext = require('./DatePickerContext.js');
+var DatePickerPanel$1 = require('./DatePickerPanel.css.js');
+var window = require('@salt-ds/window');
+var styles = require('@salt-ds/styles');
+var Calendar = require('../calendar/Calendar.js');
+var date = require('@internationalized/date');
+require('../calendar/internal/CalendarContext.js');
+require('../calendar/internal/utils.js');
+require('../calendar/useSelection.js');
+
+const withBaseName = core.makePrefixer("saltDatePickerPanel");
+const DatePickerPanel = React.forwardRef(
+  function DatePickerPanel2(props, ref) {
+    var _a;
+    const { className, onSelect, helperText, CalendarProps: CalendarProps2, ...rest } = props;
+    const targetWindow = window.useWindow();
+    styles.useComponentCssInjection({
+      testId: "salt-date-picker-panel",
+      css: DatePickerPanel$1,
+      window: targetWindow
+    });
+    const { Component: FloatingComponent } = core.useFloatingComponent();
+    const [hoveredDate, setHoveredDate] = React.useState(null);
+    const {
+      openState,
+      startDate,
+      setStartDate,
+      startVisibleMonth,
+      setStartVisibleMonth,
+      endDate,
+      setEndDate,
+      endVisibleMonth,
+      setEndVisibleMonth,
+      setOpen,
+      selectionVariant,
+      context,
+      getPanelPosition,
+      setValidationStatus
+    } = DatePickerContext.useDatePickerContext();
+    const { a11yProps } = core.useFormFieldProps();
+    const setRangeDate = (_, newDate) => {
+      setStartDate(newDate.startDate);
+      setEndDate(newDate.endDate);
+      setValidationStatus(void 0);
+      if (newDate.startDate && newDate.endDate) {
+        setOpen(false);
+      }
+      onSelect == null ? void 0 : onSelect();
+    };
+    const setSingleDate = (_, newDate) => {
+      setStartDate(newDate);
+      setValidationStatus(void 0);
+      onSelect == null ? void 0 : onSelect();
+      setOpen(false);
+    };
+    const handleHoveredDateChange = (_, newHoveredDate) => {
+      setHoveredDate(newHoveredDate);
+    };
+    React.useEffect(() => {
+      if (startDate) {
+        setStartVisibleMonth(startDate);
+        setEndVisibleMonth(startDate.add({ months: 1 }));
+      }
+    }, [startDate]);
+    const isRangePicker = selectionVariant === "range";
+    const firstCalendarProps = isRangePicker ? {
+      selectionVariant: "range",
+      hoveredDate: startDate && hoveredDate && hoveredDate.compare(date.endOfMonth(startDate)) > 0 ? date.endOfMonth(startDate) : hoveredDate,
+      onHoveredDateChange: handleHoveredDateChange,
+      selectedDate: { startDate, endDate },
+      onSelectedDateChange: setRangeDate,
+      maxDate: startDate && date.endOfMonth(startDate),
+      hideOutOfRangeDates: true
+    } : {
+      selectionVariant: "default",
+      selectedDate: startDate,
+      onSelectedDateChange: setSingleDate
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(FloatingComponent, {
+      open: openState,
+      className: clsx.clsx(withBaseName(), className),
+      "aria-modal": "true",
+      ref,
+      focusManagerProps: context ? {
+        context,
+        initialFocus: 4
+      } : void 0,
+      ...getPanelPosition(),
+      ...a11yProps,
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsxs(core.StackLayout, {
+        separators: true,
+        gap: 0,
+        className: withBaseName("container"),
+        children: [
+          helperText && /* @__PURE__ */ jsxRuntime.jsx(core.FlexItem, {
+            className: withBaseName("header"),
+            children: /* @__PURE__ */ jsxRuntime.jsx(core.FormFieldHelperText, {
+              children: helperText
+            })
+          }),
+          /* @__PURE__ */ jsxRuntime.jsxs(core.FlexLayout, {
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Calendar.Calendar, {
+                visibleMonth: startVisibleMonth,
+                onVisibleMonthChange: (_, month) => setStartVisibleMonth(month),
+                ...firstCalendarProps,
+                ...CalendarProps2
+              }),
+              isRangePicker && /* @__PURE__ */ jsxRuntime.jsx(Calendar.Calendar, {
+                selectionVariant: "range",
+                hoveredDate,
+                onHoveredDateChange: handleHoveredDateChange,
+                selectedDate: { startDate, endDate },
+                onSelectedDateChange: setRangeDate,
+                visibleMonth: endVisibleMonth,
+                onVisibleMonthChange: (_, month) => setEndVisibleMonth(month),
+                hideOutOfRangeDates: true,
+                minDate: startDate ? (_a = date.startOfMonth(startDate)) == null ? void 0 : _a.add({ months: 1 }) : void 0,
+                ...CalendarProps2
+              })
+            ]
+          })
+        ]
+      })
+    });
+  }
+);
+
+exports.DatePickerPanel = DatePickerPanel;
+//# sourceMappingURL=DatePickerPanel.js.map

package/dist-cjs/date-picker/DatePickerPanel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DatePickerPanel.js","sources":["../src/date-picker/DatePickerPanel.tsx"],"sourcesContent":["import {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  useEffect,\n  useState,\n} from \"react\";\nimport {\n  FlexItem,\n  FlexLayout,\n  FormFieldHelperText,\n  makePrefixer,\n  StackLayout,\n  useFloatingComponent,\n  useFormFieldProps,\n} from \"@salt-ds/core\";\nimport { clsx } from \"clsx\";\nimport { useDatePickerContext } from \"./DatePickerContext\";\nimport dateInputPanelCss from \"./DatePickerPanel.css\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport {\n  Calendar,\n  CalendarProps,\n  UseRangeSelectionCalendarProps,\n  UseSingleSelectionCalendarProps,\n} from \"../calendar\";\nimport { DateValue, endOfMonth, startOfMonth } from \"@internationalized/date\";\n\nexport interface DatePickerPanelProps extends ComponentPropsWithoutRef<\"div\"> {\n  onSelect?: () => void;\n  helperText?: string;\n  CalendarProps?: Partial<\n    Omit<\n      CalendarProps,\n      | \"selectionVariant\"\n      | \"selectedDate\"\n      | \"defaultSelectedDate\"\n      | \"onSelectedDateChange\"\n    >\n  >;\n}\n\nconst withBaseName = makePrefixer(\"saltDatePickerPanel\");\n\nexport const DatePickerPanel = forwardRef<HTMLDivElement, DatePickerPanelProps>(\n  function DatePickerPanel(props, ref) {\n    const { className, onSelect, helperText, CalendarProps, ...rest } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-date-picker-panel\",\n      css: dateInputPanelCss,\n      window: targetWindow,\n    });\n\n    const { Component: FloatingComponent } = useFloatingComponent();\n    const [hoveredDate, setHoveredDate] = useState<DateValue | null>(null);\n\n    const {\n      openState,\n      startDate,\n      setStartDate,\n      startVisibleMonth,\n      setStartVisibleMonth,\n      endDate,\n      setEndDate,\n      endVisibleMonth,\n      setEndVisibleMonth,\n      setOpen,\n      selectionVariant,\n      context,\n      getPanelPosition,\n      setValidationStatus,\n    } = useDatePickerContext();\n\n    const { a11yProps } = useFormFieldProps();\n\n    const setRangeDate: UseRangeSelectionCalendarProps[\"onSelectedDateChange\"] =\n      (_, newDate) => {\n        setStartDate(newDate.startDate);\n        setEndDate(newDate.endDate);\n        setValidationStatus(undefined);\n        if (newDate.startDate && newDate.endDate) {\n          setOpen(false);\n        }\n        onSelect?.();\n      };\n    const setSingleDate: UseSingleSelectionCalendarProps[\"onSelectedDateChange\"] =\n      (_, newDate) => {\n        setStartDate(newDate);\n        setValidationStatus(undefined);\n        onSelect?.();\n        setOpen(false);\n      };\n    const handleHoveredDateChange: CalendarProps[\"onHoveredDateChange\"] = (\n      _,\n      newHoveredDate\n    ) => {\n      setHoveredDate(newHoveredDate);\n    };\n    useEffect(() => {\n      if (startDate) {\n        setStartVisibleMonth(startDate);\n        setEndVisibleMonth(startDate.add({ months: 1 }));\n      }\n    }, [startDate]);\n\n    const isRangePicker = selectionVariant === \"range\";\n    const firstCalendarProps: CalendarProps = isRangePicker\n      ? {\n          selectionVariant: \"range\",\n          hoveredDate:\n            startDate &&\n            hoveredDate &&\n            hoveredDate.compare(endOfMonth(startDate)) > 0\n              ? endOfMonth(startDate)\n              : hoveredDate,\n          onHoveredDateChange: handleHoveredDateChange,\n          selectedDate: { startDate, endDate },\n          onSelectedDateChange: setRangeDate,\n          maxDate: startDate && endOfMonth(startDate),\n          hideOutOfRangeDates: true,\n        }\n      : {\n          selectionVariant: \"default\",\n          selectedDate: startDate,\n          onSelectedDateChange: setSingleDate,\n        };\n    return (\n      <FloatingComponent\n        open={openState}\n        className={clsx(withBaseName(), className)}\n        aria-modal=\"true\"\n        ref={ref}\n        focusManagerProps={\n          context\n            ? {\n                context: context,\n                initialFocus: 4,\n              }\n            : undefined\n        }\n        {...getPanelPosition()}\n        {...a11yProps}\n        {...rest}\n      >\n        <StackLayout separators gap={0} className={withBaseName(\"container\")}>\n          {helperText && (\n            <FlexItem className={withBaseName(\"header\")}>\n              <FormFieldHelperText>{helperText}</FormFieldHelperText>\n            </FlexItem>\n          )}\n          <FlexLayout>\n            <Calendar\n              visibleMonth={startVisibleMonth}\n              onVisibleMonthChange={(_, month) => setStartVisibleMonth(month)}\n              {...firstCalendarProps}\n              {...CalendarProps}\n            />\n            {isRangePicker && (\n              <Calendar\n                selectionVariant=\"range\"\n                hoveredDate={hoveredDate}\n                onHoveredDateChange={handleHoveredDateChange}\n                selectedDate={{ startDate, endDate }}\n                onSelectedDateChange={setRangeDate}\n                visibleMonth={endVisibleMonth}\n                onVisibleMonthChange={(_, month) => setEndVisibleMonth(month)}\n                hideOutOfRangeDates\n                minDate={\n                  startDate\n                    ? startOfMonth(startDate)?.add({ months: 1 })\n                    : undefined\n                }\n                {...CalendarProps}\n              />\n            )}\n          </FlexLayout>\n        </StackLayout>\n      </FloatingComponent>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","DatePickerPanel","CalendarProps","useWindow","useComponentCssInjection","dateInputPanelCss","useFloatingComponent","useState","useDatePickerContext","useFormFieldProps","useEffect","endOfMonth","jsx","clsx","jsxs","StackLayout","FlexItem","FormFieldHelperText","FlexLayout","Calendar","startOfMonth"],"mappings":"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"}

package/dist-cjs/index.js

@@ -59,6 +59,7 @@ var ContactFavoriteToggle = require('./contact-details/ContactFavoriteToggle.js'
 var MailLinkComponent = require('./contact-details/MailLinkComponent.js');
 var ContentStatus = require('./content-status/ContentStatus.js');
 var DateInput = require('./date-input/DateInput.js');
+var DatePicker = require('./date-picker/DatePicker.js');
 var DeckItem = require('./deck-item/DeckItem.js');
 var DeckLayout = require('./deck-layout/DeckLayout.js');
 var DropdownBase = require('./dropdown/DropdownBase.js');
@@ -160,6 +161,7 @@ exports.Calendar = Calendar.Calendar;
 exports.useCalendarDay = useCalendarDay.useCalendarDay;
 exports.useCalendar = useCalendar.useCalendar;
 exports.isRangeOrOffsetSelectionValue = useSelection.isRangeOrOffsetSelectionValue;
+exports.isRangeOrOffsetSelectionWithStartDate = useSelection.isRangeOrOffsetSelectionWithStartDate;
 exports.useSelectionCalendar = useSelection.useSelectionCalendar;
 exports.useSelectionDay = useSelection.useSelectionDay;
 exports.Carousel = Carousel.Carousel;
@@ -196,6 +198,7 @@ exports.ContactFavoriteToggle = ContactFavoriteToggle.ContactFavoriteToggle;
 exports.MailLinkComponent = MailLinkComponent.MailLinkComponent;
 exports.ContentStatus = ContentStatus.ContentStatus;
 exports.DateInput = DateInput.DateInput;
+exports.DatePicker = DatePicker.DatePicker;
 exports.DeckItem = DeckItem.DeckItem;
 exports.DeckLayout = DeckLayout.DeckLayout;
 exports.DropdownBase = DropdownBase.DropdownBase;

package/dist-cjs/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist-cjs/stepped-tracker/TrackerStep/TrackerStep.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".saltTrackerStep {\n  --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground));\n  --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground));\n\n  --trackerStep-icon-color: var(--saltTrackerStep-icon-color, var(--salt-status-static-foreground));\n\n  --saltIcon-color: var(--trackerStep-icon-color);\n  /* We redefine Icon Size so we can use it in calc functions in the trackerConnector */\n  --saltIcon-size: var(--saltTrackerStep-icon-size, max(var(--salt-size-icon), 12px));\n}\n\n.saltTrackerStep {\n  margin: 0;\n  text-indent: 0;\n  list-style-type: none;\n  flex: 1;\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: var(--saltTrackerStep-width, 100%);\n  gap: var(--salt-spacing-50);\n  color: var(--salt-content-primary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n}\n\n.saltSteppedTracker.saltSteppedTracker-horizontal .saltTrackerStep {\n  flex-direction: column;\n  padding: 0 var(--salt-spacing-25);\n}\n\n.saltSteppedTracker.saltSteppedTracker-vertical .saltTrackerStep {\n  flex-direction: row;\n  min-height: calc(var(--salt-size-base) * 2);\n  width: 100%;\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltTrackerStep:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltTrackerStep .saltTrackerStep-body {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n}\n\n.saltTrackerStep.saltTrackerStep-active {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-active);\n}\n\n.saltTrackerStep.saltTrackerStep-completed {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-completed);\n}\n";
+var css_248z = ".saltTrackerStep {\n  --trackerStep-icon-color-active: var(--saltTrackerStep-icon-color-active, var(--salt-status-info-foreground-decorative));\n  --trackerStep-icon-color-completed: var(--saltTrackerStep-icon-color-completed, var(--salt-status-success-foreground-decorative));\n\n  --trackerStep-icon-color: var(--saltTrackerStep-icon-color, var(--salt-status-static-foreground));\n\n  --saltIcon-color: var(--trackerStep-icon-color);\n  /* We redefine Icon Size so we can use it in calc functions in the trackerConnector */\n  --saltIcon-size: var(--saltTrackerStep-icon-size, max(var(--salt-size-icon), 12px));\n}\n\n.saltTrackerStep {\n  margin: 0;\n  text-indent: 0;\n  list-style-type: none;\n  flex: 1;\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: var(--saltTrackerStep-width, 100%);\n  gap: var(--salt-spacing-50);\n  color: var(--salt-content-primary-foreground);\n  font-size: var(--salt-text-label-fontSize);\n  line-height: var(--salt-text-label-lineHeight);\n}\n\n.saltSteppedTracker.saltSteppedTracker-horizontal .saltTrackerStep {\n  flex-direction: column;\n  padding: 0 var(--salt-spacing-25);\n}\n\n.saltSteppedTracker.saltSteppedTracker-vertical .saltTrackerStep {\n  flex-direction: row;\n  min-height: calc(var(--salt-size-base) * 2);\n  width: 100%;\n}\n\n/* Pseudo-class applied to the root element on focus */\n.saltTrackerStep:focus-visible {\n  outline-style: var(--salt-focused-outlineStyle);\n  outline-width: var(--salt-focused-outlineWidth);\n  outline-color: var(--salt-focused-outlineColor);\n  outline-offset: var(--salt-focused-outlineOffset);\n}\n\n.saltTrackerStep .saltTrackerStep-body {\n  width: 100%;\n  display: flex;\n  align-items: center;\n  flex-direction: column;\n}\n\n.saltTrackerStep.saltTrackerStep-active {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-active);\n}\n\n.saltTrackerStep.saltTrackerStep-completed {\n  --trackerStep-icon-color: var(--trackerStep-icon-color-completed);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=TrackerStep.css.js.map

package/dist-cjs/stepper-input/StepperInput.css.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var css_248z = ".salt-density-medium {\n  --stepperInput-adornment-container-top: -2px;\n  --stepperInput-button-height: 12px;\n  --stepperInput-button-margin: 2px;\n  --stepperInput-button-width: 24px;\n  --stepperInput-input-maxHeight: 28px;\n  --stepperInput-secondary-button-height: 26px;\n  --stepperInput-secondary-button-width: 26px;\n  --stepperInput-secondary-button-marginRight: 2px;\n}\n\n.salt-density-touch {\n  --stepperInput-adornment-container-top: 0;\n  --stepperInput-button-height: 16px;\n  --stepperInput-button-margin: 4px;\n  --stepperInput-button-width: 36px;\n  --stepperInput-secondary-button-height: 36px;\n  --stepperInput-secondary-button-width: 36px;\n  --stepperInput-secondary-button-marginRight: 4px;\n}\n\n.salt-density-low {\n  --stepperInput-adornment-container-top: 0;\n  --stepperInput-button-height: 12px;\n  --stepperInput-button-margin: 4px;\n  --stepperInput-button-width: 28px;\n  --stepperInput-secondary-button-height: 28px;\n  --stepperInput-secondary-button-width: 28px;\n  --stepperInput-secondary-button-marginRight: 4px;\n}\n\n.salt-density-high {\n  --stepperInput-adornment-container-top: -2px;\n  --stepperInput-button-height: 8px;\n  --stepperInput-button-margin: 2px;\n  --stepperInput-button-width: 16px;\n  --stepperInput-input-maxHeight: 20px;\n  --stepperInput-secondary-button-height: 18px;\n  --stepperInput-secondary-button-width: 18px;\n  --stepperInput-secondary-button-marginRight: 2px;\n}\n\n/* Styles applied to adornment container */\n.saltStepperInput-adornmentContainer {\n  display: flex;\n  position: relative;\n  top: var(--saltStepperInput-adornment-container-top, var(--stepperInput-adornment-container-top));\n}\n\n/* Styles applied to refresh button */\n.saltStepperInput-secondaryButton {\n  --saltButton-height: var(--stepperInput-secondary-button-height);\n  --saltButton-margin: var(--stepperInput-button-margin) var(--stepperInput-secondary-button-marginRight) var(--stepperInput-button-margin) var(--stepperInput-button-margin);\n  --saltButton-width: var(--stepperInput-secondary-button-width);\n}\n\n.saltStepperInput-hideSecondaryButton {\n  visibility: hidden;\n}\n\n/* Styles applied to stepper buttons container */\n.saltStepperInput-buttonContainer {\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n}\n\n/* Styles applied to stepper buttons */\n.saltStepperInput-stepperButton {\n  --saltButton-height: var(--stepperInput-button-height);\n  --saltButton-margin: var(--stepperInput-button-margin);\n  --saltButton-width: var(--stepperInput-button-width);\n}\n\n/* Styles applied to increment button */\n.saltStepperInput-increment {\n}\n\n/* Styles applied to decrement button */\n.saltStepperInput-decrement {\n  --saltButton-margin: 0 var(--stepperInput-button-margin) var(--stepperInput-button-margin) var(--stepperInput-button-margin);\n}\n\n/* Styles applied to stepper button icon */\n.saltStepperInput-stepperButtonIcon {\n}\n\n/* Styles applied to input component */\n.saltStepperInput-input {\n  max-height: var(--saltStepperInput-maxHeight, unset);\n}\n";
+var css_248z = "/* Styles applied to stepper container */\n.saltStepperInput {\n  align-items: center;\n  display: flex;\n  flex-direction: row;\n  gap: var(--salt-spacing-50);\n}\n\n/* Styles applied to stepper buttons container */\n.saltStepperInput-buttonContainer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--salt-spacing-50);\n}\n\n/* Styles applied to stepper buttons */\n.saltStepperInput-stepperButton {\n  --saltButton-height: calc((var(--salt-size-base) - var(--salt-spacing-50)) * 0.5);\n  --saltButton-width: var(--salt-size-base);\n}\n";
 
 module.exports = css_248z;
 //# sourceMappingURL=StepperInput.css.js.map

package/dist-cjs/stepper-input/StepperInput.js

@@ -9,9 +9,6 @@ var core = require('@salt-ds/core');
 var styles = require('@salt-ds/styles');
 var window = require('@salt-ds/window');
 var icons = require('@salt-ds/icons');
-var InputLegacy = require('../input-legacy/InputLegacy.js');
-require('../input-legacy/StaticInputAdornment.js');
-var useActivationIndicatorPosition = require('./internal/useActivationIndicatorPosition.js');
 var useStepperInput = require('./useStepperInput.js');
 var StepperInput$1 = require('./StepperInput.css.js');
 
@@ -19,11 +16,13 @@ const withBaseName = core.makePrefixer("saltStepperInput");
 const StepperInput = React.forwardRef(
   function StepperInput2(props, ref) {
     const {
-      ButtonProps: ButtonPropsProp,
-      InputProps: InputPropsProp,
-      textAlign = "left",
       className,
-      showRefreshButton = false
+      hideButtons,
+      onBlur,
+      onChange,
+      onFocus,
+      readOnly,
+      ...rest
     } = props;
     const targetWindow = window.useWindow();
     styles.useComponentCssInjection({
@@ -31,90 +30,42 @@ const StepperInput = React.forwardRef(
       css: StepperInput$1,
       window: targetWindow
     });
-    const adornmentRef = React.useRef(null);
     const inputRef = React.useRef(null);
-    const {
-      decrementButtonDown,
-      getButtonIcon,
-      getButtonProps,
-      getInputProps,
-      incrementButtonDown,
-      isAtMax,
-      isAtMin,
-      refreshCurrentValue,
-      stepperDirection,
-      valuesHaveDiverged
-    } = useStepperInput.useStepperInput(props, inputRef);
-    useActivationIndicatorPosition.useActivationIndicatorPosition(
-      adornmentRef,
-      valuesHaveDiverged() || showRefreshButton
-    );
-    const endAdornment = /* @__PURE__ */ jsxRuntime.jsxs("div", {
-      className: withBaseName("adornmentContainer"),
-      ref: adornmentRef,
+    const { getButtonProps, getInputProps } = useStepperInput.useStepperInput(props, inputRef);
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", {
+      className: clsx.clsx(withBaseName(), className),
+      ref,
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
-          "aria-label": "Refresh default value",
-          className: clsx.clsx(withBaseName("secondaryButton"), {
-            [withBaseName("hideSecondaryButton")]: !(showRefreshButton || valuesHaveDiverged())
-          }),
-          onClick: refreshCurrentValue,
-          variant: "secondary",
-          children: /* @__PURE__ */ jsxRuntime.jsx(icons.RefreshIcon, {
-            "aria-label": "refresh"
-          })
+        /* @__PURE__ */ jsxRuntime.jsx(core.Input, {
+          onBlur,
+          onFocus,
+          ref: inputRef,
+          readOnly,
+          ...getInputProps(rest)
         }),
-        /* @__PURE__ */ jsxRuntime.jsxs("div", {
+        !hideButtons && !readOnly && /* @__PURE__ */ jsxRuntime.jsxs("div", {
           className: withBaseName("buttonContainer"),
           children: [
             /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
-              className: clsx.clsx(
-                withBaseName("stepperButton"),
-                withBaseName("increment"),
-                {
-                  active: incrementButtonDown
-                }
-              ),
-              disabled: isAtMax(),
-              ...getButtonProps(stepperDirection.INCREMENT, ButtonPropsProp),
+              "aria-label": "increment value",
+              className: withBaseName("stepperButton"),
+              ...getButtonProps("increment"),
               children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleUpIcon, {
-                className: withBaseName("stepperButtonIcon"),
-                "aria-label": getButtonIcon(stepperDirection.INCREMENT)
+                "aria-hidden": true
               })
             }),
             /* @__PURE__ */ jsxRuntime.jsx(core.Button, {
-              className: clsx.clsx(
-                withBaseName("stepperButton"),
-                withBaseName("decrement"),
-                {
-                  active: decrementButtonDown
-                }
-              ),
-              disabled: isAtMin(),
-              ...getButtonProps(stepperDirection.DECREMENT, ButtonPropsProp),
+              "aria-label": "decrement value",
+              className: withBaseName("stepperButton"),
+              ...getButtonProps("decrement"),
               children: /* @__PURE__ */ jsxRuntime.jsx(icons.TriangleDownIcon, {
-                className: withBaseName("stepperButtonIcon"),
-                "aria-label": getButtonIcon(stepperDirection.DECREMENT)
+                "aria-hidden": true
               })
             })
           ]
         })
       ]
     });
-    return /* @__PURE__ */ jsxRuntime.jsx("div", {
-      className: clsx.clsx(withBaseName(), className),
-      onBlur: props.onBlur,
-      onFocus: props.onFocus,
-      ref,
-      children: /* @__PURE__ */ jsxRuntime.jsx(InputLegacy.InputLegacy, {
-        className: withBaseName("input"),
-        endAdornment,
-        highlightOnFocus: true,
-        ref: inputRef,
-        textAlign,
-        ...getInputProps(InputPropsProp)
-      })
-    });
   }
 );
 

package/dist-cjs/stepper-input/StepperInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepperInput.js","sources":["../src/stepper-input/StepperInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport React, { forwardRef, ReactNode, useRef } from \"react\";\nimport { Button, ButtonProps, makePrefixer } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { RefreshIcon, TriangleDownIcon, TriangleUpIcon } from \"@salt-ds/icons\";\nimport {\n  InputLegacy as Input,\n  InputLegacyProps as InputProps,\n} from \"../input-legacy\";\nimport { useActivationIndicatorPosition } from \"./internal/useActivationIndicatorPosition\";\nimport { useStepperInput } from \"./useStepperInput\";\n\nimport stepperInputCss from \"./StepperInput.css\";\n\nconst withBaseName = makePrefixer(\"saltStepperInput\");\n\nexport interface StepperInputProps {\n  ButtonProps?: Partial<ButtonProps>;\n  InputProps?: Partial<InputProps>;\n  block?: number;\n  className?: string;\n  decimalPlaces?: number;\n  defaultValue?: number;\n  liveValue?: number;\n  max?: number;\n  min?: number;\n  onBlur?: (event: React.FocusEvent<HTMLDivElement>) => void;\n  onFocus?: (event: React.FocusEvent<HTMLDivElement>) => void;\n  onChange?: (changedValue: number | string) => void;\n  showRefreshButton?: boolean;\n  step?: number;\n  textAlign?: \"center\" | \"left\" | \"right\";\n  value?: number | string;\n}\n\nexport const StepperInput = forwardRef<HTMLDivElement, StepperInputProps>(\n  function StepperInput(props, ref) {\n    const {\n      ButtonProps: ButtonPropsProp,\n      InputProps: InputPropsProp,\n      textAlign = \"left\",\n      className,\n      showRefreshButton = false,\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-stepper-input\",\n      css: stepperInputCss,\n      window: targetWindow,\n    });\n\n    const adornmentRef = useRef<HTMLDivElement | null>(null);\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const {\n      decrementButtonDown,\n      getButtonIcon,\n      getButtonProps,\n      getInputProps,\n      incrementButtonDown,\n      isAtMax,\n      isAtMin,\n      refreshCurrentValue,\n      stepperDirection,\n      valuesHaveDiverged,\n    } = useStepperInput(props, inputRef);\n\n    useActivationIndicatorPosition(\n      adornmentRef,\n      valuesHaveDiverged() || showRefreshButton\n    );\n\n    const endAdornment: ReactNode = (\n      <div className={withBaseName(\"adornmentContainer\")} ref={adornmentRef}>\n        <Button\n          aria-label=\"Refresh default value\"\n          className={clsx(withBaseName(\"secondaryButton\"), {\n            // Refresh button is always rendered and has its visibility toggled to\n            // avoid component width changing.\n            [withBaseName(\"hideSecondaryButton\")]: !(\n              showRefreshButton || valuesHaveDiverged()\n            ),\n          })}\n          onClick={refreshCurrentValue}\n          variant=\"secondary\"\n        >\n          <RefreshIcon aria-label=\"refresh\" />\n        </Button>\n        <div className={withBaseName(\"buttonContainer\")}>\n          <Button\n            className={clsx(\n              withBaseName(\"stepperButton\"),\n              withBaseName(\"increment\"),\n              {\n                active: incrementButtonDown,\n              }\n            )}\n            disabled={isAtMax()}\n            {...getButtonProps(stepperDirection.INCREMENT, ButtonPropsProp)}\n          >\n            <TriangleUpIcon\n              className={withBaseName(\"stepperButtonIcon\")}\n              aria-label={getButtonIcon(stepperDirection.INCREMENT)}\n            />\n          </Button>\n          <Button\n            className={clsx(\n              withBaseName(\"stepperButton\"),\n              withBaseName(\"decrement\"),\n              {\n                active: decrementButtonDown,\n              }\n            )}\n            disabled={isAtMin()}\n            {...getButtonProps(stepperDirection.DECREMENT, ButtonPropsProp)}\n          >\n            <TriangleDownIcon\n              className={withBaseName(\"stepperButtonIcon\")}\n              aria-label={getButtonIcon(stepperDirection.DECREMENT)}\n            />\n          </Button>\n        </div>\n      </div>\n    );\n\n    return (\n      <div\n        className={clsx(withBaseName(), className)}\n        onBlur={props.onBlur}\n        onFocus={props.onFocus}\n        ref={ref}\n      >\n        <Input\n          className={withBaseName(\"input\")}\n          endAdornment={endAdornment}\n          highlightOnFocus\n          ref={inputRef}\n          textAlign={textAlign}\n          {...getInputProps(InputPropsProp)}\n        />\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","StepperInput","useWindow","useComponentCssInjection","stepperInputCss","useRef","useStepperInput","useActivationIndicatorPosition","jsxs","jsx","Button","clsx","RefreshIcon","TriangleUpIcon","TriangleDownIcon","Input"],"mappings":"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"}
+{"version":3,"file":"StepperInput.js","sources":["../src/stepper-input/StepperInput.tsx"],"sourcesContent":["import { clsx } from \"clsx\";\nimport { FocusEventHandler, forwardRef, useRef } from \"react\";\nimport { Button, makePrefixer, Input, InputProps } from \"@salt-ds/core\";\nimport { useComponentCssInjection } from \"@salt-ds/styles\";\nimport { useWindow } from \"@salt-ds/window\";\nimport { TriangleDownIcon, TriangleUpIcon } from \"@salt-ds/icons\";\nimport { useStepperInput } from \"./useStepperInput\";\n\nimport stepperInputCss from \"./StepperInput.css\";\n\nconst withBaseName = makePrefixer(\"saltStepperInput\");\n\nexport interface StepperInputProps\n  extends Omit<InputProps, \"onChange\" | \"emptyReadOnlyMarker\"> {\n  /**\n   * A multiplier applied to the `step` when the value is incremented or decremented using the PageDown/PageUp keys.\n   */\n  block?: number;\n  /**\n   * The number of decimal places to display.\n   */\n  decimalPlaces?: number;\n  /**\n   * Sets the initial default value of the component.\n   */\n  defaultValue?: number;\n  /**\n   * The maximum value that can be selected.\n   */\n  max?: number;\n  /**\n   * The minimum value that can be selected.\n   */\n  min?: number;\n  /**\n   * Whether to hide the stepper buttons. Defaults to `false`.\n   */\n  hideButtons?: boolean;\n  /**\n   * Callback when stepper input loses focus.\n   */\n  onBlur?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * Callback when stepper input value is changed.\n   */\n  onChange?: (changedValue: number | string) => void;\n  /**\n   * Callback when stepper input gains focus.\n   */\n  onFocus?: FocusEventHandler<HTMLInputElement>;\n  /**\n   * The amount to increment or decrement the value by when using the stepper buttons or Up Arrow and Down Arrow keys.\n   */\n  step?: number;\n  /**\n   * Determines the text alignment of the display value.\n   */\n  textAlign?: \"center\" | \"left\" | \"right\";\n  /**\n   * The value of the stepper input. The component will be controlled if this prop is provided.\n   */\n  value?: number | string;\n}\n\nexport const StepperInput = forwardRef<HTMLDivElement, StepperInputProps>(\n  function StepperInput(props, ref) {\n    const {\n      className,\n      hideButtons,\n      onBlur,\n      onChange,\n      onFocus,\n      readOnly,\n      ...rest\n    } = props;\n\n    const targetWindow = useWindow();\n    useComponentCssInjection({\n      testId: \"salt-stepper-input\",\n      css: stepperInputCss,\n      window: targetWindow,\n    });\n\n    const inputRef = useRef<HTMLInputElement | null>(null);\n\n    const { getButtonProps, getInputProps } = useStepperInput(props, inputRef);\n\n    return (\n      <div className={clsx(withBaseName(), className)} ref={ref}>\n        <Input\n          onBlur={onBlur}\n          onFocus={onFocus}\n          ref={inputRef}\n          readOnly={readOnly}\n          {...getInputProps(rest)}\n        />\n        {!hideButtons && !readOnly && (\n          <div className={withBaseName(\"buttonContainer\")}>\n            <Button\n              aria-label=\"increment value\"\n              className={withBaseName(\"stepperButton\")}\n              {...getButtonProps(\"increment\")}\n            >\n              <TriangleUpIcon aria-hidden />\n            </Button>\n            <Button\n              aria-label=\"decrement value\"\n              className={withBaseName(\"stepperButton\")}\n              {...getButtonProps(\"decrement\")}\n            >\n              <TriangleDownIcon aria-hidden />\n            </Button>\n          </div>\n        )}\n      </div>\n    );\n  }\n);\n"],"names":["makePrefixer","forwardRef","StepperInput","useWindow","useComponentCssInjection","stepperInputCss","useRef","useStepperInput","jsxs","clsx","jsx","Input","Button","TriangleUpIcon","TriangleDownIcon"],"mappings":";;;;;;;;;;;;;;AAUA,MAAM,YAAA,GAAeA,kBAAa,kBAAkB,CAAA,CAAA;AAsD7C,MAAM,YAAe,GAAAC,gBAAA;AAAA,EAC1B,SAASC,aAAa,CAAA,KAAA,EAAO,GAAK,EAAA;AAChC,IAAM,MAAA;AAAA,MACJ,SAAA;AAAA,MACA,WAAA;AAAA,MACA,MAAA;AAAA,MACA,QAAA;AAAA,MACA,OAAA;AAAA,MACA,QAAA;AAAA,MACG,GAAA,IAAA;AAAA,KACD,GAAA,KAAA,CAAA;AAEJ,IAAA,MAAM,eAAeC,gBAAU,EAAA,CAAA;AAC/B,IAAyBC,+BAAA,CAAA;AAAA,MACvB,MAAQ,EAAA,oBAAA;AAAA,MACR,GAAK,EAAAC,cAAA;AAAA,MACL,MAAQ,EAAA,YAAA;AAAA,KACT,CAAA,CAAA;AAED,IAAM,MAAA,QAAA,GAAWC,aAAgC,IAAI,CAAA,CAAA;AAErD,IAAA,MAAM,EAAE,cAAgB,EAAA,aAAA,EAAkB,GAAAC,+BAAA,CAAgB,OAAO,QAAQ,CAAA,CAAA;AAEzE,IAAA,uBACGC,eAAA,CAAA,KAAA,EAAA;AAAA,MAAI,SAAW,EAAAC,SAAA,CAAK,YAAa,EAAA,EAAG,SAAS,CAAA;AAAA,MAAG,GAAA;AAAA,MAC/C,QAAA,EAAA;AAAA,wBAACC,cAAA,CAAAC,UAAA,EAAA;AAAA,UACC,MAAA;AAAA,UACA,OAAA;AAAA,UACA,GAAK,EAAA,QAAA;AAAA,UACL,QAAA;AAAA,UACC,GAAG,cAAc,IAAI,CAAA;AAAA,SACxB,CAAA;AAAA,QACC,CAAC,WAAA,IAAe,CAAC,QAAA,oBACfH,eAAA,CAAA,KAAA,EAAA;AAAA,UAAI,SAAA,EAAW,aAAa,iBAAiB,CAAA;AAAA,UAC5C,QAAA,EAAA;AAAA,4BAACE,cAAA,CAAAE,WAAA,EAAA;AAAA,cACC,YAAW,EAAA,iBAAA;AAAA,cACX,SAAA,EAAW,aAAa,eAAe,CAAA;AAAA,cACtC,GAAG,eAAe,WAAW,CAAA;AAAA,cAE9B,QAAC,kBAAAF,cAAA,CAAAG,oBAAA,EAAA;AAAA,gBAAe,aAAW,EAAA,IAAA;AAAA,eAAC,CAAA;AAAA,aAC9B,CAAA;AAAA,4BACCH,cAAA,CAAAE,WAAA,EAAA;AAAA,cACC,YAAW,EAAA,iBAAA;AAAA,cACX,SAAA,EAAW,aAAa,eAAe,CAAA;AAAA,cACtC,GAAG,eAAe,WAAW,CAAA;AAAA,cAE9B,QAAC,kBAAAF,cAAA,CAAAI,sBAAA,EAAA;AAAA,gBAAiB,aAAW,EAAA,IAAA;AAAA,eAAC,CAAA;AAAA,aAChC,CAAA;AAAA,WAAA;AAAA,SACF,CAAA;AAAA,OAAA;AAAA,KAEJ,CAAA,CAAA;AAAA,GAEJ;AACF;;;;"}

package/dist-cjs/stepper-input/useStepperInput.js

@@ -3,13 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var core = require('@salt-ds/core');
-var useDynamicAriaLabel = require('./internal/useDynamicAriaLabel.js');
 var useSpinner = require('./internal/useSpinner.js');
 
-const stepperDirection = {
-  INCREMENT: "increment",
-  DECREMENT: "decrement"
-};
 const ACCEPT_INPUT = /^[-+]?[0-9]*\.?([0-9]+)?/g;
 const callAll = (...fns) => (...args) => fns.forEach((fn) => fn && fn(...args));
 const toFixedDecimalPlaces = (inputNumber, decimalPlaces) => inputNumber.toFixed(decimalPlaces);
@@ -23,27 +18,25 @@ const toFloat = (inputValue) => {
     return 0;
   return parseFloat(inputValue.toString());
 };
-const santizedInput = (numberString) => (numberString.match(ACCEPT_INPUT) || []).join("");
-const getButtonIcon = (type) => type === stepperDirection.INCREMENT ? "triangle-up" : "triangle-down";
+const sanitizedInput = (numberString) => (numberString.match(ACCEPT_INPUT) || []).join("");
 const useStepperInput = (props, inputRef) => {
   const {
     block = 10,
     decimalPlaces = 0,
     defaultValue = 0,
-    liveValue,
+    id: idProp,
     max = Number.MAX_SAFE_INTEGER,
     min = Number.MIN_SAFE_INTEGER,
     onChange,
     step = 1,
-    value,
-    InputProps: inputPropsProp = {}
+    value
   } = props;
   const [currentValue, setCurrentValue, isControlled] = core.useControlled({
     controlled: value,
     default: toFixedDecimalPlaces(defaultValue, decimalPlaces),
     name: "stepper-input"
   });
-  const inputId = core.useId(inputPropsProp.id);
+  const inputId = core.useId(idProp);
   const isOutOfRange = () => {
     if (currentValue === void 0)
       return true;
@@ -59,18 +52,6 @@ const useStepperInput = (props, inputRef) => {
       return true;
     return toFloat(currentValue) <= min || min === 0 && currentValue === "";
   };
-  const valuesHaveDiverged = () => {
-    if (liveValue === void 0 || currentValue === void 0)
-      return false;
-    return toFloat(toFixedDecimalPlaces(liveValue, decimalPlaces)) !== toFloat(currentValue);
-  };
-  const { setHasAnnounced } = useDynamicAriaLabel.useDynamicAriaLabel(
-    ", value out of date",
-    liveValue !== void 0,
-    inputRef,
-    currentValue,
-    valuesHaveDiverged
-  );
   const decrement = () => {
     if (currentValue === void 0 || isAtMin())
       return;
@@ -104,6 +85,8 @@ const useStepperInput = (props, inputRef) => {
     setNextValue(nextValue);
   };
   const setNextValue = (modifiedValue) => {
+    if (props.readOnly)
+      return;
     let nextValue = modifiedValue;
     if (nextValue < min)
       nextValue = min;
@@ -137,16 +120,13 @@ const useStepperInput = (props, inputRef) => {
       onChange(roundedValue);
     }
   };
-  const handleInputFocus = () => {
-    setHasAnnounced(false);
-  };
   const handleInputChange = (event) => {
-    const changedValue = event.currentTarget.value;
+    const changedValue = event.target.value;
     if (!isControlled) {
-      setCurrentValue(santizedInput(changedValue));
+      setCurrentValue(sanitizedInput(changedValue));
     }
     if (onChange) {
-      onChange(santizedInput(changedValue));
+      onChange(sanitizedInput(changedValue));
     }
   };
   const handleInputKeyDown = (event) => {
@@ -159,40 +139,21 @@ const useStepperInput = (props, inputRef) => {
       event.key === "PageUp" ? incrementSpinnerBlock() : decrementSpinnerBlock();
     }
   };
-  const handleButtonMouseDown = (event, type = stepperDirection.INCREMENT) => {
+  const handleButtonMouseDown = (event, direction) => {
     if (event.nativeEvent.button !== 0)
       return;
-    type === stepperDirection.INCREMENT ? incrementSpinner() : decrementSpinner();
+    direction === "increment" ? incrementSpinner() : decrementSpinner();
   };
   const handleButtonMouseUp = () => {
     var _a;
     return (_a = inputRef.current) == null ? void 0 : _a.focus();
   };
-  const refreshCurrentValue = () => {
-    var _a;
-    const refreshedcurrentValue = liveValue !== void 0 ? liveValue : defaultValue;
-    if (refreshedcurrentValue === void 0)
-      return;
-    setCurrentValue(
-      toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)
-    );
-    (_a = inputRef.current) == null ? void 0 : _a.focus();
-    if (onChange) {
-      onChange(
-        toFixedDecimalPlaces(toFloat(refreshedcurrentValue), decimalPlaces)
-      );
-    }
-  };
-  const getButtonProps = (type = stepperDirection.INCREMENT, buttonPropsProp = {}) => ({
+  const getButtonProps = (direction) => ({
     "aria-hidden": true,
-    "data-testid": `${type}-button`,
+    disabled: props.disabled || (direction === "increment" ? isAtMax() : isAtMin()),
     tabIndex: -1,
-    ...buttonPropsProp,
-    onMouseDown: callAll(
-      (event) => handleButtonMouseDown(event, type),
-      buttonPropsProp.onMouseDown
-    ),
-    onMouseUp: callAll(() => handleButtonMouseUp(), buttonPropsProp.onMouseUp)
+    onMouseDown: (event) => handleButtonMouseDown(event, direction),
+    onMouseUp: handleButtonMouseUp
   });
   const getInputProps = (inputProps = {}) => {
     if (currentValue === void 0)
@@ -212,22 +173,17 @@ const useStepperInput = (props, inputRef) => {
       },
       onBlur: callAll(inputProps.onBlur, handleInputBlur),
       onChange: callAll(inputProps.onChange, handleInputChange),
-      onFocus: callAll(inputProps.onFocus, handleInputFocus),
-      onKeyDown: callAll(inputProps.onKeyPress, handleInputKeyDown),
+      onFocus: inputProps.onFocus,
+      onKeyDown: callAll(inputProps.onKeyDown, handleInputKeyDown),
+      textAlign: inputProps.textAlign,
       value: String(currentValue)
     };
   };
   return {
     decrementButtonDown: arrowDownButtonDown || pgDnButtonDown,
-    getButtonIcon,
     getButtonProps,
     getInputProps,
-    incrementButtonDown: arrowUpButtonDown || pgUpButtonDown,
-    isAtMax,
-    isAtMin,
-    refreshCurrentValue,
-    stepperDirection,
-    valuesHaveDiverged
+    incrementButtonDown: arrowUpButtonDown || pgUpButtonDown
   };
 };