@atlaskit/datetime-picker 16.2.3 → 17.0.1

package/dist/es2019/internal/date-time-picker-container.js

@@ -1,70 +1,20 @@
+/* date-time-picker-container.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import "./date-time-picker-container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef } from 'react';
-import { css, jsx } from '@emotion/react';
-import { B100, N0, N100, N20, N30, R400 } from '@atlaskit/theme/colors';
-const isInvalidBorderStyles = css({
-  borderColor: `var(--ds-border-danger, ${R400})`
-});
-const isFocusedBorderStyles = css({
-  borderColor: `var(--ds-border-focused, ${B100})`,
-  boxShadow: `inset 0 0 0 ${"var(--ds-border-width, 1px)"} ${`var(--ds-border-focused, ${B100})`}`
-});
-const isFocusedStyles = css({
-  backgroundColor: `var(--ds-background-input-pressed, ${N0})`
-});
-const subtleBgStyles = css({
-  backgroundColor: 'transparent',
-  borderColor: 'transparent'
-});
-const subtleFocusedBgStyles = css({
-  backgroundColor: "var(--ds-background-input-pressed, transparent)",
-  borderColor: 'transparent'
-});
-const noBgStyles = css({
-  backgroundColor: 'transparent',
-  borderColor: 'transparent',
-  '&:hover': {
-    backgroundColor: 'transparent',
-    borderColor: 'transparent'
-  }
-});
-const hoverStyles = css({
-  '&:hover': {
-    backgroundColor: `var(--ds-background-input-hovered, ${N30})`,
-    borderColor: `var(--ds-border-input, ${N100})`
-  }
-});
-const isInvalidHoverStyles = css({
-  '&:hover': {
-    backgroundColor: `var(--ds-background-input-hovered, ${N0})`,
-    borderColor: `var(--ds-border-danger, ${R400})`
-  }
-});
-const isDisabledStyles = css({
-  backgroundColor: "var(--ds-background-disabled, #091E4208)",
-  borderColor: "var(--ds-border-disabled, #091E420F)",
-  '&:hover': {
-    cursor: 'default'
-  }
-});
-const newBorderStyles = css({
-  border: `${"var(--ds-border-width, 1px)"} solid ${`var(--ds-border-input, ${N100})`}`
-});
-const baseContainerStyles = css({
-  display: 'flex',
-  backgroundColor: `var(--ds-background-input, ${N20})`,
-  border: `2px solid ${`var(--ds-border-input, ${N20})`}`,
-  borderRadius: "var(--ds-border-radius, 3px)",
-  transition: 'background-color 200ms ease-in-out, border-color 200ms ease-in-out',
-  '&:hover': {
-    cursor: 'pointer'
-  }
-});
+const isInvalidBorderStyles = null;
+const isFocusedBorderStyles = null;
+const isFocusedStyles = null;
+const subtleBgStyles = null;
+const subtleFocusedBgStyles = null;
+const noBgStyles = null;
+const hoverStyles = null;
+const isInvalidHoverStyles = null;
+const isDisabledStyles = null;
+const newBorderStyles = null;
+const baseContainerStyles = null;
 /**
  * This is the container for the datetime picker component.
  */
@@ -80,10 +30,9 @@ export const DateTimePickerContainer = /*#__PURE__*/forwardRef(({
   const notFocusedOrIsDisabled = !(isFocused || isDisabled);
 
   // we cannot use Box or Flex primitives because these do not allow ...innerProps to be passed
-  return jsx("div", _extends({
-    css: [baseContainerStyles, newBorderStyles, isDisabled && isDisabledStyles, isFocused && isFocusedStyles, appearance === 'subtle' && (isFocused ? subtleFocusedBgStyles : subtleBgStyles), isFocused && isFocusedBorderStyles, isInvalid && isInvalidBorderStyles, notFocusedOrIsDisabled && (isInvalid ? isInvalidHoverStyles : hoverStyles), appearance === 'none' && noBgStyles]
-  }, innerProps, {
+  return /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
     "data-testid": testId,
-    ref: ref
+    ref: ref,
+    className: ax(["_2rkoglpi _v564r5cv _1e0c1txw _bfhk1j9a _d0altlke", "_19it1k9g", isDisabled && "_1h6d13gt _bfhksyzs _d0al73ad", isFocused && "_bfhkr01l", appearance === 'subtle' && isFocused && "_1h6d1j28 _bfhk1y3p", appearance === 'subtle' && !isFocused && "_1h6d1j28 _bfhk1j28", isFocused && "_1h6d1p6i _16qsq049", isInvalid && "_1h6d1bqt", notFocusedOrIsDisabled && isInvalid && "_4cvx1bqt _irr31d5g", notFocusedOrIsDisabled && !isInvalid && "_4cvx1elr _irr31d5g", appearance === 'none' && "_1h6d1j28 _bfhk1j28 _4cvx1j28 _irr31j28"])
   }), children);
 });

package/dist/es2019/internal/ff-component.js

@@ -41,7 +41,5 @@ export function componentWithCondition(condition, ComponentTrue, ComponentFalse)
   if (ComponentTrue.name !== '') {
     ComponentWithCondition.displayName = `ComponentWithCondition[${condition.name}]`;
   }
-
-  // eslint-disable-next-line @typescript-eslint/consistent-type-assertions
   return ComponentWithCondition;
 }

