@elliemae/ds-pagination 3.57.0-next.40 → 3.57.0-next.42

package/dist/esm/parts/DSPerPageSelector/styled.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/DSPerPageSelector/styled.tsx"],
-  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\n\nimport { css, styled } from '@elliemae/ds-system';\nimport type {} from '@xstyled/system';\nimport { DSPaginationName, PER_PAGE_SELECTOR_SLOTS } from './constants/index.js';\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 InvisibleDiv = styled.div`\n  opacity: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  position: absolute;\n`;\n\nconst paginationDropdownButtonCommonStyles = css`\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: neutral-700;\n  cursor: pointer;\n  border-radius: 0;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  :focus {\n    ${styledFocusCss}\n  }\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n  white-space: nowrap;\n`;\nexport const PaginationDropdownButtonPerPageSelector = styled(DSButtonV3, {\n  name: DSPaginationName,\n  slot: PER_PAGE_SELECTOR_SLOTS.PER_PAGE_SELECTOR,\n  preserveLegacyDataTestId: true,\n})`\n  ${paginationDropdownButtonCommonStyles}\n`;\n"],
-  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAE3B,SAAS,KAAK,cAAc;AAE5B,SAAS,kBAAkB,+BAA+B;AAE1D,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvD,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQnC,MAAM,uCAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAc5B,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA,MAErD,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOb,MAAM,0CAA0C,OAAO,YAAY;AAAA,EACxE,MAAM;AAAA,EACN,MAAM,wBAAwB;AAAA,EAC9B,0BAA0B;AAC5B,CAAC;AAAA,IACG,oCAAoC;AAAA;",
+  "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { DSButtonV3 } from '@elliemae/ds-button-v2';\n\nimport { css, styled } from '@elliemae/ds-system';\nimport type {} from '@xstyled/system';\nimport { DSPaginationName, PER_PAGE_SELECTOR_SLOTS } from './constants/index.js';\nconst fontSize13Base13 = 13 / 13;\nconst fontSize13Base16 = 13 / 16;\n\nconst fontSize12Base13 = 12 / 13;\nconst fontSize12Base16 = 12 / 16;\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 InvisibleDiv = styled.div`\n  opacity: 0;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  position: absolute;\n`;\n\nconst paginationDropdownButtonCommonStyles = css`\n  min-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: neutral-700;\n  cursor: pointer;\n  border-radius: 0;\n  font-weight: ${(props) => props.theme.fontWeights.regular};\n  :focus {\n    ${styledFocusCss}\n  }\n  &[aria-disabled='true'] {\n    cursor: not-allowed;\n  }\n  white-space: nowrap;\n`;\nexport const PaginationDropdownButtonPerPageSelector = styled(DSButtonV3, {\n  name: DSPaginationName,\n  slot: PER_PAGE_SELECTOR_SLOTS.PER_PAGE_SELECTOR,\n  preserveLegacyDataTestId: true,\n})`\n  ${paginationDropdownButtonCommonStyles}\n  /**\n * Pagination uses DSTypography internally, but each typography variant defines\n * its own font-size. When these components are placed inside a styled() wrapper,\n * trying to style them via styled(DSTypography) triggers TypeScript errors\n * because DSTypography exposes  \"as\"  props and variant-specific overrides.\n *\n * Instead of wrapping DSTypography directly in styled(), we target the\n * underlying rendered elements via className/id. This avoids the TS conflicts\n * while still allowing us to override their font-size reliably.\n */\n  .typography-per-page-selector {\n    font-size: ${fontSize13Base16}rem;\n    @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n      font-size: ${fontSize13Base13}rem;\n    }\n  }\n`;\n\nexport const StyledHeader = styled.div`\n  font-size: ${fontSize12Base16}rem;\n  @media (min-width: ${({ theme }) => theme.breakpoints.small}) {\n    font-size: ${fontSize12Base13}rem;\n  }\n`;\n"],
+  "mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,kBAAkB;AAE3B,SAAS,KAAK,cAAc;AAE5B,SAAS,kBAAkB,+BAA+B;AAC1D,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAE9B,MAAM,mBAAmB,KAAK;AAC9B,MAAM,mBAAmB,KAAK;AAE9B,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBASC,CAAC,EAAE,MAAM,MAAM,MAAM,OAAO,MAAM,GAAG,CAAC;AAAA;AAAA;AAAA;AAAA;AAMvD,MAAM,eAAe,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQnC,MAAM,uCAAuC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAc5B,CAAC,UAAU,MAAM,MAAM,YAAY,OAAO;AAAA;AAAA,MAErD,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAOb,MAAM,0CAA0C,OAAO,YAAY;AAAA,EACxE,MAAM;AAAA,EACN,MAAM,wBAAwB;AAAA,EAC9B,0BAA0B;AAC5B,CAAC;AAAA,IACG,oCAAoC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAYvB,gBAAgB;AAAA,yBACR,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,mBAC5C,gBAAgB;AAAA;AAAA;AAAA;AAK5B,MAAM,eAAe,OAAO;AAAA,eACpB,gBAAgB;AAAA,uBACR,CAAC,EAAE,MAAM,MAAM,MAAM,YAAY,KAAK;AAAA,iBAC5C,gBAAgB;AAAA;AAAA;",
   "names": []
 }

