@helsenorge/datepicker 6.3.0

package/components/DatePicker/position-utils.d.ts

@@ -0,0 +1,27 @@
+import { CSSProperties } from 'react';
+import { PopOverVariant } from '@helsenorge/designsystem-react/components/PopOver';
+/**
+ * Beregn om hjelpeboblen skal vises over eller under kontrolleren
+ * @param controllerSize DOMRect for controlleren
+ * @param bubbleSize DOMRect for hjelpeboblen
+ * @param variant Ønsket plassering av hjelpeboblen (over/under/automatisk)
+ * @returns Om hjelpeboblen skal vises over eller under
+ */
+export declare const getVerticalPosition: (controllerSize: DOMRect, bubbleSize: DOMRect) => keyof typeof PopOverVariant;
+/**
+ * Finn riktig plassering av hjelpeboblen
+ * @param controllerSize DOMRect for controlleren
+ * @param bubbleSize DOMRect for hjelpeboblen
+ * @param variant Ønsket plassering av hjelpeboblen (over/under)
+ * @returns CSSProperties som plasserer hjelpeboblen riktig
+ */
+export declare const getBubbleStyle: (controllerSize: DOMRect, bubbleSize: DOMRect) => CSSProperties;
+/**
+ * Finn riktig plassering av pilen
+ * @param bubbleStyle CSSProperties for hjelpeboblen
+ * @param controllerSize DOMRect for kontrolleren
+ * @param verticalPosition Ønsket plassering av hjelpeboblen (over/under)
+ * @returns CSSProperties som plasserer pilen riktig
+ */
+export declare const getArrowStyle: (bubbleStyle: CSSProperties, controllerSize: DOMRect, verticalPosition: keyof typeof PopOverVariant) => CSSProperties;
+//# sourceMappingURL=position-utils.d.ts.map

package/components/DatePicker/position-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"position-utils.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/position-utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAEtC,OAAO,EAAE,cAAc,EAAE,MAAM,mDAAmD,CAAC;AAkBnF;;;;;;GAMG;AACH,eAAO,MAAM,mBAAmB,mBAAoB,OAAO,cAAc,OAAO,KAAG,MAAM,qBAMxF,CAAC;AA6JF;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,mBAAoB,OAAO,cAAc,OAAO,KAAG,aA0B7E,CAAC;AAEF;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,gBACX,aAAa,kBACV,OAAO,oBACL,MAAM,qBAAqB,KAC5C,aA+BF,CAAC"}

package/components/DatePicker/styles.module.scss

