@danske/sapphire-react-lab 0.85.0 → 0.86.0

package/build/esm/LabeledValue/src/LabeledValue.js

@@ -0,0 +1,50 @@
+import React from 'react';
+import clsx from 'clsx';
+import { useField } from '@react-aria/label';
+import { useThemeCheck, Field, Label } from '@danske/sapphire-react';
+import styles from '@danske/sapphire-css/components/labeledValue/labeledValue.module.css';
+
+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));
+function LabeledValue(props) {
+  useThemeCheck();
+  const {
+    children,
+    contextualHelp,
+    label,
+    labelPlacement = "above",
+    size = "large"
+  } = props;
+  const { fieldProps } = useField({ label });
+  return /* @__PURE__ */ React.createElement(Field, __spreadProps(__spreadValues({}, fieldProps), {
+    labelPlacement,
+    size
+  }), /* @__PURE__ */ React.createElement(Field.Label, null, /* @__PURE__ */ React.createElement(Label, {
+    contextualHelp,
+    size
+  }, label)), /* @__PURE__ */ React.createElement(Field.Control, null, /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-labeled-value"], {
+      [styles["sapphire-labeled-value--medium"]]: size === "medium"
+    })
+  }, children)));
+}
+
+export { LabeledValue };
+//# sourceMappingURL=LabeledValue.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LabeledValue.js","sources":["../../../../src/LabeledValue/src/LabeledValue.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport clsx from 'clsx';\nimport { useField } from '@react-aria/label';\nimport type { DOMProps } from '@react-types/shared';\nimport {\n  Field,\n  Label,\n  SapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/labeledValue/labeledValue.module.css';\n\nexport interface LabeledValueProps extends DOMProps, SapphireStyleProps {\n  children?: React.ReactNode;\n  /**\n   * A ContextualHelp element to place next to the label.\n   */\n  contextualHelp?: ReactNode;\n  /**\n   * The content to display as a label.\n   */\n  label: ReactNode;\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   * @default 'large'\n   */\n  size?: 'large' | 'medium';\n}\n\nexport function LabeledValue(props: LabeledValueProps) {\n  useThemeCheck();\n  const {\n    children,\n    contextualHelp,\n    label,\n    labelPlacement = 'above',\n    size = 'large',\n  } = props;\n  const { fieldProps } = useField({ label });\n\n  return (\n    <Field {...fieldProps} labelPlacement={labelPlacement} size={size}>\n      <Field.Label>\n        <Label contextualHelp={contextualHelp} size={size}>\n          {label}\n        </Label>\n      </Field.Label>\n      <Field.Control>\n        <div\n          className={clsx(styles['sapphire-labeled-value'], {\n            [styles['sapphire-labeled-value--medium']]: size === 'medium',\n          })}\n        >\n          {children}\n        </div>\n      </Field.Control>\n    </Field>\n  );\n}\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAiCO,SAAA,YAAA,CAAsB,KAA0B,EAAA;AACrD,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA;AAAA,IACJ,QAAA;AAAA,IACA,cAAA;AAAA,IACA,KAAA;AAAA,IACA,cAAiB,GAAA,OAAA;AAAA,IACjB,IAAO,GAAA,OAAA;AAAA,GACL,GAAA,KAAA,CAAA;AACJ,EAAM,MAAA,EAAE,UAAe,EAAA,GAAA,QAAA,CAAS,EAAE,KAAA,EAAA,CAAA,CAAA;AAElC,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EAAW,UAAX,CAAA,EAAA;AAAA,IAAuB,cAAA;AAAA,IAAgC,IAAA;AAAA,GAAA,CAAA,kBACpD,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,KAAP,EAAA,IAAA,sCACG,KAAD,EAAA;AAAA,IAAO,cAAA;AAAA,IAAgC,IAAA;AAAA,GAAA,EACpC,yBAGJ,KAAA,CAAA,aAAA,CAAA,KAAA,CAAM,OAAP,EAAA,IAAA,sCACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,wBAA2B,CAAA,EAAA;AAAA,MAC/C,CAAA,MAAA,CAAO,oCAAoC,IAAS,KAAA,QAAA;AAAA,KAAA,CAAA;AAAA,GAGtD,EAAA,QAAA,CAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/index.js

@@ -23,5 +23,6 @@ export { AlertDialog } from './AlertDialog/src/AlertDialog.js';
 export { NumberField } from './NumberField/src/NumberField.js';
 export { TagGroup } from './Tag/src/TagGroup.js';
 export { TagItem } from './Tag/src/TagItem.js';
+export { LabeledValue } from './LabeledValue/src/LabeledValue.js';
 export { useLocale } from '@react-aria/i18n';
 //# sourceMappingURL=index.js.map