package/dist/esm/parts/{DSPaginator/config → shared}/useOnElementOnResize.js.map

@@ -1,6 +1,6 @@
 {
   "version": 3,
-  "sources": ["../../../../../../../../scripts/build/transpile/react-shim.js", "../../../../../src/parts/DSPaginator/config/useOnElementOnResize.tsx"],
+  "sources": ["../../../../../../../scripts/build/transpile/react-shim.js", "../../../../src/parts/shared/useOnElementOnResize.tsx"],
   "sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import type React from 'react';\nimport { useState, useEffect, useRef, useMemo } from 'react';\n\n// Custom hook to track dimension of a component\n// Taken and modified from https://stackoverflow.com/a/60218754\nexport const useOnElementResize = <T extends HTMLElement>(\n  targetRef: React.RefObject<T>,\n): Record<'width' | 'height', number> => {\n  const [width, setWidth] = useState(targetRef.current?.offsetWidth ?? 0);\n  const [height, setHeight] = useState(targetRef.current?.offsetHeight ?? 0);\n  const observer = useRef<ResizeObserver>();\n\n  useEffect(() => {\n    function outputsize() {\n      setWidth(targetRef.current?.offsetWidth ?? 0);\n      setHeight(targetRef.current?.offsetHeight ?? 0);\n    }\n\n    observer.current = new ResizeObserver(outputsize);\n    const el = targetRef.current as Element | null;\n    if (el) observer.current.observe(el);\n\n    return () => {\n      if (el) observer.current?.disconnect();\n    };\n  }, [targetRef]);\n\n  return useMemo(\n    () => ({\n      width,\n      height,\n    }),\n    [width, height],\n  );\n};\n"],
   "mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,UAAU,WAAW,QAAQ,eAAe;AAI9C,MAAM,qBAAqB,CAChC,cACuC;AACvC,QAAM,CAAC,OAAO,QAAQ,IAAI,SAAS,UAAU,SAAS,eAAe,CAAC;AACtE,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,UAAU,SAAS,gBAAgB,CAAC;AACzE,QAAM,WAAW,OAAuB;AAExC,YAAU,MAAM;AACd,aAAS,aAAa;AACpB,eAAS,UAAU,SAAS,eAAe,CAAC;AAC5C,gBAAU,UAAU,SAAS,gBAAgB,CAAC;AAAA,IAChD;AAEA,aAAS,UAAU,IAAI,eAAe,UAAU;AAChD,UAAM,KAAK,UAAU;AACrB,QAAI,GAAI,UAAS,QAAQ,QAAQ,EAAE;AAEnC,WAAO,MAAM;AACX,UAAI,GAAI,UAAS,SAAS,WAAW;AAAA,IACvC;AAAA,EACF,GAAG,CAAC,SAAS,CAAC;AAEd,SAAO;AAAA,IACL,OAAO;AAAA,MACL;AAAA,MACA;AAAA,IACF;AAAA,IACA,CAAC,OAAO,MAAM;AAAA,EAChB;AACF;",
   "names": []

package/dist/types/parts/DSPaginator/config/createPaginatorHeader.d.ts

@@ -2,6 +2,7 @@ interface PaginatorHeaderOptions {
     pageDetailsTitle: string;
     pageInfoWidth: number;
     ownerPropsConfig: Record<string, unknown>;
+    checkMarkWidth: number;
 }
-export declare const createPaginatorHeader: ({ pageDetailsTitle, pageInfoWidth, ownerPropsConfig, }: PaginatorHeaderOptions) => () => import("react/jsx-runtime.js").JSX.Element;
+export declare const createPaginatorHeader: ({ pageDetailsTitle, pageInfoWidth, ownerPropsConfig, checkMarkWidth, }: PaginatorHeaderOptions) => () => import("react/jsx-runtime.js").JSX.Element;
 export {};

package/dist/types/parts/DSPaginator/config/getOptions.d.ts

@@ -4,4 +4,5 @@ export declare const getOptions: (args: {
     pageIndex: number;
     pageDetails: string[] | readonly string[];
     pageInfoWidth: number;
+    checkMarkWidth: number;
 }) => DSDropdownMenuT.ItemSingleOptions[];

package/dist/types/parts/DSPaginator/config/usePaginator.d.ts

