@danske/sapphire-react-lab 0.76.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateSegment.js","sources":["../../../../src/DateField/src/DateSegment.tsx"],"sourcesContent":["import React, { useRef } from 'react';\nimport { useDateSegment } from '@react-aria/datepicker';\nimport {\n  DateFieldState,\n  DateSegment as DateSegmentType,\n} from '@react-stately/datepicker';\nimport styles from '@danske/sapphire-css/components/dateField/dateField.module.css';\nimport clsx from 'clsx';\nimport { setPlaceholderLanguage } from './utils/segments';\nimport { useLocale } from '@react-aria/i18n';\n\nexport type DateSegmentProps = {\n  segment: DateSegmentType;\n  state: DateFieldState;\n};\n\nexport const DateSegment = ({ segment, state }: DateSegmentProps) =>\n  segment.type === 'literal' ? (\n    <SeparatorSegment segment={segment} />\n  ) : (\n    <EditableSegment segment={segment} state={state}></EditableSegment>\n  );\n\nconst SeparatorSegment = ({ segment }: { segment: DateSegmentType }) => (\n  <span\n    aria-hidden=\"true\"\n    className={clsx(styles['sapphire-date-field__segment'])}\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  const { locale } = useLocale();\n  const segmentWithTranslatedPlaceholders = setPlaceholderLanguage(\n    segment,\n    locale\n  );\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          !segmentWithTranslatedPlaceholders.isPlaceholder,\n      })}\n    >\n      {segmentWithTranslatedPlaceholders.text}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAgBa,MAAA,WAAA,GAAc,CAAC,EAAE,OAAA,EAAS,YACrC,OAAQ,CAAA,IAAA,KAAS,SACf,mBAAA,KAAA,CAAA,aAAA,CAAC,gBAAD,EAAA;AAAA,EAAkB,OAAA;AAAA,CAAA,CAAA,uCAEjB,eAAD,EAAA;AAAA,EAAiB,OAAA;AAAA,EAAkB,KAAA;AAAA,CAAA,EAAA;AAGvC,MAAM,gBAAmB,GAAA,CAAC,EAAE,OAAA,EAAA,yCACzB,MAAD,EAAA;AAAA,EACE,aAAY,EAAA,MAAA;AAAA,EACZ,SAAA,EAAW,KAAK,MAAO,CAAA,8BAAA,CAAA,CAAA;AAAA,CAAA,EAEtB,OAAQ,CAAA,IAAA,CAAA,CAAA;AAIb,MAAM,eAAkB,GAAA,CAAC,EAAE,OAAA,EAAS,KAA8B,EAAA,KAAA;AAChE,EAAA,MAAM,MAAM,MAAO,CAAA,IAAA,CAAA,CAAA;AACnB,EAAA,MAAM,EAAE,YAAA,EAAA,GAAiB,cAAe,CAAA,OAAA,EAAS,KAAO,EAAA,GAAA,CAAA,CAAA;AACxD,EAAA,MAAM,EAAE,MAAW,EAAA,GAAA,SAAA,EAAA,CAAA;AACnB,EAAM,MAAA,iCAAA,GAAoC,uBACxC,OACA,EAAA,MAAA,CAAA,CAAA;AAGF,EACE,uBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACM,YADN,CAAA,EAAA;AAAA,IAEE,OAAO,YAAa,CAAA,KAAA;AAAA,IACpB,GAAA;AAAA,IACA,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,8BAAiC,CAAA,EAAA;AAAA,MACrD,CAAA,MAAA,CAAO,sCACN,CAAA,GAAA,CAAC,iCAAkC,CAAA,aAAA;AAAA,KAAA,CAAA;AAAA,GAAA,CAAA,EAGtC,iCAAkC,CAAA,IAAA,CAAA,CAAA;AAAA,CAAA;;;;"}

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

@@ -0,0 +1,14 @@
+const isEndDateBeforeStartDate = (dateRange) => dateRange && dateRange.end && dateRange.start && dateRange.end.compare(dateRange.start) < 0;
+const isDateOutsideValidRange = (value, minValue, maxValue) => {
+  if (value) {
+    if (minValue && value.compare(minValue) < 0) {
+      return "before";
+    }
+    if (maxValue && value.compare(maxValue) > 0) {
+      return "after";
+    }
+  }
+};
+
+export { isDateOutsideValidRange, isEndDateBeforeStartDate };
+//# sourceMappingURL=helpers.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sources":["../../../../src/DateField/src/helpers.ts"],"sourcesContent":["/**\n * The helpers in this file are meant for external use.\n * We're exporting these.\n */\nimport { DateValue } from '@react-aria/datepicker';\nimport { RangeValue } from '@react-types/shared';\n\nexport const isEndDateBeforeStartDate = (\n  dateRange?: RangeValue<DateValue> | null\n) =>\n  dateRange &&\n  dateRange.end &&\n  dateRange.start &&\n  dateRange.end.compare(dateRange.start) < 0;\n\nexport const isDateOutsideValidRange = (\n  value?: DateValue | null,\n  minValue?: DateValue | null,\n  maxValue?: DateValue | null\n) => {\n  if (value) {\n    if (minValue && value.compare(minValue) < 0) {\n      return 'before';\n    }\n    if (maxValue && value.compare(maxValue) > 0) {\n      return 'after';\n    }\n  }\n};\n"],"names":[],"mappings":"AAOO,MAAM,wBAA2B,GAAA,CACtC,SAEA,KAAA,SAAA,IACA,SAAU,CAAA,GAAA,IACV,SAAU,CAAA,KAAA,IACV,SAAU,CAAA,GAAA,CAAI,OAAQ,CAAA,SAAA,CAAU,KAAS,CAAA,GAAA,EAAA;AAEpC,MAAM,uBAA0B,GAAA,CACrC,KACA,EAAA,QAAA,EACA,QACG,KAAA;AACH,EAAA,IAAI,KAAO,EAAA;AACT,IAAA,IAAI,QAAY,IAAA,KAAA,CAAM,OAAQ,CAAA,QAAA,CAAA,GAAY,CAAG,EAAA;AAC3C,MAAO,OAAA,QAAA,CAAA;AAAA,KAAA;AAET,IAAA,IAAI,QAAY,IAAA,KAAA,CAAM,OAAQ,CAAA,QAAA,CAAA,GAAY,CAAG,EAAA;AAC3C,MAAO,OAAA,OAAA,CAAA;AAAA,KAAA;AAAA,GAAA;AAAA;;;;"}

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