package/build/esm/index.js.map

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

package/build/index.d.ts

@@ -968,4 +968,26 @@ interface TagItemProps<T> extends ItemProps<T> {
 }
 declare const TagItem: <T>(props: TagItemProps<T>) => JSX.Element;
 
-export { _Accordion as Accordion, AlertDialog, Avatar, Calendar, CalendarView, DateField, DateFieldProps, DateRangeField, DateRangeFieldProps, FeedbackMessage, Fieldset, FieldsetProps, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, NotificationBadge, NotificationBadgeProps, NumberField, NumberFieldProps, NumberFieldRef, PredefinedDateRange, RangeCalendar, SapphireAccordionHeadingProps, SapphireAccordionItemProps, SapphireAccordionProps, SapphireAlertDialogProps, SapphireAvatarProps, SapphireCalendarProps, SapphireFeedbackMessageProps, SapphireFilterDropdownProps, SapphireRangeCalendarProps, SapphireSearchFieldProps, SapphireToggleButtonProps, SearchField, ShowToastFn, ShowToastOptions, Spinner, SpinnerProps, TagGroup, TagGroupProps, TagItem, ToastProvider, ToastProviderProps, ToggleButton, Typography, TypographyBodyProps, TypographyCaptionProps, TypographyHeadingProps, TypographySubheadingProps, isDateOutsideValidRange, isEndDateBeforeStartDate, useShowToast };
+interface LabeledValueProps extends DOMProps, SapphireStyleProps {
+    children?: React__default.ReactNode;
+    /**
+     * A ContextualHelp element to place next to the label.
+     */
+    contextualHelp?: ReactNode;
+    /**
+     * The content to display as a label.
+     */
+    label: ReactNode;
+    /**
+     * Places the label either above (default) or on the left side of tags.
+     * @default 'above'
+     */
+    labelPlacement?: 'above' | 'side';
+    /**
+     * @default 'large'
+     */
+    size?: 'large' | 'medium';
+}
+declare function LabeledValue(props: LabeledValueProps): React__default.JSX.Element;
+
+export { _Accordion as Accordion, AlertDialog, Avatar, Calendar, CalendarView, DateField, DateFieldProps, DateRangeField, DateRangeFieldProps, FeedbackMessage, Fieldset, FieldsetProps, FileDropzone, FileDropzoneProps, FileTrigger, FileTriggerProps, FilterDropdown, LabeledValue, NotificationBadge, NotificationBadgeProps, NumberField, NumberFieldProps, NumberFieldRef, PredefinedDateRange, RangeCalendar, SapphireAccordionHeadingProps, SapphireAccordionItemProps, SapphireAccordionProps, SapphireAlertDialogProps, SapphireAvatarProps, SapphireCalendarProps, SapphireFeedbackMessageProps, SapphireFilterDropdownProps, SapphireRangeCalendarProps, SapphireSearchFieldProps, SapphireToggleButtonProps, SearchField, ShowToastFn, ShowToastOptions, Spinner, SpinnerProps, TagGroup, TagGroupProps, TagItem, ToastProvider, ToastProviderProps, ToggleButton, Typography, TypographyBodyProps, TypographyCaptionProps, TypographyHeadingProps, TypographySubheadingProps, isDateOutsideValidRange, isEndDateBeforeStartDate, useShowToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@danske/sapphire-react-lab",
-  "version": "0.85.0",
+  "version": "0.86.0",
   "license": "SEE LICENSE IN LICENSE",
   "description": "Experimental React components of the Sapphire Design System from Danske Bank A/S",
   "exports": {
@@ -25,18 +25,18 @@
   },
   "peerDependencies": {
     "@danske/sapphire-icons": "^2.1.0",
-    "@danske/sapphire-react": "^3.27.0",
+    "@danske/sapphire-react": "^3.34.3",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
   },
   "devDependencies": {
     "@danske/sapphire-icons": "^2.1.0",
-    "@danske/sapphire-react": "^3.27.0",
+    "@danske/sapphire-react": "^3.34.3",
     "@types/react-transition-group": "^4.4.5",
     "cross-env": "^7.0.3"
   },
   "dependencies": {
-    "@danske/sapphire-css": "^28.3.0",
+    "@danske/sapphire-css": "^28.4.0",
     "@internationalized/date": "^3.5.2",
     "@internationalized/string": "^3.2.1",
     "@react-aria/accordion": "^3.0.0-alpha.29",
@@ -74,5 +74,5 @@
     "clsx": "^1.1.1",
     "react-transition-group": "^4.4.5"
   },
-  "gitHead": "898067929452d335a664e4d5fb5287775d1dbbd0"
+  "gitHead": "546502d6671ee7c2ef9802b577b78cd587ba110c"
 }