@veracity/vui 2.25.0 → 2.25.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.25.0",
+  "version": "2.25.1",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/datePicker/datePicker.tsx

@@ -1,24 +1,21 @@
-import React, { useEffect, useRef, useState } from 'react'
+import { useEffect, useRef, useState } from 'react'
 
 import Box from '../box'
 import Button, { LineButton } from '../button'
 import Calendar, { DateRange, maxDateTimestamp, minDateTimestamp } from '../calendar'
-import { omitThemingProps, styled, useStyleConfig, vui } from '../core'
+import { omitThemingProps, useStyleConfig, vui } from '../core'
+import Popover from '../popover'
 import { cs, useClickOutside } from '../utils'
-import { PickerPanel } from './components/pickerPanel'
 import { DateInput } from './dateInput'
 import { DatePickerProps } from './datePicker.types'
 
-const DatePickerPanel = styled(PickerPanel)`
-  width: 320px;
-`
-
 /** Select or input a date. */
 export const DatePicker = vui<'span', DatePickerProps>((props, ref) => {
   const {
     autoOpened,
     boundaries,
-    popupPosition = 'left',
+    popupPosition,
+    placement,
     selectedDate: selectedDateProps,
     showClearButton,
     slotBottom,
@@ -35,11 +32,8 @@ export const DatePicker = vui<'span', DatePickerProps>((props, ref) => {
   const [isInvalidInputDate, setIsInvalidInputDate] = useState(true)
   const [isInvalidSelectedDate, setIsInvalidSelectedDate] = useState(!selectedDate)
   const initialDateRef = useRef<Date | undefined>(selectedDateProps)
-  const popupRef = useRef<HTMLDivElement>(null)
   const isClearButtonVisible = showClearButton && initialDateRef.current
 
-  useClickOutside(popupRef, () => setIsOpen(false))
-
   const isStartDateInRange = (date: Date) =>
     !!boundaries?.startDate && !!date ? date.getTime() - boundaries.startDate.getTime() >= 0 : true
 
@@ -116,9 +110,15 @@ export const DatePicker = vui<'span', DatePickerProps>((props, ref) => {
 
   return (
     <Box className={cs('vui-datePicker', className)} position="relative" ref={ref} {...styles} {...rest}>
-      <Box onClick={onToggle}>{children}</Box>
-      {isOpen && (
-        <DatePickerPanel popupPosition={popupPosition} ref={popupRef} showPopupBelow>
+      <Popover
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        placement={placement ? placement : popupPosition === 'right' ? 'bottom-end' : undefined}
+      >
+        <Popover.Trigger as={Box} onClick={onToggle}>
+          {children}
+        </Popover.Trigger>
+        <Popover.Content column>
           {!!slotTop && <Box px={2}>{slotTop}</Box>}
           <Box display="block" mb={0} mt={2} mx={2}>
             <DateInput
@@ -160,8 +160,8 @@ export const DatePicker = vui<'span', DatePickerProps>((props, ref) => {
             </Box>
           </Box>
           {!!slotBottom && <Box px={2}>{slotBottom}</Box>}
-        </DatePickerPanel>
-      )}
+        </Popover.Content>
+      </Popover>
     </Box>
   )
 })

package/src/datePicker/datePicker.types.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react'
+import { Placement } from 'tippy.js'
 
 import { BoxProps } from '../box'
 import { DateRange } from '../calendar'
@@ -12,14 +13,18 @@ export type DatePickerProps = Omit<BoxProps, 'size' | 'variant'> &
     autoOpened?: boolean
     /** Available date range for the Calendar */
     boundaries?: DateRange
-    /** Should the popup be anchored to the left or right of the button */
+    /** @deprecated Please use placement ↓ */
     popupPosition?: DatePickerPopupPosition
+    /** Preferred placement of the content. Might be flipped if needs more space. */
+    placement?: Placement
+    /** Selected date */
     selectedDate?: Date
+    /** Should the clear button be visible */
     showClearButton?: boolean
     /** Custom content displayed at the bottom of the panel */
     slotBottom?: ReactNode
     /** Custom content displayed at the top of the panel */
     slotTop?: ReactNode
-    /** Date selected */
+    /** Date selected callback */
     onSelected?: (date?: Date) => void
   }

package/src/theme/foundations/colors.ts

@@ -211,7 +211,7 @@ export const seaBlue = {
   65: 'hsl(218, 100%, 65%)',
   60: 'hsl(218, 100%, 60%)',
   55: 'hsl(218, 100%, 55%)',
-  50: 'hsl(218, 100%, 55%)',
+  50: 'hsl(218, 100%, 50%)',
   45: 'hsl(218, 100%, 45%)',
   40: 'hsl(218, 100%, 40%)',
   35: 'hsl(218, 100%, 35%)',

package/dist/cjs/datePicker/components/pickerPanel.d.ts

@@ -1,6 +0,0 @@
-import { DatePickerPopupPosition } from '../datePicker.types';
-export declare const PickerPanel: import("styled-components").StyledComponent<import("../../core").VuiComponent<"div", import("../../panel").PanelProps>, import("styled-components").DefaultTheme, {
-    popupPosition: DatePickerPopupPosition;
-    showPopupBelow: boolean;
-}, never>;
-//# sourceMappingURL=pickerPanel.d.ts.map

package/dist/cjs/datePicker/components/pickerPanel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pickerPanel.d.ts","sourceRoot":"","sources":["../../../../src/datePicker/components/pickerPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAA;AAE7D,eAAO,MAAM,WAAW;mBAAkC,uBAAuB;oBAAkB,OAAO;SAiBzG,CAAA"}

package/dist/cjs/datePicker/components/pickerPanel.js

@@ -1,26 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.PickerPanel = void 0;
-const core_1 = require("../../core");
-const panel_1 = __importDefault(require("../../panel"));
-exports.PickerPanel = (0, core_1.styled)(panel_1.default) `
-  display: flex;
-  flex-direction: column;
-  padding: 0px;
-  position: absolute;
-  z-index: 999;
-  ${p => (p.popupPosition === 'right' ? 'right: 0;' : 'left: 0;')}
-  ${p => p.showPopupBelow
-    ? (0, core_1.css) `
-          margin-top: 50px;
-          top: 0;
-        `
-    : (0, core_1.css) `
-          bottom: 0;
-          margin-bottom: 50px;
-        `}
-`;
-//# sourceMappingURL=pickerPanel.js.map

package/dist/cjs/datePicker/components/pickerPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pickerPanel.js","sourceRoot":"","sources":["../../../../src/datePicker/components/pickerPanel.tsx"],"names":[],"mappings":";;;;;;AAAA,qCAAwC;AACxC,wDAA+B;AAGlB,QAAA,WAAW,GAAG,IAAA,aAAM,EAAC,eAAK,CAAC,CAAqE;;;;;;IAMzG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,aAAa,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC;IAC7D,CAAC,CAAC,EAAE,CACJ,CAAC,CAAC,cAAc;IACd,CAAC,CAAC,IAAA,UAAG,EAAA;;;SAGF;IACH,CAAC,CAAC,IAAA,UAAG,EAAA;;;SAGF;CACR,CAAA"}

package/dist/esm/datePicker/components/pickerPanel.d.ts

@@ -1,6 +0,0 @@
-import { DatePickerPopupPosition } from '../datePicker.types';
-export declare const PickerPanel: import("styled-components").StyledComponent<import("../../core").VuiComponent<"div", import("../../panel").PanelProps>, import("styled-components").DefaultTheme, {
-    popupPosition: DatePickerPopupPosition;
-    showPopupBelow: boolean;
-}, never>;
-//# sourceMappingURL=pickerPanel.d.ts.map

package/dist/esm/datePicker/components/pickerPanel.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"pickerPanel.d.ts","sourceRoot":"","sources":["../../../../src/datePicker/components/pickerPanel.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,uBAAuB,EAAE,MAAM,qBAAqB,CAAA;AAE7D,eAAO,MAAM,WAAW;mBAAkC,uBAAuB;oBAAkB,OAAO;SAiBzG,CAAA"}

package/dist/esm/datePicker/components/pickerPanel.js

@@ -1,20 +0,0 @@
-import { css, styled } from '../../core';
-import Panel from '../../panel';
-export const PickerPanel = styled(Panel) `
-  display: flex;
-  flex-direction: column;
-  padding: 0px;
-  position: absolute;
-  z-index: 999;
-  ${p => (p.popupPosition === 'right' ? 'right: 0;' : 'left: 0;')}
-  ${p => p.showPopupBelow
-    ? css `
-          margin-top: 50px;
-          top: 0;
-        `
-    : css `
-          bottom: 0;
-          margin-bottom: 50px;
-        `}
-`;
-//# sourceMappingURL=pickerPanel.js.map

package/dist/esm/datePicker/components/pickerPanel.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"pickerPanel.js","sourceRoot":"","sources":["../../../../src/datePicker/components/pickerPanel.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,YAAY,CAAA;AACxC,OAAO,KAAK,MAAM,aAAa,CAAA;AAG/B,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,KAAK,CAAC,CAAqE;;;;;;IAMzG,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,aAAa,KAAK,OAAO,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,UAAU,CAAC;IAC7D,CAAC,CAAC,EAAE,CACJ,CAAC,CAAC,cAAc;IACd,CAAC,CAAC,GAAG,CAAA;;;SAGF;IACH,CAAC,CAAC,GAAG,CAAA;;;SAGF;CACR,CAAA"}

package/src/datePicker/components/pickerPanel.tsx

@@ -1,22 +0,0 @@
-import { css, styled } from '../../core'
-import Panel from '../../panel'
-import { DatePickerPopupPosition } from '../datePicker.types'
-
-export const PickerPanel = styled(Panel)<{ popupPosition: DatePickerPopupPosition; showPopupBelow: boolean }>`
-  display: flex;
-  flex-direction: column;
-  padding: 0px;
-  position: absolute;
-  z-index: 999;
-  ${p => (p.popupPosition === 'right' ? 'right: 0;' : 'left: 0;')}
-  ${p =>
-    p.showPopupBelow
-      ? css`
-          margin-top: 50px;
-          top: 0;
-        `
-      : css`
-          bottom: 0;
-          margin-bottom: 50px;
-        `}
-`