@@ -0,0 +1,57 @@
+import { useDateRangePickerState as useDateRangePickerState$1 } from '@react-stately/datepicker';
+import { useRef } from 'react';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const useDateRangePickerState = (_a) => {
+  var _b = _a, {
+    onChange
+  } = _b, options = __objRest(_b, [
+    "onChange"
+  ]);
+  const lastPredefinedRange = useRef(void 0);
+  const state = useDateRangePickerState$1(__spreadProps(__spreadValues({}, options), {
+    onChange: (value) => {
+      onChange == null ? void 0 : onChange(value, lastPredefinedRange.current);
+      lastPredefinedRange.current = void 0;
+    }
+  }));
+  return __spreadProps(__spreadValues({}, state), {
+    setDateRange: (value, predefinedRange) => {
+      lastPredefinedRange.current = predefinedRange;
+      state.setDateRange(value);
+    }
+  });
+};
+
+export { useDateRangePickerState };
+//# sourceMappingURL=useDateRangePickerState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useDateRangePickerState.js","sources":["../../../../src/DateField/src/useDateRangePickerState.ts"],"sourcesContent":["import { useDateRangePickerState as originalUseDateRangePickerState } from '@react-stately/datepicker';\nimport type {\n  DateRangePickerStateOptions as OriginalDateRangePickerOptions,\n  DateRangePickerState as OriginalDateRangePickerState,\n} from '@react-stately/datepicker';\nimport { DateValue } from '@internationalized/date';\nimport { useRef } from 'react';\n\ntype OriginalOnChange<T extends DateValue> = NonNullable<\n  OriginalDateRangePickerOptions<T>['onChange']\n>;\n\nexport type DateRangePickerStateOptions<\n  T extends DateValue,\n  P extends string,\n  O extends OriginalOnChange<T> = OriginalOnChange<T>\n> = Omit<OriginalDateRangePickerOptions<T>, 'onChange'> & {\n  // We allow clearing the DateRangeField and thus have to allow a null value\n  // which is currently not part of the DateRangePickerProps type:\n  // https://unpkg.com/browse/@react-types/datepicker@3.5.0/src/index.d.ts#:~:text=ValueBase%3CRangeValue%3CT%3E%20%7C%20null%2C%20RangeValue%3CMappedDateValue%3CT%3E%3E\n  onChange?: (\n    value: Parameters<O>[0] | null,\n    predefinedRange?: P\n  ) => ReturnType<O>;\n};\n\ntype OriginalSetDate = OriginalDateRangePickerState['setDateRange'];\n\nexport type DateRangePickerState<P extends string> = Omit<\n  OriginalDateRangePickerState,\n  'setDateRange'\n> & {\n  setDateRange: (\n    value: Parameters<OriginalSetDate>[0],\n    predefinedRange?: P\n  ) => ReturnType<OriginalSetDate>;\n};\n\n/**\n * A wrapper to allow for the onChange callback to have extra info\n **/\nexport const useDateRangePickerState = <P extends string>({\n  onChange,\n  ...options\n}: DateRangePickerStateOptions<DateValue, P>): DateRangePickerState<P> => {\n  const lastPredefinedRange = useRef<P | undefined>(undefined);\n\n  const state = originalUseDateRangePickerState({\n    ...options,\n    onChange: (value) => {\n      onChange?.(value, lastPredefinedRange.current);\n      lastPredefinedRange.current = undefined;\n    },\n  });\n\n  return {\n    ...state,\n    setDateRange: (value, predefinedRange) => {\n      lastPredefinedRange.current = predefinedRange;\n      state.setDateRange(value);\n    },\n  };\n};\n"],"names":["originalUseDateRangePickerState"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAyCa,MAAA,uBAAA,GAA0B,CAAmB,EAGgB,KAAA;AAHhB,EACxD,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,QAAA;AAAA,GADwD,GAAA,EAAA,EAErD,oBAFqD,EAErD,EAAA;AAAA,IADH,UAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,MAAM,sBAAsB,MAAsB,CAAA,KAAA,CAAA,CAAA,CAAA;AAElD,EAAM,MAAA,KAAA,GAAQA,yBAAgC,CAAA,aAAA,CAAA,cAAA,CAAA,EAAA,EACzC,OADyC,CAAA,EAAA;AAAA,IAE5C,QAAA,EAAU,CAAC,KAAU,KAAA;AACnB,MAAA,QAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,QAAA,CAAW,OAAO,mBAAoB,CAAA,OAAA,CAAA,CAAA;AACtC,MAAA,mBAAA,CAAoB,OAAU,GAAA,KAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA,CAAA,CAAA;AAIlC,EAAA,OAAO,iCACF,KADE,CAAA,EAAA;AAAA,IAEL,YAAA,EAAc,CAAC,KAAA,EAAO,eAAoB,KAAA;AACxC,MAAA,mBAAA,CAAoB,OAAU,GAAA,eAAA,CAAA;AAC9B,MAAA,KAAA,CAAM,YAAa,CAAA,KAAA,CAAA,CAAA;AAAA,KAAA;AAAA,GAAA,CAAA,CAAA;AAAA;;;;"}

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

