freemium-ui 1.0.174 → 1.0.178

package/lib/types/components/Dropdown/index.d.ts

@@ -19,6 +19,7 @@ declare type DropdownProps = {
     isRequired?: boolean;
     overrideButtonStyles?: any;
     overrideContainerStyles?: any;
+    isMenuLoading?: boolean;
 };
 export declare const Dropdown: (props: DropdownProps) => JSX.Element;
 export {};

package/lib/types/components/Pickers/DatePicker.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import { TimePickerProps } from '@blueprintjs/datetime';
+import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
+export declare type MonthYearLocation = 'start' | 'end' | 'center';
+export declare type DatePickerProps = TimePickerProps & {
+    isRequired?: boolean;
+    isErrored?: boolean;
+    displayFormat?: string;
+    id?: string;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    monthYearLocation?: MonthYearLocation;
+    disabled?: boolean;
+    custom?: boolean;
+};
+export declare const DatePicker: (props: DatePickerProps) => JSX.Element;

package/lib/types/components/Pickers/DateTimePicker.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import { TimePickerProps } from '@blueprintjs/datetime';
+import '@blueprintjs/datetime/lib/css/blueprint-datetime.css';
+declare type DateTimePickerProps = TimePickerProps & {
+    isRequired?: boolean;
+    isErrored?: boolean;
+    displayFormat?: string;
+    id?: string;
+    name?: string;
+    label?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    custom?: boolean;
+};
+export declare const DateTimePicker: (props: DateTimePickerProps) => JSX.Element;
+export {};

package/lib/types/components/Pickers/index.d.ts

@@ -0,0 +1,2 @@
+export * from './DateTimePicker';
+export * from './DatePicker';

package/lib/types/components/Pickers/styles.d.ts

@@ -0,0 +1,2 @@
+export declare const PickerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DatePickerContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/lib/types/index.d.ts

@@ -3,7 +3,6 @@ export * from './components/Button';
 export * from './components/Checkbox';
 export * from './components/CssBaseLine';
 export * from './components/Confirmation';
-export * from './components/DatePicker';
 export * from './components/Drawer';
 export * from './components/ButtonDropdown';
 export * from './components/Icons';
@@ -14,6 +13,7 @@ export * from './components/Modal';
 export * from './components/MultiSelectDropdown';
 export * from './components/Loader';
 export * from './components/Dropdown';
+export * from './components/Pickers';
 export * from './components/Popover';
 export * from './components/Radio';
 export * from './components/BoxedRadio';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "freemium-ui",
-  "version": "1.0.174",
+  "version": "1.0.178",
   "description": "React Ui Components for Freemium Apps",
   "main": "lib/index.cjs.js",
   "module": "lib/index.esm.js",
