@danske/sapphire-react-lab 0.77.4 → 0.80.0

package/build/esm/DateField/src/DateField.js

@@ -53,6 +53,7 @@ function _DateField(_a, ref) {
     noClearButton = false,
     showWeekNumbers,
     size = "large",
+    labelPlacement = "above",
     necessityIndicator = false
   } = _b, otherProps = __objRest(_b, [
     "error",
@@ -61,6 +62,7 @@ function _DateField(_a, ref) {
     "noClearButton",
     "showWeekNumbers",
     "size",
+    "labelPlacement",
     "necessityIndicator"
   ]);
   useThemeCheck();
@@ -87,7 +89,8 @@ function _DateField(_a, ref) {
     isDisabled: otherProps.isDisabled,
     error: state.validationState === "invalid",
     size,
-    ref
+    ref,
+    labelPlacement
   }), otherProps.label && /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, __spreadProps(__spreadValues({}, labelProps), {
     size,
     necessityIndicator: otherProps.isRequired && necessityIndicator ? "required" : !otherProps.isRequired && necessityIndicator ? "optional" : void 0,

package/build/esm/DateField/src/DateField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateField.js","sources":["../../../../src/DateField/src/DateField.tsx"],"sourcesContent":["import React, {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  RefObject,\n  useRef,\n} from 'react';\nimport { Validation } from '@react-types/shared';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  useDatePicker,\n} from '@react-aria/datepicker';\nimport { useDatePickerState } from '@react-stately/datepicker';\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n  Icon,\n  Popover,\n  tokens,\n  View,\n  Field,\n  Label,\n} from '@danske/sapphire-react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/dateField/dateField.module.css';\nimport { Calendar as CalendarIcon } from '@danske/sapphire-icons/react';\nimport { DateInput } from './DateInput';\nimport { Calendar } from '../../Calendar';\nimport { DateFieldButton } from './DateFieldButton';\nimport { PressResponder } from '@react-aria/interactions';\nimport { useDialog } from '@react-aria/dialog';\n\nexport type DateFieldProps<T extends DateValue> = Omit<\n  AriaDatePickerProps<T>,\n  | keyof Omit<Validation<unknown>, 'isRequired'>\n  | 'errorMessage'\n  | 'description'\n  // excluding some props about time input. We don't support that yet.\n  | 'granularity'\n  | 'hourCycle'\n  | 'hideTimeZone'\n> &\n  SapphireStyleProps & {\n    /**\n     * Whether week numbers are visible as a first column\n     */\n    showWeekNumbers?: boolean;\n    /**\n     * Whether the input should render as having an error and an error message.\n     * This also sets the appropriate `aria` attributes on the input.\n     *\n     * A `boolean` sets the error state.\n     * A `string` sets the error state with an additional error message.\n     \n     * **An error message is strongly recommended because an error should\n     * always have an explanation about how to fix it.**\n     */\n    error?: boolean | string;\n    /**\n     * A note to show below the input.\n     * If the input has an error message, this note will be replaced by that.\n     */\n    note?: ReactNode;\n    /**\n     * A ContextualHelp to render next to the label.\n     */\n    contextualHelp?: ReactNode;\n    /**\n     * If it should hide the \"clear\" button when input is not empty.\n     *\n     * @default false\n     */\n    noClearButton?: boolean;\n    /**\n     * @default 'large'\n     */\n    size?: 'large' | 'medium';\n    /**\n     * To visually indicate if this field is required or optional.\n     * @default false\n     */\n    necessityIndicator?: boolean;\n  };\n\nfunction _DateField<T extends DateValue>(\n  {\n    error,\n    note,\n    contextualHelp,\n    noClearButton = false,\n    showWeekNumbers,\n    size = 'large',\n    necessityIndicator = false,\n    ...otherProps\n  }: DateFieldProps<T>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  useThemeCheck();\n\n  const groupRef = useRef(null);\n  const dialogRef = useRef(null);\n\n  const { styleProps } = useSapphireStyleProps(otherProps);\n\n  const { dialogProps } = useDialog({}, dialogRef);\n\n  const state = useDatePickerState({\n    ...otherProps,\n    ...(error ? { validationState: 'invalid' } : {}),\n  });\n\n  const {\n    groupProps,\n    labelProps,\n    fieldProps,\n    buttonProps,\n    dialogProps: dialogPropsFromDatePicker,\n    calendarProps,\n    descriptionProps,\n    errorMessageProps,\n  } = useDatePicker(\n    {\n      ...otherProps,\n      description: note,\n    },\n    state,\n    groupRef\n  );\n\n  const isMedium = size === 'medium';\n\n  return (\n    <Field\n      {...otherProps}\n      noShrink\n      isDisabled={otherProps.isDisabled}\n      error={state.validationState === 'invalid'}\n      size={size}\n      ref={ref}\n    >\n      {otherProps.label && (\n        <Field.Label>\n          <Label\n            {...labelProps}\n            size={size}\n            necessityIndicator={\n              otherProps.isRequired && necessityIndicator\n                ? 'required'\n                : !otherProps.isRequired && necessityIndicator\n                ? 'optional'\n                : undefined\n            }\n            contextualHelp={contextualHelp}\n          >\n            {otherProps.label}\n          </Label>\n        </Field.Label>\n      )}\n      <Field.Control>\n        <div\n          {...groupProps}\n          ref={groupRef}\n          className={clsx(styles['sapphire-date-field'], {\n            [styles['sapphire-date-field--error']]:\n              state.validationState === 'invalid',\n            [styles['sapphire-date-field--medium']]: isMedium,\n          })}\n          {...(styleProps.style.width\n            ? { style: { width: styleProps.style.width } }\n            : {})}\n        >\n          <PressResponder {...buttonProps} isPressed={state.isOpen}>\n            <DateFieldButton\n              isDisabled={otherProps.isDisabled || otherProps.isReadOnly}\n            >\n              <Icon size={isMedium ? 'm' : 'l'}>\n                <CalendarIcon />\n              </Icon>\n            </DateFieldButton>\n          </PressResponder>\n          <DateInput\n            {...fieldProps}\n            noClearButton={noClearButton}\n            size={size}\n          />\n        </div>\n      </Field.Control>\n      {((typeof error === 'string' && error !== '') || note) && (\n        <Field.Footer>\n          {error ? (\n            <Field.Note {...errorMessageProps}>{error}</Field.Note>\n          ) : note ? (\n            <Field.Note {...descriptionProps}>{note}</Field.Note>\n          ) : (\n            <></>\n          )}\n        </Field.Footer>\n      )}\n      {state.isOpen && (\n        <Popover state={state} triggerRef={groupRef} placement=\"bottom start\">\n          <div ref={dialogRef} {...dialogProps} {...dialogPropsFromDatePicker}>\n            <View padding={tokens.size.spacing50}>\n              <Calendar\n                {...calendarProps}\n                defaultFocusedValue={state.dateValue}\n                showWeekNumbers={showWeekNumbers}\n              />\n            </View>\n          </div>\n        </Popover>\n      )}\n    </Field>\n  );\n}\n\n/**\n * A date field allows users to enter or edit date values using the keyboard\n * and/or mouse.\n */\nexport const DateField = forwardRef(_DateField) as <T extends DateValue>(\n  props: DateFieldProps<T> & { ref?: RefObject<HTMLDivElement> }\n) => React.ReactElement;\n"],"names":["CalendarIcon","Calendar"],"mappings":"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"}
+{"version":3,"file":"DateField.js","sources":["../../../../src/DateField/src/DateField.tsx"],"sourcesContent":["import React, {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  RefObject,\n  useRef,\n} from 'react';\nimport { Validation } from '@react-types/shared';\nimport {\n  AriaDatePickerProps,\n  DateValue,\n  useDatePicker,\n} from '@react-aria/datepicker';\nimport { useDatePickerState } from '@react-stately/datepicker';\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n  Icon,\n  Popover,\n  tokens,\n  View,\n  Field,\n  Label,\n} from '@danske/sapphire-react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/dateField/dateField.module.css';\nimport { Calendar as CalendarIcon } from '@danske/sapphire-icons/react';\nimport { DateInput } from './DateInput';\nimport { Calendar } from '../../Calendar';\nimport { DateFieldButton } from './DateFieldButton';\nimport { PressResponder } from '@react-aria/interactions';\nimport { useDialog } from '@react-aria/dialog';\n\nexport type DateFieldProps<T extends DateValue> = Omit<\n  AriaDatePickerProps<T>,\n  | keyof Omit<Validation<unknown>, 'isRequired'>\n  | 'errorMessage'\n  | 'description'\n  // excluding some props about time input. We don't support that yet.\n  | 'granularity'\n  | 'hourCycle'\n  | 'hideTimeZone'\n> &\n  SapphireStyleProps & {\n    /**\n     * Whether week numbers are visible as a first column\n     */\n    showWeekNumbers?: boolean;\n    /**\n     * Whether the input should render as having an error and an error message.\n     * This also sets the appropriate `aria` attributes on the input.\n     *\n     * A `boolean` sets the error state.\n     * A `string` sets the error state with an additional error message.\n     \n     * **An error message is strongly recommended because an error should\n     * always have an explanation about how to fix it.**\n     */\n    error?: boolean | string;\n    /**\n     * A note to show below the input.\n     * If the input has an error message, this note will be replaced by that.\n     */\n    note?: ReactNode;\n    /**\n     * A ContextualHelp to render next to the label.\n     */\n    contextualHelp?: ReactNode;\n    /**\n     * If it should hide the \"clear\" button when input is not empty.\n     *\n     * @default false\n     */\n    noClearButton?: boolean;\n    /**\n     * @default 'large'\n     */\n    size?: 'large' | 'medium';\n    /**\n     * To visually indicate if this field is required or optional.\n     * @default false\n     */\n    necessityIndicator?: boolean;\n    /**\n     * Places the label either above (default) or on the side of the control.\n     * @default 'above'\n     */\n    labelPlacement?: 'side' | 'above';\n  };\n\nfunction _DateField<T extends DateValue>(\n  {\n    error,\n    note,\n    contextualHelp,\n    noClearButton = false,\n    showWeekNumbers,\n    size = 'large',\n    labelPlacement = 'above',\n    necessityIndicator = false,\n    ...otherProps\n  }: DateFieldProps<T>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  useThemeCheck();\n\n  const groupRef = useRef(null);\n  const dialogRef = useRef(null);\n\n  const { styleProps } = useSapphireStyleProps(otherProps);\n\n  const { dialogProps } = useDialog({}, dialogRef);\n\n  const state = useDatePickerState({\n    ...otherProps,\n    ...(error ? { validationState: 'invalid' } : {}),\n  });\n\n  const {\n    groupProps,\n    labelProps,\n    fieldProps,\n    buttonProps,\n    dialogProps: dialogPropsFromDatePicker,\n    calendarProps,\n    descriptionProps,\n    errorMessageProps,\n  } = useDatePicker(\n    {\n      ...otherProps,\n      description: note,\n    },\n    state,\n    groupRef\n  );\n\n  const isMedium = size === 'medium';\n\n  return (\n    <Field\n      {...otherProps}\n      noShrink\n      isDisabled={otherProps.isDisabled}\n      error={state.validationState === 'invalid'}\n      size={size}\n      ref={ref}\n      labelPlacement={labelPlacement}\n    >\n      {otherProps.label && (\n        <Field.Label>\n          <Label\n            {...labelProps}\n            size={size}\n            necessityIndicator={\n              otherProps.isRequired && necessityIndicator\n                ? 'required'\n                : !otherProps.isRequired && necessityIndicator\n                ? 'optional'\n                : undefined\n            }\n            contextualHelp={contextualHelp}\n          >\n            {otherProps.label}\n          </Label>\n        </Field.Label>\n      )}\n      <Field.Control>\n        <div\n          {...groupProps}\n          ref={groupRef}\n          className={clsx(styles['sapphire-date-field'], {\n            [styles['sapphire-date-field--error']]:\n              state.validationState === 'invalid',\n            [styles['sapphire-date-field--medium']]: isMedium,\n          })}\n          {...(styleProps.style.width\n            ? { style: { width: styleProps.style.width } }\n            : {})}\n        >\n          <PressResponder {...buttonProps} isPressed={state.isOpen}>\n            <DateFieldButton\n              isDisabled={otherProps.isDisabled || otherProps.isReadOnly}\n            >\n              <Icon size={isMedium ? 'm' : 'l'}>\n                <CalendarIcon />\n              </Icon>\n            </DateFieldButton>\n          </PressResponder>\n          <DateInput\n            {...fieldProps}\n            noClearButton={noClearButton}\n            size={size}\n          />\n        </div>\n      </Field.Control>\n      {((typeof error === 'string' && error !== '') || note) && (\n        <Field.Footer>\n          {error ? (\n            <Field.Note {...errorMessageProps}>{error}</Field.Note>\n          ) : note ? (\n            <Field.Note {...descriptionProps}>{note}</Field.Note>\n          ) : (\n            <></>\n          )}\n        </Field.Footer>\n      )}\n      {state.isOpen && (\n        <Popover state={state} triggerRef={groupRef} placement=\"bottom start\">\n          <div ref={dialogRef} {...dialogProps} {...dialogPropsFromDatePicker}>\n            <View padding={tokens.size.spacing50}>\n              <Calendar\n                {...calendarProps}\n                defaultFocusedValue={state.dateValue}\n                showWeekNumbers={showWeekNumbers}\n              />\n            </View>\n          </div>\n        </Popover>\n      )}\n    </Field>\n  );\n}\n\n/**\n * A date field allows users to enter or edit date values using the keyboard\n * and/or mouse.\n */\nexport const DateField = forwardRef(_DateField) as <T extends DateValue>(\n  props: DateFieldProps<T> & { ref?: RefObject<HTMLDivElement> }\n) => React.ReactElement;\n"],"names":["CalendarIcon","Calendar"],"mappings":"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"}

