@danske/sapphire-react-lab 0.106.3 → 0.107.0

package/build/esm/lab/src/TagGroup/src/TagGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagGroup.js","sources":["../../../../../../src/TagGroup/src/TagGroup.tsx"],"sourcesContent":["import React, { Key, ReactNode, useRef } from 'react';\nimport { useTagGroup } from 'react-aria/useTagGroup';\nimport { useListState } from 'react-stately/useListState';\nimport {\n  AriaLabelingProps,\n  CollectionBase,\n  DOMProps,\n} from '@react-types/shared';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/tag/tag.module.css';\n\nimport { Tag } from './Tag';\nimport { TagItemProps } from './TagItem';\n\nexport interface TagGroupProps<T>\n  extends CollectionBase<T>,\n    DOMProps,\n    // TODO when moving to \"core\", use types under `types.ts` instead of plain strings\n    Pick<\n      AriaLabelingProps,\n      'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-details'\n    >,\n    SapphireStyleProps,\n    GlobalDomAttributes {\n  /**\n   * A HelpButton element to place next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * Custom error message help text.\n   */\n  errorMessage?: string;\n  /**\n   * The label of the tag group.\n   */\n  label?: string;\n  /**\n   * Places the label either above (default) or on the left side of tags.\n   * @default 'above'\n   */\n  labelPlacement?: 'above' | 'side';\n  /**\n   * Help text description displayed below tags.\n   */\n  note?: string;\n  /**\n   * onAction handler passed down for actionable Tags, called onPress of tags.\n   */\n  onAction?: (key: Key) => void;\n  /**\n   * Handler that is called when a user deletes a tag.\n   *\n   * @deprecated Use `onRemove` prop on the `TagItem` component instead.\n   * This prop will be removed when this component is moved to \"@danske/sapphire-react\".\n   */\n  onRemove?: (keys: Set<Key>) => void;\n}\n\nexport function TagGroup<T extends object>(\n  props: TagGroupProps<T>\n): React.JSX.Element {\n  useThemeCheck();\n  const {\n    contextualHelp,\n    errorMessage,\n    label: labelText,\n    labelPlacement = 'above',\n    note,\n    onRemove: originalOnRemove,\n    ...otherProps\n  } = props;\n  const ref = useRef(null);\n  const state = useListState(props);\n\n  // TODO when moving to \"core\": Remove `originalOnRemove` from here & remove support for `onRemove` prop.\n  // If an external onRemove handler is provided, use it directly.\n  // Otherwise, call individual onRemove handlers on each tag item.\n  const onRemove = originalOnRemove\n    ? (keys: Set<Key>) => {\n        // eslint-disable-next-line no-console -- It's good to warn about the deprecation, but this needs to be removed alongside `onRemove`\n        console.warn(\n          'The `onRemove` prop is deprecated and will be removed in future versions. Use the `onRemove` prop on the `TagItem` component instead.'\n        );\n        originalOnRemove(keys);\n      }\n    : (keys: Set<Key>) => {\n        // Iterate through the keys and call each item's onRemove handler\n        Array.from(keys).forEach((key) => {\n          const item = state.collection.getItem(key);\n          if (item) {\n            (item.props as TagItemProps<T>).onRemove?.();\n          }\n        });\n      };\n\n  const { descriptionProps, gridProps, labelProps, errorMessageProps } =\n    useTagGroup({ ...props, onRemove }, state, ref);\n\n  return (\n    <Field\n      {...otherProps}\n      labelPlacement={labelPlacement}\n      labelVerticalAlignment=\"top\"\n      noDefaultWidth\n    >\n      <Field.Context\n        descriptionProps={errorMessage ? errorMessageProps : descriptionProps}\n      >\n        {(labelText || contextualHelp) && (\n          <Field.Label>\n            <Label {...labelProps} contextualHelp={contextualHelp}>\n              {labelText}\n            </Label>\n          </Field.Label>\n        )}\n        <Field.Control>\n          <div\n            {...gridProps}\n            ref={ref}\n            className={styles['sapphire-tag-group']}\n          >\n            {Array.from(state.collection).map((item) => (\n              <Tag\n                key={item.key}\n                item={item}\n                state={state}\n                hasError={item.props.hasError}\n                // TODO when moving to \"core\": Remove `originalOnRemove` from here & remove support for `onRemove` prop.\n                // Always allow removing if `onRemove` was provided, for backwards compatibility\n                // Allow removal of the tag item if a removal handler is provided\n                allowsRemoving={!!originalOnRemove || !!item.props.onRemove}\n              />\n            ))}\n          </div>\n        </Field.Control>\n        {(note || errorMessage) &&\n          (errorMessage ? (\n            <Field.Footer>\n              <Field.Note variant=\"error\">{errorMessage}</Field.Note>\n            </Field.Footer>\n          ) : (\n            <Field.Footer>{note}</Field.Footer>\n          ))}\n      </Field.Context>\n    </Field>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAgEO,SAAS,SACd,KAAA,EACmB;AACnB,EAAA,aAAA,EAAc;AACd,EAAA,MAAM;AAAA,IACJ,cAAA;AAAA,IACA,YAAA;AAAA,IACA,KAAA,EAAO,SAAA;AAAA,IACP,cAAA,GAAiB,OAAA;AAAA,IACjB,IAAA;AAAA,IACA,QAAA,EAAU,gBAAA;AAAA,IACV,GAAG;AAAA,GACL,GAAI,KAAA;AACJ,EAAA,MAAM,GAAA,GAAM,OAAO,IAAI,CAAA;AACvB,EAAA,MAAM,KAAA,GAAQ,aAAa,KAAK,CAAA;AAKhC,EAAA,MAAM,QAAA,GAAW,gBAAA,GACb,CAAC,IAAA,KAAmB;AAElB,IAAA,OAAA,CAAQ,IAAA;AAAA,MACN;AAAA,KACF;AACA,IAAA,gBAAA,CAAiB,IAAI,CAAA;AAAA,EACvB,CAAA,GACA,CAAC,IAAA,KAAmB;AAElB,IAAA,KAAA,CAAM,IAAA,CAAK,IAAI,CAAA,CAAE,OAAA,CAAQ,CAAC,GAAA,KAAQ;AAChC,MAAA,MAAM,IAAA,GAAO,KAAA,CAAM,UAAA,CAAW,OAAA,CAAQ,GAAG,CAAA;AACzC,MAAA,IAAI,IAAA,EAAM;AACR,QAAC,IAAA,CAAK,MAA0B,QAAA,IAAW;AAAA,MAC7C;AAAA,IACF,CAAC,CAAA;AAAA,EACH,CAAA;AAEJ,EAAA,MAAM,EAAE,gBAAA,EAAkB,SAAA,EAAW,UAAA,EAAY,iBAAA,EAAkB,GACjE,WAAA,CAAY,EAAE,GAAG,KAAA,EAAO,QAAA,EAAS,EAAG,OAAO,GAAG,CAAA;AAEhD,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,cAAA;AAAA,MACA,sBAAA,EAAuB,KAAA;AAAA,MACvB,cAAA,EAAc;AAAA,KAAA;AAAA,oBAEd,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA,CAAM,OAAA;AAAA,MAAN;AAAA,QACC,gBAAA,EAAkB,eAAe,iBAAA,GAAoB;AAAA,OAAA;AAAA,MAAA,CAEnD,SAAA,IAAa,cAAA,qBACb,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,KAAA,EAAN,IAAA,kBACC,KAAA,CAAA,aAAA,CAAC,KAAA,EAAA,EAAO,GAAG,UAAA,EAAY,cAAA,EAAA,EACpB,SACH,CACF,CAAA;AAAA,sBAEF,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,OAAA,EAAN,IAAA,kBACC,KAAA,CAAA,aAAA;AAAA,QAAC,KAAA;AAAA,QAAA;AAAA,UACE,GAAG,SAAA;AAAA,UACJ,GAAA;AAAA,UACA,SAAA,EAAW,OAAO,oBAAoB;AAAA,SAAA;AAAA,QAErC,MAAM,IAAA,CAAK,KAAA,CAAM,UAAU,CAAA,CAAE,GAAA,CAAI,CAAC,IAAA,qBACjC,KAAA,CAAA,aAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,KAAK,IAAA,CAAK,GAAA;AAAA,YACV,IAAA;AAAA,YACA,KAAA;AAAA,YACA,QAAA,EAAU,KAAK,KAAA,CAAM,QAAA;AAAA,YAIrB,gBAAgB,CAAC,CAAC,oBAAoB,CAAC,CAAC,KAAK,KAAA,CAAM;AAAA;AAAA,SAEtD;AAAA,OAEL,CAAA;AAAA,MAAA,CACE,IAAA,IAAQ,kBACP,YAAA,mBACC,KAAA,CAAA,aAAA,CAAC,MAAM,MAAA,EAAN,IAAA,sCACE,KAAA,CAAM,IAAA,EAAN,EAAW,OAAA,EAAQ,OAAA,EAAA,EAAS,YAAa,CAC5C,CAAA,uCAEC,KAAA,CAAM,MAAA,EAAN,MAAc,IAAK,CAAA;AAAA;AAE1B,GACF;AAEJ;;;;"}

package/build/esm/lab/src/TagGroup/src/TagItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TagItem.js","sources":["../../../../../../src/TagGroup/src/TagItem.tsx"],"sourcesContent":["import { Item } from 'react-stately/Item';\nimport { ItemProps } from '@react-types/shared';\n\nexport interface TagItemProps<T> extends ItemProps<T> {\n  /**\n   * Shows error icon.\n   * @default 'false'\n   */\n  hasError?: boolean;\n\n  /**\n   * This function is called when the tag is being removed, either through\n   * clicking the \"X\" button or by any supported key combination.\n   *\n   * @default false\n   *\n   * @note If the `TagGroup` has `onRemove` prop, that implementation will take\n   * precedence over this function.\n   *\n   * @note If the `TagItem` is disabled, this function will not be called.\n   */\n  onRemove?: () => void;\n}\n\nconst TagItem = Item as <T>(props: TagItemProps<T>) => JSX.Element;\n\nexport { TagItem };\n"],"names":[],"mappings":";;AAwBA,MAAM,OAAA,GAAU;;;;"}

package/build/esm/{TimeField → lab/src/TimeField}/i18n/da-DK.json.js

@@ -1,7 +1,7 @@
 var clear$6 = "Nulstil";
-var da = {
+var da$1 = {
 	clear: clear$6
 };
 
-export { clear$6 as clear, da as default };
+export { clear$6 as clear, da$1 as default };
 //# sourceMappingURL=da-DK.json.js.map

package/build/esm/lab/src/TimeField/i18n/da-DK.json.js.map

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

package/build/esm/{TimeField → lab/src/TimeField}/i18n/de-DE.json.js

@@ -1,7 +1,7 @@
 var clear$4 = "Zurücksetzen";
-var de = {
+var de$1 = {
 	clear: clear$4
 };
 
-export { clear$4 as clear, de as default };
+export { clear$4 as clear, de$1 as default };
 //# sourceMappingURL=de-DE.json.js.map

package/build/esm/lab/src/TimeField/i18n/de-DE.json.js.map

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

package/build/esm/{TimeField → lab/src/TimeField}/i18n/en-US.json.js

@@ -1,7 +1,7 @@
 var clear$5 = "Clear";
-var en = {
+var en$1 = {
 	clear: clear$5
 };
 
-export { clear$5 as clear, en as default };
+export { clear$5 as clear, en$1 as default };
 //# sourceMappingURL=en-US.json.js.map

package/build/esm/lab/src/TimeField/i18n/en-US.json.js.map

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

package/build/esm/{TimeField → lab/src/TimeField}/i18n/fi-FI.json.js

@@ -1,7 +1,7 @@
 var clear$3 = "Nollaa";
-var fi = {
+var fi$1 = {
 	clear: clear$3
 };
 
-export { clear$3 as clear, fi as default };
+export { clear$3 as clear, fi$1 as default };
 //# sourceMappingURL=fi-FI.json.js.map

package/build/esm/lab/src/TimeField/i18n/fi-FI.json.js.map

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

package/build/esm/lab/src/TimeField/i18n/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../../../../src/TimeField/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,qBAAe;AAAA,EACb,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS,EAAA;AAAA,EACT,OAAA,EAAS;AACX,CAAA;;;;"}

package/build/esm/{TimeField → lab/src/TimeField}/i18n/nb-NO.json.js

@@ -1,7 +1,7 @@
 var clear$2 = "Nullstill";
-var no = {
+var no$1 = {
 	clear: clear$2
 };
 
-export { clear$2 as clear, no as default };
+export { clear$2 as clear, no$1 as default };
 //# sourceMappingURL=nb-NO.json.js.map

package/build/esm/lab/src/TimeField/i18n/nb-NO.json.js.map

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

package/build/esm/{TimeField → lab/src/TimeField}/i18n/pl-PL.json.js

@@ -1,7 +1,7 @@
 var clear$1 = "Zresetuj";
-var pl = {
+var pl$1 = {
 	clear: clear$1
 };
 
-export { clear$1 as clear, pl as default };
+export { clear$1 as clear, pl$1 as default };
 //# sourceMappingURL=pl-PL.json.js.map

package/build/esm/lab/src/TimeField/i18n/pl-PL.json.js.map

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

package/build/esm/{TimeField → lab/src/TimeField}/i18n/sv-SE.json.js

@@ -1,7 +1,7 @@
 var clear = "Återställ";
-var se = {
+var se$1 = {
 	clear: clear
 };
 
-export { clear, se as default };
+export { clear, se$1 as default };
 //# sourceMappingURL=sv-SE.json.js.map

package/build/esm/lab/src/TimeField/i18n/sv-SE.json.js.map

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

package/build/esm/lab/src/TimeField/src/TimeField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeField.js","sources":["../../../../../../src/TimeField/src/TimeField.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/dateField/dateField.module.css';\nimport {\n  SapphireStyleProps,\n  useThemeCheck,\n  Field,\n  Label,\n  Icon,\n  IconButton,\n  GlobalDomAttributes,\n} from '@danske/sapphire-react';\nimport { AriaTimeFieldProps, useTimeField } from 'react-aria/useTimeField';\nimport { ForwardedRef, forwardRef, RefObject, ReactNode } from 'react';\nimport { TimeValue } from 'react-aria-components';\nimport { DateSegment as DateSegmentType } from 'react-stately/useDateFieldState';\nimport { useTimeFieldState } from 'react-stately/useTimeFieldState';\nimport { useLocale } from 'react-aria/I18nProvider';\nimport { useMessageFormatter } from '@react-aria/i18n';\nimport { TimeSegment } from './TimeFieldSegment';\nimport { CloseOutline } from '@danske/sapphire-icons/react';\nimport { useObjectRef } from 'react-aria/useObjectRef';\nimport intlMessages from '../i18n';\n\nconst isAnySegmentModified = (segments: DateSegmentType[]) =>\n  segments\n    .map(({ type, isPlaceholder }) => {\n      // type \"literal\" refers to the segment containing the non-editable separator\n      return type !== 'literal' && !isPlaceholder;\n    })\n    .some((isModified) => isModified);\n\nexport type TimeFieldProps<T extends TimeValue> = Pick<\n  AriaTimeFieldProps<T>,\n  // TODO: when this is moved to `core`, we can replace the picked props with `ValueBasePropsKeys`\n  | 'isDisabled'\n  | 'isRequired'\n  | 'isReadOnly'\n  | 'label'\n  | 'value'\n  | 'defaultValue'\n  | 'onChange'\n  | 'onFocus'\n  | 'onBlur'\n  | 'shouldForceLeadingZeros'\n> &\n  SapphireStyleProps &\n  GlobalDomAttributes & {\n    /**\n     * @default 'lg'\n     */\n    size?: 'lg' | 'md';\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     * If it should hide the \"clear\" button when input is not empty.\n     *\n     * @default false\n     */\n    noClearButton?: 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. Can be paired with the \"note\" prop with Field.Note variant=\"error\"\n     * A `ReactNode` 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 | ReactNode;\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     * Use {@Link Field.Note} to render the note.\n     */\n    note?: ReactNode;\n    /**\n     * A HelpButton to render next to the label.\n     */\n    contextualHelp?: ReactNode;\n  };\n\nfunction _TimeField<T extends TimeValue>(\n  {\n    // TODO many other props\n    size = 'lg',\n    noClearButton = false,\n    error,\n    note,\n    contextualHelp,\n    necessityIndicator = false,\n    ...otherProps\n  }: TimeFieldProps<T>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  useThemeCheck();\n\n  const timeFieldRef = useObjectRef(ref);\n  const { locale } = useLocale();\n  const formatMessage = useMessageFormatter(intlMessages);\n\n  const state = useTimeFieldState({\n    ...otherProps,\n    locale,\n    isInvalid: error ? true : undefined,\n  });\n\n  const { fieldProps, labelProps } = useTimeField(\n    { ...otherProps },\n    state,\n    timeFieldRef\n  );\n\n  return (\n    <Field {...otherProps} ref={ref} size={size} noShrink>\n      <Field.Context>\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.Context>\n      <Field.Control>\n        <div\n          className={clsx(styles['sapphire-date-field'], {\n            [styles['sapphire-date-field--error']]: state.isInvalid,\n            [styles['sapphire-date-field--no-clear-button']]: noClearButton,\n            [styles['sapphire-date-field--no-calendar']]: true,\n            [styles['sapphire-date-field--md']]: size === 'md',\n          })}\n        >\n          <div\n            {...fieldProps}\n            className={styles['sapphire-date-field__input']}\n            ref={timeFieldRef}\n          >\n            {state.segments.map((segment, i) => (\n              <TimeSegment key={i} segment={segment} state={state} />\n            ))}\n          </div>\n          {!noClearButton &&\n            !otherProps.isReadOnly &&\n            !otherProps.isDisabled &&\n            isAnySegmentModified(state.segments) && (\n              <IconButton\n                aria-label={formatMessage('clear')}\n                onPress={() =>\n                  state.segments.forEach((segment) =>\n                    state.clearSegment(segment.type)\n                  )\n                }\n                size={size === 'md' ? 'sm' : 'md'}\n                UNSAFE_className={clsx(\n                  styles['sapphire-date-field__button'],\n                  styles['sapphire-date-field__button--clear']\n                )}\n              >\n                <Icon>\n                  <CloseOutline />\n                </Icon>\n              </IconButton>\n            )}\n        </div>\n      </Field.Control>\n      {(!!error && typeof error !== 'boolean') || note ? (\n        <Field.Footer>\n          {!!error && typeof error !== 'boolean' ? (\n            <Field.Note variant=\"error\">{error}</Field.Note>\n          ) : note ? (\n            note\n          ) : null}\n        </Field.Footer>\n      ) : null}\n    </Field>\n  );\n}\n\n/**\n * For collecting a specific time value from users with a segmented, locale-aware input that supports keyboard navigation between hours and minutes.\n */\nexport const TimeField = forwardRef(_TimeField) as <T extends TimeValue>(\n  props: TimeFieldProps<T> & { ref?: RefObject<HTMLDivElement> }\n) => React.ReactElement;\n"],"names":[],"mappings":";;;;;;;;;;;;;AAwBA,MAAM,oBAAA,GAAuB,CAAC,QAAA,KAC5B,QAAA,CACG,IAAI,CAAC,EAAE,IAAA,EAAM,aAAA,EAAc,KAAM;AAEhC,EAAA,OAAO,IAAA,KAAS,aAAa,CAAC,aAAA;AAChC,CAAC,CAAA,CACA,IAAA,CAAK,CAAC,UAAA,KAAe,UAAU,CAAA;AA6DpC,SAAS,UAAA,CACP;AAAA;AAAA,EAEE,IAAA,GAAO,IAAA;AAAA,EACP,aAAA,GAAgB,KAAA;AAAA,EAChB,KAAA;AAAA,EACA,IAAA;AAAA,EACA,cAAA;AAAA,EACA,kBAAA,GAAqB,KAAA;AAAA,EACrB,GAAG;AACL,CAAA,EACA,GAAA,EACA;AACA,EAAA,aAAA,EAAc;AAEd,EAAA,MAAM,YAAA,GAAe,aAAa,GAAG,CAAA;AACrC,EAAA,MAAM,EAAE,MAAA,EAAO,GAAI,SAAA,EAAU;AAC7B,EAAA,MAAM,aAAA,GAAgB,oBAAoB,YAAY,CAAA;AAEtD,EAAA,MAAM,QAAQ,iBAAA,CAAkB;AAAA,IAC9B,GAAG,UAAA;AAAA,IACH,MAAA;AAAA,IACA,SAAA,EAAW,QAAQ,IAAA,GAAO;AAAA,GAC3B,CAAA;AAED,EAAA,MAAM,EAAE,UAAA,EAAY,UAAA,EAAW,GAAI,YAAA;AAAA,IACjC,EAAE,GAAG,UAAA,EAAW;AAAA,IAChB,KAAA;AAAA,IACA;AAAA,GACF;AAEA,EAAA,2CACG,KAAA,EAAA,EAAO,GAAG,UAAA,EAAY,GAAA,EAAU,MAAY,QAAA,EAAQ,IAAA,EAAA,kBACnD,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,SAAN,IAAA,EACE,UAAA,CAAW,yBACV,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,OAAN,IAAA,kBACC,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA;AAAA,MACJ,IAAA;AAAA,MACA,kBAAA,EACE,WAAW,UAAA,IAAc,kBAAA,GACrB,aACA,CAAC,UAAA,CAAW,UAAA,IAAc,kBAAA,GAC1B,UAAA,GACA,MAAA;AAAA,MAEN;AAAA,KAAA;AAAA,IAEC,UAAA,CAAW;AAAA,GAEhB,CAEJ,CAAA,kBACA,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,SAAN,IAAA,kBACC,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,qBAAqB,CAAA,EAAG;AAAA,QAC7C,CAAC,MAAA,CAAO,4BAA4B,CAAC,GAAG,KAAA,CAAM,SAAA;AAAA,QAC9C,CAAC,MAAA,CAAO,sCAAsC,CAAC,GAAG,aAAA;AAAA,QAClD,CAAC,MAAA,CAAO,kCAAkC,CAAC,GAAG,IAAA;AAAA,QAC9C,CAAC,MAAA,CAAO,yBAAyB,CAAC,GAAG,IAAA,KAAS;AAAA,OAC/C;AAAA,KAAA;AAAA,oBAED,KAAA,CAAA,aAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACE,GAAG,UAAA;AAAA,QACJ,SAAA,EAAW,OAAO,4BAA4B,CAAA;AAAA,QAC9C,GAAA,EAAK;AAAA,OAAA;AAAA,MAEJ,KAAA,CAAM,QAAA,CAAS,GAAA,CAAI,CAAC,OAAA,EAAS,CAAA,qBAC5B,KAAA,CAAA,aAAA,CAAC,WAAA,EAAA,EAAY,GAAA,EAAK,CAAA,EAAG,OAAA,EAAkB,KAAA,EAAc,CACtD;AAAA,KACH;AAAA,IACC,CAAC,aAAA,IACA,CAAC,UAAA,CAAW,UAAA,IACZ,CAAC,UAAA,CAAW,UAAA,IACZ,oBAAA,CAAqB,KAAA,CAAM,QAAQ,CAAA,oBACjC,KAAA,CAAA,aAAA;AAAA,MAAC,UAAA;AAAA,MAAA;AAAA,QACC,YAAA,EAAY,cAAc,OAAO,CAAA;AAAA,QACjC,OAAA,EAAS,MACP,KAAA,CAAM,QAAA,CAAS,OAAA;AAAA,UAAQ,CAAC,OAAA,KACtB,KAAA,CAAM,YAAA,CAAa,QAAQ,IAAI;AAAA,SACjC;AAAA,QAEF,IAAA,EAAM,IAAA,KAAS,IAAA,GAAO,IAAA,GAAO,IAAA;AAAA,QAC7B,gBAAA,EAAkB,IAAA;AAAA,UAChB,OAAO,6BAA6B,CAAA;AAAA,UACpC,OAAO,oCAAoC;AAAA;AAC7C,OAAA;AAAA,sBAEA,KAAA,CAAA,aAAA,CAAC,IAAA,EAAA,IAAA,kBACC,KAAA,CAAA,aAAA,CAAC,YAAA,EAAA,IAAa,CAChB;AAAA;AACF,GAGR,CAAA,EACE,CAAC,CAAC,KAAA,IAAS,OAAO,KAAA,KAAU,SAAA,IAAc,IAAA,mBAC1C,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,MAAA,EAAN,MACE,CAAC,CAAC,KAAA,IAAS,OAAO,KAAA,KAAU,SAAA,mBAC3B,KAAA,CAAA,aAAA,CAAC,KAAA,CAAM,MAAN,EAAW,OAAA,EAAQ,OAAA,EAAA,EAAS,KAAM,CAAA,GACjC,IAAA,GACF,IAAA,GACE,IACN,IACE,IACN,CAAA;AAEJ;AAKO,MAAM,SAAA,GAAY,WAAW,UAAU;;;;"}

package/build/esm/lab/src/TimeField/src/TimeFieldSegment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TimeFieldSegment.js","sources":["../../../../../../src/TimeField/src/TimeFieldSegment.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { useDateSegment } from 'react-aria/useDateField';\nimport { DateSegment as DateSegmentType } from 'react-stately/useDateFieldState';\nimport styles from '@danske/sapphire-css/components/dateField/dateField.module.css';\nimport clsx from 'clsx';\nimport { DateSegmentProps } from '@danske/sapphire-react';\n\nexport const TimeSegment = ({ segment, state }: DateSegmentProps) =>\n  segment.type === 'hour' ||\n  segment.type === 'minute' ||\n  segment.type === 'dayPeriod' ? (\n    <EditableSegment segment={segment} state={state}></EditableSegment>\n  ) : (\n    <SeparatorSegment segment={segment} />\n  );\nconst SeparatorSegment = ({ segment }: { segment: DateSegmentType }) => (\n  <span\n    aria-hidden=\"true\"\n    className={clsx(\n      styles['sapphire-date-field__segment'],\n      styles['sapphire-date-field__segment--separator']\n    )}\n  >\n    {segment.text}\n  </span>\n);\n\nconst EditableSegment = ({ segment, state }: DateSegmentProps) => {\n  const ref = useRef(null);\n  const { segmentProps } = useDateSegment(segment, state, ref);\n\n  return (\n    <div\n      {...segmentProps}\n      style={segmentProps.style}\n      ref={ref}\n      className={clsx(styles['sapphire-date-field__segment'], {\n        [styles['sapphire-date-field__segment--filled']]:\n          !segment.isPlaceholder,\n      })}\n    >\n      {segment.text}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;AAOO,MAAM,WAAA,GAAc,CAAC,EAAE,OAAA,EAAS,OAAM,KAC3C,OAAA,CAAQ,IAAA,KAAS,MAAA,IACjB,OAAA,CAAQ,IAAA,KAAS,YACjB,OAAA,CAAQ,IAAA,KAAS,8BACf,KAAA,CAAA,aAAA,CAAC,eAAA,EAAA,EAAgB,SAAkB,KAAA,EAAc,CAAA,mBAEjD,KAAA,CAAA,aAAA,CAAC,gBAAA,EAAA,EAAiB,OAAA,EAAkB;AAExC,MAAM,gBAAA,GAAmB,CAAC,EAAE,OAAA,EAAQ,qBAClC,KAAA,CAAA,aAAA;AAAA,EAAC,MAAA;AAAA,EAAA;AAAA,IACC,aAAA,EAAY,MAAA;AAAA,IACZ,SAAA,EAAW,IAAA;AAAA,MACT,OAAO,8BAA8B,CAAA;AAAA,MACrC,OAAO,yCAAyC;AAAA;AAClD,GAAA;AAAA,EAEC,OAAA,CAAQ;AACX,CAAA;AAGF,MAAM,eAAA,GAAkB,CAAC,EAAE,OAAA,EAAS,OAAM,KAAwB;AAChE,EAAA,MAAM,GAAA,GAAM,OAAO,IAAI,CAAA;AACvB,EAAA,MAAM,EAAE,YAAA,EAAa,GAAI,cAAA,CAAe,OAAA,EAAS,OAAO,GAAG,CAAA;AAE3D,EAAA,uBACE,KAAA,CAAA,aAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACE,GAAG,YAAA;AAAA,MACJ,OAAO,YAAA,CAAa,KAAA;AAAA,MACpB,GAAA;AAAA,MACA,SAAA,EAAW,IAAA,CAAK,MAAA,CAAO,8BAA8B,CAAA,EAAG;AAAA,QACtD,CAAC,MAAA,CAAO,sCAAsC,CAAC,GAC7C,CAAC,OAAA,CAAQ;AAAA,OACZ;AAAA,KAAA;AAAA,IAEA,OAAA,CAAQ;AAAA,GACX;AAEJ,CAAA;;;;"}

package/build/esm/lab/src/TruncateOverflow/src/TruncateOverflow.js

@@ -0,0 +1,46 @@
+import React, { useState, useEffect } from 'react';
+import clsx from 'clsx';
+import { mergeRefs } from 'react-aria/mergeRefs';
+import { mergeProps } from 'react-aria/mergeProps';
+import { useObjectRef } from 'react-aria/useObjectRef';
+import { useSapphireStyleProps, Tooltip } from '@danske/sapphire-react';
+import styles from '@danske/sapphire-css/components/truncate-overflow/truncate-overflow.module.css';
+
+const TruncateOverflow = React.forwardRef(({ children, tooltip: tooltipProp, ...props }, forwardedRef) => {
+  const ref = useObjectRef(forwardedRef);
+  const { styleProps, filteredProps } = useSapphireStyleProps(props);
+  const [needsTooltip, setNeedsTooltip] = useState(false);
+  const [content, setContent] = useState(
+    typeof children === "string" ? children : ""
+  );
+  const tooltip = tooltipProp ?? content;
+  useEffect(() => {
+    const elem = ref.current;
+    if (!elem) return;
+    const hasOverflow = elem.scrollWidth > elem.clientWidth || elem.scrollHeight > elem.clientHeight;
+    setNeedsTooltip(hasOverflow);
+    setContent(
+      typeof children === "string" ? children : elem.textContent?.trim() ?? ""
+    );
+  });
+  return needsTooltip && tooltip ? /* @__PURE__ */ React.createElement(Tooltip, { title: tooltip }, (triggerProps) => /* @__PURE__ */ React.createElement(
+    "span",
+    {
+      ...mergeProps(triggerProps, filteredProps),
+      ref: mergeRefs(
+        ref,
+        triggerProps.ref
+      ),
+      className: clsx(
+        styles["sapphire-truncate-overflow"],
+        styleProps.className
+      ),
+      style: styleProps.style
+    },
+    children
+  )) : /* @__PURE__ */ React.createElement("span", { ref, className: styles["sapphire-truncate-overflow"] }, children);
+});
+TruncateOverflow.displayName = "TruncateOverflow";
+
+export { TruncateOverflow };
+//# sourceMappingURL=TruncateOverflow.js.map

package/build/esm/lab/src/TruncateOverflow/src/TruncateOverflow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TruncateOverflow.js","sources":["../../../../../../src/TruncateOverflow/src/TruncateOverflow.tsx"],"sourcesContent":["import React, { useEffect, useState } from 'react';\nimport clsx from 'clsx';\nimport { mergeRefs } from 'react-aria/mergeRefs';\nimport { mergeProps } from 'react-aria/mergeProps';\nimport { useObjectRef } from 'react-aria/useObjectRef';\nimport {\n  SapphireViewStyleProps,\n  Tooltip,\n  useSapphireStyleProps,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/truncate-overflow/truncate-overflow.module.css';\n\nexport interface TruncateOverflowProps extends SapphireViewStyleProps {\n  /** Content to truncate. */\n  children: React.ReactNode;\n  /**\n   * Overrides the tooltip shown when the text is truncated.\n   * When omitted, the tooltip is derived automatically from the `children` if\n   * it's a string or from element's `textContent` otherwise.\n   */\n  tooltip?: React.ReactNode;\n}\n\n/**\n * Renders its children in a block that clips overflowing text with an ellipsis.\n * When the text is actually truncated, a tooltip is shown on hover with\n * the full content.\n */\nexport const TruncateOverflow = React.forwardRef<\n  HTMLSpanElement,\n  TruncateOverflowProps\n>(({ children, tooltip: tooltipProp, ...props }, forwardedRef) => {\n  const ref = useObjectRef<HTMLSpanElement>(forwardedRef);\n  const { styleProps, filteredProps } = useSapphireStyleProps(props);\n  const [needsTooltip, setNeedsTooltip] = useState(false);\n  const [content, setContent] = useState<string>(\n    typeof children === 'string' ? children : ''\n  );\n  const tooltip = tooltipProp ?? content;\n\n  // Re-check on every render so layout changes (e.g. column resize) are picked up.\n  useEffect(() => {\n    const elem = ref.current;\n    if (!elem) return;\n    const hasOverflow =\n      elem.scrollWidth > elem.clientWidth ||\n      elem.scrollHeight > elem.clientHeight;\n    setNeedsTooltip(hasOverflow);\n    setContent(\n      typeof children === 'string' ? children : elem.textContent?.trim() ?? ''\n    );\n  });\n\n  return needsTooltip && tooltip ? (\n    <Tooltip title={tooltip}>\n      {(triggerProps) => (\n        <span\n          {...mergeProps(triggerProps, filteredProps)}\n          ref={\n            mergeRefs(\n              ref,\n              triggerProps.ref as React.Ref<HTMLSpanElement>\n            ) as React.Ref<HTMLSpanElement>\n          }\n          className={clsx(\n            styles['sapphire-truncate-overflow'],\n            styleProps.className\n          )}\n          style={styleProps.style}\n        >\n          {children}\n        </span>\n      )}\n    </Tooltip>\n  ) : (\n    <span ref={ref} className={styles['sapphire-truncate-overflow']}>\n      {children}\n    </span>\n  );\n});\n\nTruncateOverflow.displayName = 'TruncateOverflow';\n"],"names":[],"mappings":";;;;;;;;AA4BO,MAAM,gBAAA,GAAmB,KAAA,CAAM,UAAA,CAGpC,CAAC,EAAE,QAAA,EAAU,OAAA,EAAS,WAAA,EAAa,GAAG,KAAA,EAAM,EAAG,YAAA,KAAiB;AAChE,EAAA,MAAM,GAAA,GAAM,aAA8B,YAAY,CAAA;AACtD,EAAA,MAAM,EAAE,UAAA,EAAY,aAAA,EAAc,GAAI,sBAAsB,KAAK,CAAA;AACjE,EAAA,MAAM,CAAC,YAAA,EAAc,eAAe,CAAA,GAAI,SAAS,KAAK,CAAA;AACtD,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,QAAA;AAAA,IAC5B,OAAO,QAAA,KAAa,QAAA,GAAW,QAAA,GAAW;AAAA,GAC5C;AACA,EAAA,MAAM,UAAU,WAAA,IAAe,OAAA;AAG/B,EAAA,SAAA,CAAU,MAAM;AACd,IAAA,MAAM,OAAO,GAAA,CAAI,OAAA;AACjB,IAAA,IAAI,CAAC,IAAA,EAAM;AACX,IAAA,MAAM,cACJ,IAAA,CAAK,WAAA,GAAc,KAAK,WAAA,IACxB,IAAA,CAAK,eAAe,IAAA,CAAK,YAAA;AAC3B,IAAA,eAAA,CAAgB,WAAW,CAAA;AAC3B,IAAA,UAAA;AAAA,MACE,OAAO,QAAA,KAAa,QAAA,GAAW,WAAW,IAAA,CAAK,WAAA,EAAa,MAAK,IAAK;AAAA,KACxE;AAAA,EACF,CAAC,CAAA;AAED,EAAA,OAAO,gBAAgB,OAAA,mBACrB,KAAA,CAAA,aAAA,CAAC,WAAQ,KAAA,EAAO,OAAA,EAAA,EACb,CAAC,YAAA,qBACA,KAAA,CAAA,aAAA;AAAA,IAAC,MAAA;AAAA,IAAA;AAAA,MACE,GAAG,UAAA,CAAW,YAAA,EAAc,aAAa,CAAA;AAAA,MAC1C,GAAA,EACE,SAAA;AAAA,QACE,GAAA;AAAA,QACA,YAAA,CAAa;AAAA,OACf;AAAA,MAEF,SAAA,EAAW,IAAA;AAAA,QACT,OAAO,4BAA4B,CAAA;AAAA,QACnC,UAAA,CAAW;AAAA,OACb;AAAA,MACA,OAAO,UAAA,CAAW;AAAA,KAAA;AAAA,IAEjB;AAAA,GAGP,oBAEA,KAAA,CAAA,aAAA,CAAC,MAAA,EAAA,EAAK,KAAU,SAAA,EAAW,MAAA,CAAO,4BAA4B,CAAA,EAAA,EAC3D,QACH,CAAA;AAEJ,CAAC;AAED,gBAAA,CAAiB,WAAA,GAAc,kBAAA;;;;"}