package/dist/es2019/internal/fixed-layer-menu.js

@@ -1,10 +1,7 @@
+/* fixed-layer-menu.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { components } from '@atlaskit/select';
 import FixedLayer from '../internal/fixed-layer';
 
@@ -35,12 +32,12 @@ export const FixedLayerMenu = ({
   setValue,
   children,
   ...rest
-}) => jsx(FixedLayer, {
+}) => /*#__PURE__*/React.createElement(FixedLayer, {
   inputValue: selectProps.inputValue
   //@ts-ignore react-select unsupported props
   ,
   containerRef: selectProps.fixedLayerRef,
-  content: jsx(components.Menu, _extends({}, rest, {
+  content: /*#__PURE__*/React.createElement(components.Menu, _extends({}, rest, {
     // eslint-disable-next-line @atlaskit/design-system/no-unsafe-style-overrides, @atlaskit/ui-styling-standard/no-classname-prop
     className: className,
     clearValue: clearValue,

package/dist/es2019/internal/fixed-layer.compiled.css

@@ -0,0 +1,4 @@
+._154ize3t{top:var(--ds-space-0,0)}
+._1pbyowjs{z-index:300}
+._bfhk1j28{background-color:transparent}
+._kqswstnw{position:absolute}

package/dist/es2019/internal/fixed-layer.js

@@ -1,10 +1,15 @@
+/* fixed-layer.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./fixed-layer.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import { sizes } from '@atlaskit/icon';
 import { Manager, Popper, Reference } from '@atlaskit/popper';
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-import { gridSize, layers } from '@atlaskit/theme/constants';
+const styles = {
+  root: "_bfhk1j28 _kqswstnw _154ize3t",
+  popperStyles: "_1pbyowjs"
+};
 /**
  * This component renders layered content with fixed positioning.
  * Scroll is locked outside the layer to prevent the layered content from detaching from the
@@ -33,12 +38,9 @@ export default class FixedLayer extends React.Component {
       return /*#__PURE__*/React.createElement("div", null);
     }
     const divStyles = {
-      background: 'transparent',
-      position: 'absolute',
-      top: 0,
       height: containerRef.getBoundingClientRect().height,
       // Don't block the clear button
-      width: containerRef.getBoundingClientRect().width - parseInt(sizes.small.slice(0, -2)) - gridSize()
+      width: containerRef.getBoundingClientRect().width - parseInt(sizes.small.slice(0, -2)) - 8
     };
     return (
       /*#__PURE__*/
@@ -50,7 +52,8 @@ export default class FixedLayer extends React.Component {
       }) => /*#__PURE__*/React.createElement("div", {
         ref: ref,
         "data-layer-child": true,
-        style: divStyles
+        style: divStyles,
+        className: ax([styles.root])
       })), /*#__PURE__*/React.createElement(Popper, null, ({
         ref,
         style,
@@ -61,11 +64,9 @@ export default class FixedLayer extends React.Component {
           ref: ref
           // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
           ,
-          style: {
-            ...style,
-            zIndex: layers.dialog()
-          },
-          "data-testid": testId && `${testId}--popper--container`
+          style: style,
+          "data-testid": testId && `${testId}--popper--container`,
+          className: ax([styles.popperStyles])
         }, content);
       }))
     );

package/dist/es2019/internal/indicators-container.compiled.css

@@ -0,0 +1,2 @@
+._ahbq1ejb{margin-inline-start:var(--ds-space-300,24px)}
+._ahbqxy5q{margin-inline-start:var(--ds-space-400,2pc)}

package/dist/es2019/internal/indicators-container.js

@@ -1,22 +1,17 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
+/* indicators-container.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./indicators-container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { components } from '@atlaskit/select';
-const calendarButtonInclusionStyles = css({
-  marginInlineStart: "var(--ds-space-400, 32px)"
-});
-const calendarButtonOnlyInclusionStyles = css({
-  marginInlineStart: "var(--ds-space-300, 24px)"
-});
+const styles = {
+  calendarButtonInclusionStyles: "_ahbqxy5q",
+  calendarButtonOnlyInclusionStyles: "_ahbq1ejb"
+};
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const IndicatorsContainer = ({
   showClearIndicator,
   ...rest
-}) => jsx("div", {
-  css: showClearIndicator ? calendarButtonInclusionStyles : calendarButtonOnlyInclusionStyles
-}, jsx(components.IndicatorsContainer, rest));
+}) => /*#__PURE__*/React.createElement("div", {
+  className: ax([showClearIndicator ? styles.calendarButtonInclusionStyles : styles.calendarButtonOnlyInclusionStyles])
+}, /*#__PURE__*/React.createElement(components.IndicatorsContainer, rest));

package/dist/es2019/internal/menu.compiled.css

@@ -0,0 +1,6 @@
+
+._2rkoglpi{border-radius:var(--ds-border-radius,4px)}._16qs1cd0{box-shadow:var(--ds-shadow-overlay,0 8px 9pt #091e4226,0 0 1px #091e424f)}
+._18m915vq{overflow-y:hidden}
+._1pbyowjs{z-index:300}
+._1reo15vq{overflow-x:hidden}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}

package/dist/es2019/internal/menu.js

@@ -1,16 +1,12 @@
+/* menu.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+import "./menu.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { Fragment } from 'react';
-import { css, jsx } from '@emotion/react';
 import { isValid, parseISO } from 'date-fns';
 import Calendar from '@atlaskit/calendar';
 import { Layering } from '@atlaskit/layering';
-import { N0, N50A, N60A } from '@atlaskit/theme/colors';
-import { layers } from '@atlaskit/theme/constants';
 import FixedLayer from '../internal/fixed-layer';
 
 /**
@@ -27,13 +23,7 @@ function getValidDate(isos) {
     } : acc;
   }, {});
 }
-const menuStyles = css({
-  zIndex: layers.dialog(),
-  backgroundColor: `var(--ds-surface-overlay, ${N0})`,
-  borderRadius: "var(--ds-border-radius, 3px)",
-  boxShadow: `var(--ds-shadow-overlay, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`,
-  overflow: 'hidden'
-});
+const menuStyles = null;
 
 /**
  * This is the menu used in the select of the date picker.
@@ -60,24 +50,15 @@ export const Menu = ({
     event.preventDefault();
   };
   const Wrapper = typeof MenuInnerWrapper === 'function' ? MenuInnerWrapper : Fragment;
-  return jsx(Layering, {
+  return /*#__PURE__*/React.createElement(Layering, {
     isDisabled: false
-  }, jsx(FixedLayer, {
+  }, /*#__PURE__*/React.createElement(FixedLayer, {
     inputValue: selectProps.inputValue,
     containerRef: selectProps.calendarContainerRef,
-    content:
-    // The mousedown event is required for a date selection to work when
-    // the menu is opened via the calendar button. The reason why is
-    // because there is a mousedown event on the menu inside of
-    // `react-select` that will stop the calendar select event from
-    // firing. This is passed in via the `innerProps`. Therefore, we must
-    // pass it in *after* the `innerProps` spread.
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    jsx("div", _extends({
-      css: menuStyles
-    }, innerProps, {
-      onMouseDown: onMenuMouseDown
-    }), jsx(Wrapper, null, jsx(Calendar, {
+    content: /*#__PURE__*/React.createElement("div", _extends({}, innerProps, {
+      onMouseDown: onMenuMouseDown,
+      className: ax(["_2rkoglpi _1reo15vq _18m915vq _1pbyowjs _bfhk1bhr _16qs1cd0"])
+    }), /*#__PURE__*/React.createElement(Wrapper, null, /*#__PURE__*/React.createElement(Calendar, {
       day: day,
       month: month,
       year: year,

package/dist/esm/components/date-picker-class.compiled.css

@@ -0,0 +1,16 @@
+
+._v564vrg3{transition:color .15s}._12l21b66{margin-inline-end:var(--ds-space-050,4px)}
+._12l2xy5q{margin-inline-end:var(--ds-space-400,2pc)}
+._152tze3t{inset-block-start:var(--ds-space-0,0)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1tke1k8s{min-height:1.5rem}
+._1ul91k8s{min-width:1.5rem}
+._4cvr1h6o{align-items:center}
+._4t3i1osq{height:100%}
+._i0dl1kw7{flex-basis:inherit}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._rjxpze3t{inset-inline-end:var(--ds-space-0,0)}
+._syaz131l{color:var(--ds-text-subtlest,#626f86)}
+._30l31gjq:hover{color:var(--ds-text-subtle,#44546f)}