@@ -0,0 +1,303 @@
+@use 'sass:map';
+@import '@helsenorge/designsystem-react/scss/spacers';
+@import '@helsenorge/designsystem-react/scss/breakpoints';
+@import '@helsenorge/designsystem-react/scss/palette';
+@import '@helsenorge/designsystem-react/scss/font-settings';
+@import '@helsenorge/designsystem-react/scss/title';
+
+.date-time-picker-wrapper {
+  display: flex;
+  align-items: flex-end;
+  flex-flow: row wrap;
+  border: none;
+  padding: 0;
+  margin: 0;
+
+  @media (min-width: map.get($grid-breakpoints, sm)) {
+    flex-flow: row nowrap;
+  }
+
+  &__date-picker {
+    flex: 100%;
+    margin-right: getSpacer(l);
+
+    @media (min-width: map.get($grid-breakpoints, sm)) {
+      flex: unset;
+    }
+  }
+
+  &__legend {
+    @include legend;
+
+    margin-bottom: getSpacer(m);
+    margin-top: 0;
+  }
+}
+
+.time-separator {
+  display: flex;
+  align-items: center;
+  padding: 0 getSpacer(2xs);
+}
+
+.datepicker-popup-container {
+  position: fixed;
+  visibility: hidden;
+  z-index: 10;
+
+  &--visible {
+    visibility: visible;
+  }
+}
+
+.datepicker-popup-arrow {
+  --drop-shadow-color: #{$blueberry500};
+
+  width: 0;
+  height: 0;
+  position: fixed;
+  visibility: hidden;
+  border-style: solid;
+  border-color: transparent;
+  z-index: 10;
+
+  &--visible {
+    visibility: visible;
+  }
+
+  &--over {
+    border-width: 0.625rem;
+    border-bottom-color: $white;
+    filter: drop-shadow(var(--drop-shadow-color) 0 0.125rem 0.375rem 0.125rem);
+    filter: drop-shadow(0 -0.185rem 0 var(--drop-shadow-color));
+  }
+
+  &--under {
+    border-width: 0.625rem;
+    border-top-color: $white;
+    filter: drop-shadow(var(--drop-shadow-color) 0 0.125rem 0.375rem 0.125rem);
+    filter: drop-shadow(0 0.2rem 0 var(--drop-shadow-color));
+  }
+}
+
+.date-button {
+  position: absolute;
+  z-index: 9;
+  right: 0.1rem;
+  top: 0.1rem;
+
+  &__inner {
+    min-height: 2.5rem;
+
+    @media (min-width: map.get($grid-breakpoints, md)) {
+      min-height: 3.125rem;
+    }
+  }
+}
+
+.footer-wrapper {
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+}
+
+// Overstyrer klasser til datedaypicker pakken https://github.com/gpbl/react-day-picker/blob/main/src/style.css
+/* stylelint-disable */
+.root {
+  --rdp-cell-size: getSpacer(l);
+  --rdp-background-color: #e7edff;
+
+  background-color: $white;
+  padding: getSpacer(s) getSpacer(s) getSpacer(xs);
+  border: 2px solid $blueberry500;
+}
+
+.month {
+  width: 100%;
+}
+
+.table {
+  width: 100%;
+  margin: 0 getSpacer(3xs) * -1 getSpacer(4xs) * -1;
+  border-spacing: getSpacer(3xs) getSpacer(4xs);
+  border-collapse: separate;
+
+  @media (min-width: map.get($grid-breakpoints, sm)) {
+    margin: 0 getSpacer(xs) * -1 getSpacer(3xs) * -1;
+    border-spacing: getSpacer(xs) getSpacer(3xs);
+  }
+}
+
+.head_cell {
+  color: $neutral700;
+  font-family: 'Source Sans Pro', sans-serif;
+  font-size: $font-size-sm;
+  font-weight: 400;
+  text-transform: capitalize;
+}
+
+.day {
+  font-size: $font-size-sm;
+  font-weight: 600;
+  font-family: 'Source Sans Pro', sans-serif;
+  color: $blueberry600;
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: getSpacer(l);
+  max-width: getSpacer(l);
+  height: getSpacer(l);
+  margin: 0;
+  border: 2px solid transparent;
+  border-radius: 0;
+
+  &:focus-visible:not([disabled]),
+  &:focus:not([disabled]) {
+    background-color: $neutral100;
+    color: $blueberry600;
+    text-decoration: underline 2px $blueberry600;
+    outline: none;
+  }
+
+  &:hover:not([disabled]):not(._day_selected) {
+    background-color: $neutral100;
+  }
+
+  &--today {
+    background-color: $blueberry100;
+    color: $blueberry600;
+
+    &:hover:not([disabled]):not(._day_selected) {
+      background-color: $blueberry200;
+    }
+
+    &:focus-visible:not([disabled]),
+    &:focus:not([disabled]) {
+      background-color: $blueberry200;
+      text-decoration: underline 2px $blueberry600;
+      outline: none;
+    }
+  }
+
+  &--disabled:not(.day_selected) {
+    opacity: 1 !important;
+    color: $neutral400;
+
+    &:hover {
+      background-color: $white;
+    }
+  }
+}
+
+.day_selected {
+  background-color: $blueberry500;
+  color: $white;
+
+  &:hover:not([disabled]):not(._day_selected) {
+    background-color: $blueberry700;
+  }
+
+  &:focus-visible:not([disabled]),
+  &:focus:not([disabled]) {
+    background-color: $blueberry700;
+    color: $white;
+    text-decoration: underline 2px $white;
+    outline: none;
+  }
+}
+
+.day:hover {
+  background-color: $neutral100;
+}
+
+.dropdown {
+  appearance: none;
+  position: absolute;
+  z-index: 2;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  margin: 0;
+  padding: 0;
+  cursor: pointer;
+  opacity: 0;
+  border: none;
+  background-color: transparent;
+  font-size: $font-size-sm;
+  line-height: inherit;
+  text-transform: capitalize;
+
+  &:disabled {
+    opacity: unset;
+    color: unset;
+  }
+
+  &:focus-visible:not([disabled]) + .caption_label,
+  &:focus:not([disabled]) + .caption_label {
+    box-shadow: 0 0 0 4px $neutral900;
+    border-radius: 0;
+  }
+}
+
+.caption_label {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  margin: 0;
+  white-space: nowrap;
+  color: currentColor;
+  border: 2px solid transparent;
+  font-size: $font-size-sm;
+  font-family: 'Source Sans Pro', sans-serif;
+  font-weight: 600;
+}
+
+.dropdown_month,
+.dropdown_year {
+  color: $blueberry600;
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  text-transform: capitalize;
+  font-size: $font-size-md;
+  font-weight: 600;
+}
+
+.dropdown_month {
+  margin-right: getSpacer(2xs);
+}
+
+.nav_button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 2.375rem;
+  height: 2.375rem;
+  padding: 0.25em;
+  border-radius: 0;
+
+  &[disabled] {
+    margin-left: getSpacer(xs);
+  }
+
+  &:focus-visible:not([disabled]),
+  &:focus:not([disabled]) {
+    box-shadow: 0 0 0 4px $neutral900;
+    background-color: $neutral100;
+  }
+
+  &:hover:not([disabled]):not(.day_selected) {
+    background-color: $neutral100;
+  }
+}
+
+.nav_button_next,
+.nav_button_next[disabled],
+.nav_button_next[disabled]:not(.day_selected) {
+  margin-left: getSpacer(2xs);
+}
+/* stylelint-enable */

