@primer/components 0.0.0-202192822657 → 0.0.0-2021929142717

package/lib-esm/Token/_RemoveTokenButton.js

@@ -2,7 +2,7 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import { XIcon } from '@primer/octicons-react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import { variant } from 'styled-system';
 import { get } from '../constants';
 import sx from '../sx';
@@ -34,7 +34,16 @@ const getTokenButtonIconSize = size => parseInt(tokenSizes[size || defaultTokenS
 const StyledTokenButton = styled.span.withConfig({
   displayName: "_RemoveTokenButton__StyledTokenButton",
   componentId: "sc-14lvcw1-0"
-})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;&:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, get('colors.neutral.muted'), get('colors.neutral.subtle'), variants, sx);
+})(["background-color:transparent;font-family:inherit;color:currentColor;cursor:pointer;display:inline-flex;justify-content:center;align-items:center;user-select:none;appearance:none;text-decoration:none;padding:0;transform:", ";align-self:baseline;border:0;border-radius:999px;", " &:hover,&:focus{background-color:", ";}&:active{background-color:", ";}", " ", ""], props => `translate(${props.borderOffset}px, -${props.borderOffset}px)`, props => {
+  switch (props.size) {
+    case 'large':
+    case 'extralarge':
+      return css(["margin-left:", ";"], get('space.2'));
+
+    default:
+      return css(["margin-left:", ";"], get('space.1'));
+  }
+}, get('colors.neutral.muted'), get('colors.neutral.subtle'), variants, sx);
 
 const RemoveTokenButton = ({
   'aria-label': ariaLabel,

package/lib-esm/_TextInputWrapper.js

@@ -21,7 +21,7 @@ const sizeVariants = variant({
 const TextInputWrapper = styled.span.withConfig({
   displayName: "_TextInputWrapper__TextInputWrapper",
   componentId: "sc-5vfcis-0"
-})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('shadows.primer.shadow.inset'), props => {
+})(["display:inline-flex;align-items:stretch;min-height:34px;font-size:", ";line-height:20px;color:", ";vertical-align:middle;background-repeat:no-repeat;background-position:right 8px center;border:1px solid ", ";border-radius:", ";outline:none;box-shadow:", ";cursor:text;", " .TextInput-icon{align-self:center;color:", ";margin:0 ", ";flex-shrink:0;}&:focus-within{border-color:", ";box-shadow:", ";}", " ", " ", " @media (min-width:", "){font-size:", ";}", " ", " ", " ", " ", ";"], get('fontSizes.1'), get('colors.fg.default'), get('colors.border.default'), get('radii.2'), get('shadows.primer.shadow.inset'), props => {
   if (props.hasIcon) {
     return css(["padding:0;"]);
   } else {

package/lib-esm/experiments.d.ts

@@ -0,0 +1 @@
+export * from './ActionList2';

package/lib-esm/experiments.js

@@ -0,0 +1,2 @@
+// Components
+export * from './ActionList2';

package/lib-esm/sx.d.ts

@@ -1,6 +1,8 @@
 import { SystemStyleObject } from '@styled-system/css';
+import merge from 'deepmerge';
 export interface SxProp {
     sx?: SystemStyleObject;
 }
 declare const sx: (props: SxProp) => import("@styled-system/css").CssFunctionReturnType;
 export default sx;
+export { merge };

package/lib-esm/sx.js

@@ -1,5 +1,7 @@
 import css from '@styled-system/css';
+import merge from 'deepmerge';
 
 const sx = props => css(props.sx);
 
-export default sx;
+export default sx;
+export { merge };

package/lib-esm/theme-preval.js

@@ -515,7 +515,7 @@ module.exports = {
           }
         }
       },
-      "light_colorblind": {
+      "light_protanopia": {
         "colors": {
           "canvasDefaultTransparent": "rgba(255,255,255,0)",
           "marketingIcon": {
@@ -2456,7 +2456,7 @@ module.exports = {
           }
         }
       },
-      "dark_colorblind": {
+      "dark_protanopia": {
         "colors": {
           "canvasDefaultTransparent": "rgba(13,17,23,0)",
           "marketingIcon": {

package/lib-esm/utils/create-slots.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+/** createSlots is a factory that can create a
+ *  typesafe Slots + Slot pair to use in a component definition
+ *  For example: ActionList.Item uses createSlots to get a Slots wrapper
+ *  + Slot component that is used by LeadingVisual, Description
+ */
+declare const createSlots: <SlotNames extends string>(slotNames: SlotNames[]) => {
+    Slots: React.FC<{
+        context: Record<string, unknown>;
+        children: (slots: { [key in SlotNames]?: React.ReactNode; }) => React.ReactNode;
+    }>;
+    Slot: React.FC<{
+        name: SlotNames;
+        children: React.ReactNode | ((context: Record<string, unknown>) => React.ReactNode);
+    }>;
+};
+export default createSlots;

package/lib-esm/utils/create-slots.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { useForceUpdate } from './use-force-update';
+/** createSlots is a factory that can create a
+ *  typesafe Slots + Slot pair to use in a component definition
+ *  For example: ActionList.Item uses createSlots to get a Slots wrapper
+ *  + Slot component that is used by LeadingVisual, Description
+ */
+
+const createSlots = slotNames => {
+  const SlotsContext = /*#__PURE__*/React.createContext({
+    registerSlot: () => null,
+    unregisterSlot: () => null,
+    context: {}
+  });
+  /** Slots uses a Double render strategy inspired by [reach-ui/descendants](https://github.com/reach/reach-ui/tree/develop/packages/descendants)
+   *  Slot registers themself with the Slots parent.
+   *  When all the children have mounted = registered themselves in slot,
+   *  we re-render the parent component to render with slots
+   */
+
+  const Slots = ({
+    context,
+    children
+  }) => {
+    // initialise slots
+    const slotsDefinition = {};
+    slotNames.map(name => slotsDefinition[name] = null);
+    const slotsRef = React.useRef(slotsDefinition);
+    const rerenderWithSlots = useForceUpdate();
+    const [isMounted, setIsMounted] = React.useState(false); // fires after all the effects in children
+
+    React.useEffect(() => {
+      rerenderWithSlots();
+      setIsMounted(true);
+    }, [rerenderWithSlots]);
+    const registerSlot = React.useCallback((name, contents) => {
+      slotsRef.current[name] = contents; // don't render until the component mounts = all slots are registered
+
+      if (isMounted) rerenderWithSlots();
+    }, [isMounted, rerenderWithSlots]); // Slot can be removed from the tree as well,
+    // we need to unregister them from the slot
+
+    const unregisterSlot = React.useCallback(name => {
+      slotsRef.current[name] = null;
+      rerenderWithSlots();
+    }, [rerenderWithSlots]);
+    /**
+     * Slots uses a render prop API so abstract the
+     * implementation detail of using a context provider.
+     */
+
+    const slots = slotsRef.current;
+    return /*#__PURE__*/React.createElement(SlotsContext.Provider, {
+      value: {
+        registerSlot,
+        unregisterSlot,
+        context
+      }
+    }, children(slots));
+  };
+
+  const Slot = ({
+    name,
+    children
+  }) => {
+    const {
+      registerSlot,
+      unregisterSlot,
+      context
+    } = React.useContext(SlotsContext);
+    React.useEffect(() => {
+      registerSlot(name, typeof children === 'function' ? children(context) : children);
+      return () => unregisterSlot(name);
+    }, [name, children, registerSlot, unregisterSlot, context]);
+    return null;
+  };
+
+  return {
+    Slots,
+    Slot
+  };
+};
+
+export default createSlots;

package/lib-esm/utils/testing.d.ts

@@ -53,7 +53,7 @@ export declare function render(component: React.ReactElement, theme?: {
         xlarge: string;
     };
     space: string[];
-    colorSchemes: Record<"light" | "light_colorblind" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_colorblind", Record<"colors" | "shadows", Partial<{
+    colorSchemes: Record<"light" | "light_protanopia" | "dark" | "dark_dimmed" | "dark_high_contrast" | "dark_protanopia", Record<"colors" | "shadows", Partial<{
         canvasDefaultTransparent: string;
         marketingIcon: {
             primary: string;

package/lib-esm/utils/use-force-update.d.ts

@@ -0,0 +1 @@
+export declare const useForceUpdate: () => () => void;

package/lib-esm/utils/use-force-update.js

@@ -0,0 +1,6 @@
+// Inspired from reach-ui: https://github.com/reach/reach-ui/blob/develop/packages/utils/src/use-force-update.ts
+import React from 'react';
+export const useForceUpdate = () => {
+  const [, rerender] = React.useState({});
+  return React.useCallback(() => rerender({}), []);
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/components",
-  "version": "0.0.0-202192822657",
+  "version": "0.0.0-2021929142717",
   "description": "Primer react components",
   "main": "lib/index.js",
   "module": "lib-esm/index.js",
@@ -43,16 +43,20 @@
   "author": "GitHub, Inc.",
   "license": "MIT",
   "dependencies": {
-    "@primer/octicons-react": "^16.1.0",
-    "@primer/primitives": "6.0.0",
+    "@primer/octicons-react": "^13.0.0",
+    "@primer/primitives": "5.1.0",
     "@radix-ui/react-polymorphic": "0.0.14",
     "@react-aria/ssr": "3.1.0",
     "@styled-system/css": "5.1.5",
     "@styled-system/props": "5.1.5",
     "@styled-system/theme-get": "5.1.2",
+    "@types/history": "4.7.8",
+    "@types/styled-components": "5.1.11",
+    "@types/styled-system": "5.1.12",
+    "@types/styled-system__css": "5.0.16",
+    "@types/styled-system__theme-get": "5.0.1",
     "classnames": "2.3.1",
     "color2k": "1.2.4",
-    "date-fns": "2.25.0",
     "deepmerge": "4.2.2",
     "focus-visible": "5.2.0",
     "styled-system": "5.1.5"
@@ -72,20 +76,15 @@
     "@rollup/plugin-commonjs": "19.0.2",
     "@rollup/plugin-node-resolve": "13.0.5",
     "@size-limit/preset-big-lib": "5.0.2",
-    "@storybook/addon-a11y": "6.3.4",
-    "@storybook/addon-actions": "^6.2.9",
-    "@storybook/addon-essentials": "6.2.9",
-    "@storybook/addon-links": "^6.2.9",
-    "@storybook/react": "6.3.8",
+    "@storybook/addon-a11y": "6.3.12",
+    "@storybook/addon-actions": "^6.3.12",
+    "@storybook/addon-essentials": "6.3.12",
+    "@storybook/addon-links": "^6.3.12",
+    "@storybook/react": "6.3.12",
     "@testing-library/dom": "7.31.2",
     "@testing-library/react": "11.2.7",
     "@testing-library/react-hooks": "7.0.2",
     "@testing-library/user-event": "13.1.9",
-    "@types/history": "4.7.9",
-    "@types/styled-components": "5.1.15",
-    "@types/styled-system": "5.1.13",
-    "@types/styled-system__css": "5.0.16",
-    "@types/styled-system__theme-get": "5.0.1",
     "@types/chroma-js": "2.1.3",
     "@types/enzyme": "3.10.9",
     "@types/jest": "26.0.23",
@@ -125,6 +124,8 @@
     "lodash.isobject": "3.0.2",
     "prettier": "2.3.2",
     "react": "17.0.2",
+    "react-dnd": "14.0.4",
+    "react-dnd-html5-backend": "14.0.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
     "rollup": "2.56.3",
@@ -133,6 +134,7 @@
     "rollup-plugin-visualizer": "5.5.0",
     "semver": "7.3.5",
     "size-limit": "5.0.2",
+    "storybook-addon-performance": "0.16.1",
     "styled-components": "4.4.1",
     "typescript": "4.2.2"
   },

package/lib/DatePicker/DatePicker.d.ts

@@ -1,48 +0,0 @@
-import React from 'react';
-import { OverlayProps } from '../Overlay';
-import { FocusTrapHookSettings } from '../hooks/useFocusTrap';
-import { FocusZoneHookSettings } from '../hooks/useFocusZone';
-import { DatePickerConfiguration, Selection } from './useDatePicker';
-declare type OpenGesture = 'anchor-click' | 'anchor-key-press';
-declare type CloseGesture = 'anchor-click' | 'click-outside' | 'escape';
-export interface DatePickerProps extends DatePickerConfiguration {
-    /**
-     * An override to the internal ref that will be spread on to the renderAnchor
-     */
-    anchorRef?: React.RefObject<HTMLElement>;
-    /**
-     * Settings to apply to the Focus Zone on the internal `Overlay` component.
-     */
-    focusTrapSettings?: Partial<FocusTrapHookSettings>;
-    /**
-     * Settings to apply to the Focus Zone on the internal `Overlay` component.
-     */
-    focusZoneSettings?: Partial<FocusZoneHookSettings>;
-    initialValue?: 'today' | Date | string | null;
-    iconOnly?: boolean;
-    placeholder?: string;
-    /**
-     * Determines whether the overlay portion of the component should be shown or not
-     */
-    open?: boolean;
-    /**
-     * A callback which is called whenever the overlay is currently closed and an "open gesture" is detected.
-     */
-    onOpen?: (gesture: OpenGesture) => unknown;
-    /**
-     * A callback which is called whenever the overlay is currently open and a "close gesture" is detected.
-     */
-    onClose?: (gesture: CloseGesture) => unknown;
-    /**
-     * Props to be spread on the internal `Overlay` component.
-     */
-    overlayProps?: Partial<OverlayProps>;
-    /**
-     * A custom function component used to render the anchor element.
-     * Will receive the selected text as `children` prop when an item is activated.
-     */
-    renderAnchor: <T extends React.HTMLAttributes<HTMLElement>>(props: T) => JSX.Element;
-    value?: Selection;
-}
-export declare const DatePicker: React.FC<DatePickerProps>;
-export {};

package/lib/DatePicker/DatePicker.js

@@ -1,106 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DatePicker = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _DatePickerAnchor = require("./DatePickerAnchor");
-
-var _useDatePicker = require("./useDatePicker");
-
-var _DatePickerOverlay = require("./DatePickerOverlay");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-const DatePicker = ({
-  anchorVariant,
-  anchorRef: externalAnchorRef,
-  confirmation,
-  confirmUnsavedClose,
-  dateFormat,
-  disableWeekends,
-  focusTrapSettings,
-  focusZoneSettings,
-  iconPlacement,
-  maxDate,
-  maxRangeSize,
-  maxSelections,
-  minDate,
-  onOpen: onOpenExternal,
-  onClose: onCloseExternal,
-  open,
-  overlayProps,
-  placeholder,
-  renderAnchor,
-  showInputPrompt,
-  value,
-  variant,
-  view,
-  weekStartsOn
-}) => {
-  const anchorRef = (0, _react.useRef)(null);
-  const [isOpen, setIsOpen] = (0, _react.useState)(false);
-  const datePickerConfiguration = {
-    anchorVariant,
-    confirmation,
-    confirmUnsavedClose,
-    dateFormat,
-    disableWeekends,
-    iconPlacement,
-    maxDate: maxDate ? new Date(new Date(maxDate).toDateString()) : maxDate,
-    maxRangeSize,
-    maxSelections,
-    minDate: minDate ? new Date(new Date(minDate).toDateString()) : minDate,
-    placeholder,
-    showInputPrompt,
-    variant,
-    view,
-    weekStartsOn
-  };
-
-  const onOpen = gesture => {
-    setIsOpen(true);
-    onOpenExternal === null || onOpenExternal === void 0 ? void 0 : onOpenExternal(gesture);
-  };
-
-  const onClose = gesture => {
-    setIsOpen(false);
-    onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal(gesture);
-  };
-
-  const toggleIsOpen = () => {
-    if (isOpen) {
-      setIsOpen(false);
-      onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal('anchor-click');
-    } else {
-      setIsOpen(true);
-      onCloseExternal === null || onCloseExternal === void 0 ? void 0 : onCloseExternal('anchor-click');
-    }
-  };
-
-  return /*#__PURE__*/_react.default.createElement(_useDatePicker.DatePickerProvider, {
-    configuration: datePickerConfiguration,
-    value: value,
-    closePicker: () => setIsOpen(false)
-  }, /*#__PURE__*/_react.default.createElement(_DatePickerAnchor.DatePickerAnchor, {
-    ref: anchorRef,
-    onAction: toggleIsOpen
-  }), /*#__PURE__*/_react.default.createElement(_DatePickerOverlay.DatePickerOverlay, {
-    anchorRef: externalAnchorRef !== null && externalAnchorRef !== void 0 ? externalAnchorRef : anchorRef,
-    renderAnchor: renderAnchor,
-    open: open !== null && open !== void 0 ? open : isOpen,
-    onOpen: onOpen,
-    onClose: onClose,
-    overlayProps: overlayProps,
-    focusTrapSettings: focusTrapSettings,
-    focusZoneSettings: focusZoneSettings
-  }));
-};
-
-exports.DatePicker = DatePicker;
-DatePicker.displayName = "DatePicker";

package/lib/DatePicker/DatePickerAnchor.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export interface DatePickerAnchorProps {
-    onAction?: (event?: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
-}
-export declare const DatePickerAnchor: React.ForwardRefExoticComponent<DatePickerAnchorProps & React.RefAttributes<HTMLDivElement>>;

package/lib/DatePicker/DatePickerAnchor.js

@@ -1,194 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DatePickerAnchor = void 0;
-
-var _octiconsReact = require("@primer/octicons-react");
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _Button = _interopRequireWildcard(require("../Button"));
-
-var _Text = _interopRequireDefault(require("../Text"));
-
-var _constants = require("../constants");
-
-var _StyledOcticon = _interopRequireDefault(require("../StyledOcticon"));
-
-var _useDatePicker = _interopRequireDefault(require("./useDatePicker"));
-
-var _TextInput = _interopRequireDefault(require("../TextInput"));
-
-var _Box = _interopRequireDefault(require("../Box"));
-
-var _dateParser = require("./dateParser");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const DatePickerAnchorButton = (0, _styledComponents.default)(_Button.default).withConfig({
-  displayName: "DatePickerAnchor__DatePickerAnchorButton",
-  componentId: "sc-8gpb9d-0"
-})(["align-items:center;display:flex;flex-direction:row;justify-content:space-between;max-width:350px;overflow:hidden;& ", " ~ svg{margin-left:", ";}& svg ~ ", "{margin-left:", ";}"], _Text.default, (0, _constants.get)('space.2'), _Text.default, (0, _constants.get)('space.2'));
-
-const DatePickerAnchor = /*#__PURE__*/_react.default.forwardRef(({
-  onAction
-}, ref) => {
-  const {
-    configuration: {
-      anchorVariant,
-      iconPlacement,
-      placeholder,
-      showInputPrompt,
-      variant
-    },
-    disabled,
-    formattedDate,
-    onDateInput
-  } = (0, _useDatePicker.default)();
-  const [inputValue, setInputValue] = (0, _react.useState)(formattedDate);
-  const inputRef = (0, _react.useRef)(null);
-  const keyPressHandler = (0, _react.useCallback)(event => {
-    if (disabled) {
-      return;
-    }
-
-    if ([' ', 'Enter'].includes(event.key)) {
-      onAction === null || onAction === void 0 ? void 0 : onAction(event);
-    }
-  }, [disabled, onAction]);
-  const clickHandler = (0, _react.useCallback)(event => {
-    if (disabled) {
-      return;
-    }
-
-    onAction === null || onAction === void 0 ? void 0 : onAction(event);
-  }, [disabled, onAction]);
-  (0, _react.useEffect)(() => {
-    if (document.activeElement !== inputRef.current) {
-      setInputValue(formattedDate);
-    }
-  }, [formattedDate]);
-  const onInputChangeHandler = (0, _react.useCallback)(e => {
-    const value = e.currentTarget.value;
-
-    if (!value) {
-      setInputValue(value);
-      return;
-    }
-
-    const parsedDate = (0, _dateParser.parseDate)(value, variant);
-
-    if (parsedDate) {
-      onDateInput(parsedDate);
-    }
-  }, [onDateInput, variant]);
-
-  const onBlurHandler = () => {
-    setInputValue(formattedDate);
-  };
-
-  if (anchorVariant === 'input') {
-    const calendarButton = side => /*#__PURE__*/_react.default.createElement(_Button.ButtonInvisible, {
-      onClick: clickHandler,
-      sx: {
-        width: '32px',
-        px: '6px',
-        position: 'absolute',
-        [side]: '1px',
-        top: '1px',
-        bottom: '1px'
-      }
-    }, /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
-      icon: _octiconsReact.CalendarIcon
-    }));
-
-    const inputSx = () => {
-      let sxObject = {};
-
-      if (iconPlacement === 'start') {
-        sxObject = { ...sxObject,
-          pl: 5,
-          pr: 2
-        };
-      } else if (iconPlacement === 'end') {
-        sxObject = { ...sxObject,
-          pl: 2,
-          pr: 5
-        };
-      }
-
-      if (showInputPrompt) {
-        sxObject = { ...sxObject,
-          pt: '20px'
-        };
-      }
-
-      return sxObject;
-    };
-
-    const promptSx = () => {
-      let sxObject = {
-        position: 'absolute',
-        top: '2px',
-        fontSize: 0,
-        color: 'fg.subtle'
-      };
-
-      if (iconPlacement === 'start') {
-        sxObject = { ...sxObject,
-          left: '36px'
-        };
-      }
-
-      return sxObject;
-    };
-
-    return /*#__PURE__*/_react.default.createElement(_Box.default, {
-      ref: ref,
-      sx: {
-        position: 'relative',
-        display: 'flex',
-        flex: 1
-      }
-    }, iconPlacement === 'start' && calendarButton('left'), showInputPrompt && /*#__PURE__*/_react.default.createElement(_Text.default, {
-      sx: promptSx()
-    }, "MM/DD/YYYY"), /*#__PURE__*/_react.default.createElement(_TextInput.default, {
-      ref: inputRef,
-      placeholder: placeholder,
-      value: inputValue,
-      onChange: onInputChangeHandler,
-      sx: inputSx(),
-      onBlur: onBlurHandler
-    }), iconPlacement === 'end' && calendarButton('right'));
-  }
-
-  const calendarIcon = () => /*#__PURE__*/_react.default.createElement(_StyledOcticon.default, {
-    icon: _octiconsReact.CalendarIcon,
-    color: "fg.muted",
-    sx: {
-      my: '2px'
-    }
-  });
-
-  return /*#__PURE__*/_react.default.createElement(_Box.default, {
-    ref: ref
-  }, /*#__PURE__*/_react.default.createElement(DatePickerAnchorButton, {
-    onClick: clickHandler,
-    onKeyPress: keyPressHandler
-  }, iconPlacement === 'start' && calendarIcon(), anchorVariant !== 'icon-only' && /*#__PURE__*/_react.default.createElement(_Text.default, {
-    sx: {
-      overflow: 'hidden',
-      textOverflow: 'ellipsis'
-    }
-  }, formattedDate), iconPlacement === 'end' && calendarIcon()));
-});
-
-exports.DatePickerAnchor = DatePickerAnchor;

package/lib/DatePicker/DatePickerOverlay.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { AnchoredOverlayProps } from '../AnchoredOverlay';
-export declare const DatePickerOverlay: React.FC<AnchoredOverlayProps>;