package/build/esm/DateField/src/DateRangeField.js

@@ -63,6 +63,7 @@ function _DateRangeField(_a, ref) {
     allowUnavailableDatesWithinRange,
     predefinedRanges,
     size = "large",
+    labelPlacement = "above",
     necessityIndicator = false
   } = _b, otherProps = __objRest(_b, [
     "error",
@@ -75,6 +76,7 @@ function _DateRangeField(_a, ref) {
     "allowUnavailableDatesWithinRange",
     "predefinedRanges",
     "size",
+    "labelPlacement",
     "necessityIndicator"
   ]);
   useThemeCheck();
@@ -105,7 +107,8 @@ function _DateRangeField(_a, ref) {
     isDisabled: otherProps.isDisabled,
     error: state.validationState === "invalid",
     size,
-    ref
+    ref,
+    labelPlacement
   }), /* @__PURE__ */ React.createElement(I18nProvider, {
     locale: preferredLocale
   }, otherProps.label && /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, __spreadProps(__spreadValues({}, labelProps), {

package/build/esm/DateField/src/DateRangeField.js.map

@@ -1 +1 @@
-{"version":3,"file":"DateRangeField.js","sources":["../../../../src/DateField/src/DateRangeField.tsx"],"sourcesContent":["import React, {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  RefObject,\n  useRef,\n} from 'react';\nimport { Validation } from '@react-types/shared';\nimport {\n  AriaDateRangePickerProps,\n  DateValue,\n  useDateRangePicker,\n} from '@react-aria/datepicker';\nimport {\n  DateRangePickerStateOptions,\n  useDateRangePickerState,\n} from './useDateRangePickerState';\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n  Icon,\n  Popover,\n  tokens,\n  View,\n  Field,\n  Label,\n} from '@danske/sapphire-react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/dateField/dateField.module.css';\nimport { Calendar } from '@danske/sapphire-icons/react';\nimport { DateRangeInput } from './DateRangeInput';\nimport { RangeCalendar, PredefinedDateRange } from '../../Calendar';\nimport { DateFieldButton } from './DateFieldButton';\nimport { PressResponder } from '@react-aria/interactions';\nimport { I18nProvider, useLocale } from '@react-aria/i18n';\nimport { useDialog } from '@react-aria/dialog';\n\nexport type DateRangeFieldProps<T extends DateValue, P extends string> = Omit<\n  AriaDateRangePickerProps<T>,\n  | keyof Omit<Validation<unknown>, 'isRequired'>\n  | 'errorMessage'\n  | 'description'\n  // excluding some props about time input. We don't support that yet.\n  | 'granularity'\n  | 'hourCycle'\n  | 'hideTimeZone'\n  | 'allowsNonContiguousRanges'\n  | 'onChange'\n> &\n  SapphireStyleProps & {\n    /**\n     * Handler that is called when the value changes.\n     */\n    onChange?: DateRangePickerStateOptions<DateValue, P>['onChange'];\n    /**\n     * Whether week numbers are visible as a first column\n     */\n    showWeekNumbers?: boolean;\n    /**\n     * Whether to show two months at the same time.\n     */\n    showTwoMonths?: boolean;\n    /**\n     * A set of predefined date ranges the user can more conveniently select.\n     */\n    predefinedRanges?: Record<P, PredefinedDateRange>;\n    /**\n     * Whether range is allowed to span unavailable dates.\n     */\n    allowUnavailableDatesWithinRange?: boolean;\n    /**\n     * Whether the input should render as having an error and an error message.\n     * This also sets the appropriate `aria` attributes on the input.\n     *\n     * A `boolean` sets the error state.\n     * A `string` sets the error state with an additional error message.\n     \n     * **An error message is strongly recommended because an error should\n     * always have an explanation about how to fix it.**\n     */\n    error?: boolean | string;\n    /**\n     * A note to show below the input.\n     * If the input has an error message, this note will be replaced by that.\n     */\n    note?: ReactNode;\n    /**\n     * A ContextualHelp to render next to the label.\n     */\n    contextualHelp?: ReactNode;\n    /**\n     * If it should hide the \"clear\" button when input is not empty.\n     *\n     * @default false\n     */\n    noClearButton?: boolean;\n    /**\n     * Locale (eg. \"da-DK\", \"en-US\", \"sv-SE\" etc.)\n     *\n     * THIS IS A TEMPORARY SOLUTION FOR THE INTERFACE OF LOCALIZATION. THIS API\n     * MAY CHANGE OR EVEN BE REPLACED WITH SOMETHING DIFFERENT IN A FUTURE VERSION.\n     */\n    locale?: string;\n    /**\n     * @default 'large'\n     */\n    size?: 'large' | 'medium';\n    /**\n     * To visually indicate if this field is required or optional.\n     * @default false\n     */\n    necessityIndicator?: boolean;\n  };\n\nfunction _DateRangeField<T extends DateValue, P extends string>(\n  {\n    error,\n    note,\n    contextualHelp,\n    noClearButton = false,\n    locale,\n    showWeekNumbers,\n    showTwoMonths,\n    allowUnavailableDatesWithinRange,\n    predefinedRanges,\n    size = 'large',\n    necessityIndicator = false,\n    ...otherProps\n  }: DateRangeFieldProps<T, P>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  useThemeCheck();\n\n  const groupRef = useRef(null);\n  const dialogRef = useRef(null);\n\n  const { locale: existingLocale } = useLocale();\n\n  const preferredLocale = locale || existingLocale;\n\n  const { styleProps } = useSapphireStyleProps(otherProps);\n\n  const { dialogProps } = useDialog({}, dialogRef);\n\n  const state = useDateRangePickerState({\n    ...otherProps,\n    ...(error ? { validationState: 'invalid' } : {}),\n    ...(allowUnavailableDatesWithinRange\n      ? { allowsNonContiguousRanges: allowUnavailableDatesWithinRange }\n      : {}),\n  });\n\n  const {\n    groupProps,\n    labelProps,\n    startFieldProps,\n    endFieldProps,\n    buttonProps,\n    dialogProps: dialogPropsFromDatePicker,\n    calendarProps,\n    descriptionProps,\n    errorMessageProps,\n  } = useDateRangePicker(\n    {\n      ...otherProps,\n      description: note,\n      allowsNonContiguousRanges: allowUnavailableDatesWithinRange,\n    },\n    state,\n    groupRef\n  );\n\n  const isMedium = size === 'medium';\n\n  return (\n    <Field\n      {...otherProps}\n      noShrink\n      isDisabled={otherProps.isDisabled}\n      error={state.validationState === 'invalid'}\n      size={size}\n      ref={ref}\n    >\n      <I18nProvider locale={preferredLocale}>\n        {otherProps.label && (\n          <Field.Label>\n            <Label\n              {...labelProps}\n              size={size}\n              necessityIndicator={\n                otherProps.isRequired && necessityIndicator\n                  ? 'required'\n                  : !otherProps.isRequired && necessityIndicator\n                  ? 'optional'\n                  : undefined\n              }\n              contextualHelp={contextualHelp}\n            >\n              {otherProps.label}\n            </Label>\n          </Field.Label>\n        )}\n        <Field.Control>\n          <div\n            {...groupProps}\n            ref={groupRef}\n            className={clsx(\n              styles['sapphire-date-field'],\n              styles['sapphire-date-field--range'],\n              {\n                [styles['sapphire-date-field--error']]:\n                  state.validationState === 'invalid',\n                [styles['sapphire-date-field--medium']]: isMedium,\n              }\n            )}\n            {...(styleProps.style.width\n              ? { style: { width: styleProps.style.width } }\n              : {})}\n          >\n            <PressResponder {...buttonProps} isPressed={state.isOpen}>\n              <DateFieldButton\n                isDisabled={otherProps.isDisabled || otherProps.isReadOnly}\n              >\n                <Icon size={isMedium ? 'm' : 'l'}>\n                  <Calendar />\n                </Icon>\n              </DateFieldButton>\n            </PressResponder>\n            <DateRangeInput\n              dateRangePickerState={state}\n              startFieldProps={startFieldProps}\n              endFieldProps={endFieldProps}\n              noClearButton={noClearButton}\n              size={size}\n            />\n          </div>\n        </Field.Control>\n        {error !== false &&\n          ((typeof error === 'string' && error !== '') || note) && (\n            <Field.Footer>\n              {error ? (\n                <Field.Note {...errorMessageProps}>{error}</Field.Note>\n              ) : note ? (\n                <Field.Note {...descriptionProps}>{note}</Field.Note>\n              ) : (\n                <></>\n              )}\n            </Field.Footer>\n          )}\n        {state.isOpen && (\n          <Popover state={state} triggerRef={groupRef} placement=\"bottom start\">\n            <div\n              ref={dialogRef}\n              {...dialogProps}\n              {...dialogPropsFromDatePicker}\n            >\n              <View padding={tokens.size.spacing50}>\n                <RangeCalendar\n                  {...calendarProps}\n                  allowUnavailableDatesWithinRange={\n                    allowUnavailableDatesWithinRange\n                  }\n                  showWeekNumbers={showWeekNumbers}\n                  showTwoMonths={showTwoMonths}\n                  predefinedRanges={predefinedRanges}\n                />\n              </View>\n            </div>\n          </Popover>\n        )}\n      </I18nProvider>\n    </Field>\n  );\n}\n\n/**\n * A date range field allows users to select a range of dates by selecting a to and a from date with keyboard and/or mouse.\n */\nexport const DateRangeField = forwardRef(_DateRangeField) as <\n  T extends DateValue,\n  P extends string\n>(\n  props: DateRangeFieldProps<T, P> & { ref?: RefObject<HTMLDivElement> }\n) => React.ReactElement;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"DateRangeField.js","sources":["../../../../src/DateField/src/DateRangeField.tsx"],"sourcesContent":["import React, {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  RefObject,\n  useRef,\n} from 'react';\nimport { Validation } from '@react-types/shared';\nimport {\n  AriaDateRangePickerProps,\n  DateValue,\n  useDateRangePicker,\n} from '@react-aria/datepicker';\nimport {\n  DateRangePickerStateOptions,\n  useDateRangePickerState,\n} from './useDateRangePickerState';\nimport {\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n  Icon,\n  Popover,\n  tokens,\n  View,\n  Field,\n  Label,\n} from '@danske/sapphire-react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/dateField/dateField.module.css';\nimport { Calendar } from '@danske/sapphire-icons/react';\nimport { DateRangeInput } from './DateRangeInput';\nimport { RangeCalendar, PredefinedDateRange } from '../../Calendar';\nimport { DateFieldButton } from './DateFieldButton';\nimport { PressResponder } from '@react-aria/interactions';\nimport { I18nProvider, useLocale } from '@react-aria/i18n';\nimport { useDialog } from '@react-aria/dialog';\n\nexport type DateRangeFieldProps<T extends DateValue, P extends string> = Omit<\n  AriaDateRangePickerProps<T>,\n  | keyof Omit<Validation<unknown>, 'isRequired'>\n  | 'errorMessage'\n  | 'description'\n  // excluding some props about time input. We don't support that yet.\n  | 'granularity'\n  | 'hourCycle'\n  | 'hideTimeZone'\n  | 'allowsNonContiguousRanges'\n  | 'onChange'\n> &\n  SapphireStyleProps & {\n    /**\n     * Handler that is called when the value changes.\n     */\n    onChange?: DateRangePickerStateOptions<DateValue, P>['onChange'];\n    /**\n     * Whether week numbers are visible as a first column\n     */\n    showWeekNumbers?: boolean;\n    /**\n     * Whether to show two months at the same time.\n     */\n    showTwoMonths?: boolean;\n    /**\n     * A set of predefined date ranges the user can more conveniently select.\n     */\n    predefinedRanges?: Record<P, PredefinedDateRange>;\n    /**\n     * Whether range is allowed to span unavailable dates.\n     */\n    allowUnavailableDatesWithinRange?: boolean;\n    /**\n     * Whether the input should render as having an error and an error message.\n     * This also sets the appropriate `aria` attributes on the input.\n     *\n     * A `boolean` sets the error state.\n     * A `string` sets the error state with an additional error message.\n     \n     * **An error message is strongly recommended because an error should\n     * always have an explanation about how to fix it.**\n     */\n    error?: boolean | string;\n    /**\n     * A note to show below the input.\n     * If the input has an error message, this note will be replaced by that.\n     */\n    note?: ReactNode;\n    /**\n     * A ContextualHelp to render next to the label.\n     */\n    contextualHelp?: ReactNode;\n    /**\n     * If it should hide the \"clear\" button when input is not empty.\n     *\n     * @default false\n     */\n    noClearButton?: boolean;\n    /**\n     * Locale (eg. \"da-DK\", \"en-US\", \"sv-SE\" etc.)\n     *\n     * THIS IS A TEMPORARY SOLUTION FOR THE INTERFACE OF LOCALIZATION. THIS API\n     * MAY CHANGE OR EVEN BE REPLACED WITH SOMETHING DIFFERENT IN A FUTURE VERSION.\n     */\n    locale?: string;\n    /**\n     * @default 'large'\n     */\n    size?: 'large' | 'medium';\n    /**\n     * To visually indicate if this field is required or optional.\n     * @default false\n     */\n    necessityIndicator?: boolean;\n\n    /**\n     * Places the label either above (default) or on the side of the control.\n     * @default 'above'\n     */\n    labelPlacement?: 'side' | 'above';\n  };\n\nfunction _DateRangeField<T extends DateValue, P extends string>(\n  {\n    error,\n    note,\n    contextualHelp,\n    noClearButton = false,\n    locale,\n    showWeekNumbers,\n    showTwoMonths,\n    allowUnavailableDatesWithinRange,\n    predefinedRanges,\n    size = 'large',\n    labelPlacement = 'above',\n    necessityIndicator = false,\n    ...otherProps\n  }: DateRangeFieldProps<T, P>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  useThemeCheck();\n\n  const groupRef = useRef(null);\n  const dialogRef = useRef(null);\n\n  const { locale: existingLocale } = useLocale();\n\n  const preferredLocale = locale || existingLocale;\n\n  const { styleProps } = useSapphireStyleProps(otherProps);\n\n  const { dialogProps } = useDialog({}, dialogRef);\n\n  const state = useDateRangePickerState({\n    ...otherProps,\n    ...(error ? { validationState: 'invalid' } : {}),\n    ...(allowUnavailableDatesWithinRange\n      ? { allowsNonContiguousRanges: allowUnavailableDatesWithinRange }\n      : {}),\n  });\n\n  const {\n    groupProps,\n    labelProps,\n    startFieldProps,\n    endFieldProps,\n    buttonProps,\n    dialogProps: dialogPropsFromDatePicker,\n    calendarProps,\n    descriptionProps,\n    errorMessageProps,\n  } = useDateRangePicker(\n    {\n      ...otherProps,\n      description: note,\n      allowsNonContiguousRanges: allowUnavailableDatesWithinRange,\n    },\n    state,\n    groupRef\n  );\n\n  const isMedium = size === 'medium';\n\n  return (\n    <Field\n      {...otherProps}\n      noShrink\n      isDisabled={otherProps.isDisabled}\n      error={state.validationState === 'invalid'}\n      size={size}\n      ref={ref}\n      labelPlacement={labelPlacement}\n    >\n      <I18nProvider locale={preferredLocale}>\n        {otherProps.label && (\n          <Field.Label>\n            <Label\n              {...labelProps}\n              size={size}\n              necessityIndicator={\n                otherProps.isRequired && necessityIndicator\n                  ? 'required'\n                  : !otherProps.isRequired && necessityIndicator\n                  ? 'optional'\n                  : undefined\n              }\n              contextualHelp={contextualHelp}\n            >\n              {otherProps.label}\n            </Label>\n          </Field.Label>\n        )}\n        <Field.Control>\n          <div\n            {...groupProps}\n            ref={groupRef}\n            className={clsx(\n              styles['sapphire-date-field'],\n              styles['sapphire-date-field--range'],\n              {\n                [styles['sapphire-date-field--error']]:\n                  state.validationState === 'invalid',\n                [styles['sapphire-date-field--medium']]: isMedium,\n              }\n            )}\n            {...(styleProps.style.width\n              ? { style: { width: styleProps.style.width } }\n              : {})}\n          >\n            <PressResponder {...buttonProps} isPressed={state.isOpen}>\n              <DateFieldButton\n                isDisabled={otherProps.isDisabled || otherProps.isReadOnly}\n              >\n                <Icon size={isMedium ? 'm' : 'l'}>\n                  <Calendar />\n                </Icon>\n              </DateFieldButton>\n            </PressResponder>\n            <DateRangeInput\n              dateRangePickerState={state}\n              startFieldProps={startFieldProps}\n              endFieldProps={endFieldProps}\n              noClearButton={noClearButton}\n              size={size}\n            />\n          </div>\n        </Field.Control>\n        {error !== false &&\n          ((typeof error === 'string' && error !== '') || note) && (\n            <Field.Footer>\n              {error ? (\n                <Field.Note {...errorMessageProps}>{error}</Field.Note>\n              ) : note ? (\n                <Field.Note {...descriptionProps}>{note}</Field.Note>\n              ) : (\n                <></>\n              )}\n            </Field.Footer>\n          )}\n        {state.isOpen && (\n          <Popover state={state} triggerRef={groupRef} placement=\"bottom start\">\n            <div\n              ref={dialogRef}\n              {...dialogProps}\n              {...dialogPropsFromDatePicker}\n            >\n              <View padding={tokens.size.spacing50}>\n                <RangeCalendar\n                  {...calendarProps}\n                  allowUnavailableDatesWithinRange={\n                    allowUnavailableDatesWithinRange\n                  }\n                  showWeekNumbers={showWeekNumbers}\n                  showTwoMonths={showTwoMonths}\n                  predefinedRanges={predefinedRanges}\n                />\n              </View>\n            </div>\n          </Popover>\n        )}\n      </I18nProvider>\n    </Field>\n  );\n}\n\n/**\n * A date range field allows users to select a range of dates by selecting a to and a from date with keyboard and/or mouse.\n */\nexport const DateRangeField = forwardRef(_DateRangeField) as <\n  T extends DateValue,\n  P extends string\n>(\n  props: DateRangeFieldProps<T, P> & { ref?: RefObject<HTMLDivElement> }\n) => React.ReactElement;\n"],"names":[],"mappings":"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"}

package/build/esm/Fieldset/src/Fieldset.js

@@ -41,7 +41,8 @@ const Fieldset = (_a) => {
     isRequired,
     necessityIndicator,
     children,
-    size = "large"
+    size = "large",
+    labelPlacement = "above"
   } = _b, props = __objRest(_b, [
     "label",
     "contextualHelp",
@@ -51,17 +52,20 @@ const Fieldset = (_a) => {
     "isRequired",
     "necessityIndicator",
     "children",
-    "size"
+    "size",
+    "labelPlacement"
   ]);
   useThemeCheck();
   const { fieldProps, descriptionProps, errorMessageProps } = useField({
-    isInvalid: !!error
+    isInvalid: !!error,
+    label
   });
   return /* @__PURE__ */ React.createElement(Field, __spreadValues({
     elementType: "fieldset",
     error: !!error,
     isDisabled,
-    size
+    size,
+    labelPlacement
   }, mergeProps(props, fieldProps)), /* @__PURE__ */ React.createElement(Field.Label, {
     elementType: "legend"
   }, /* @__PURE__ */ React.createElement(Label, {

package/build/esm/Fieldset/src/Fieldset.js.map

@@ -1 +1 @@
-{"version":3,"file":"Fieldset.js","sources":["../../../../src/Fieldset/src/Fieldset.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nimport {\n  SapphireStyleProps,\n  useThemeCheck,\n  Field,\n  Label,\n} from '@danske/sapphire-react';\nimport { useField } from '@react-aria/label';\nimport { mergeProps } from '@react-aria/utils';\n\nexport type FieldsetProps = SapphireStyleProps & {\n  /**\n   * A label that describes the groups of fields.\n   * The label is required because a fieldset that is not labelled is not\n   * better than separate labelled fields.\n   */\n  label: ReactNode;\n  /**\n   * Whether the input is disabled.\n   * */\n  isDisabled?: boolean;\n  /**\n   * Whether the input is disabled.\n   * */\n  isRequired?: boolean;\n  /**\n   * Whether the input should render as having an error and an error message.\n   * This also sets the appropriate `aria` attributes on the input.\n   *\n   * A `boolean` sets the error state.\n   * A `string` sets the error state with an additional error message.\n   *\n   * **An error message is strongly recommended because an error should\n   * always have an explanation about how to fix it.**\n   */\n  error?: boolean | string;\n  /**\n   * A note to show below the input.\n   * If the input has an error message, this note will be replaced by that.\n   */\n  note?: ReactNode;\n  /**\n   * A ContextualHelp to render next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * @default 'large'\n   */\n  size?: 'large' | 'medium';\n  /**\n   * To visually indicate if this field is required or optional.\n   * @default false\n   */\n  necessityIndicator?: boolean;\n  /**\n   * Children should be two or more form controls without labels, notes or\n   * error messages.\n   *\n   * We recommend you only use these fields inside: `<TextField>`, `<Select> `,\n   * `<SearchableSelect>`, `<MultiSelect>`, `<SearchableMultiSelect>`,\n   * `<DateField>` or `<DateRangeField>`.\n   *\n   * Example:\n   * ```jsx\n   * <Fieldset label=\"Phone Number\">\n   *   <Select aria-label=\"Country code\" placeholder=\"+00\" width={90}>\n   *     <SelectItem>+40</SelectItem>\n   *     <SelectItem>+42</SelectItem>\n   *     <SelectItem>+45</SelectItem>\n   *   </Select>\n   *   <TextField\n   *     aria-label=\"Phone number\"\n   *     placeholder=\"000-000-0000\"\n   *   ></TextField>\n   * </Fieldset>\n   * ```\n   */\n  children: ReactNode;\n};\n\n/**\n * Sapphire search input field.\n */\nexport const Fieldset = ({\n  label,\n  contextualHelp,\n  note,\n  error,\n  isDisabled,\n  isRequired,\n  necessityIndicator,\n  children,\n  size = 'large',\n  ...props\n}: FieldsetProps) => {\n  useThemeCheck();\n\n  const { fieldProps, descriptionProps, errorMessageProps } = useField({\n    isInvalid: !!error,\n  });\n\n  return (\n    <Field\n      elementType=\"fieldset\"\n      error={!!error}\n      isDisabled={isDisabled}\n      size={size}\n      {...mergeProps(props, fieldProps)}\n    >\n      <Field.Label elementType=\"legend\">\n        <Label\n          size={size}\n          necessityIndicator={\n            isRequired && necessityIndicator\n              ? 'required'\n              : !isRequired && necessityIndicator\n              ? 'optional'\n              : undefined\n          }\n          contextualHelp={contextualHelp}\n        >\n          {label}\n        </Label>\n      </Field.Label>\n      <Field.Control isGroup>{children}</Field.Control>\n      {(error || note) && (\n        <Field.Footer>\n          {error ? (\n            <Field.Note {...errorMessageProps}>{error}</Field.Note>\n          ) : note ? (\n            <Field.Note {...descriptionProps}>{note}</Field.Note>\n          ) : (\n            <></>\n          )}\n        </Field.Footer>\n      )}\n    </Field>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoFa,MAAA,QAAA,GAAW,CAAC,EAWJ,KAAA;AAXI,EACvB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IACA,cAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAO,GAAA,OAAA;AAAA,GATgB,GAAA,EAAA,EAUpB,kBAVoB,EAUpB,EAAA;AAAA,IATH,OAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,oBAAA;AAAA,IACA,UAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AAEA,EAAA,MAAM,EAAE,UAAA,EAAY,gBAAkB,EAAA,iBAAA,EAAA,GAAsB,QAAS,CAAA;AAAA,IACnE,SAAA,EAAW,CAAC,CAAC,KAAA;AAAA,GAAA,CAAA,CAAA;AAGf,EAAA,2CACG,KAAD,EAAA,cAAA,CAAA;AAAA,IACE,WAAY,EAAA,UAAA;AAAA,IACZ,KAAA,EAAO,CAAC,CAAC,KAAA;AAAA,IACT,UAAA;AAAA,IACA,IAAA;AAAA,GAAA,EACI,UAAW,CAAA,KAAA,EAAO,UAEtB,CAAA,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,KAAP,EAAA;AAAA,IAAa,WAAY,EAAA,QAAA;AAAA,GAAA,sCACtB,KAAD,EAAA;AAAA,IACE,IAAA;AAAA,IACA,oBACE,UAAc,IAAA,kBAAA,GACV,aACA,CAAC,UAAA,IAAc,qBACf,UACA,GAAA,KAAA,CAAA;AAAA,IAEN,cAAA;AAAA,GAEC,EAAA,KAAA,CAAA,CAAA,kBAGJ,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,OAAP,EAAA;AAAA,IAAe,OAAO,EAAA,IAAA;AAAA,GAAE,EAAA,QAAA,CAAA,EACtB,UAAS,IACT,qBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,MAAP,EAAA,IAAA,EACG,wBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,MAAP,cAAgB,CAAA,EAAA,EAAA,iBAAA,CAAA,EAAoB,SAClC,IACF,mBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,IAAP,EAAA,cAAA,CAAA,EAAA,EAAgB,mBAAmB,IAEnC,CAAA,mBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"Fieldset.js","sources":["../../../../src/Fieldset/src/Fieldset.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\n\nimport {\n  SapphireStyleProps,\n  useThemeCheck,\n  Field,\n  Label,\n} from '@danske/sapphire-react';\nimport { useField } from '@react-aria/label';\nimport { mergeProps } from '@react-aria/utils';\n\nexport type FieldsetProps = SapphireStyleProps & {\n  /**\n   * A label that describes the groups of fields.\n   * The label is required because a fieldset that is not labelled is not\n   * better than separate labelled fields.\n   */\n  label: ReactNode;\n  /**\n   * Whether the input is disabled.\n   * */\n  isDisabled?: boolean;\n  /**\n   * Whether the input is disabled.\n   * */\n  isRequired?: boolean;\n  /**\n   * Whether the input should render as having an error and an error message.\n   * This also sets the appropriate `aria` attributes on the input.\n   *\n   * A `boolean` sets the error state.\n   * A `string` sets the error state with an additional error message.\n   *\n   * **An error message is strongly recommended because an error should\n   * always have an explanation about how to fix it.**\n   */\n  error?: boolean | string;\n  /**\n   * A note to show below the input.\n   * If the input has an error message, this note will be replaced by that.\n   */\n  note?: ReactNode;\n  /**\n   * A ContextualHelp to render next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * @default 'large'\n   */\n  size?: 'large' | 'medium';\n  /**\n   * To visually indicate if this field is required or optional.\n   * @default false\n   */\n  necessityIndicator?: boolean;\n  /**\n   * Children should be two or more form controls without labels, notes or\n   * error messages.\n   *\n   * We recommend you only use these fields inside: `<TextField>`, `<Select> `,\n   * `<SearchableSelect>`, `<MultiSelect>`, `<SearchableMultiSelect>`,\n   * `<DateField>` or `<DateRangeField>`.\n   *\n   * Example:\n   * ```jsx\n   * <Fieldset label=\"Phone Number\">\n   *   <Select aria-label=\"Country code\" placeholder=\"+00\" width={90}>\n   *     <SelectItem>+40</SelectItem>\n   *     <SelectItem>+42</SelectItem>\n   *     <SelectItem>+45</SelectItem>\n   *   </Select>\n   *   <TextField\n   *     aria-label=\"Phone number\"\n   *     placeholder=\"000-000-0000\"\n   *   ></TextField>\n   * </Fieldset>\n   * ```\n   */\n  children: ReactNode;\n\n  /**\n   * Places the label either above (default) or on the side of the control.\n   * @default 'above'\n   */\n  labelPlacement?: 'side' | 'above';\n};\n\n/**\n * Sapphire search input field.\n */\nexport const Fieldset = ({\n  label,\n  contextualHelp,\n  note,\n  error,\n  isDisabled,\n  isRequired,\n  necessityIndicator,\n  children,\n  size = 'large',\n  labelPlacement = 'above',\n  ...props\n}: FieldsetProps) => {\n  useThemeCheck();\n\n  const { fieldProps, descriptionProps, errorMessageProps } = useField({\n    isInvalid: !!error,\n    label,\n  });\n\n  return (\n    <Field\n      elementType=\"fieldset\"\n      error={!!error}\n      isDisabled={isDisabled}\n      size={size}\n      labelPlacement={labelPlacement}\n      {...mergeProps(props, fieldProps)}\n    >\n      <Field.Label elementType=\"legend\">\n        <Label\n          size={size}\n          necessityIndicator={\n            isRequired && necessityIndicator\n              ? 'required'\n              : !isRequired && necessityIndicator\n              ? 'optional'\n              : undefined\n          }\n          contextualHelp={contextualHelp}\n        >\n          {label}\n        </Label>\n      </Field.Label>\n      <Field.Control isGroup>{children}</Field.Control>\n      {(error || note) && (\n        <Field.Footer>\n          {error ? (\n            <Field.Note {...errorMessageProps}>{error}</Field.Note>\n          ) : note ? (\n            <Field.Note {...descriptionProps}>{note}</Field.Note>\n          ) : (\n            <></>\n          )}\n        </Field.Footer>\n      )}\n    </Field>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Fa,MAAA,QAAA,GAAW,CAAC,EAYJ,KAAA;AAZI,EACvB,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,KAAA;AAAA,IACA,cAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,UAAA;AAAA,IACA,kBAAA;AAAA,IACA,QAAA;AAAA,IACA,IAAO,GAAA,OAAA;AAAA,IACP,cAAiB,GAAA,OAAA;AAAA,GAVM,GAAA,EAAA,EAWpB,kBAXoB,EAWpB,EAAA;AAAA,IAVH,OAAA;AAAA,IACA,gBAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,oBAAA;AAAA,IACA,UAAA;AAAA,IACA,MAAA;AAAA,IACA,gBAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AAEA,EAAA,MAAM,EAAE,UAAA,EAAY,gBAAkB,EAAA,iBAAA,EAAA,GAAsB,QAAS,CAAA;AAAA,IACnE,SAAA,EAAW,CAAC,CAAC,KAAA;AAAA,IACb,KAAA;AAAA,GAAA,CAAA,CAAA;AAGF,EAAA,2CACG,KAAD,EAAA,cAAA,CAAA;AAAA,IACE,WAAY,EAAA,UAAA;AAAA,IACZ,KAAA,EAAO,CAAC,CAAC,KAAA;AAAA,IACT,UAAA;AAAA,IACA,IAAA;AAAA,IACA,cAAA;AAAA,GAAA,EACI,UAAW,CAAA,KAAA,EAAO,UAEtB,CAAA,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,KAAP,EAAA;AAAA,IAAa,WAAY,EAAA,QAAA;AAAA,GAAA,sCACtB,KAAD,EAAA;AAAA,IACE,IAAA;AAAA,IACA,oBACE,UAAc,IAAA,kBAAA,GACV,aACA,CAAC,UAAA,IAAc,qBACf,UACA,GAAA,KAAA,CAAA;AAAA,IAEN,cAAA;AAAA,GAEC,EAAA,KAAA,CAAA,CAAA,kBAGJ,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,OAAP,EAAA;AAAA,IAAe,OAAO,EAAA,IAAA;AAAA,GAAE,EAAA,QAAA,CAAA,EACtB,UAAS,IACT,qBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,MAAP,EAAA,IAAA,EACG,wBACE,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,MAAP,cAAgB,CAAA,EAAA,EAAA,iBAAA,CAAA,EAAoB,SAClC,IACF,mBAAA,KAAA,CAAA,aAAA,CAAC,MAAM,IAAP,EAAA,cAAA,CAAA,EAAA,EAAgB,mBAAmB,IAEnC,CAAA,mBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,CAAA,QAAA,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/NumberField/i18n/da-DK.js

@@ -0,0 +1,9 @@
+var increment = "øge";
+var decrement = "formindske";
+var da = {
+	increment: increment,
+	decrement: decrement
+};
+
+export { decrement, da as default, increment };
+//# sourceMappingURL=da-DK.js.map

package/build/esm/NumberField/i18n/da-DK.js.map

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

package/build/esm/NumberField/i18n/de-DE.js

@@ -0,0 +1,9 @@
+var increment = "erhöhen";
+var decrement = "verringern";
+var de = {
+	increment: increment,
+	decrement: decrement
+};
+
+export { decrement, de as default, increment };
+//# sourceMappingURL=de-DE.js.map

package/build/esm/NumberField/i18n/de-DE.js.map

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

package/build/esm/NumberField/i18n/en-US.js

@@ -0,0 +1,9 @@
+var increment = "Increase";
+var decrement = "Decrease";
+var en = {
+	increment: increment,
+	decrement: decrement
+};
+
+export { decrement, en as default, increment };
+//# sourceMappingURL=en-US.js.map

package/build/esm/NumberField/i18n/en-US.js.map

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

package/build/esm/NumberField/i18n/fi-FI.js

@@ -0,0 +1,9 @@
+var increment = "lisääntyä";
+var decrement = "vähentää";
+var fi = {
+	increment: increment,
+	decrement: decrement
+};
+
+export { decrement, fi as default, increment };
+//# sourceMappingURL=fi-FI.js.map

package/build/esm/NumberField/i18n/fi-FI.js.map

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

package/build/esm/NumberField/i18n/index.js

@@ -0,0 +1,20 @@
+import da from './da-DK.js';
+import en from './en-US.js';
+import de from './de-DE.js';
+import fi from './fi-FI.js';
+import no from './nb-NO.js';
+import pl from './pl-PL.js';
+import se from './sv-SE.js';
+
+var intlMessages = {
+  "da-DK": da,
+  "en-US": en,
+  "de-DE": de,
+  "fi-FI": fi,
+  "nb-NO": no,
+  "pl-PL": pl,
+  "sv-SE": se
+};
+
+export { intlMessages as default };
+//# sourceMappingURL=index.js.map

package/build/esm/NumberField/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../src/NumberField/i18n/index.ts"],"sourcesContent":["import da from './da-DK.json';\nimport en from './en-US.json';\nimport de from './de-DE.json';\nimport fi from './fi-FI.json';\nimport no from './nb-NO.json';\nimport pl from './pl-PL.json';\nimport se from './sv-SE.json';\n\nexport default {\n  'da-DK': da,\n  'en-US': en,\n  'de-DE': de,\n  'fi-FI': fi,\n  'nb-NO': no,\n  'pl-PL': pl,\n  'sv-SE': se,\n};\n"],"names":[],"mappings":";;;;;;;;AAQA,mBAAe;AAAA,EACb,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,EACT,OAAS,EAAA,EAAA;AAAA,CAAA;;;;"}

package/build/esm/NumberField/i18n/nb-NO.js

@@ -0,0 +1,9 @@
+var increment = "øke";
+var decrement = "avta";
+var no = {
+	increment: increment,
+	decrement: decrement
+};
+
+export { decrement, no as default, increment };
+//# sourceMappingURL=nb-NO.js.map

package/build/esm/NumberField/i18n/nb-NO.js.map

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

package/build/esm/NumberField/i18n/pl-PL.js

@@ -0,0 +1,9 @@
+var increment = "zwiększyć";
+var decrement = "zmniejszenie";
+var pl = {
+	increment: increment,
+	decrement: decrement
+};
+
+export { decrement, pl as default, increment };
+//# sourceMappingURL=pl-PL.js.map

package/build/esm/NumberField/i18n/pl-PL.js.map

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

package/build/esm/NumberField/i18n/sv-SE.js

@@ -0,0 +1,9 @@
+var increment = "öka";
+var decrement = "minska";
+var se = {
+	increment: increment,
+	decrement: decrement
+};
+
+export { decrement, se as default, increment };
+//# sourceMappingURL=sv-SE.js.map

package/build/esm/NumberField/i18n/sv-SE.js.map

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

package/build/esm/NumberField/src/NumberField.js

@@ -0,0 +1,149 @@
+import { useObjectRef, mergeProps } from '@react-aria/utils';
+import { createFocusableRef } from '@react-spectrum/utils';
+import React, { forwardRef, useRef, useImperativeHandle } from 'react';
+import { useSapphireNumberField } from './useSapphireNumberField.js';
+import textFieldStyles from '@danske/sapphire-css/components/textField/textField.module.css';
+import { useFocusRing } from '@react-aria/focus';
+import clsx from 'clsx';
+import { useThemeCheck, useSapphireStyleProps, Field, Label } from '@danske/sapphire-react';
+import { useAutofillStyle } from './useAutofillStyle.js';
+import { useMessageFormatter } from '@react-aria/i18n';
+import intlMessages from '../i18n/index.js';
+import { StepperButton } from './StepperButton.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const NumberField = forwardRef(function NumberField2(props, ref) {
+  const _a = props, {
+    label,
+    isDisabled,
+    error,
+    note,
+    isRequired,
+    contextualHelp,
+    prefix,
+    postfix,
+    size = "large",
+    labelPlacement = "above",
+    necessityIndicator = false,
+    alignInputRight,
+    showButtons = false,
+    incrementAriaLabel,
+    decrementAriaLabel
+  } = _a, otherProps = __objRest(_a, [
+    "label",
+    "isDisabled",
+    "error",
+    "note",
+    "isRequired",
+    "contextualHelp",
+    "prefix",
+    "postfix",
+    "size",
+    "labelPlacement",
+    "necessityIndicator",
+    "alignInputRight",
+    "showButtons",
+    "incrementAriaLabel",
+    "decrementAriaLabel"
+  ]);
+  useThemeCheck();
+  const inputRef = useObjectRef(props.inputRef);
+  const formatMessage = useMessageFormatter(intlMessages);
+  const {
+    inputProps,
+    labelProps,
+    incrementButtonProps,
+    decrementButtonProps,
+    descriptionProps,
+    errorMessageProps
+  } = useSapphireNumberField(__spreadProps(__spreadValues({}, props), {
+    incrementAriaLabel: incrementAriaLabel != null ? incrementAriaLabel : formatMessage("increment"),
+    decrementAriaLabel: decrementAriaLabel != null ? decrementAriaLabel : formatMessage("decrement")
+  }), inputRef);
+  const { focusProps, isFocusVisible } = useFocusRing(props);
+  const { styleProps } = useSapphireStyleProps(props);
+  const { autofillStyles, updateStyle } = useAutofillStyle(inputRef);
+  const domRef = useRef(null);
+  useImperativeHandle(ref, () => __spreadProps(__spreadValues({}, createFocusableRef(domRef, inputRef)), {
+    getInputElement() {
+      return inputRef.current;
+    }
+  }));
+  return /* @__PURE__ */ React.createElement(Field, __spreadProps(__spreadValues({}, removeUniqueDOMProps(otherProps)), {
+    ref: domRef,
+    isDisabled,
+    error: !!error,
+    size,
+    labelPlacement
+  }), label && /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, __spreadProps(__spreadValues({}, labelProps), {
+    size,
+    necessityIndicator: isRequired && necessityIndicator ? "required" : !isRequired && necessityIndicator ? "optional" : void 0,
+    contextualHelp
+  }), label)), /* @__PURE__ */ React.createElement(Field.Control, null, /* @__PURE__ */ React.createElement("div", {
+    className: clsx(textFieldStyles["sapphire-text-field"], {
+      [textFieldStyles["is-focus"]]: isFocusVisible,
+      [textFieldStyles["sapphire-text-field--error"]]: error === true || typeof error === "string",
+      [textFieldStyles["sapphire-text-field--medium"]]: size === "medium"
+    }),
+    style: __spreadValues({}, styleProps.style.width ? { width: styleProps.style.width } : {})
+  }, prefix && /* @__PURE__ */ React.createElement("span", {
+    className: clsx(textFieldStyles["sapphire-text-field__prefix"], {
+      [textFieldStyles["sapphire-text-field__prefix--icon"]]: typeof prefix !== "string"
+    })
+  }, prefix), /* @__PURE__ */ React.createElement("input", __spreadProps(__spreadValues({}, mergeProps(inputProps, focusProps, {
+    onChange: updateStyle,
+    onBlur: updateStyle
+  })), {
+    ref: inputRef,
+    className: clsx(textFieldStyles["sapphire-text-field__input"], {
+      [textFieldStyles["sapphire-text-field__input--align-right"]]: !!alignInputRight
+    }),
+    style: autofillStyles
+  })), postfix && /* @__PURE__ */ React.createElement("span", {
+    className: clsx(textFieldStyles["sapphire-text-field__postfix"], {
+      [textFieldStyles["sapphire-text-field__postfix--icon"]]: typeof postfix !== "string"
+    })
+  }, postfix), showButtons && /* @__PURE__ */ React.createElement("div", {
+    className: clsx(textFieldStyles["sapphire-text-field__stepper"])
+  }, /* @__PURE__ */ React.createElement(StepperButton, __spreadValues({
+    variant: "increment",
+    size
+  }, incrementButtonProps)), /* @__PURE__ */ React.createElement(StepperButton, __spreadValues({
+    variant: "decrement",
+    size
+  }, decrementButtonProps))))), (error || note) && /* @__PURE__ */ React.createElement(Field.Footer, null, error ? /* @__PURE__ */ React.createElement(Field.Note, __spreadValues({}, errorMessageProps), error) : note ? /* @__PURE__ */ React.createElement(Field.Note, __spreadValues({}, descriptionProps), note) : /* @__PURE__ */ React.createElement(React.Fragment, null)));
+});
+const removeUniqueDOMProps = (props) => Object.fromEntries(Object.entries(props).filter(([name]) => name !== "id" && !name.startsWith("data-")));
+
+export { NumberField };
+//# sourceMappingURL=NumberField.js.map

package/build/esm/NumberField/src/NumberField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NumberField.js","sources":["../../../../src/NumberField/src/NumberField.tsx"],"sourcesContent":["import { mergeProps, useObjectRef } from '@react-aria/utils';\nimport { createFocusableRef } from '@react-spectrum/utils';\nimport { FocusableRefValue, PressEvents } from '@react-types/shared';\nimport React from 'react';\nimport {\n  ForwardedRef,\n  forwardRef,\n  ReactNode,\n  RefObject,\n  useImperativeHandle,\n  useRef,\n} from 'react';\nimport {\n  SapphireNumberFieldProps,\n  useSapphireNumberField,\n} from './useSapphireNumberField';\nimport textFieldStyles from '@danske/sapphire-css/components/textField/textField.module.css';\nimport { useFocusRing } from '@react-aria/focus';\nimport clsx from 'clsx';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport { useAutofillStyle } from './useAutofillStyle';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport intlMessages from '../i18n';\nimport { StepperButton } from './StepperButton';\n\nexport type NumberFieldRef = FocusableRefValue<\n  HTMLInputElement,\n  HTMLDivElement\n> & {\n  getInputElement(): HTMLInputElement | null;\n};\n\nexport interface NumberFieldProps\n  extends SapphireNumberFieldProps,\n    PressEvents,\n    SapphireStyleProps {\n  prefix?: ReactNode;\n  postfix?: ReactNode;\n  inputRef?: RefObject<HTMLInputElement | null>;\n  /**\n   * A note to show below the input.\n   * If the input has an error message, this note will be replaced by that.\n   */\n  note?: ReactNode;\n  /**\n   * A ContextualHelp to render next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * To visually indicate if this field is required or optional.\n   * @default false\n   */\n  necessityIndicator?: boolean;\n  /**\n   * @default 'large'\n   */\n  size?: 'large' | 'medium';\n  /**\n   * Aligns the text inside the input fields without affecting the positioning of the label of the field.\n   */\n  alignInputRight?: boolean;\n  /**\n   * Places the label either above (default) or on the side of the control.\n   * @default 'above'\n   */\n  labelPlacement?: 'side' | 'above';\n  /**\n   * To show the buttons for incrementing and decrementing the value.\n   * @default false\n   */\n  showButtons?: boolean;\n}\n\nexport const NumberField = forwardRef(function NumberField(\n  props: NumberFieldProps,\n  ref: ForwardedRef<NumberFieldRef>\n) {\n  const {\n    label,\n    isDisabled,\n    error,\n    note,\n    isRequired,\n    contextualHelp,\n    prefix,\n    postfix,\n    size = 'large',\n    labelPlacement = 'above',\n    necessityIndicator = false,\n    alignInputRight,\n    showButtons = false,\n    incrementAriaLabel,\n    decrementAriaLabel,\n    ...otherProps\n  } = props;\n  useThemeCheck();\n  const inputRef = useObjectRef<HTMLInputElement>(props.inputRef);\n  const formatMessage = useMessageFormatter(intlMessages);\n  const {\n    inputProps,\n    labelProps,\n    incrementButtonProps,\n    decrementButtonProps,\n    descriptionProps,\n    errorMessageProps,\n  } = useSapphireNumberField(\n    {\n      ...props,\n      incrementAriaLabel: incrementAriaLabel ?? formatMessage('increment'),\n      decrementAriaLabel: decrementAriaLabel ?? formatMessage('decrement'),\n    },\n    inputRef\n  );\n  const { focusProps, isFocusVisible } = useFocusRing(props);\n  const { styleProps } = useSapphireStyleProps(props);\n  const { autofillStyles, updateStyle } = useAutofillStyle<'input'>(inputRef);\n\n  const domRef = useRef<HTMLDivElement>(null);\n\n  useImperativeHandle(ref, () => ({\n    ...createFocusableRef(domRef, inputRef),\n    /**\n     * (This function is deprecated. Use `inputRef` prop)\n     * @deprecated\n     */\n    getInputElement() {\n      return inputRef.current;\n    },\n  }));\n\n  return (\n    <Field\n      // otherProps contains some of the same props as inputProps. That is\n      // intended, but some DOM props, like \"id\", should not be repeated\n      {...removeUniqueDOMProps(otherProps)}\n      ref={domRef}\n      isDisabled={isDisabled}\n      error={!!error}\n      size={size}\n      labelPlacement={labelPlacement}\n    >\n      {label && (\n        <Field.Label>\n          <Label\n            {...labelProps}\n            size={size}\n            necessityIndicator={\n              isRequired && necessityIndicator\n                ? 'required'\n                : !isRequired && necessityIndicator\n                ? 'optional'\n                : undefined\n            }\n            contextualHelp={contextualHelp}\n          >\n            {label}\n          </Label>\n        </Field.Label>\n      )}\n      <Field.Control>\n        <div\n          className={clsx(textFieldStyles['sapphire-text-field'], {\n            [textFieldStyles['is-focus']]: isFocusVisible,\n            [textFieldStyles['sapphire-text-field--error']]:\n              error === true || typeof error === 'string',\n            [textFieldStyles['sapphire-text-field--medium']]: size === 'medium',\n          })}\n          style={{\n            ...(styleProps.style.width\n              ? { width: styleProps.style.width }\n              : {}),\n          }}\n        >\n          {prefix && (\n            <span\n              className={clsx(textFieldStyles['sapphire-text-field__prefix'], {\n                [textFieldStyles['sapphire-text-field__prefix--icon']]:\n                  typeof prefix !== 'string',\n              })}\n            >\n              {prefix}\n            </span>\n          )}\n          <input\n            {...mergeProps(inputProps, focusProps, {\n              onChange: updateStyle,\n              onBlur: updateStyle,\n            })}\n            ref={inputRef}\n            className={clsx(textFieldStyles['sapphire-text-field__input'], {\n              [textFieldStyles['sapphire-text-field__input--align-right']]:\n                !!alignInputRight,\n            })}\n            style={autofillStyles}\n          />\n          {postfix && (\n            <span\n              className={clsx(textFieldStyles['sapphire-text-field__postfix'], {\n                [textFieldStyles['sapphire-text-field__postfix--icon']]:\n                  typeof postfix !== 'string',\n              })}\n            >\n              {postfix}\n            </span>\n          )}\n          {showButtons && (\n            <div\n              className={clsx(textFieldStyles['sapphire-text-field__stepper'])}\n            >\n              <StepperButton\n                variant=\"increment\"\n                size={size}\n                {...incrementButtonProps}\n              />\n              <StepperButton\n                variant=\"decrement\"\n                size={size}\n                {...decrementButtonProps}\n              />\n            </div>\n          )}\n        </div>\n      </Field.Control>\n      {(error || note) && (\n        <Field.Footer>\n          {error ? (\n            <Field.Note {...errorMessageProps}>{error}</Field.Note>\n          ) : note ? (\n            <Field.Note {...descriptionProps}>{note}</Field.Note>\n          ) : (\n            <></>\n          )}\n        </Field.Footer>\n      )}\n    </Field>\n  );\n});\n\n// Once moved to the core package, this function should be removed and instead consume the one from TextFieldBase.\nconst removeUniqueDOMProps = (props: Record<any, any>): Record<any, any> =>\n  Object.fromEntries(\n    Object.entries(props).filter(\n      ([name]) => name !== 'id' && !name.startsWith('data-')\n    )\n  );\n"],"names":[],"mappings":"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"}

package/build/esm/NumberField/src/StepperButton.js

@@ -0,0 +1,63 @@
+import React, { useRef } from 'react';
+import { useHover } from '@react-aria/interactions';
+import { mergeProps, filterDOMProps } from '@react-aria/utils';
+import clsx from 'clsx';
+import textFieldStyles from '@danske/sapphire-css/components/textField/textField.module.css';
+import { useButton, Icon } from '@danske/sapphire-react';
+import { CaretUp, CaretDown } from '@danske/sapphire-icons/react';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const StepperButton = (_a) => {
+  var _b = _a, {
+    variant,
+    size
+  } = _b, props = __objRest(_b, [
+    "variant",
+    "size"
+  ]);
+  const ref = useRef(null);
+  const { buttonProps, isPressed } = useButton(props, ref);
+  const { hoverProps, isHovered } = useHover({ isDisabled: props.isDisabled });
+  return /* @__PURE__ */ React.createElement("button", __spreadProps(__spreadValues({}, mergeProps(buttonProps, hoverProps, filterDOMProps(props))), {
+    ref,
+    className: clsx(textFieldStyles["sapphire-text-field__stepper-button"], textFieldStyles["js-hover"], {
+      [textFieldStyles["is-active"]]: isPressed,
+      [textFieldStyles["is-hover"]]: isHovered
+    })
+  }), /* @__PURE__ */ React.createElement(Icon, {
+    size: size === "large" ? "m" : "s"
+  }, variant === "increment" ? /* @__PURE__ */ React.createElement(CaretUp, null) : /* @__PURE__ */ React.createElement(CaretDown, null)));
+};
+
+export { StepperButton };
+//# sourceMappingURL=StepperButton.js.map

package/build/esm/NumberField/src/StepperButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"StepperButton.js","sources":["../../../../src/NumberField/src/StepperButton.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { AriaButtonProps } from '@react-aria/button';\nimport { useHover } from '@react-aria/interactions';\nimport { filterDOMProps, mergeProps } from '@react-aria/utils';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/textField/textField.module.css';\nimport { Icon, useButton } from '@danske/sapphire-react';\nimport { CaretUp, CaretDown } from '@danske/sapphire-icons/react';\n\n/**\n * @internal\n */\nexport const StepperButton = ({\n  variant,\n  size,\n  ...props\n}: AriaButtonProps & {\n  variant: 'increment' | 'decrement';\n  size: 'large' | 'medium';\n}) => {\n  const ref = useRef(null);\n  const { buttonProps, isPressed } = useButton(props, ref);\n  const { hoverProps, isHovered } = useHover({ isDisabled: props.isDisabled });\n\n  return (\n    <button\n      {...mergeProps(buttonProps, hoverProps, filterDOMProps(props))}\n      ref={ref}\n      className={clsx(\n        styles['sapphire-text-field__stepper-button'],\n        styles['js-hover'],\n        {\n          [styles['is-active']]: isPressed,\n          [styles['is-hover']]: isHovered,\n        }\n      )}\n    >\n      <Icon size={size === 'large' ? 'm' : 's'}>\n        {variant === 'increment' ? <CaretUp /> : <CaretDown />}\n      </Icon>\n    </button>\n  );\n};\n"],"names":["styles"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAYa,MAAA,aAAA,GAAgB,CAAC,EAOxB,KAAA;AAPwB,EAC5B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,OAAA;AAAA,IACA,IAAA;AAAA,GAF4B,GAAA,EAAA,EAGzB,kBAHyB,EAGzB,EAAA;AAAA,IAFH,SAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAMA,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,EAAE,WAAA,EAAa,SAAc,EAAA,GAAA,SAAA,CAAU,KAAO,EAAA,GAAA,CAAA,CAAA;AACpD,EAAA,MAAM,EAAE,UAAY,EAAA,SAAA,EAAA,GAAc,QAAS,CAAA,EAAE,YAAY,KAAM,CAAA,UAAA,EAAA,CAAA,CAAA;AAE/D,EAAA,2CACG,QAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,WAAW,WAAa,EAAA,UAAA,EAAY,eAAe,KADzD,CAAA,CAAA,CAAA,EAAA;AAAA,IAEE,GAAA;AAAA,IACA,SAAW,EAAA,IAAA,CACTA,eAAO,CAAA,qCAAA,CAAA,EACPA,gBAAO,UACP,CAAA,EAAA;AAAA,MAAA,CACGA,gBAAO,WAAe,CAAA,GAAA,SAAA;AAAA,MAAA,CACtBA,gBAAO,UAAc,CAAA,GAAA,SAAA;AAAA,KAAA,CAAA;AAAA,GAAA,CAAA,sCAIzB,IAAD,EAAA;AAAA,IAAM,IAAA,EAAM,IAAS,KAAA,OAAA,GAAU,GAAM,GAAA,GAAA;AAAA,GAAA,EAClC,YAAY,WAAc,mBAAA,KAAA,CAAA,aAAA,CAAC,OAAD,EAAA,IAAA,CAAA,uCAAe,SAAD,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}