package/components/DatePicker/styles.module.scss.d.ts

@@ -0,0 +1,36 @@
+export type Styles = {
+  _day_selected: string;
+  caption_label: string;
+  'date-button': string;
+  'date-button__inner': string;
+  'date-time-picker-wrapper': string;
+  'date-time-picker-wrapper__date-picker': string;
+  'date-time-picker-wrapper__legend': string;
+  'datepicker-popup-arrow': string;
+  'datepicker-popup-arrow--over': string;
+  'datepicker-popup-arrow--under': string;
+  'datepicker-popup-arrow--visible': string;
+  'datepicker-popup-container': string;
+  'datepicker-popup-container--visible': string;
+  day: string;
+  day_selected: string;
+  'day--disabled': string;
+  'day--today': string;
+  dropdown: string;
+  dropdown_month: string;
+  dropdown_year: string;
+  'footer-wrapper': string;
+  head_cell: string;
+  month: string;
+  nav_button: string;
+  nav_button_next: string;
+  root: string;
+  table: string;
+  'time-separator': string;
+};
+
+export type ClassNames = keyof Styles;
+
+declare const styles: Styles;
+
+export default styles;

package/components/DatePicker/validate-utils.d.ts

@@ -0,0 +1,18 @@
+export declare const parseInputDate: (dateString: string) => Date | null;
+export declare const isValidDate: (dateString: string) => boolean;
+/** react-hook-form fromDate and toDate validation */
+export declare const validateMinMaxDate: (date: string, errorMessage: string, minDate?: Date, maxDate?: Date) => string | true;
+/** react-hook-form fromDate and toDate validation */
+export declare const validateDisabledDates: (date: string, disabledDates: Date[], errorMessage: string) => string | true;
+/** react-hook-form fromTime and toTime validation */
+export declare const validateMinTimeMaxTime: (time: {
+    hour: number;
+    minute: number;
+}, errorMessage: string, minTime?: {
+    hour: number;
+    minute: number;
+}, maxTime?: {
+    hour: number;
+    minute: number;
+}) => string | true;
+//# sourceMappingURL=validate-utils.d.ts.map