@@ -0,0 +1,91 @@
+import { LocalizedStringDictionary } from '@internationalized/string';
+
+const placeholders = new LocalizedStringDictionary({
+  ach: { year: "mwaka", month: "dwe", day: "nino" },
+  af: { year: "jjjj", month: "mm", day: "dd" },
+  am: { year: "\u12D3\u12D3\u12D3\u12D3", month: "\u121A\u121C", day: "\u1240\u1240" },
+  an: { year: "aaaa", month: "mm", day: "dd" },
+  ar: { year: "\u0633\u0646\u0629", month: "\u0634\u0647\u0631", day: "\u064A\u0648\u0645" },
+  ast: { year: "aaaa", month: "mm", day: "dd" },
+  az: { year: "iiii", month: "aa", day: "gg" },
+  be: { year: "\u0433\u0433\u0433\u0433", month: "\u043C\u043C", day: "\u0434\u0434" },
+  bg: { year: "\u0433\u0433\u0433\u0433", month: "\u043C\u043C", day: "\u0434\u0434" },
+  bn: { year: "yyyy", month: "\u09AE\u09BF\u09AE\u09BF", day: "dd" },
+  br: { year: "bbbb", month: "mm", day: "dd" },
+  bs: { year: "gggg", month: "mm", day: "dd" },
+  ca: { year: "aaaa", month: "mm", day: "dd" },
+  cak: { year: "jjjj", month: "ii", day: "q'q'" },
+  ckb: { year: "\u0633\u0627\u06B5", month: "\u0645\u0627\u0646\u06AF", day: "\u0695\u06C6\u0698" },
+  cs: { year: "rrrr", month: "mm", day: "dd" },
+  cy: { year: "bbbb", month: "mm", day: "dd" },
+  da: { year: "\xE5\xE5\xE5\xE5", month: "mm", day: "dd" },
+  de: { year: "jjjj", month: "mm", day: "tt" },
+  dsb: { year: "llll", month: "mm", day: "\u017A\u017A" },
+  el: { year: "\u03B5\u03B5\u03B5\u03B5", month: "\u03BC\u03BC", day: "\u03B7\u03B7" },
+  en: { year: "yyyy", month: "mm", day: "dd" },
+  eo: { year: "jjjj", month: "mm", day: "tt" },
+  es: { year: "aaaa", month: "mm", day: "dd" },
+  et: { year: "aaaa", month: "kk", day: "pp" },
+  eu: { year: "uuuu", month: "hh", day: "ee" },
+  fa: { year: "\u0633\u0627\u0644", month: "\u0645\u0627\u0647", day: "\u0631\u0648\u0632" },
+  ff: { year: "hhhh", month: "ll", day: "\xF1\xF1" },
+  fi: { year: "vvvv", month: "kk", day: "pp" },
+  fr: { year: "aaaa", month: "mm", day: "jj" },
+  fy: { year: "jjjj", month: "mm", day: "dd" },
+  ga: { year: "bbbb", month: "mm", day: "ll" },
+  gd: { year: "bbbb", month: "mm", day: "ll" },
+  gl: { year: "aaaa", month: "mm", day: "dd" },
+  he: { year: "\u05E9\u05E0\u05D4", month: "\u05D7\u05D5\u05D3\u05E9", day: "\u05D9\u05D5\u05DD" },
+  hr: { year: "gggg", month: "mm", day: "dd" },
+  hsb: { year: "llll", month: "mm", day: "dd" },
+  hu: { year: "\xE9\xE9\xE9\xE9", month: "hh", day: "nn" },
+  ia: { year: "aaaa", month: "mm", day: "dd" },
+  id: { year: "tttt", month: "bb", day: "hh" },
+  it: { year: "aaaa", month: "mm", day: "gg" },
+  ja: { year: " \u5E74 ", month: "\u6708", day: "\u65E5" },
+  ka: { year: "\u10EC\u10EC\u10EC\u10EC", month: "\u10D7\u10D7", day: "\u10E0\u10E0" },
+  kk: { year: "\u0436\u0436\u0436\u0436", month: "\u0430\u0430", day: "\u043A\u043A" },
+  kn: { year: "\u0CB5\u0CB5\u0CB5\u0CB5", month: "\u0CAE\u0CBF\u0CAE\u0CC0", day: "\u0CA6\u0CBF\u0CA6\u0CBF" },
+  ko: { year: "\uC5F0\uB3C4", month: "\uC6D4", day: "\uC77C" },
+  lb: { year: "jjjj", month: "mm", day: "dd" },
+  lo: { year: "\u0E9B\u0E9B\u0E9B\u0E9B", month: "\u0E94\u0E94", day: "\u0EA7\u0EA7" },
+  lt: { year: "mmmm", month: "mm", day: "dd" },
+  lv: { year: "gggg", month: "mm", day: "dd" },
+  meh: { year: "aaaa", month: "mm", day: "dd" },
+  ml: { year: "\u0D35\u0D7C\u0D37\u0D02", month: "\u0D2E\u0D3E\u0D38\u0D02", day: "\u0D24\u0D40\u0D2F\u0D24\u0D3F" },
+  ms: { year: "tttt", month: "mm", day: "hh" },
+  nl: { year: "jjjj", month: "mm", day: "dd" },
+  nn: { year: "\xE5\xE5\xE5\xE5", month: "mm", day: "dd" },
+  no: { year: "\xE5\xE5\xE5\xE5", month: "mm", day: "dd" },
+  oc: { year: "aaaa", month: "mm", day: "jj" },
+  pl: { year: "rrrr", month: "mm", day: "dd" },
+  pt: { year: "aaaa", month: "mm", day: "dd" },
+  rm: { year: "oooo", month: "mm", day: "dd" },
+  ro: { year: "aaaa", month: "ll", day: "zz" },
+  ru: { year: "\u0433\u0433\u0433\u0433", month: "\u043C\u043C", day: "\u0434\u0434" },
+  sc: { year: "aaaa", month: "mm", day: "dd" },
+  scn: { year: "aaaa", month: "mm", day: "jj" },
+  sk: { year: "rrrr", month: "mm", day: "dd" },
+  sl: { year: "llll", month: "mm", day: "dd" },
+  sr: { year: "\u0433\u0433\u0433\u0433", month: "\u043C\u043C", day: "\u0434\u0434" },
+  sv: { year: "\xE5\xE5\xE5\xE5", month: "mm", day: "dd" },
+  szl: { year: "rrrr", month: "mm", day: "dd" },
+  tg: { year: "\u0441\u0441\u0441\u0441", month: "\u043C\u043C", day: "\u0440\u0440" },
+  th: { year: "\u0E1B\u0E1B\u0E1B\u0E1B", month: "\u0E14\u0E14", day: "\u0E27\u0E27" },
+  tr: { year: "yyyy", month: "aa", day: "gg" },
+  uk: { year: "\u0440\u0440\u0440\u0440", month: "\u043C\u043C", day: "\u0434\u0434" },
+  "zh-CN": { year: "\u5E74", month: "\u6708", day: "\u65E5" },
+  "zh-TW": { year: "\u5E74", month: "\u6708", day: "\u65E5" }
+}, "en");
+function getPlaceholder(field, value, locale) {
+  if (field === "era" || field === "dayPeriod") {
+    return value;
+  }
+  if (field === "year" || field === "month" || field === "day") {
+    return placeholders.getStringForLocale(field, locale);
+  }
+  return "\u2013\u2013";
+}
+
+export { getPlaceholder };
+//# sourceMappingURL=placeholders.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"placeholders.js","sources":["../../../../../src/DateField/src/utils/placeholders.ts"],"sourcesContent":["/**\n * This file is a copy of this private file from react-stately.\n * https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/datepicker/src/placeholders.ts\n *\n * It represents the placeholder values used in date and date range\n * fields when they are empty. The placeholders from here are then\n * formatted according to the locale.\n *\n * We need this because we have a requirement not supported by react-aria.\n * We need to be able to format a date based on a locale which is different\n * than the app's locale. This means that our placeholders can be in \"danish\"\n * while the actual date format is in \"swedish\".\n *\n * Examples:\n *  - UI locale: sv-SE. Date format locale: sv-SE: 'ÅÅÅÅ-MM-DD'.\n *  - UI locale: en. Date formate locale: sv-SE: 'YYYY-MM-DD'\n *  - UI locale: sv-SE. Date format locale: en-US: 'MM/DD/ÅÅÅÅ'\n *\n * This is arguably counter-intuitive. But sapphire is used in some apps\n * where the user can decide the language and the date format separately.\n * It is up to the app to allow sane combinations.\n */\n\nimport { LocalizedStringDictionary } from '@internationalized/string';\n\n// These placeholders are based on the strings used by the <input type=\"date\">\n// implementations in Chrome and Firefox. Additional languages are supported\n// here than React Spectrum's typical translations.\nconst placeholders = new LocalizedStringDictionary(\n  {\n    ach: { year: 'mwaka', month: 'dwe', day: 'nino' },\n    af: { year: 'jjjj', month: 'mm', day: 'dd' },\n    am: { year: 'ዓዓዓዓ', month: 'ሚሜ', day: 'ቀቀ' },\n    an: { year: 'aaaa', month: 'mm', day: 'dd' },\n    ar: { year: 'سنة', month: 'شهر', day: 'يوم' },\n    ast: { year: 'aaaa', month: 'mm', day: 'dd' },\n    az: { year: 'iiii', month: 'aa', day: 'gg' },\n    be: { year: 'гггг', month: 'мм', day: 'дд' },\n    bg: { year: 'гггг', month: 'мм', day: 'дд' },\n    bn: { year: 'yyyy', month: 'মিমি', day: 'dd' },\n    br: { year: 'bbbb', month: 'mm', day: 'dd' },\n    bs: { year: 'gggg', month: 'mm', day: 'dd' },\n    ca: { year: 'aaaa', month: 'mm', day: 'dd' },\n    cak: { year: 'jjjj', month: 'ii', day: \"q'q'\" },\n    ckb: { year: 'ساڵ', month: 'مانگ', day: 'ڕۆژ' },\n    cs: { year: 'rrrr', month: 'mm', day: 'dd' },\n    cy: { year: 'bbbb', month: 'mm', day: 'dd' },\n    da: { year: 'åååå', month: 'mm', day: 'dd' },\n    de: { year: 'jjjj', month: 'mm', day: 'tt' },\n    dsb: { year: 'llll', month: 'mm', day: 'źź' },\n    el: { year: 'εεεε', month: 'μμ', day: 'ηη' },\n    en: { year: 'yyyy', month: 'mm', day: 'dd' },\n    eo: { year: 'jjjj', month: 'mm', day: 'tt' },\n    es: { year: 'aaaa', month: 'mm', day: 'dd' },\n    et: { year: 'aaaa', month: 'kk', day: 'pp' },\n    eu: { year: 'uuuu', month: 'hh', day: 'ee' },\n    fa: { year: 'سال', month: 'ماه', day: 'روز' },\n    ff: { year: 'hhhh', month: 'll', day: 'ññ' },\n    fi: { year: 'vvvv', month: 'kk', day: 'pp' },\n    fr: { year: 'aaaa', month: 'mm', day: 'jj' },\n    fy: { year: 'jjjj', month: 'mm', day: 'dd' },\n    ga: { year: 'bbbb', month: 'mm', day: 'll' },\n    gd: { year: 'bbbb', month: 'mm', day: 'll' },\n    gl: { year: 'aaaa', month: 'mm', day: 'dd' },\n    he: { year: 'שנה', month: 'חודש', day: 'יום' },\n    hr: { year: 'gggg', month: 'mm', day: 'dd' },\n    hsb: { year: 'llll', month: 'mm', day: 'dd' },\n    hu: { year: 'éééé', month: 'hh', day: 'nn' },\n    ia: { year: 'aaaa', month: 'mm', day: 'dd' },\n    id: { year: 'tttt', month: 'bb', day: 'hh' },\n    it: { year: 'aaaa', month: 'mm', day: 'gg' },\n    ja: { year: ' 年 ', month: '月', day: '日' },\n    ka: { year: 'წწწწ', month: 'თთ', day: 'რრ' },\n    kk: { year: 'жжжж', month: 'аа', day: 'кк' },\n    kn: { year: 'ವವವವ', month: 'ಮಿಮೀ', day: 'ದಿದಿ' },\n    ko: { year: '연도', month: '월', day: '일' },\n    lb: { year: 'jjjj', month: 'mm', day: 'dd' },\n    lo: { year: 'ປປປປ', month: 'ດດ', day: 'ວວ' },\n    lt: { year: 'mmmm', month: 'mm', day: 'dd' },\n    lv: { year: 'gggg', month: 'mm', day: 'dd' },\n    meh: { year: 'aaaa', month: 'mm', day: 'dd' },\n    ml: { year: 'വർഷം', month: 'മാസം', day: 'തീയതി' },\n    ms: { year: 'tttt', month: 'mm', day: 'hh' },\n    nl: { year: 'jjjj', month: 'mm', day: 'dd' },\n    nn: { year: 'åååå', month: 'mm', day: 'dd' },\n    no: { year: 'åååå', month: 'mm', day: 'dd' },\n    oc: { year: 'aaaa', month: 'mm', day: 'jj' },\n    pl: { year: 'rrrr', month: 'mm', day: 'dd' },\n    pt: { year: 'aaaa', month: 'mm', day: 'dd' },\n    rm: { year: 'oooo', month: 'mm', day: 'dd' },\n    ro: { year: 'aaaa', month: 'll', day: 'zz' },\n    ru: { year: 'гггг', month: 'мм', day: 'дд' },\n    sc: { year: 'aaaa', month: 'mm', day: 'dd' },\n    scn: { year: 'aaaa', month: 'mm', day: 'jj' },\n    sk: { year: 'rrrr', month: 'mm', day: 'dd' },\n    sl: { year: 'llll', month: 'mm', day: 'dd' },\n    sr: { year: 'гггг', month: 'мм', day: 'дд' },\n    sv: { year: 'åååå', month: 'mm', day: 'dd' },\n    szl: { year: 'rrrr', month: 'mm', day: 'dd' },\n    tg: { year: 'сссс', month: 'мм', day: 'рр' },\n    th: { year: 'ปปปป', month: 'ดด', day: 'วว' },\n    tr: { year: 'yyyy', month: 'aa', day: 'gg' },\n    uk: { year: 'рррр', month: 'мм', day: 'дд' },\n    'zh-CN': { year: '年', month: '月', day: '日' },\n    'zh-TW': { year: '年', month: '月', day: '日' },\n  },\n  'en'\n);\n\nexport function getPlaceholder(field: string, value: string, locale: string) {\n  // Use the actual placeholder value for the era and day period fields.\n  if (field === 'era' || field === 'dayPeriod') {\n    return value;\n  }\n\n  if (field === 'year' || field === 'month' || field === 'day') {\n    return placeholders.getStringForLocale(field, locale);\n  }\n\n  // For time fields (e.g. hour, minute, etc.), use two dashes as the placeholder.\n  return '––';\n}\n"],"names":[],"mappings":";;AA4BA,MAAM,YAAA,GAAe,IAAI,yBACvB,CAAA;AAAA,EACE,KAAK,EAAE,IAAA,EAAM,OAAS,EAAA,KAAA,EAAO,OAAO,GAAK,EAAA,MAAA,EAAA;AAAA,EACzC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,0BAAQ,EAAA,KAAA,EAAO,gBAAM,GAAK,EAAA,cAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,oBAAO,EAAA,KAAA,EAAO,sBAAO,GAAK,EAAA,oBAAA,EAAA;AAAA,EACtC,KAAK,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACvC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,0BAAQ,EAAA,KAAA,EAAO,gBAAM,GAAK,EAAA,cAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,0BAAQ,EAAA,KAAA,EAAO,gBAAM,GAAK,EAAA,cAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,4BAAQ,GAAK,EAAA,IAAA,EAAA;AAAA,EACxC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,KAAK,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,MAAA,EAAA;AAAA,EACvC,KAAK,EAAE,IAAA,EAAM,oBAAO,EAAA,KAAA,EAAO,4BAAQ,GAAK,EAAA,oBAAA,EAAA;AAAA,EACxC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,kBAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,KAAK,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,cAAA,EAAA;AAAA,EACvC,IAAI,EAAE,IAAA,EAAM,0BAAQ,EAAA,KAAA,EAAO,gBAAM,GAAK,EAAA,cAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,oBAAO,EAAA,KAAA,EAAO,sBAAO,GAAK,EAAA,oBAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,UAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,oBAAO,EAAA,KAAA,EAAO,4BAAQ,GAAK,EAAA,oBAAA,EAAA;AAAA,EACvC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,KAAK,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACvC,IAAI,EAAE,IAAA,EAAM,kBAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,UAAO,EAAA,KAAA,EAAO,UAAK,GAAK,EAAA,QAAA,EAAA;AAAA,EACpC,IAAI,EAAE,IAAA,EAAM,0BAAQ,EAAA,KAAA,EAAO,gBAAM,GAAK,EAAA,cAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,0BAAQ,EAAA,KAAA,EAAO,gBAAM,GAAK,EAAA,cAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,0BAAQ,EAAA,KAAA,EAAO,4BAAQ,GAAK,EAAA,0BAAA,EAAA;AAAA,EACxC,IAAI,EAAE,IAAA,EAAM,cAAM,EAAA,KAAA,EAAO,UAAK,GAAK,EAAA,QAAA,EAAA;AAAA,EACnC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,0BAAQ,EAAA,KAAA,EAAO,gBAAM,GAAK,EAAA,cAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,KAAK,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACvC,IAAI,EAAE,IAAA,EAAM,0BAAQ,EAAA,KAAA,EAAO,4BAAQ,GAAK,EAAA,gCAAA,EAAA;AAAA,EACxC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,kBAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,kBAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,0BAAQ,EAAA,KAAA,EAAO,gBAAM,GAAK,EAAA,cAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,KAAK,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACvC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,0BAAQ,EAAA,KAAA,EAAO,gBAAM,GAAK,EAAA,cAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,kBAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,KAAK,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACvC,IAAI,EAAE,IAAA,EAAM,0BAAQ,EAAA,KAAA,EAAO,gBAAM,GAAK,EAAA,cAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,0BAAQ,EAAA,KAAA,EAAO,gBAAM,GAAK,EAAA,cAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,MAAQ,EAAA,KAAA,EAAO,MAAM,GAAK,EAAA,IAAA,EAAA;AAAA,EACtC,IAAI,EAAE,IAAA,EAAM,0BAAQ,EAAA,KAAA,EAAO,gBAAM,GAAK,EAAA,cAAA,EAAA;AAAA,EACtC,SAAS,EAAE,IAAA,EAAM,QAAK,EAAA,KAAA,EAAO,UAAK,GAAK,EAAA,QAAA,EAAA;AAAA,EACvC,SAAS,EAAE,IAAA,EAAM,QAAK,EAAA,KAAA,EAAO,UAAK,GAAK,EAAA,QAAA,EAAA;AAAA,CAEzC,EAAA,IAAA,CAAA,CAAA;AAG6B,SAAA,cAAA,CAAA,KAAA,EAAe,OAAe,MAAgB,EAAA;AAE3E,EAAI,IAAA,KAAA,KAAU,KAAS,IAAA,KAAA,KAAU,WAAa,EAAA;AAC5C,IAAO,OAAA,KAAA,CAAA;AAAA,GAAA;AAGT,EAAA,IAAI,KAAU,KAAA,MAAA,IAAU,KAAU,KAAA,OAAA,IAAW,UAAU,KAAO,EAAA;AAC5D,IAAO,OAAA,YAAA,CAAa,mBAAmB,KAAO,EAAA,MAAA,CAAA,CAAA;AAAA,GAAA;AAIhD,EAAO,OAAA,cAAA,CAAA;AAAA;;;;"}

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

