@zendeskgarden/react-datepickers 9.0.0-next.3 → 9.0.0-next.5

package/README.md

@@ -22,7 +22,7 @@ for localization support.
 
 ```jsx
 import { ThemeProvider } from '@zendeskgarden/react-theming';
-import { Field, Label, Input } from '@zendeskgarden/react-forms';
+import { Field, Input } from '@zendeskgarden/react-forms';
 import { DatePicker } from '@zendeskgarden/react-datepickers';
 
 /**
@@ -30,7 +30,7 @@ import { DatePicker } from '@zendeskgarden/react-datepickers';
  */
 <ThemeProvider>
   <Field>
-    <Label>Example datepicker</Label>
+    <Field.Label>Example datepicker</Field.Label>
     <DatePicker value={new Date()} onChange={selectedDate => console.log(selectedDate)}>
       <Input />
     </DatePicker>

package/dist/index.cjs.js

@@ -63,7 +63,7 @@ const PLACEMENT = ['auto', ...reactTheming.PLACEMENT];
 const COMPONENT_ID$b = 'datepickers.menu';
 const StyledMenu = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
@@ -148,7 +148,7 @@ const retrieveColor$1 = _ref2 => {
   let {
     theme
   } = _ref2;
-  return styled.css([":hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}color:", ";"], reactTheming.getColor('primaryHue', 600, theme, 0.08), theme.colors.foreground, reactTheming.getColor('primaryHue', 600, theme, 0.2), theme.colors.foreground, reactTheming.getColor('neutralHue', 600, theme));
+  return styled.css([":hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}color:", ";"], reactTheming.getColorV8('primaryHue', 600, theme, 0.08), theme.colors.foreground, reactTheming.getColorV8('primaryHue', 600, theme, 0.2), theme.colors.foreground, reactTheming.getColorV8('neutralHue', 600, theme));
 };
 const COMPONENT_ID$6 = 'datepickers.header_paddle';
 const StyledHeaderPaddle = styled__default.default.div.attrs({
@@ -246,7 +246,7 @@ const retrieveColor = _ref2 => {
     isHighlighted,
     theme
   } = _ref2;
-  return styled.css(["background-color:", ";"], isHighlighted && reactTheming.getColor('primaryHue', 600, theme, 0.08));
+  return styled.css(["background-color:", ";"], isHighlighted && reactTheming.getColorV8('primaryHue', 600, theme, 0.08));
 };
 const StyledHighlight = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$1
@@ -267,26 +267,26 @@ const retrieveStyledDayColors = _ref => {
     theme
   } = _ref;
   let backgroundColor = 'inherit';
-  let color = reactTheming.getColor('primaryHue', 600, theme);
+  let color = reactTheming.getColorV8('primaryHue', 600, theme);
   if (isSelected && !isDisabled) {
-    backgroundColor = reactTheming.getColor('primaryHue', 600, theme);
+    backgroundColor = reactTheming.getColorV8('primaryHue', 600, theme);
     color = theme.colors.background;
   } else if (isDisabled) {
-    color = reactTheming.getColor('neutralHue', 400, theme);
+    color = reactTheming.getColorV8('neutralHue', 400, theme);
   } else if (isToday) {
     color = 'inherit';
   } else if (isPreviousMonth) {
-    color = reactTheming.getColor('neutralHue', 600, theme);
+    color = reactTheming.getColorV8('neutralHue', 600, theme);
   }
   return styled.css(["background-color:", ";color:", ";", ""], backgroundColor, color, !isSelected && !isDisabled && `
       :hover {
-        background-color: ${reactTheming.getColor('primaryHue', 600, theme, 0.08)};
-        color: ${reactTheming.getColor('primaryHue', 800, theme)};
+        background-color: ${reactTheming.getColorV8('primaryHue', 600, theme, 0.08)};
+        color: ${reactTheming.getColorV8('primaryHue', 800, theme)};
       }
 
       :active {
-        background-color: ${reactTheming.getColor('primaryHue', 600, theme, 0.2)};
-        color: ${reactTheming.getColor('primaryHue', 800, theme)};
+        background-color: ${reactTheming.getColorV8('primaryHue', 600, theme, 0.2)};
+        color: ${reactTheming.getColorV8('primaryHue', 800, theme)};
       }
   `);
 };
@@ -828,6 +828,10 @@ const DatePicker = React.forwardRef((props, calendarRef) => {
       transform
     }
   } = reactDom.useFloating({
+    platform: {
+      ...reactDom.platform,
+      isRTL: () => theme.rtl
+    },
     elements: {
       reference: triggerRef?.current,
       floating: floatingRef?.current
@@ -1608,7 +1612,7 @@ const Calendar = React.forwardRef((props, ref) => {
   return React__namespace.default.createElement(StyledRangeCalendar, _extends({
     ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '9.0.0-next.3'
+    "data-garden-version": '9.0.0-next.5'
   }, props), React__namespace.default.createElement(Month, {
     displayDate: state.previewDate,
     isNextHidden: true

package/dist/index.esm.js

@@ -10,8 +10,8 @@ import React__default, { createContext, useContext, useCallback, forwardRef, use
 import PropTypes from 'prop-types';
 import { mergeRefs } from 'react-merge-refs';
 import styled, { css, ThemeContext } from 'styled-components';
-import { useFloating, autoPlacement, flip, autoUpdate } from '@floating-ui/react-dom';
-import { PLACEMENT as PLACEMENT$1, retrieveComponentStyles, DEFAULT_THEME, menuStyles, getMenuPosition, getColor, getFloatingPlacements } from '@zendeskgarden/react-theming';
+import { useFloating, platform, autoPlacement, flip, autoUpdate } from '@floating-ui/react-dom';
+import { PLACEMENT as PLACEMENT$1, retrieveComponentStyles, DEFAULT_THEME, menuStyles, getMenuPosition, getColorV8, getFloatingPlacements } from '@zendeskgarden/react-theming';
 import { startOfMonth } from 'date-fns/startOfMonth';
 import { endOfMonth } from 'date-fns/endOfMonth';
 import { startOfWeek } from 'date-fns/startOfWeek';
@@ -38,7 +38,7 @@ const PLACEMENT = ['auto', ...PLACEMENT$1];
 const COMPONENT_ID$b = 'datepickers.menu';
 const StyledMenu = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$b,
-  'data-garden-version': '9.0.0-next.3'
+  'data-garden-version': '9.0.0-next.5'
 }).withConfig({
   displayName: "StyledMenu",
   componentId: "sc-1npbkk0-0"
@@ -123,7 +123,7 @@ const retrieveColor$1 = _ref2 => {
   let {
     theme
   } = _ref2;
-  return css([":hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}color:", ";"], getColor('primaryHue', 600, theme, 0.08), theme.colors.foreground, getColor('primaryHue', 600, theme, 0.2), theme.colors.foreground, getColor('neutralHue', 600, theme));
+  return css([":hover{background-color:", ";color:", ";}:active{background-color:", ";color:", ";}color:", ";"], getColorV8('primaryHue', 600, theme, 0.08), theme.colors.foreground, getColorV8('primaryHue', 600, theme, 0.2), theme.colors.foreground, getColorV8('neutralHue', 600, theme));
 };
 const COMPONENT_ID$6 = 'datepickers.header_paddle';
 const StyledHeaderPaddle = styled.div.attrs({
@@ -221,7 +221,7 @@ const retrieveColor = _ref2 => {
     isHighlighted,
     theme
   } = _ref2;
-  return css(["background-color:", ";"], isHighlighted && getColor('primaryHue', 600, theme, 0.08));
+  return css(["background-color:", ";"], isHighlighted && getColorV8('primaryHue', 600, theme, 0.08));
 };
 const StyledHighlight = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$1
@@ -242,26 +242,26 @@ const retrieveStyledDayColors = _ref => {
     theme
   } = _ref;
   let backgroundColor = 'inherit';
-  let color = getColor('primaryHue', 600, theme);
+  let color = getColorV8('primaryHue', 600, theme);
   if (isSelected && !isDisabled) {
-    backgroundColor = getColor('primaryHue', 600, theme);
+    backgroundColor = getColorV8('primaryHue', 600, theme);
     color = theme.colors.background;
   } else if (isDisabled) {
-    color = getColor('neutralHue', 400, theme);
+    color = getColorV8('neutralHue', 400, theme);
   } else if (isToday) {
     color = 'inherit';
   } else if (isPreviousMonth) {
-    color = getColor('neutralHue', 600, theme);
+    color = getColorV8('neutralHue', 600, theme);
   }
   return css(["background-color:", ";color:", ";", ""], backgroundColor, color, !isSelected && !isDisabled && `
       :hover {
-        background-color: ${getColor('primaryHue', 600, theme, 0.08)};
-        color: ${getColor('primaryHue', 800, theme)};
+        background-color: ${getColorV8('primaryHue', 600, theme, 0.08)};
+        color: ${getColorV8('primaryHue', 800, theme)};
       }
 
       :active {
-        background-color: ${getColor('primaryHue', 600, theme, 0.2)};
-        color: ${getColor('primaryHue', 800, theme)};
+        background-color: ${getColorV8('primaryHue', 600, theme, 0.2)};
+        color: ${getColorV8('primaryHue', 800, theme)};
       }
   `);
 };
@@ -803,6 +803,10 @@ const DatePicker = forwardRef((props, calendarRef) => {
       transform
     }
   } = useFloating({
+    platform: {
+      ...platform,
+      isRTL: () => theme.rtl
+    },
     elements: {
       reference: triggerRef?.current,
       floating: floatingRef?.current
@@ -1583,7 +1587,7 @@ const Calendar = forwardRef((props, ref) => {
   return React__default.createElement(StyledRangeCalendar, _extends({
     ref: ref,
     "data-garden-id": "datepickers.range",
-    "data-garden-version": '9.0.0-next.3'
+    "data-garden-version": '9.0.0-next.5'
   }, props), React__default.createElement(Month, {
     displayDate: state.previewDate,
     isNextHidden: true

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-datepickers",
-  "version": "9.0.0-next.3",
+  "version": "9.0.0-next.5",
   "description": "Components relating to datepickers in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -31,10 +31,10 @@
     "@zendeskgarden/react-theming": "^8.1.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0",
-    "styled-components": "^5.1.0"
+    "styled-components": "^5.3.1"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^9.0.0-next.3",
+    "@zendeskgarden/react-theming": "^9.0.0-next.5",
     "@zendeskgarden/svg-icons": "7.0.0"
   },
   "keywords": [
@@ -47,5 +47,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "d5086e8a3ae0c8608361966954bf434ef03005ec"
+  "gitHead": "806fa33feb06142c3f69b6a87b53628469117e4d"
 }