package/components/DatePicker/validate-utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"validate-utils.d.ts","sourceRoot":"","sources":["../../../src/components/DatePicker/validate-utils.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,cAAc,eAAgB,MAAM,KAAG,IAAI,GAAG,IAW1D,CAAC;AAEF,eAAO,MAAM,WAAW,eAAgB,MAAM,KAAG,OAGhD,CAAC;AAEF,qDAAqD;AACrD,eAAO,MAAM,kBAAkB,SAAU,MAAM,gBAAgB,MAAM,YAAY,IAAI,YAAY,IAAI,KAAG,MAAM,GAAG,IAqBhH,CAAC;AAEF,qDAAqD;AACrD,eAAO,MAAM,qBAAqB,SAAU,MAAM,iBAAiB,IAAI,EAAE,gBAAgB,MAAM,KAAG,MAAM,GAAG,IAU1G,CAAC;AAEF,qDAAqD;AACrD,eAAO,MAAM,sBAAsB,SAC3B;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,gBACxB,MAAM,YACV;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,YAChC;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,MAAM,EAAE,MAAM,CAAA;CAAE,KACzC,MAAM,GAAG,IAUX,CAAC"}

package/index.css

@@ -0,0 +1 @@
+._root_2a8vt_1{--rdp-cell-size: 40px;--rdp-caption-font-size: 18px;--rdp-accent-color: #0000ff;--rdp-background-color: #e7edff;--rdp-accent-color-dark: #3003e1;--rdp-background-color-dark: #180270;--rdp-outline: 2px solid var(--rdp-accent-color);--rdp-outline-selected: 3px solid var(--rdp-accent-color);--rdp-selected-color: #fff;margin:1em}._vhidden_2a8vt_16{box-sizing:border-box;padding:0;margin:0;background:transparent;border:0;-moz-appearance:none;-webkit-appearance:none;appearance:none;position:absolute!important;top:0;width:1px!important;height:1px!important;padding:0!important;overflow:hidden!important;clip:rect(1px,1px,1px,1px)!important;border:0!important}._button_reset_2a8vt_36{appearance:none;position:relative;margin:0;padding:0;cursor:default;color:inherit;background:none;font:inherit;-moz-appearance:none;-webkit-appearance:none}._button_reset_2a8vt_36:focus-visible{outline:none}._button_2a8vt_36{border:2px solid transparent}._button_2a8vt_36[disabled]:not(._day_selected_2a8vt_59){opacity:.25}._button_2a8vt_36:not([disabled]){cursor:pointer}._button_2a8vt_36:focus-visible:not([disabled]){color:inherit;background-color:var(--rdp-background-color);border:var(--rdp-outline)}._button_2a8vt_36:hover:not([disabled]):not(._day_selected_2a8vt_59){background-color:var(--rdp-background-color)}._months_2a8vt_77{display:flex}._month_2a8vt_77{margin:0 1em}._month_2a8vt_77:first-child{margin-left:0}._month_2a8vt_77:last-child{margin-right:0}._table_2a8vt_93{margin:0;max-width:calc(var(--rdp-cell-size) * 7);border-collapse:collapse}._with_weeknumber_2a8vt_99 ._table_2a8vt_93{max-width:calc(var(--rdp-cell-size) * 8);border-collapse:collapse}._caption_2a8vt_104{display:flex;align-items:center;justify-content:space-between;padding:0;text-align:left}._multiple_months_2a8vt_112 ._caption_2a8vt_104{position:relative;display:block;text-align:center}._caption_dropdowns_2a8vt_118{position:relative;display:inline-flex}._caption_label_2a8vt_123{position:relative;z-index:1;display:inline-flex;align-items:center;margin:0;padding:0 .25em;white-space:nowrap;color:currentColor;border:0;border:2px solid transparent;font-family:inherit;font-size:var(--rdp-caption-font-size);font-weight:700}._nav_2a8vt_139{white-space:nowrap}._multiple_months_2a8vt_112 ._caption_start_2a8vt_143 ._nav_2a8vt_139{position:absolute;top:50%;left:0;transform:translateY(-50%)}._multiple_months_2a8vt_112 ._caption_end_2a8vt_150 ._nav_2a8vt_139{position:absolute;top:50%;right:0;transform:translateY(-50%)}._nav_button_2a8vt_157{display:inline-flex;align-items:center;justify-content:center;width:var(--rdp-cell-size);height:var(--rdp-cell-size);padding:.25em;border-radius:100%}._dropdown_year_2a8vt_171,._dropdown_month_2a8vt_172{position:relative;display:inline-flex;align-items:center}._dropdown_2a8vt_171{-webkit-appearance:none;-moz-appearance:none;appearance:none;position:absolute;z-index:2;top:0;bottom:0;left:0;width:100%;margin:0;padding:0;cursor:inherit;opacity:0;border:none;background-color:transparent;font-family:inherit;font-size:inherit;line-height:inherit}._dropdown_2a8vt_171[disabled]{opacity:unset;color:unset}._dropdown_2a8vt_171:focus-visible:not([disabled])+._caption_label_2a8vt_123{background-color:var(--rdp-background-color);border:var(--rdp-outline);border-radius:6px}._dropdown_icon_2a8vt_208{margin:0 0 0 5px}._head_2a8vt_212{border:0}._head_row_2a8vt_216,._row_2a8vt_217{height:100%}._head_cell_2a8vt_221{vertical-align:middle;font-size:.75em;font-weight:700;text-align:center;height:100%;height:var(--rdp-cell-size);padding:0;text-transform:uppercase}._tbody_2a8vt_232{border:0}._tfoot_2a8vt_236{margin:.5em}._cell_2a8vt_240{width:var(--rdp-cell-size);height:100%;height:var(--rdp-cell-size);padding:0;text-align:center}._weeknumber_2a8vt_248{font-size:.75em}._weeknumber_2a8vt_248,._day_2a8vt_59{display:flex;overflow:hidden;align-items:center;justify-content:center;box-sizing:border-box;width:var(--rdp-cell-size);max-width:var(--rdp-cell-size);height:var(--rdp-cell-size);margin:0;border:2px solid transparent;border-radius:100%}._day_today_2a8vt_267:not(._day_outside_2a8vt_267){font-weight:700}._day_selected_2a8vt_59,._day_selected_2a8vt_59:focus-visible,._day_selected_2a8vt_59:hover{color:var(--rdp-selected-color);opacity:1;background-color:var(--rdp-accent-color)}._day_outside_2a8vt_267{opacity:.5}._day_selected_2a8vt_59:focus-visible{outline:var(--rdp-outline);outline-offset:2px;z-index:1}._root_2a8vt_1:not([dir=rtl]) ._day_range_start_2a8vt_290:not(._day_range_end_2a8vt_290){border-top-right-radius:0;border-bottom-right-radius:0}._root_2a8vt_1:not([dir=rtl]) ._day_range_end_2a8vt_290:not(._day_range_start_2a8vt_290){border-top-left-radius:0;border-bottom-left-radius:0}._root_2a8vt_1[dir=rtl] ._day_range_start_2a8vt_290:not(._day_range_end_2a8vt_290){border-top-left-radius:0;border-bottom-left-radius:0}._root_2a8vt_1[dir=rtl] ._day_range_end_2a8vt_290:not(._day_range_start_2a8vt_290){border-top-right-radius:0;border-bottom-right-radius:0}._day_range_end_2a8vt_290._day_range_start_2a8vt_290{border-radius:100%}._day_range_middle_2a8vt_314{border-radius:0}

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@helsenorge/datepicker",
+  "type": "module",
+  "description": "The official Helsenorge datepicker.",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/helsenorge/designsystem"
+  },
+  "homepage": "https://helsenorge.design",
+  "version": "6.3.0",
+  "author": "Helsenorge",
+  "license": "MIT",
+  "dependencies": {
+    "react-day-picker": "^8.10.0"
+  },
+  "peerDependencies": {
+    "@helsenorge/designsystem-react": "^6.0.0",
+    "classnames": "^2.5.1",
+    "date-fns": "^3.3.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "sideEffects": false
+}