@@ -0,0 +1,46 @@
+import { getPlaceholder } from './placeholders.js';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+const segmentTypes = [
+  "day",
+  "hour",
+  "minute",
+  "second",
+  "era",
+  "year",
+  "month",
+  "dayPeriod",
+  "literal",
+  "timeZoneName"
+];
+const isAnyModified = (segments) => segments.map(({ type, isPlaceholder }) => {
+  return type !== "literal" && !isPlaceholder;
+}).some((isModified) => isModified);
+const setPlaceholderLanguage = (segment, locale) => {
+  const placeholder = getPlaceholder(segment.type, segment.text, locale);
+  return __spreadProps(__spreadValues({}, segment), {
+    text: segment.isPlaceholder ? placeholder : segment.text,
+    placeholder
+  });
+};
+
+export { isAnyModified, segmentTypes, setPlaceholderLanguage };
+//# sourceMappingURL=segments.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"segments.js","sources":["../../../../../src/DateField/src/utils/segments.ts"],"sourcesContent":["/**\n * The helpers in this file are meant for internal use.\n */\nimport {\n  SegmentType,\n  DateSegment as DateSegmentType,\n} from '@react-stately/datepicker';\nimport { getPlaceholder } from './placeholders';\n\n/**\n * The interface from `useDateFieldState` to clear the input is not ideal. We\n * have to manually clear each segment type.\n */\nexport const segmentTypes: SegmentType[] = [\n  'day',\n  'hour',\n  'minute',\n  'second',\n  'era',\n  'year',\n  'month',\n  'dayPeriod',\n  'literal',\n  'timeZoneName',\n];\n\nexport const isAnyModified = (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\n/**\n * Check out the `getPlaceholder` function's description for\n * an explanation.\n */\nexport const setPlaceholderLanguage = (\n  segment: DateSegmentType,\n  locale: string\n): DateSegmentType => {\n  const placeholder = getPlaceholder(segment.type, segment.text, locale);\n\n  return {\n    ...segment,\n    text: segment.isPlaceholder ? placeholder : segment.text,\n    placeholder,\n  };\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAaO,MAAM,YAA8B,GAAA;AAAA,EACzC,KAAA;AAAA,EACA,MAAA;AAAA,EACA,QAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,SAAA;AAAA,EACA,cAAA;AAAA,EAAA;AAGW,MAAA,aAAA,GAAgB,CAAC,QAC5B,KAAA,QAAA,CACG,IAAI,CAAC,EAAE,MAAM,aAAoB,EAAA,KAAA;AAEhC,EAAO,OAAA,IAAA,KAAS,aAAa,CAAC,aAAA,CAAA;AAAA,CAE/B,CAAA,CAAA,IAAA,CAAK,CAAC,UAAe,KAAA,UAAA,EAAA;AAMb,MAAA,sBAAA,GAAyB,CACpC,OAAA,EACA,MACoB,KAAA;AACpB,EAAA,MAAM,WAAc,GAAA,cAAA,CAAe,OAAQ,CAAA,IAAA,EAAM,QAAQ,IAAM,EAAA,MAAA,CAAA,CAAA;AAE/D,EAAA,OAAO,iCACF,OADE,CAAA,EAAA;AAAA,IAEL,IAAM,EAAA,OAAA,CAAQ,aAAgB,GAAA,WAAA,GAAc,OAAQ,CAAA,IAAA;AAAA,IACpD,WAAA;AAAA,GAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/FeedbackMessage/src/FeedbackMessage.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import clsx from 'clsx';
+import { CheckMarkCircle, AlertCircle } from '@danske/sapphire-icons/react';
+import { useThemeCheck, useSapphireStyleProps, Icon, Heading } from '@danske/sapphire-react';
+import styles from '@danske/sapphire-css/components/feedbackMessage/feedbackMessage.module.css';
+
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const FeedbackMessage = (_a) => {
+  var _b = _a, {
+    heading,
+    body,
+    actions,
+    type = "neutral"
+  } = _b, otherProps = __objRest(_b, [
+    "heading",
+    "body",
+    "actions",
+    "type"
+  ]);
+  useThemeCheck();
+  const {
+    styleProps: { style, className }
+  } = useSapphireStyleProps(otherProps);
+  return /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-feedback-message"], className),
+    style
+  }, type !== "neutral" && /* @__PURE__ */ React.createElement("div", {
+    className: clsx(styles["sapphire-feedback-message__icon"], styles[`sapphire-feedback-message__icon--${type}`])
+  }, /* @__PURE__ */ React.createElement(Icon, {
+    size: "xl"
+  }, type === "success" ? /* @__PURE__ */ React.createElement(CheckMarkCircle, null) : /* @__PURE__ */ React.createElement(AlertCircle, null))), /* @__PURE__ */ React.createElement("div", {
+    className: styles["sapphire-feedback-message__content"]
+  }, /* @__PURE__ */ React.createElement(Heading, {
+    level: 3
+  }, heading), /* @__PURE__ */ React.createElement("section", {
+    className: styles["sapphire-feedback-message__body"]
+  }, body)), actions);
+};
+
+export { FeedbackMessage };
+//# sourceMappingURL=FeedbackMessage.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FeedbackMessage.js","sources":["../../../../src/FeedbackMessage/src/FeedbackMessage.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport { AlertCircle, CheckMarkCircle } from '@danske/sapphire-icons/react';\nimport {\n  Heading,\n  Icon,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n  useThemeCheck,\n} from '@danske/sapphire-react';\nimport styles from '@danske/sapphire-css/components/feedbackMessage/feedbackMessage.module.css';\n\nexport interface SapphireFeedbackMessageProps extends SapphireStyleProps {\n  /**\n   * Heading content, rendered in a sapphire Heading component.\n   */\n  heading: React.ReactNode;\n  /**\n   * The type of message.\n   * The 'error' and 'success' are meant to attract more attention.\n   *\n   * @default 'neutral'\n   */\n  type?: 'error' | 'success' | 'neutral';\n  /**\n   * Optional description, rendered as a section below heading.\n   */\n  body?: React.ReactNode;\n  /**\n   *  Optional actions, rendered at the bottom. Use {@link ButtonGroup}\n   *  for the content.\n   */\n  actions?: React.ReactNode;\n}\n\n/**\n * Implements layout and style of a feedback message.\n */\nexport const FeedbackMessage = ({\n  heading,\n  body,\n  actions,\n  type = 'neutral',\n  ...otherProps\n}: SapphireFeedbackMessageProps): JSX.Element => {\n  useThemeCheck();\n  const {\n    styleProps: { style, className },\n  } = useSapphireStyleProps(otherProps);\n\n  return (\n    <div\n      className={clsx(styles['sapphire-feedback-message'], className)}\n      style={style}\n    >\n      {type !== 'neutral' && (\n        <div\n          className={clsx(\n            styles['sapphire-feedback-message__icon'],\n            styles[`sapphire-feedback-message__icon--${type}`]\n          )}\n        >\n          <Icon size=\"xl\">\n            {type === 'success' ? <CheckMarkCircle /> : <AlertCircle />}\n          </Icon>\n        </div>\n      )}\n      <div className={styles['sapphire-feedback-message__content']}>\n        <Heading level={3}>{heading}</Heading>\n        <section className={styles['sapphire-feedback-message__body']}>\n          {body}\n        </section>\n      </div>\n      {actions}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAsCa,MAAA,eAAA,GAAkB,CAAC,EAMiB,KAAA;AANjB,EAC9B,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,IAAA,OAAA;AAAA,IACA,IAAA;AAAA,IACA,OAAA;AAAA,IACA,IAAO,GAAA,SAAA;AAAA,GAJuB,GAAA,EAAA,EAK3B,uBAL2B,EAK3B,EAAA;AAAA,IAJH,SAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGA,EAAA,aAAA,EAAA,CAAA;AACA,EAAM,MAAA;AAAA,IACJ,UAAA,EAAY,EAAE,KAAO,EAAA,SAAA,EAAA;AAAA,GAAA,GACnB,qBAAsB,CAAA,UAAA,CAAA,CAAA;AAE1B,EAAA,2CACG,KAAD,EAAA;AAAA,IACE,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,2BAA8B,CAAA,EAAA,SAAA,CAAA;AAAA,IACrD,KAAA;AAAA,GAEC,EAAA,IAAA,KAAS,SACR,oBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IACE,SAAW,EAAA,IAAA,CACT,MAAO,CAAA,iCAAA,CAAA,EACP,OAAO,CAAoC,iCAAA,EAAA,IAAA,CAAA,CAAA,CAAA,CAAA;AAAA,GAAA,sCAG5C,IAAD,EAAA;AAAA,IAAM,IAAK,EAAA,IAAA;AAAA,GACR,EAAA,IAAA,KAAS,4BAAa,KAAA,CAAA,aAAA,CAAA,eAAA,EAAD,wBAAuB,KAAA,CAAA,aAAA,CAAA,WAAA,EAAD,IAIlD,CAAA,CAAA,CAAA,kBAAA,KAAA,CAAA,aAAA,CAAC,KAAD,EAAA;AAAA,IAAK,WAAW,MAAO,CAAA,oCAAA,CAAA;AAAA,GAAA,sCACpB,OAAD,EAAA;AAAA,IAAS,KAAO,EAAA,CAAA;AAAA,GAAI,EAAA,OAAA,CAAA,sCACnB,SAAD,EAAA;AAAA,IAAS,WAAW,MAAO,CAAA,iCAAA,CAAA;AAAA,GAAA,EACxB,IAGJ,CAAA,CAAA,EAAA,OAAA,CAAA,CAAA;AAAA;;;;"}

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

