@elliemae/ds-pagination 3.0.0-alpha.0 → 3.0.0-alpha.1

package/dist/esm/styled.js

@@ -2,25 +2,29 @@ import * as React from "react";
 import { Grid } from "@elliemae/ds-grid";
 import { DSButtonV2 } from "@elliemae/ds-button";
 import styled from "styled-components";
-import { space, typography } from "@xstyled/styled-components";
-const sizeToCss = (size) => typeof size === "number" && !Number.isNaN(size) ? `${size}px` : size;
-const styledFocusCss = ({ theme }) => `
-&:after {
-  display: block;
-  content: ' ';
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  border: 2px solid ${theme.colors.brand[700]};
-  pointer-events: none;
-  z-index: 7;
-}`;
+import {
+  space,
+  typography,
+  sizing,
+  layout
+} from "@xstyled/styled-components";
+import { css } from "@elliemae/ds-system";
+const styledFocusCss = css`
+  &:after {
+    display: block;
+    content: ' ';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    border: 2px solid ${({ theme }) => theme.colors.brand[700]};
+    pointer-events: none;
+    z-index: 7;
+  }
+`;
 const PaginationContainer = styled(Grid)`
-  padding: 0 ${(props) => props.theme.space.xs};
   height: 42px;
-  width: ${(props) => sizeToCss(props.width) || "100%"};
   max-width: 100%;
   align-items: center;
   box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.5);
@@ -29,7 +33,6 @@ const PaginationWrapper = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  margin: 0 32px;
 `;
 const PaginationSeparator = styled(Grid)`
   background-color: ${(props) => props.theme.colors.neutral[300]};
@@ -40,11 +43,27 @@ const PaginationBoldText = styled.span`
   font-weight: ${(props) => props.theme.fontWeights.semibold};
   ${typography}
   ${space}
+  ${sizing}
+  ${layout}
   position: relative;
 `;
+const InvisibleDetail = styled.div`
+  opacity: 0;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: absolute;
+`;
+const PaginationDetail = styled.span`
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
 const PaginationDropdownButton = styled(DSButtonV2)`
   height: 42px;
-  display: flex;
+  display: grid;
+  grid-auto-flow: column;
   justify-content: center;
   align-items: center;
   position: relative;
@@ -59,6 +78,7 @@ const PaginationDropdownButton = styled(DSButtonV2)`
   :focus {
     ${styledFocusCss}
   }
+  white-space: nowrap;
 `;
 const PreviousNextPageButton = styled(DSButtonV2)`
   height: 42px;