@@ -37,9 +37,12 @@
   },
   "homepage": "https://github.com/freshdesk/freemium-ui#readme",
   "dependencies": {
+    "@blueprintjs/datetime": "^3.23.19",
     "@reach/dialog": "^0.10.4",
+    "@reach/popover": "^0.16.2",
     "@rebass/grid": "6.1.0",
     "@styled-system/should-forward-prop": "5.1.5",
+    "@types/react-dates": "^21.8.3",
     "@types/react-table": "^7.7.0",
     "deepmerge": "^4.2.2",
     "downshift": "^5.4.2",
@@ -96,6 +99,7 @@
     "react-docgen-typescript-loader": "3.7.1",
     "react-dom": "^16.13.1",
     "rollup": "2.18.0",
+    "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-typescript2": "0.27.1",
     "style-loader": "^1.2.1",

package/0001-chore-Adding-popper-support-to-dropdown.patch

@@ -1,304 +0,0 @@
-From 69099ea79a290dd13fc4f05c6d1a22e0db151168 Mon Sep 17 00:00:00 2001
-From: codejets <mukeshkr@freshdesk.com>
-Date: Wed, 30 Dec 2020 11:43:00 +0530
-Subject: [PATCH] chore: Adding popper support to dropdown
-
-This will remove the interaction from the dropdown and we can add that later
----
- package.json                                 |  1 +
- src/components/Dropdown/Dropdown.stories.tsx |  2 +-
- src/components/Dropdown/DropdownMenu.tsx     | 94 +++++++++-----------
- src/components/Dropdown/index.tsx            | 71 ++++++++++++---
- yarn.lock                                    | 22 ++++-
- 5 files changed, 124 insertions(+), 66 deletions(-)
-
-diff --git a/package.json b/package.json
-index 1deb9b7..3fb95db 100644
---- a/package.json
-+++ b/package.json
-@@ -47,6 +47,7 @@
-     "react": ">=16.13.1",
-     "react-dates": "^21.8.0",
-     "react-dom": ">=16.13.1",
-+    "react-popper": "1.3.3",
-     "react-table": "^7.2.1",
-     "react-tippy": "^1.4.0",
-     "react-transition-group": "^4.4.1",
-diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
-index 440bf74..37deb73 100644
---- a/src/components/Dropdown/Dropdown.stories.tsx
-+++ b/src/components/Dropdown/Dropdown.stories.tsx
-@@ -12,7 +12,7 @@ import {Dropdown} from './'
- const stories = storiesOf('Dropdown', module)
- stories.addDecorator(withKnobs)
- stories.addDecorator((story) => {
--  return <div style={{margin: '200px'}}>{story()}</div>
-+  return <div style={{margin: '250px 200px 250px'}}>{story()}</div>
- })
- 
- const allHouses = [
-diff --git a/src/components/Dropdown/DropdownMenu.tsx b/src/components/Dropdown/DropdownMenu.tsx
-index f69b8c4..9333baf 100644
---- a/src/components/Dropdown/DropdownMenu.tsx
-+++ b/src/components/Dropdown/DropdownMenu.tsx
-@@ -129,56 +129,50 @@ const DropdownMenu = withDownshift(
-       return null
-     }
-     return (
--      <SlideFade initialOffset="-20px" timeout={200} in={isOpen} unmountOnExit>
--        {(styles: React.CSSProperties) => (
--          <div
--            style={{
--              position: 'absolute',
--              width: '100%',
--              zIndex: 1000,
--              ...styles,
--            }}
--          >
--            <StyledMenuContainer
--              {...getMenuProps({
--                onClick: (event: React.MouseEvent<HTMLElement>) => {
--                  event.stopPropagation()
--                },
--              })}
--              overrideStyles={overrideStyles}
--            >
--              {allItems.map((item, index) => {
--                const canHighlightSelectedIndex =
--                  allItems.indexOf(selectedItem) === index
--                return (
--                  <StyledMenuItem
--                    {...getItemProps({
--                      item,
--                      key: index,
--                      disabled: item.disabled,
--                    })}
--                    key={index}
--                    isSelectedIndex={canHighlightSelectedIndex}
--                    canHighlight={highlightedIndex === index}
--                    disabled={item.disabled}
--                  >
--                    <Flex justifyContent="space-between" alignItems="center">
--                      <Box width="90%" style={{wordBreak: 'break-word'}}>
--                        {itemComponent
--                          ? itemComponent(item)
--                          : itemToString(item)}
--                      </Box>
--                      {canHighlightSelectedIndex ? (
--                        <Icons glyph="check" size={12} viewBox="0 0 8 8" />
--                      ) : null}
--                    </Flex>
--                  </StyledMenuItem>
--                )
--              })}
--            </StyledMenuContainer>
--          </div>
--        )}
--      </SlideFade>
-+      <div
-+        style={{
-+          width: '100%',
-+          zIndex: 1000,
-+          position: 'relative',
-+          display: isOpen ? 'block' : 'none',
-+        }}
-+      >
-+        <StyledMenuContainer
-+          {...getMenuProps({
-+            onClick: (event: React.MouseEvent<HTMLElement>) => {
-+              event.stopPropagation()
-+            },
-+          })}
-+          overrideStyles={overrideStyles}
-+        >
-+          {allItems.map((item, index) => {
-+            const canHighlightSelectedIndex =
-+              allItems.indexOf(selectedItem) === index
-+            return (
-+              <StyledMenuItem
-+                {...getItemProps({
-+                  item,
-+                  key: index,
-+                  disabled: item.disabled,
-+                })}
-+                key={index}
-+                isSelectedIndex={canHighlightSelectedIndex}
-+                canHighlight={highlightedIndex === index}
-+                disabled={item.disabled}
-+              >
-+                <Flex justifyContent="space-between" alignItems="center">
-+                  <Box width="90%" style={{wordBreak: 'break-word'}}>
-+                    {itemComponent ? itemComponent(item) : itemToString(item)}
-+                  </Box>
-+                  {canHighlightSelectedIndex ? (
-+                    <Icons glyph="check" size={12} viewBox="0 0 8 8" />
-+                  ) : null}
-+                </Flex>
-+              </StyledMenuItem>
-+            )
-+          })}
-+        </StyledMenuContainer>
-+      </div>
-     )
-   },
- )
-diff --git a/src/components/Dropdown/index.tsx b/src/components/Dropdown/index.tsx
-index 6f160cc..d3262f3 100644
---- a/src/components/Dropdown/index.tsx
-+++ b/src/components/Dropdown/index.tsx
-@@ -2,6 +2,7 @@ import React from 'react'
- import Downshift from 'downshift'
- import hoistNonReactStatics from 'hoist-non-react-statics'
- import styled from 'styled-components'
-+import {Manager, Reference, Popper} from 'react-popper'
- 
- import DropdownButton from './DropdownButton'
- import DropdownMenu from './DropdownMenu'
-@@ -54,6 +55,16 @@ export const DROPDOWN_TYPES = {
- 
- const DownshiftContext = React.createContext<any>(null)
- 
-+class DropdownWrapper extends React.Component<{scheduleUpdate: any}> {
-+  componentDidUpdate() {
-+    this.props.scheduleUpdate()
-+  }
-+
-+  render() {
-+    return this.props.children
-+  }
-+}
-+
- export function withDownshift(Component: any) {
-   function Wrapper(props: any, ref: any) {
-     return (
-@@ -86,6 +97,13 @@ type DropdownProps = {
-   onChange?: (value: any) => any
-   itemToString?: (a: any) => any
-   type?: 'button' | 'input'
-+  defaultPlacement?:
-+    | 'top'
-+    | 'top-start'
-+    | 'top-end'
-+    | 'bottom-start'
-+    | 'bottom'
-+    | 'bottom-end'
-   filterKey?: string
-   label?: string
-   width?: string
-@@ -114,6 +132,7 @@ export const Dropdown = (props: DropdownProps) => {
-     width = '100%',
-     disabled,
-     isRequired,
-+    defaultPlacement,
-     overrideButtonStyles,
-     overrideContainerStyles,
-     ...rest
-@@ -158,20 +177,44 @@ export const Dropdown = (props: DropdownProps) => {
-               children
-             ) : (
-               <>
--                {DROPDOWN_TYPES.BUTTON === type && (
--                  <DropdownButton
--                    disabled={disabled}
--                    overrideStyles={overrideButtonStyles}
--                    placeholder={placeholder}
--                  />
--                )}
--                {DROPDOWN_TYPES.INPUT === type && (
--                  <DropdownInput placeholder={placeholder} />
--                )}
--                <DropdownMenu
--                  itemComponent={itemComponent}
--                  overrideStyles={overrideContainerStyles}
--                />
-+                <Manager>
-+                  <Reference>
-+                    {({ref}) => (
-+                      <div ref={ref}>
-+                        {DROPDOWN_TYPES.BUTTON === type && (
-+                          <DropdownButton
-+                            disabled={disabled}
-+                            overrideStyles={overrideButtonStyles}
-+                            placeholder={placeholder}
-+                          />
-+                        )}
-+                        {DROPDOWN_TYPES.INPUT === type && (
-+                          <DropdownInput placeholder={placeholder} />
-+                        )}
-+                      </div>
-+                    )}
-+                  </Reference>
-+
-+                  <Popper placement={defaultPlacement || 'top'}>
-+                    {({ref, style, scheduleUpdate}) => (
-+                      <DropdownWrapper scheduleUpdate={scheduleUpdate}>
-+                        <div
-+                          ref={ref}
-+                          style={{
-+                            position: 'absolute',
-+                            width: '100%',
-+                            ...style,
-+                          }}
-+                        >
-+                          <DropdownMenu
-+                            itemComponent={itemComponent}
-+                            overrideStyles={overrideContainerStyles}
-+                          />
-+                        </div>
-+                      </DropdownWrapper>
-+                    )}
-+                  </Popper>
-+                </Manager>
-               </>
-             )}
-           </DownshiftContext.Provider>
-diff --git a/yarn.lock b/yarn.lock
-index 519b93f..3c5f856 100644
---- a/yarn.lock
-+++ b/yarn.lock
-@@ -5123,6 +5123,14 @@ create-react-context@0.3.0, create-react-context@^0.3.0:
-     gud "^1.0.0"
-     warning "^4.0.3"
- 
-+create-react-context@<=0.2.2:
-+  version "0.2.2"
-+  resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.2.tgz#9836542f9aaa22868cd7d4a6f82667df38019dca"
-+  integrity sha512-KkpaLARMhsTsgp0d2NA/R94F/eDLbhXERdIq3LvX2biCAXcDvHYoOqHfWCHf1+OLj+HKBotLG3KqaOOf+C1C+A==
-+  dependencies:
-+    fbjs "^0.8.0"
-+    gud "^1.0.0"
-+
- cross-spawn@6.0.5, cross-spawn@^6.0.0:
-   version "6.0.5"
-   resolved "https://registry.yarnpkg.com/cross-spawn/-/cross-spawn-6.0.5.tgz#4a5ec7c64dfae22c3a14124dbacdee846d80cbc4"
-@@ -6426,7 +6434,7 @@ fb-watchman@^2.0.0:
-   dependencies:
-     bser "2.1.1"
- 
--fbjs@^0.8.4:
-+fbjs@^0.8.0, fbjs@^0.8.4:
-   version "0.8.17"
-   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
-   integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
-@@ -11140,6 +11148,18 @@ react-popper-tooltip@^2.8.3:
-     "@babel/runtime" "^7.9.2"
-     react-popper "^1.3.7"
- 
-+react-popper@1.3.3:
-+  version "1.3.3"
-+  resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.3.tgz#2c6cef7515a991256b4f0536cd4bdcb58a7b6af6"
-+  integrity sha512-ynMZBPkXONPc5K4P5yFWgZx5JGAUIP3pGGLNs58cfAPgK67olx7fmLp+AdpZ0+GoQ+ieFDa/z4cdV6u7sioH6w==
-+  dependencies:
-+    "@babel/runtime" "^7.1.2"
-+    create-react-context "<=0.2.2"
-+    popper.js "^1.14.4"
-+    prop-types "^15.6.1"
-+    typed-styles "^0.0.7"
-+    warning "^4.0.2"
-+
- react-popper@^1.3.7:
-   version "1.3.7"
-   resolved "https://registry.yarnpkg.com/react-popper/-/react-popper-1.3.7.tgz#f6a3471362ef1f0d10a4963673789de1baca2324"
--- 
-2.20.1 (Apple Git-117)
-