@@ -0,0 +1,77 @@
+import React from 'react';
+import { useThemeCheck, Field, Label } from '@danske/sapphire-react';
+import { useField } from '@react-aria/label';
+import { mergeProps } from '@react-aria/utils';
+
+var __defProp = Object.defineProperty;
+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 __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const Fieldset = (_a) => {
+  var _b = _a, {
+    label,
+    contextualHelp,
+    note,
+    error,
+    isDisabled,
+    isRequired,
+    necessityIndicator,
+    children,
+    size = "large"
+  } = _b, props = __objRest(_b, [
+    "label",
+    "contextualHelp",
+    "note",
+    "error",
+    "isDisabled",
+    "isRequired",
+    "necessityIndicator",
+    "children",
+    "size"
+  ]);
+  useThemeCheck();
+  const { fieldProps, descriptionProps, errorMessageProps } = useField({
+    isInvalid: !!error
+  });
+  return /* @__PURE__ */ React.createElement(Field, __spreadValues({
+    elementType: "fieldset",
+    error: !!error,
+    isDisabled,
+    size
+  }, mergeProps(props, fieldProps)), /* @__PURE__ */ React.createElement(Field.Label, {
+    elementType: "legend"
+  }, /* @__PURE__ */ React.createElement(Label, {
+    size,
+    necessityIndicator: isRequired && necessityIndicator ? "required" : !isRequired && necessityIndicator ? "optional" : void 0,
+    contextualHelp
+  }, label)), /* @__PURE__ */ React.createElement(Field.Control, {
+    isGroup: true
+  }, children), (error || note) && /* @__PURE__ */ React.createElement(Field.Footer, null, error ? /* @__PURE__ */ React.createElement(Field.Note, __spreadValues({}, errorMessageProps), error) : note ? /* @__PURE__ */ React.createElement(Field.Note, __spreadValues({}, descriptionProps), note) : /* @__PURE__ */ React.createElement(React.Fragment, null)));
+};
+
+export { Fieldset };
+//# sourceMappingURL=Fieldset.js.map

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

