@danske/sapphire-react-lab 0.77.4 → 0.79.1

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/Toast/src/ToastRegion.js

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import { useToastRegion } from '@react-aria/toast';
-import { SapphireOverlayContainer, ThemeRoot } from '@danske/sapphire-react';
+import { useThemeContext, SapphireOverlayContainer, ThemeRoot } from '@danske/sapphire-react';
 import styles from '@danske/sapphire-css/components/toast/toast.module.css';
 import { Toast } from './Toast.js';
 
@@ -39,12 +39,15 @@ const ToastRegion = (_a) => {
   var _b = _a, { state } = _b, props = __objRest(_b, ["state"]);
   const ref = useRef(null);
   const { regionProps } = useToastRegion(props, state, ref);
+  const { overlayZIndex = 100 } = useThemeContext();
   return /* @__PURE__ */ React.createElement(SapphireOverlayContainer, null, /* @__PURE__ */ React.createElement(ThemeRoot, {
     contrast: true
   }, /* @__PURE__ */ React.createElement("div", __spreadProps(__spreadValues({}, regionProps), {
     ref,
     className: styles["sapphire-toast-container"],
-    style: { zIndex: 200 }
+    style: {
+      zIndex: overlayZIndex + 200
+    }
   }), state.visibleToasts.map((toast) => /* @__PURE__ */ React.createElement(Toast, __spreadProps(__spreadValues({}, props), {
     key: toast.key,
     toast,

package/build/esm/Toast/src/ToastRegion.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastRegion.js","sources":["../../../../src/Toast/src/ToastRegion.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { AriaToastRegionProps, useToastRegion } from '@react-aria/toast';\nimport {\n  SapphireOverlayContainer,\n  SapphireStyleProps,\n  ThemeRoot,\n} from '@danske/sapphire-react';\n\nimport styles from '@danske/sapphire-css/components/toast/toast.module.css';\nimport { ToastState } from '@react-stately/toast';\nimport { Toast } from './Toast';\n\nexport type ToastRegionProps<T> = AriaToastRegionProps &\n  SapphireStyleProps & {\n    state: ToastState<T>;\n  };\n\nexport const ToastRegion = <T,>({ state, ...props }: ToastRegionProps<T>) => {\n  const ref = useRef(null);\n  const { regionProps } = useToastRegion(props, state, ref);\n\n  return (\n    <SapphireOverlayContainer>\n      <ThemeRoot contrast>\n        <div\n          {...regionProps}\n          ref={ref}\n          className={styles['sapphire-toast-container']}\n          style={{ zIndex: 200 } /* above overlays from @danske/sapphire-react */}\n        >\n          {state.visibleToasts.map((toast) => (\n            <Toast {...props} key={toast.key} toast={toast} state={state} />\n          ))}\n        </div>\n      </ThemeRoot>\n    </SapphireOverlayContainer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAiBa,MAAA,WAAA,GAAc,CAAK,EAA6C,KAAA;AAA7C,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAF,KAAA,EAAA,GAAA,EAAA,EAAY,KAAZ,GAAA,SAAA,CAAA,EAAA,EAAY,CAAV,OAAA,CAAA,CAAA,CAAA;AAChC,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,EAAE,WAAA,EAAA,GAAgB,cAAe,CAAA,KAAA,EAAO,KAAO,EAAA,GAAA,CAAA,CAAA;AAErD,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAD,IACE,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAD,EAAA;AAAA,IAAW,QAAQ,EAAA,IAAA;AAAA,GACjB,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,WADN,CAAA,EAAA;AAAA,IAEE,GAAA;AAAA,IACA,WAAW,MAAO,CAAA,0BAAA,CAAA;AAAA,IAClB,KAAA,EAAO,EAAE,MAAQ,EAAA,GAAA,EAAA;AAAA,GAEhB,CAAA,EAAA,KAAA,CAAM,cAAc,GAAI,CAAA,CAAC,0BACvB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,iCAAW,KAAX,CAAA,EAAA;AAAA,IAAkB,KAAK,KAAM,CAAA,GAAA;AAAA,IAAK,KAAA;AAAA,IAAc,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}
+{"version":3,"file":"ToastRegion.js","sources":["../../../../src/Toast/src/ToastRegion.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { AriaToastRegionProps, useToastRegion } from '@react-aria/toast';\nimport {\n  SapphireOverlayContainer,\n  SapphireStyleProps,\n  ThemeRoot,\n  useThemeContext,\n} from '@danske/sapphire-react';\n\nimport styles from '@danske/sapphire-css/components/toast/toast.module.css';\nimport { ToastState } from '@react-stately/toast';\nimport { Toast } from './Toast';\n\nexport type ToastRegionProps<T> = AriaToastRegionProps &\n  SapphireStyleProps & {\n    state: ToastState<T>;\n  };\n\nexport const ToastRegion = <T,>({ state, ...props }: ToastRegionProps<T>) => {\n  const ref = useRef(null);\n  const { regionProps } = useToastRegion(props, state, ref);\n  const { overlayZIndex = 100 } = useThemeContext();\n\n  return (\n    <SapphireOverlayContainer>\n      <ThemeRoot contrast>\n        <div\n          {...regionProps}\n          ref={ref}\n          className={styles['sapphire-toast-container']}\n          style={\n            {\n              zIndex: overlayZIndex + 200,\n            } /* above overlays from @danske/sapphire-react */\n          }\n        >\n          {state.visibleToasts.map((toast) => (\n            <Toast {...props} key={toast.key} toast={toast} state={state} />\n          ))}\n        </div>\n      </ThemeRoot>\n    </SapphireOverlayContainer>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAkBa,MAAA,WAAA,GAAc,CAAK,EAA6C,KAAA;AAA7C,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAF,KAAA,EAAA,GAAA,EAAA,EAAY,KAAZ,GAAA,SAAA,CAAA,EAAA,EAAY,CAAV,OAAA,CAAA,CAAA,CAAA;AAChC,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,EAAE,WAAA,EAAA,GAAgB,cAAe,CAAA,KAAA,EAAO,KAAO,EAAA,GAAA,CAAA,CAAA;AACrD,EAAM,MAAA,EAAE,gBAAgB,GAAQ,EAAA,GAAA,eAAA,EAAA,CAAA;AAEhC,EAAA,uBACG,KAAA,CAAA,aAAA,CAAA,wBAAA,EAAD,IACE,kBAAA,KAAA,CAAA,aAAA,CAAC,SAAD,EAAA;AAAA,IAAW,QAAQ,EAAA,IAAA;AAAA,GACjB,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,WADN,CAAA,EAAA;AAAA,IAEE,GAAA;AAAA,IACA,WAAW,MAAO,CAAA,0BAAA,CAAA;AAAA,IAClB,KACE,EAAA;AAAA,MACE,QAAQ,aAAgB,GAAA,GAAA;AAAA,KAAA;AAAA,GAI3B,CAAA,EAAA,KAAA,CAAM,cAAc,GAAI,CAAA,CAAC,0BACvB,KAAA,CAAA,aAAA,CAAA,KAAA,EAAD,iCAAW,KAAX,CAAA,EAAA;AAAA,IAAkB,KAAK,KAAM,CAAA,GAAA;AAAA,IAAK,KAAA;AAAA,IAAc,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/index.d.ts

@@ -263,6 +263,11 @@ declare type DateFieldProps<T extends DateValue$1> = Omit<AriaDatePickerProps<T>
      * @default false
      */
     necessityIndicator?: boolean;
+    /**
+     * Places the label either above (default) or on the side of the control.
+     * @default 'above'
+     */
+    labelPlacement?: 'side' | 'above';
 };
 /**
  * A date field allows users to enter or edit date values using the keyboard
@@ -308,6 +313,11 @@ declare const DateField: <T extends DateValue$1>(props: Omit<AriaDatePickerProps
      * @default false
      */
     necessityIndicator?: boolean | undefined;
+    /**
+     * Places the label either above (default) or on the side of the control.
+     * @default 'above'
+     */
+    labelPlacement?: "above" | "side" | undefined;
 } & {
     ref?: React__default.RefObject<HTMLDivElement> | undefined;
 }) => React__default.ReactElement;
@@ -380,6 +390,11 @@ declare type DateRangeFieldProps<T extends DateValue$1, P extends string> = Omit
      * @default false
      */
     necessityIndicator?: boolean;
+    /**
+     * Places the label either above (default) or on the side of the control.
+     * @default 'above'
+     */
+    labelPlacement?: 'side' | 'above';
 };
 /**
  * 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.
@@ -447,6 +462,11 @@ declare const DateRangeField: <T extends DateValue$1, P extends string>(props: O
      * @default false
      */
     necessityIndicator?: boolean | undefined;
+    /**
+     * Places the label either above (default) or on the side of the control.
+     * @default 'above'
+     */
+    labelPlacement?: "above" | "side" | undefined;
 } & {
     ref?: React__default.RefObject<HTMLDivElement> | undefined;
 }) => React__default.ReactElement;
@@ -721,11 +741,16 @@ declare type FieldsetProps = SapphireStyleProps & {
      * ```
      */
     children: ReactNode;
+    /**
+     * Places the label either above (default) or on the side of the control.
+     * @default 'above'
+     */
+    labelPlacement?: 'side' | 'above';
 };
 /**
  * Sapphire search input field.
  */
-declare const Fieldset: ({ label, contextualHelp, note, error, isDisabled, isRequired, necessityIndicator, children, size, ...props }: FieldsetProps) => React__default.JSX.Element;
+declare const Fieldset: ({ label, contextualHelp, note, error, isDisabled, isRequired, necessityIndicator, children, size, labelPlacement, ...props }: FieldsetProps) => React__default.JSX.Element;
 
 declare type SapphireAvatarProps = SapphireStyleProps & {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-react-lab",
-  "version": "0.77.4",
+  "version": "0.79.1",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
   "exports": {
@@ -19,23 +19,24 @@
   ],
   "scripts": {
     "build": "cross-env ../../node_modules/.bin/rollup --config ../../rollup.config.js",
+    "postpublish": "echo bypassing npx -y send-release-notes@latest --to=6d5d8a75.groupsmail.danskebank.com@emea.teams.ms",
     "prepare": "yarn run build",
     "prepublishOnly": "yarn run build"
   },
   "peerDependencies": {
     "@danske/sapphire-icons": "^2.1.0",
-    "@danske/sapphire-react": "^3.18.5",
+    "@danske/sapphire-react": "^3.27.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@danske/sapphire-icons": "^2.1.0",
-    "@danske/sapphire-react": "^3.18.5",
+    "@danske/sapphire-react": "^3.27.0",
     "@types/react-transition-group": "^4.4.5",
     "cross-env": "^7.0.3"
   },
   "dependencies": {
-    "@danske/sapphire-css": "^26.2.0",
+    "@danske/sapphire-css": "^26.6.0",
     "@internationalized/date": "^3.5.2",
     "@internationalized/string": "^3.2.1",
     "@react-aria/accordion": "^3.0.0-alpha.27",
@@ -68,5 +69,5 @@
     "clsx": "^1.1.1",
     "react-transition-group": "^4.4.5"
   },
-  "gitHead": "ea739bbe8b80507c03c4349f98fa6a4248e2c902"
+  "gitHead": "18d399194b252d505e09222e08996991f1a9d68a"
 }