@@ -377,10 +377,14 @@ export declare const usePaginator: (propsFromUser: DSPaginatorT.Props) => {
     btnRef: React.RefObject<HTMLButtonElement>;
     btnWidth: number;
     pageInfoWidth: number;
+    pageInfoRef: React.MutableRefObject<HTMLDivElement | null>;
     options: import("@elliemae/ds-dropdownmenu-v2").DSDropdownMenuT.ItemSingleOptions[];
     isOpened: boolean;
     detailWidth: number;
     actionRef: React.MutableRefObject<Record<string, (dsId: string) => void>>;
+    widestChildRef: React.MutableRefObject<HTMLDivElement | null>;
+    checkMarkRef: React.RefObject<HTMLDivElement>;
+    checkMarkWidth: number;
     setIsOpened: React.Dispatch<React.SetStateAction<boolean>>;
     onKeyDown: React.KeyboardEventHandler<Element>;
 };

package/dist/types/parts/DSPaginator/styled.d.ts

@@ -1,2 +1,4 @@
 export declare const InvisibleDiv: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const PaginationDropdownButtonPaginator: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>, import("@elliemae/ds-system").Theme, import("styled-components").ThemeProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>>, never>;
+export declare const StyledDropdown: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-dropdownmenu-v2").DSDropdownMenuT.Props>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-dropdownmenu-v2").DSDropdownMenuT.Props>>, never>;
+export declare const StyledHeader: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>>, never>;

package/dist/types/parts/DSPerPageSelector/config/usePerPageSelector.d.ts

@@ -376,7 +376,8 @@ export declare const usePerPageSelector: (propsFromUser: DSPerPageSelectorT.Prop
     };
     actionRef: React.MutableRefObject<Record<string, (dsId: string) => void>>;
     btnRef: React.RefObject<HTMLButtonElement>;
-    width: number;
+    chevronRef: React.RefObject<HTMLElement>;
+    chevronWidth: number;
     isOpened: boolean;
     options: import("@elliemae/ds-dropdownmenu-v2").DSDropdownMenuT.ItemSingleOptions[];
     setIsOpened: React.Dispatch<React.SetStateAction<boolean>>;

package/dist/types/parts/DSPerPageSelector/styled.d.ts

@@ -1,2 +1,3 @@
 export declare const InvisibleDiv: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;
 export declare const PaginationDropdownButtonPerPageSelector: import("styled-components").StyledComponent<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>, import("@elliemae/ds-system").Theme, import("styled-components").ThemeProps<import("@xstyled/system").Theme> & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<import("react").ComponentType<import("@elliemae/ds-button-v2").DSButtonV3T.Props>>, never>;
+export declare const StyledHeader: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object & import("@elliemae/ds-system").OwnerInterface & import("@elliemae/ds-system").InnerRefInterface<"div">, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@elliemae/ds-pagination",
-  "version": "3.57.0-next.40",
+  "version": "3.57.0-next.42",
   "license": "MIT",
   "description": "ICE MT - Dimsum - Pagination",
   "files": [
@@ -45,20 +45,20 @@
     "checkDeps": "npm exec ../../util/ds-codemods -- check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
   },
   "dependencies": {
-    "@elliemae/ds-button-v2": "3.57.0-next.40",
-    "@elliemae/ds-circular-progress-indicator": "3.57.0-next.40",
-    "@elliemae/ds-dropdownmenu-v2": "3.57.0-next.40",
-    "@elliemae/ds-grid": "3.57.0-next.40",
-    "@elliemae/ds-icons": "3.57.0-next.40",
-    "@elliemae/ds-props-helpers": "3.57.0-next.40",
-    "@elliemae/ds-system": "3.57.0-next.40",
-    "@elliemae/ds-typescript-helpers": "3.57.0-next.40",
-    "@elliemae/ds-typography": "3.57.0-next.40",
+    "@elliemae/ds-button-v2": "3.57.0-next.42",
+    "@elliemae/ds-circular-progress-indicator": "3.57.0-next.42",
+    "@elliemae/ds-dropdownmenu-v2": "3.57.0-next.42",
+    "@elliemae/ds-grid": "3.57.0-next.42",
+    "@elliemae/ds-icons": "3.57.0-next.42",
+    "@elliemae/ds-props-helpers": "3.57.0-next.42",
+    "@elliemae/ds-system": "3.57.0-next.42",
+    "@elliemae/ds-typescript-helpers": "3.57.0-next.42",
+    "@elliemae/ds-typography": "3.57.0-next.42",
     "@xstyled/system": "catalog:"
   },
   "devDependencies": {
-    "@elliemae/ds-monorepo-devops": "3.57.0-next.40",
-    "@elliemae/ds-test-utils": "3.57.0-next.40",
+    "@elliemae/ds-monorepo-devops": "3.57.0-next.42",
+    "@elliemae/ds-test-utils": "3.57.0-next.42",
     "@elliemae/pui-cli": "catalog:",
     "jest": "catalog:",
     "styled-components": "catalog:",
@@ -77,5 +77,5 @@
     "access": "public",
     "typeSafety": true
   },
-  "gitHead": "bca00298d99085d3c808728c40f45c0627810bda"
+  "gitHead": "9137b3564bc7399c85ae12674d2e794f78e71e78"
 }