@@ -0,0 +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;;;;"}

package/build/esm/Filtering/src/FilterDropdown.js

@@ -0,0 +1,61 @@
+import React from 'react';
+import { useControlledState } from '@react-stately/utils';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { PopoverTrigger, Flex, tokens, Button, Icon } from '@danske/sapphire-react';
+import { ToggleButton } from '../../ToggleButton/src/ToggleButton.js';
+import { ChevronUp, ChevronDown } from '@danske/sapphire-icons/react';
+
+function FilterDropdown({
+  children,
+  label,
+  value,
+  isOpen: isOpenProp,
+  clearButtonLabel = "Clear",
+  applyButtonLabel = "Apply",
+  defaultOpen = false,
+  onOpenChange,
+  hasApplyButton = false,
+  onApply,
+  onClear,
+  noMaxWidth,
+  isDisabled = false
+}) {
+  const [isOpen, setIsOpen] = useControlledState(isOpenProp, defaultOpen, onOpenChange);
+  const hasValue = value != null && value !== "";
+  const close = () => setIsOpen(false);
+  const apply = () => {
+    onApply == null ? void 0 : onApply();
+    close();
+  };
+  const applyButton = /* @__PURE__ */ React.createElement(Button, {
+    type: "submit",
+    excludeFromTabOrder: !hasApplyButton
+  }, applyButtonLabel);
+  return /* @__PURE__ */ React.createElement(PopoverTrigger, {
+    popoverContent: /* @__PURE__ */ React.createElement("form", {
+      onSubmit: apply
+    }, children, /* @__PURE__ */ React.createElement(Flex, {
+      justifyContent: "space-between",
+      marginTop: tokens.size.spacing30
+    }, /* @__PURE__ */ React.createElement(Button, {
+      variant: "secondary",
+      onPress: () => {
+        close();
+        onClear == null ? void 0 : onClear();
+      },
+      isDisabled: !hasValue
+    }, clearButtonLabel), hasApplyButton ? applyButton : /* @__PURE__ */ React.createElement(VisuallyHidden, null, applyButton))),
+    placement: "bottom left",
+    isOpen,
+    onOpenChange: setIsOpen,
+    noMaxWidth
+  }, /* @__PURE__ */ React.createElement(ToggleButton, {
+    icon: /* @__PURE__ */ React.createElement(Icon, null, isOpen ? /* @__PURE__ */ React.createElement(ChevronUp, null) : /* @__PURE__ */ React.createElement(ChevronDown, null)),
+    iconAlign: "right",
+    isSelected: hasValue,
+    isDisabled
+  }, label, value ? ": " : "", value));
+}
+
+export { FilterDropdown };
+//# sourceMappingURL=FilterDropdown.js.map