@@ -74,8 +94,10 @@ const PreviousNextPageButton = styled(DSButtonV2)`
   }
 `;
 export {
+  InvisibleDetail,
   PaginationBoldText,
   PaginationContainer,
+  PaginationDetail,
   PaginationDropdownButton,
   PaginationSeparator,
   PaginationWrapper,

package/dist/esm/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport styled from 'styled-components';\nimport { space, typography, TypographyProps } from '@xstyled/styled-components';\n\nconst sizeToCss = (size) => (typeof size === 'number' && !Number.isNaN(size) ? `${size}px` : size);\n\nconst styledFocusCss = ({ theme }) => `\n&:after {\n  display: block;\n  content: ' ';\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  border: 2px solid ${theme.colors.brand[700]};\n  pointer-events: none;\n  z-index: 7;\n}`;\n\nexport const PaginationContainer = styled(Grid)`\n  padding: 0 ${(props) => props.theme.space.xs};\n  height: 42px;\n  width: ${(props) => sizeToCss(props.width) || '100%'};\n  max-width: 100%;\n  align-items: center;\n  box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.5);\n`;\n\nexport const PaginationWrapper = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin: 0 32px;\n`;\n\nexport const PaginationSeparator = styled(Grid)`\n  background-color: ${(props) => props.theme.colors.neutral[300]};\n  width: 1px;\n  height: ${(props) => props.height || '30px'};\n`;\n\nexport const PaginationBoldText = styled.span<TypographyProps>`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  ${typography}\n  ${space}\n  position: relative;\n`;\n\nexport const PaginationDropdownButton = styled(DSButtonV2)`\n  height: 42px;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  padding-left: 16px;\n  padding-right: 16px;\n  grid-gap: 8px;\n  font-size: 13px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n  cursor: pointer;\n  border-radius: 0;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  :focus {\n    ${styledFocusCss}\n  }\n`;\n\nexport const PreviousNextPageButton = styled(DSButtonV2)`\n  height: 42px;\n  display: grid;\n  place-items: center;\n  position: relative;\n  padding-left: 8px;\n  padding-right: 8px;\n  border-radius: 0;\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  :focus {\n    ${styledFocusCss}\n  }\n`;\n"],
-  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAEA,MAAM,YAAY,CAAC,SAAU,OAAO,SAAS,YAAY,CAAC,OAAO,MAAM,QAAQ,GAAG,WAAW;AAE7F,MAAM,iBAAiB,CAAC,EAAE,YAAY;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAShB,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAKlC,MAAM,sBAAsB,OAAO;AAAA,eAC3B,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA;AAAA,WAEjC,CAAC,UAAU,UAAU,MAAM,UAAU;AAAA;AAAA;AAAA;AAAA;AAMzC,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOjC,MAAM,sBAAsB,OAAO;AAAA,sBACpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,YAEhD,CAAC,UAAU,MAAM,UAAU;AAAA;AAGhC,MAAM,qBAAqB,OAAO;AAAA,iBACxB,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,IAChD;AAAA,IACA;AAAA;AAAA;AAIG,MAAM,2BAA2B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAUpC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,iBAGhC,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,MAE9C;AAAA;AAAA;AAIC,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQjC,CAAC,UAAW,MAAM,WAAW,gBAAgB;AAAA;AAAA,MAEnD;AAAA;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { Grid } from '@elliemae/ds-grid';\nimport { DSButtonV2 } from '@elliemae/ds-button';\nimport styled from 'styled-components';\nimport {\n  space,\n  typography,\n  TypographyProps,\n  SpaceProps,\n  sizing,\n  SizingProps,\n  layout,\n  LayoutProps,\n} from '@xstyled/styled-components';\nimport { css } from '@elliemae/ds-system';\n\nconst styledFocusCss = css`\n  &:after {\n    display: block;\n    content: ' ';\n    position: absolute;\n    top: 0;\n    left: 0;\n    right: 0;\n    bottom: 0;\n    border: 2px solid ${({ theme }) => theme.colors.brand[700]};\n    pointer-events: none;\n    z-index: 7;\n  }\n`;\n\nexport const PaginationContainer = styled(Grid)`\n  height: 42px;\n  max-width: 100%;\n  align-items: center;\n  box-shadow: 0 -1px 3px 0 rgba(0, 0, 0, 0.5);\n`;\n\nexport const PaginationWrapper = styled.div`\n  display: flex;\n  justify-content: center;\n  align-items: center;\n`;\n\nexport const PaginationSeparator = styled(Grid)`\n  background-color: ${(props) => props.theme.colors.neutral[300]};\n  width: 1px;\n  height: ${(props) => props.height || '30px'};\n`;\n\nexport const PaginationBoldText = styled.span<TypographyProps & SpaceProps & SizingProps & LayoutProps>`\n  font-weight: ${(props) => props.theme.fontWeights.semibold};\n  ${typography}\n  ${space}\n  ${sizing}\n  ${layout}\n  position: relative;\n`;\n\nexport const InvisibleDetail = styled.div`\n  opacity: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  position: absolute;\n`;\n\nexport const PaginationDetail = styled.span`\n  text-align: left;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n`;\n\nexport const PaginationDropdownButton = styled(DSButtonV2)`\n  height: 42px;\n  display: grid;\n  grid-auto-flow: column;\n  justify-content: center;\n  align-items: center;\n  position: relative;\n  padding-left: 16px;\n  padding-right: 16px;\n  grid-gap: 8px;\n  font-size: 13px;\n  color: ${(props) => props.theme.colors.neutral[700]};\n  cursor: pointer;\n  border-radius: 0;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  :focus {\n    ${styledFocusCss}\n  }\n  white-space: nowrap;\n`;\n\nexport const PreviousNextPageButton = styled(DSButtonV2)`\n  height: 42px;\n  display: grid;\n  place-items: center;\n  position: relative;\n  padding-left: 8px;\n  padding-right: 8px;\n  border-radius: 0;\n  cursor: ${(props) => (props.disabled ? 'not-allowed' : 'pointer')};\n  :focus {\n    ${styledFocusCss}\n  }\n`;\n"],
+  "mappings": "AAAA;ACAA;AACA;AACA;AACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAUA;AAEA,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASC,CAAC,EAAE,YAAY,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA;AAAA;AAMnD,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOnC,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAMjC,MAAM,sBAAsB,OAAO;AAAA,sBACpB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA,YAEhD,CAAC,UAAU,MAAM,UAAU;AAAA;AAGhC,MAAM,qBAAqB,OAAO;AAAA,iBACxB,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA,IAChD;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA;AAIG,MAAM,kBAAkB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQ/B,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAOhC,MAAM,2BAA2B,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAWpC,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAAA,iBAGhC,CAAC,UAAU,MAAM,MAAM,YAAY;AAAA;AAAA,MAE9C;AAAA;AAAA;AAAA;AAKC,MAAM,yBAAyB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAQjC,CAAC,UAAW,MAAM,WAAW,gBAAgB;AAAA;AAAA,MAEnD;AAAA;AAAA;",
   "names": []
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-pagination",
-  "version": "3.0.0-alpha.0",
+  "version": "3.0.0-alpha.1",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Pagination",
   "files": [
@@ -75,12 +75,13 @@
     "indent": 4
   },
   "dependencies": {
-    "@elliemae/ds-button": "3.0.0-alpha.0",
-    "@elliemae/ds-dropdownmenu": "3.0.0-alpha.0",
-    "@elliemae/ds-grid": "3.0.0-alpha.0",
-    "@elliemae/ds-icons": "3.0.0-alpha.0",
-    "@elliemae/ds-props-helpers": "3.0.0-alpha.0",
-    "@elliemae/ds-utilities": "3.0.0-alpha.0",
+    "@elliemae/ds-button": "3.0.0-alpha.1",
+    "@elliemae/ds-dropdownmenu": "3.0.0-alpha.1",
+    "@elliemae/ds-grid": "3.0.0-alpha.1",
+    "@elliemae/ds-icons": "3.0.0-alpha.1",
+    "@elliemae/ds-props-helpers": "3.0.0-alpha.1",
+    "@elliemae/ds-truncated-tooltip-text": "3.0.0-alpha.1",
+    "@elliemae/ds-utilities": "3.0.0-alpha.1",
     "memoize-one": "~5.1.1",
     "react-desc": "~4.1.3"
   },
@@ -103,6 +104,7 @@
     "dev": "cross-env NODE_ENV=development node ../../scripts/build/build.mjs --watch",
     "test": "node ../../scripts/testing/test.mjs",
     "lint": "node ../../scripts/lint.mjs",
+    "dts": "node ../../scripts/dts.mjs",
     "build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs"
   }
 }

package/dist/types/Pagination.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-import { DSPaginationProps } from './index.d';
-declare const DSPagination: React.ComponentType<DSPaginationProps>;
-declare const DSPaginationWithSchema: any;
-export { DSPagination, DSPaginationWithSchema };

package/dist/types/PaginationDataTestID.d.ts

@@ -1,5 +0,0 @@
-export declare const PAGINATION_DATA_TESTID: {
-    PREVIOUS_BUTTON: string;
-    NEXT_BUTTON: string;
-    CONTAINER: string;
-};

package/dist/types/hooks/usePaginationSearch.d.ts

@@ -1 +0,0 @@
-export declare const usePaginationSearch: (pageCount: number, actionRef: React.MutableRefObject<any>) => React.KeyboardEventHandler;

package/dist/types/index.d.ts

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

package/dist/types/parts/PageNextButton.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { DSPaginationProps } from '../index.d';
-export declare const PageNextButton: React.ComponentType<Pick<DSPaginationProps, 'onNextPage' | 'canNextPage'>>;

package/dist/types/parts/PagePrevButton.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { DSPaginationProps } from '../index.d';
-export declare const PagePrevButton: React.ComponentType<Pick<DSPaginationProps, 'onPreviousPage' | 'canPreviousPage'>>;

package/dist/types/parts/PaginationContent.d.ts

@@ -1,3 +0,0 @@
-import React from 'react';
-import { DSPaginationProps } from '../index.d';
-export declare const PaginationContent: React.ComponentType<DSPaginationProps>;

package/dist/types/parts/Paginator.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { DSPaginationProps } from '../index.d';
-declare const Paginator: React.ComponentType<DSPaginationProps>;
-export default Paginator;

package/dist/types/parts/PerPageSelector.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import { DSPaginationProps } from '../index.d';
-declare const PerPageSelector: React.ComponentType<Pick<DSPaginationProps, 'pageSize' | 'onPageSizeChange' | 'perPageOptions' | 'perPageStep' | 'minPerPage' | 'maxPerPage'>>;
-export default PerPageSelector;

package/dist/types/props.d.ts

@@ -1,75 +0,0 @@
-/// <reference path="../../../../shared/typings/react-desc.d.ts" />
-export declare const propTypes: {
-    pageCount: {
-        defaultValue(arg: import("react-desc").ReactDescPossibleDefaultValues): {
-            deprecated: import("react-desc").PropTypesDescValidator;
-        };
-        isRequired: import("react-desc").PropTypesDescValue;
-    };
-    pageIndex: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-    canPreviousPage: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-    canNextPage: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-    pageSize: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-    showPerPageSelector: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-    perPageOptions: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-    perPageStep: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-    minPerPage: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-    maxPerPage: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-    onPageSizeChange: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-    onPreviousPage: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-    onPageChange: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-    onNextPage: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-    pageDetails: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-    pageDetailsTitle: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-    width: {
-        deprecated: import("react-desc").PropTypesDescValidator;
-    };
-};
-export declare const defaultProps: {
-    pageIndex: number;
-    canPreviousPage: boolean;
-    canNextPage: boolean;
-    pageSize: number;
-    showPerPageSelector: boolean;
-    perPageOptions: number[];
-    perPageStep: number;
-    minPerPage: number;
-    maxPerPage: number;
-    onPageSizeChange: () => void;
-    onPreviousPage: () => void;
-    onNextPage: () => void;
-    onPageChange: () => void;
-    pageDetails: never[];
-    pageDetailsTitle: string;
-    width: string;
-};