feat: autoselect current date or selected date (#1933)

* feat: autoselect current date or selected date

* fix: remove memo from prefix in text field

* fix: move labelId and inputId into Datepicker for a11y use

* --wip-- [skip ci]

* feat(datepicker): setFocusDate and setOffset

* feat(util): add move useDebounceCallback

* feat(datepicker): add a11y key events to Calendar component

* --wip-- [skip ci]

working on page up and page down

* feat(datepicker): pageup and down key evenbts s,

* fix(datepicker): outline none

Co-authored-by: Brian Sweeting <brian-sweeting@pluralsight.com>

* fix(datepicker): incorrect arg

* fix(datepicker): pre-work

* fix(datepicker): month back and forward button bug

* fix(datepicker): modified util functions

BREAKING CHANGE: useRangeSelectChange  useDateSelectChange removed
Hooks have been removed in facor of callback functions:
handleDateSelectChange & handleRangeSelectChange

* feat(focusmanager): export useFocusManager hook for better composability

* test(datepicker): use hook instead of FocusManager

* docs: update datepicker docs

* feat(datepicker): key events for month buttons

* fix(datepicker): datepicker focus on close and height set on grid

* test(datepicker): update story so that snapshots stay consitent with new functionality

* fix(datepicker): focus trap fix

* fix(datepicker): focus trap tuning

Co-authored-by: Brian Sweeting <brian-sweeting@pluralsight.com>

packages/datepicker/package.json

@@ -51,4 +51,4 @@
     "@pluralsight/ps-design-system-storybook-preset": "^0.7.7"
   },
   "gitHead": "0c5576456d80ae8d6dfb82da74320f3e8266c35a"
-}
+}

packages/datepicker/src/css/index.css

@@ -2,57 +2,67 @@
   from {
     transform: translateX(calc(-1 * var(--ps-layout-spacing-xsmall)));
   }
+
   to {
     transform: translateX(0);
   }
 }
+
 @keyframes psds-calendar__keyframes__backward {
   from {
     transform: translateX(var(--ps-layout-spacing-xsmall));
   }
+
   to {
     transform: translateX(0);
   }
 }
+
 .psds-calendar {
-  padding: 24px;
-  max-height: 360px;
+  padding: 24px 24px 12px;
   background-color: var(--ps-colors-white);
   color: var(--ps-colors-text-icon-high-on-light);
   display: inline-flex;
   flex-direction: column;
 }
+
 .psds-calendar__grid-wrapper {
   transition: height var(--ps-motion-speed-normal);
 }
+
 .psds-calendar__grid-slide {
   display: flex;
   flex: 1;
   align-items: flex-start;
 }
+
 .psds-calendar__grid-slide--forward {
-  animation: psds-calendar__keyframes__forward var(--ps-motion-speed-normal)
-    forwards;
+  animation: psds-calendar__keyframes__forward var(--ps-motion-speed-normal) forwards;
 }
+
 .psds-calendar__grid-slide--backward {
-  animation: psds-calendar__keyframes__backward var(--ps-motion-speed-normal)
-    forwards;
+  animation: psds-calendar__keyframes__backward var(--ps-motion-speed-normal) forwards;
 }
+
 .psds-calendar__month {
   display: flex;
   padding: 8px;
   align-items: center;
   width: 100%;
 }
+
 .psds-calendar__header-wrapper {
   display: flex;
 }
+
 .psds-calendar__header {
   width: 280px;
 }
+
 .psds-calendar__header:not(:last-child) {
   margin-right: var(--ps-layout-spacing-large);
 }
+
 .psds-calendar__header-month {
   display: flex;
   flex: 1;
@@ -61,6 +71,7 @@
   line-height: 20px;
   text-align: center;
 }
+
 .psds-calendar__weekday-header {
   display: inline-flex;
   justify-content: center;
@@ -70,16 +81,20 @@
   color: var(--ps-colors-text-icon-low-on-light);
   font-weight: var(--ps-type-font-weight-book);
 }
+
 .psds-calendar__date-grid {
   display: flex;
   flex-wrap: wrap;
   z-index: 1;
   position: relative;
   width: 280px;
+  height: 280px;
 }
+
 .psds-calendar__date-grid:not(:last-child) {
   margin-right: var(--ps-layout-spacing-large);
 }
+
 .psds-calendar__date {
   width: 40px;
   height: 40px;
@@ -95,43 +110,56 @@
   background-color: transparent;
   border: none;
 }
+
 .psds-calendar__date:focus {
+  border-radius: 50%;
+  border: 2px solid var(--ps-colors-blue-6);
+  background: var(--ps-colors-blue-2);
+  color: var(--ps-colors-text-icon-high-on-light);
   outline: 0;
 }
+
 .psds-calendar__date:hover {
   border-radius: 50%;
   border: 2px solid var(--ps-colors-blue-6);
   background: var(--ps-colors-blue-2);
   color: var(--ps-colors-text-icon-high-on-light);
 }
+
 .psds-calendar__date:disabled {
   color: var(--ps-colors-text-icon-low-on-light);
   text-decoration: line-through;
 }
+
 .psds-calendar__date--in-range {
   transition: background-color var(--ps-motion-speed-normal);
   background: var(--ps-colors-blue-2);
 }
+
 .psds-calendar__date--in-range:hover {
   border-radius: 0;
   border: none;
   background: var(--ps-colors-blue-3);
   color: var(--ps-colors-text-icon-high-on-light);
 }
+
 .psds-calendar__date--selected {
   border-radius: 50%;
   border: 2px solid var(--ps-colors-blue-6);
   background: var(--ps-colors-blue-6);
   color: var(--ps-colors-text-icon-high-on-dark);
   position: relative;
 }
+
 .psds-calendar__date--selected:hover {
   color: var(--ps-colors-text-icon-high-on-light);
   background: var(--ps-colors-blue-2);
 }
+
 .psds-calendar__date--selected-start {
   position: relative;
 }
+
 .psds-calendar__date--selected-start:after {
   content: ' ';
   display: block;
@@ -143,9 +171,11 @@
   height: 40px;
   background: var(--ps-colors-blue-2);
 }
+
 .psds-calendar__date--selected-end {
   position: relative;
 }
+
 .psds-calendar__date--selected-end:after {
   content: ' ';
   display: block;
@@ -157,7 +187,8 @@
   height: 40px;
   background: var(--ps-colors-blue-2);
 }
+
 .psds-calendar__filler {
   width: 40px;
   height: 40px;
-}
+}