package/build/esm/Filtering/src/FilterDropdown.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FilterDropdown.js","sources":["../../../../src/Filtering/src/FilterDropdown.tsx"],"sourcesContent":["import React, { ReactNode } from 'react';\nimport { useControlledState } from '@react-stately/utils';\nimport { VisuallyHidden } from '@react-aria/visually-hidden';\nimport {\n  Button,\n  Flex,\n  Icon,\n  SapphireStyleProps,\n  tokens,\n  PopoverTrigger,\n  PopoverTriggerProps,\n} from '@danske/sapphire-react';\nimport { ToggleButton } from '../../ToggleButton';\nimport { ChevronDown, ChevronUp } from '@danske/sapphire-icons/react';\n\nexport interface SapphireFilterDropdownProps\n  extends SapphireStyleProps,\n    Pick<\n      PopoverTriggerProps,\n      'defaultOpen' | 'isOpen' | 'onOpenChange' | 'noMaxWidth'\n    > {\n  /**\n   * \"Filter by\" label, shown inside the trigger button.\n   */\n  label: ReactNode;\n  /**\n   * Filter value, shown inside the trigger button. `null`, `undefined` and empty string are\n   * considered as unset value.\n   */\n  value: ReactNode;\n  /**\n   * Filtering UI controls, rendered in a popover.\n   */\n  children: ReactNode;\n  /**\n   * Called when:\n   * - `Enter` is pressed on form fields rendered inside the popover.\n   * - 'Apply' button is pressed (if `hasApplyButton` is true)\n   */\n  onApply?: () => void;\n  /**\n   * Whether to show the 'Apply' button.\n   */\n  hasApplyButton?: boolean;\n  /**\n   * Called when 'Clear' button is pressed.\n   */\n  onClear?: () => void;\n  /**\n   * Wheter the button is disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * The label of the 'Clear' button.\n   * @default \"Clear\"\n   */\n  clearButtonLabel?: ReactNode;\n  /**\n   * The label of the 'Apply' button.\n   * @default \"Apply\"\n   */\n  applyButtonLabel?: ReactNode;\n}\n\n/**\n * A button with a dropdown, used for filtering UI.\n */\nexport function FilterDropdown({\n  children,\n  label,\n  value,\n  isOpen: isOpenProp,\n  clearButtonLabel = 'Clear',\n  applyButtonLabel = 'Apply',\n  defaultOpen = false,\n  onOpenChange,\n  hasApplyButton = false,\n  onApply,\n  onClear,\n  noMaxWidth,\n  isDisabled = false,\n}: SapphireFilterDropdownProps): JSX.Element {\n  // We need to know if the dropdown is open or not, so we control the state here, still\n  // allowing for both controlled and uncontrolled modes.\n  const [isOpen, setIsOpen] = useControlledState(\n    isOpenProp,\n    defaultOpen,\n    onOpenChange\n  );\n  const hasValue = value != null && value !== '';\n  const close = () => setIsOpen(false);\n  const apply = () => {\n    onApply?.();\n    close();\n  };\n\n  const applyButton = (\n    <Button type=\"submit\" excludeFromTabOrder={!hasApplyButton}>\n      {applyButtonLabel}\n    </Button>\n  );\n  return (\n    <PopoverTrigger\n      popoverContent={\n        <form onSubmit={apply}>\n          {children}\n          <Flex\n            justifyContent=\"space-between\"\n            marginTop={tokens.size.spacing30}\n          >\n            <Button\n              variant=\"secondary\"\n              onPress={() => {\n                close();\n                onClear?.();\n              }}\n              isDisabled={!hasValue}\n            >\n              {clearButtonLabel}\n            </Button>\n            {hasApplyButton ? (\n              applyButton\n            ) : (\n              // The following is necessary to have the form submitted on \"Enter\", if there is more than one field\n              <VisuallyHidden>{applyButton}</VisuallyHidden>\n            )}\n          </Flex>\n        </form>\n      }\n      placement=\"bottom left\"\n      isOpen={isOpen}\n      onOpenChange={setIsOpen}\n      noMaxWidth={noMaxWidth}\n    >\n      <ToggleButton\n        icon={<Icon>{isOpen ? <ChevronUp /> : <ChevronDown />}</Icon>}\n        iconAlign=\"right\"\n        isSelected={hasValue}\n        isDisabled={isDisabled}\n      >\n        {label}\n        {value ? ': ' : ''}\n        {value}\n      </ToggleButton>\n    </PopoverTrigger>\n  );\n}\n"],"names":[],"mappings":";;;;;;;AAmE+B,SAAA,cAAA,CAAA;AAAA,EAC7B,QAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAQ,EAAA,UAAA;AAAA,EACR,gBAAmB,GAAA,OAAA;AAAA,EACnB,gBAAmB,GAAA,OAAA;AAAA,EACnB,WAAc,GAAA,KAAA;AAAA,EACd,YAAA;AAAA,EACA,cAAiB,GAAA,KAAA;AAAA,EACjB,OAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,UAAa,GAAA,KAAA;AAAA,CAC8B,EAAA;AAG3C,EAAA,MAAM,CAAC,MAAA,EAAQ,SAAa,CAAA,GAAA,kBAAA,CAC1B,YACA,WACA,EAAA,YAAA,CAAA,CAAA;AAEF,EAAM,MAAA,QAAA,GAAW,KAAS,IAAA,IAAA,IAAQ,KAAU,KAAA,EAAA,CAAA;AAC5C,EAAM,MAAA,KAAA,GAAQ,MAAM,SAAU,CAAA,KAAA,CAAA,CAAA;AAC9B,EAAA,MAAM,QAAQ,MAAM;AAClB,IAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,EAAA,CAAA;AACA,IAAA,KAAA,EAAA,CAAA;AAAA,GAAA,CAAA;AAGF,EAAM,MAAA,WAAA,uCACH,MAAD,EAAA;AAAA,IAAQ,IAAK,EAAA,QAAA;AAAA,IAAS,qBAAqB,CAAC,cAAA;AAAA,GACzC,EAAA,gBAAA,CAAA,CAAA;AAGL,EAAA,2CACG,cAAD,EAAA;AAAA,IACE,cAAA,sCACG,MAAD,EAAA;AAAA,MAAM,QAAU,EAAA,KAAA;AAAA,KACb,EAAA,QAAA,sCACA,IAAD,EAAA;AAAA,MACE,cAAe,EAAA,eAAA;AAAA,MACf,SAAA,EAAW,OAAO,IAAK,CAAA,SAAA;AAAA,KAAA,sCAEtB,MAAD,EAAA;AAAA,MACE,OAAQ,EAAA,WAAA;AAAA,MACR,SAAS,MAAM;AACb,QAAA,KAAA,EAAA,CAAA;AACA,QAAA,OAAA,IAAA,IAAA,GAAA,KAAA,CAAA,GAAA,OAAA,EAAA,CAAA;AAAA,OAAA;AAAA,MAEF,YAAY,CAAC,QAAA;AAAA,KAAA,EAEZ,gBAEF,CAAA,EAAA,cAAA,GACC,WAGA,mBAAA,KAAA,CAAA,aAAA,CAAC,gBAAD,IAAiB,EAAA,WAAA,CAAA,CAAA,CAAA;AAAA,IAKzB,SAAU,EAAA,aAAA;AAAA,IACV,MAAA;AAAA,IACA,YAAc,EAAA,SAAA;AAAA,IACd,UAAA;AAAA,GAAA,sCAEC,YAAD,EAAA;AAAA,IACE,IAAA,sCAAO,IAAD,EAAA,IAAA,EAAO,yBAAU,KAAA,CAAA,aAAA,CAAA,SAAA,EAAD,IAAgB,CAAA,mBAAA,KAAA,CAAA,aAAA,CAAC,WAAD,EAAA,IAAA,CAAA,CAAA;AAAA,IACtC,SAAU,EAAA,OAAA;AAAA,IACV,UAAY,EAAA,QAAA;AAAA,IACZ,UAAA;AAAA,GAEC,EAAA,KAAA,EACA,KAAQ,GAAA,IAAA,GAAO,EACf,EAAA,KAAA,CAAA,CAAA,CAAA;AAAA;;;;"}

package/build/esm/NotificationBadge/src/NotificationBadge.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import clsx from 'clsx';
+import styles from '@danske/sapphire-css/components/notificationBadge/notificationBadge.module.css';
+import { useThemeCheck, useSapphireStyleProps } from '@danske/sapphire-react';
+
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+const NotificationBadge = (props) => {
+  useThemeCheck();
+  const _a = props, {
+    children,
+    count,
+    containerType = "circle",
+    variant = "primary",
+    size = "medium",
+    show = true
+  } = _a, otherProps = __objRest(_a, [
+    "children",
+    "count",
+    "containerType",
+    "variant",
+    "size",
+    "show"
+  ]);
+  const { styleProps } = useSapphireStyleProps(props);
+  const badge = () => /* @__PURE__ */ React.createElement("span", __spreadProps(__spreadValues({}, otherProps), {
+    role: "status",
+    className: clsx(styleProps.className, styles["sapphire-notification-badge"], styles[`sapphire-notification-badge--${size}`], styles[`sapphire-notification-badge--${variant}`], {
+      [styles[`sapphire-notification-badge--pop-in`]]: show,
+      [styles[`sapphire-notification-badge--pop-out`]]: !show
+    }),
+    style: styleProps.style
+  }), size !== "small" && displayCount);
+  const displayCount = count.toString().length > 2 ? `99+` : count;
+  return children ? /* @__PURE__ */ React.createElement("span", {
+    className: clsx(styles["sapphire-notification-badge-container"], {
+      [styles["sapphire-notification-badge-container--rectangle"]]: containerType === "rectangle"
+    })
+  }, children, badge()) : badge();
+};
+
+export { NotificationBadge };
+//# sourceMappingURL=NotificationBadge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"NotificationBadge.js","sources":["../../../../src/NotificationBadge/src/NotificationBadge.tsx"],"sourcesContent":["import React from 'react';\nimport clsx from 'clsx';\nimport styles from '@danske/sapphire-css/components/notificationBadge/notificationBadge.module.css';\nimport {\n  useThemeCheck,\n  SapphireStyleProps,\n  useSapphireStyleProps,\n} from '@danske/sapphire-react';\n\nexport type NotificationBadgeProps = {\n  /**\n   * Badge will be added relative to the children. It is rendered inline if there is no children provided\n   * */\n  children?: React.ReactNode;\n  /**\n   * The shape of the container, based on which badge should be positioned. Badge is positioned on the border of the container\n   * @default 'circle'\n   * */\n  containerType?: 'circle' | 'rectangle';\n  /**\n   * Number to show in badge\n   * */\n  count: number;\n  /**\n   * The variation of badge which determines the badge's color.\n   *\n   * @default 'primary'\n   */\n  variant?: 'primary' | 'secondary';\n  /**\n   * @default 'medium'\n   */\n  size?: 'large' | 'medium' | 'small';\n  /**\n   * Boolean to show/hide the badge\n   *\n   * @default true\n   */\n  show?: boolean;\n} & SapphireStyleProps &\n  ({ 'aria-labelledby': string } | { 'aria-label': string });\n\nexport const NotificationBadge = (\n  props: NotificationBadgeProps\n): JSX.Element => {\n  useThemeCheck();\n\n  const {\n    children,\n    count,\n    containerType = 'circle',\n    variant = 'primary',\n    size = 'medium',\n    show = true,\n    ...otherProps\n  } = props;\n  const { styleProps } = useSapphireStyleProps(props);\n\n  const badge = () => (\n    <span\n      {...otherProps}\n      role=\"status\"\n      className={clsx(\n        styleProps.className,\n        styles['sapphire-notification-badge'],\n        styles[`sapphire-notification-badge--${size}` as const],\n        styles[`sapphire-notification-badge--${variant}` as const],\n        {\n          [styles[`sapphire-notification-badge--pop-in`]]: show,\n          [styles[`sapphire-notification-badge--pop-out`]]: !show,\n        }\n      )}\n      style={styleProps.style}\n    >\n      {size !== 'small' && displayCount}\n    </span>\n  );\n\n  const displayCount = count.toString().length > 2 ? `99+` : count;\n  return children ? (\n    <span\n      className={clsx(styles['sapphire-notification-badge-container'], {\n        [styles['sapphire-notification-badge-container--rectangle']]:\n          containerType === 'rectangle',\n      })}\n    >\n      {children}\n      {badge()}\n    </span>\n  ) : (\n    badge()\n  );\n};\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0Ca,MAAA,iBAAA,GAAoB,CAC/B,KACgB,KAAA;AAChB,EAAA,aAAA,EAAA,CAAA;AAEA,EAAA,MAQI,EAPF,GAAA,KAAA,EAAA;AAAA,IAAA,QAAA;AAAA,IACA,KAAA;AAAA,IACA,aAAgB,GAAA,QAAA;AAAA,IAChB,OAAU,GAAA,SAAA;AAAA,IACV,IAAO,GAAA,QAAA;AAAA,IACP,IAAO,GAAA,IAAA;AAAA,GAEL,GAAA,EAAA,EADC,uBACD,EADC,EAAA;AAAA,IANH,UAAA;AAAA,IACA,OAAA;AAAA,IACA,eAAA;AAAA,IACA,SAAA;AAAA,IACA,MAAA;AAAA,IACA,MAAA;AAAA,GAAA,CAAA,CAAA;AAGF,EAAM,MAAA,EAAE,eAAe,qBAAsB,CAAA,KAAA,CAAA,CAAA;AAE7C,EAAA,MAAM,KAAQ,GAAA,sBACX,KAAA,CAAA,aAAA,CAAA,MAAA,EAAD,iCACM,UADN,CAAA,EAAA;AAAA,IAEE,IAAK,EAAA,QAAA;AAAA,IACL,SAAA,EAAW,IACT,CAAA,UAAA,CAAW,SACX,EAAA,MAAA,CAAO,6BACP,CAAA,EAAA,MAAA,CAAO,CAAgC,6BAAA,EAAA,IAAA,CAAA,CAAA,CAAA,EACvC,MAAO,CAAA,CAAA,6BAAA,EAAgC,OACvC,CAAA,CAAA,CAAA,EAAA;AAAA,MAAA,CACG,OAAO,CAAyC,mCAAA,CAAA,CAAA,GAAA,IAAA;AAAA,MAChD,CAAA,MAAA,CAAO,0CAA0C,CAAC,IAAA;AAAA,KAAA,CAAA;AAAA,IAGvD,OAAO,UAAW,CAAA,KAAA;AAAA,GAAA,CAAA,EAEjB,SAAS,OAAW,IAAA,YAAA,CAAA,CAAA;AAIzB,EAAA,MAAM,YAAe,GAAA,KAAA,CAAM,QAAW,EAAA,CAAA,MAAA,GAAS,IAAI,CAAQ,GAAA,CAAA,GAAA,KAAA,CAAA;AAC3D,EAAO,OAAA,QAAA,uCACJ,MAAD,EAAA;AAAA,IACE,SAAA,EAAW,IAAK,CAAA,MAAA,CAAO,uCAA0C,CAAA,EAAA;AAAA,MAC9D,CAAA,MAAA,CAAO,sDACN,aAAkB,KAAA,WAAA;AAAA,KAAA,CAAA;AAAA,GAAA,EAGrB,UACA,KAGH,EAAA,CAAA,GAAA,KAAA,EAAA,CAAA;AAAA;;;;"}