Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@instructure/ui-pagination

Package Overview
Dependencies
Maintainers
0
Versions
1965
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@instructure/ui-pagination - npm Package Compare versions

Comparing version 10.6.1-snapshot-1 to 10.6.1-snapshot-11

es/Pagination/theme.js
lib/Pagination/theme.js
src/Pagination/theme.ts
types/Pagination/theme.d.ts
types/Pagination/theme.d.ts.map

7

CHANGELOG.md

@@ -6,10 +6,13 @@ # Change Log

## [10.6.1-snapshot-1](https://github.com/instructure/instructure-ui/compare/v10.6.0...v10.6.1-snapshot-1) (2024-11-19)
## [10.6.1-snapshot-11](https://github.com/instructure/instructure-ui/compare/v10.6.0...v10.6.1-snapshot-11) (2024-11-22)
**Note:** Version bump only for package @instructure/ui-pagination
### Bug Fixes
* **shared-types,ui-pagination:** pagination indicators have spacing and coded as a list for a11y ([e6e5a7b](https://github.com/instructure/instructure-ui/commit/e6e5a7b6cda158f16cf0d86787130877b9c22a75))
# [10.6.0](https://github.com/instructure/instructure-ui/compare/v10.5.0...v10.6.0) (2024-11-18)

@@ -16,0 +19,0 @@

8

es/Pagination/__new-tests__/Pagination.test.js

@@ -102,3 +102,3 @@ var _Pagination, _Pagination2, _Pagination3, _Pagination4, _Pagination5, _Pagination6, _Pagination7, _Pagination8, _Pagination9, _Pagination10, _Pagination11, _Pagination12;

labelPrev: "Prev"
}, buildPages(5))),
}, /*#__PURE__*/React.createElement("ul", null, buildPages(5)))),
container = _render.container;

@@ -113,3 +113,3 @@ const axeCheck = await runAxeCheck(container);

labelPrev: "Prev"
}, buildPages(8))),
}, /*#__PURE__*/React.createElement("ul", null, buildPages(8)))),
container = _render2.container;

@@ -127,3 +127,3 @@ const axeCheck = await runAxeCheck(container);

withFirstAndLastButton: true
}, buildPages(8))),
}, /*#__PURE__*/React.createElement("ul", null, buildPages(8)))),
container = _render3.container;

@@ -142,3 +142,3 @@ const axeCheck = await runAxeCheck(container);

showDisabledButtons: true
}, buildPages(8))),
}, /*#__PURE__*/React.createElement("ul", null, buildPages(8)))),
container = _render4.container;

@@ -145,0 +145,0 @@ const axeCheck = await runAxeCheck(container);

20

es/Pagination/index.js

@@ -37,2 +37,3 @@ var _dec, _dec2, _dec3, _class, _Pagination, _span, _span2;

import generateStyle from './styles';
import generateComponentTheme from './theme';
import { propTypes, allowedProps } from './props';

@@ -57,3 +58,3 @@ /** This is an [].findIndex optimized to work on really big, but sparse, arrays */

**/
let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, null), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_Pagination = class Pagination extends Component {
let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, generateComponentTheme), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_Pagination = class Pagination extends Component {
constructor(props) {

@@ -117,2 +118,3 @@ super(props);

this.renderDefaultPages = () => {
var _this$props$styles;
const _this$props4 = this.props,

@@ -147,3 +149,5 @@ ellipsis = _this$props4.ellipsis,

}
return pages;
return jsx("ul", {
css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.pageIndicatorList
}, pages);
};

@@ -392,3 +396,3 @@ this.renderDefaultArrowButton = direction => {

render() {
var _this$props$styles, _this$props$styles2;
var _this$props$styles2, _this$props$styles3;
const currentPageIndex = fastFindIndex(this.childPages, p => p && p.props && p.props.current);

@@ -401,7 +405,7 @@ const passthroughProps = View.omitViewProps(omitProps(this.props, Pagination.allowedProps), Pagination);

margin: this.props.margin,
css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.pagination,
css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.pagination,
"aria-labelledby": this.props.label ? this._labelId : void 0
}), this.props.label && this.renderLabel(), jsx(View, {
display: "inline-block",
css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.pages
css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.pages
}, this.renderArrowButton('first', currentPageIndex), this.renderArrowButton('prev', currentPageIndex), this.inputMode ? this.renderPageInput(currentPageIndex) : this.renderPages(currentPageIndex), this.renderArrowButton('next', currentPageIndex), this.renderArrowButton('last', currentPageIndex)));

@@ -422,3 +426,7 @@ }

boundaryCount: 1,
ellipsis: '...',
ellipsis: jsx("li", {
style: {
all: 'unset'
}
}, "..."),
renderPageIndicator: page => page

@@ -425,0 +433,0 @@ }, _Pagination.Page = PaginationButton, _Pagination.Navigation = PaginationArrowButton, _Pagination)) || _class) || _class) || _class);

10

es/Pagination/PaginationButton/index.js

@@ -48,3 +48,9 @@ var _dec, _class, _PaginationButton;

const props = omitProps(this.props, PaginationButton.allowedProps, exclude);
return /*#__PURE__*/React.createElement(BaseButton, Object.assign({
// wrapped in an unstyled <li> for better a11y
return /*#__PURE__*/React.createElement("li", {
style: {
all: 'unset'
}
}, /*#__PURE__*/React.createElement(BaseButton, Object.assign({
color: "primary",

@@ -56,3 +62,3 @@ withBackground: this.props.current,

elementRef: this.handleRef
}), this.props.children);
}), this.props.children));
}

@@ -59,0 +65,0 @@ }, _PaginationButton.displayName = "PaginationButton", _PaginationButton.componentId = 'Pagination.Page', _PaginationButton.propTypes = propTypes, _PaginationButton.allowedProps = allowedProps, _PaginationButton.defaultProps = {

8

es/Pagination/styles.js

@@ -35,4 +35,10 @@ /*

*/
const generateStyle = () => {
const generateStyle = componentTheme => {
return {
pageIndicatorList: {
all: 'unset',
display: 'flex',
alignItems: 'center',
gap: componentTheme.pageIndicatorGap
},
pagination: {

@@ -39,0 +45,0 @@ label: 'pagination',

8

lib/Pagination/__new-tests__/Pagination.test.js

@@ -104,3 +104,3 @@ "use strict";

labelPrev: "Prev"
}, buildPages(5))),
}, /*#__PURE__*/_react.default.createElement("ul", null, buildPages(5)))),
container = _render.container;

@@ -115,3 +115,3 @@ const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);

labelPrev: "Prev"
}, buildPages(8))),
}, /*#__PURE__*/_react.default.createElement("ul", null, buildPages(8)))),
container = _render2.container;

@@ -129,3 +129,3 @@ const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);

withFirstAndLastButton: true
}, buildPages(8))),
}, /*#__PURE__*/_react.default.createElement("ul", null, buildPages(8)))),
container = _render3.container;

@@ -144,3 +144,3 @@ const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);

showDisabledButtons: true
}, buildPages(8))),
}, /*#__PURE__*/_react.default.createElement("ul", null, buildPages(8)))),
container = _render4.container;

@@ -147,0 +147,0 @@ const axeCheck = await (0, _runAxeCheck.runAxeCheck)(container);

20

lib/Pagination/index.js

@@ -29,2 +29,3 @@ "use strict";

var _styles = _interopRequireDefault(require("./styles"));
var _theme = _interopRequireDefault(require("./theme"));
var _props = require("./props");

@@ -74,3 +75,3 @@ var _dec, _dec2, _dec3, _class, _Pagination, _span, _span2;

**/
let Pagination = exports.Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, null), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_Pagination = class Pagination extends _react.Component {
let Pagination = exports.Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_Pagination = class Pagination extends _react.Component {
constructor(props) {

@@ -134,2 +135,3 @@ super(props);

this.renderDefaultPages = () => {
var _this$props$styles;
const _this$props4 = this.props,

@@ -164,3 +166,5 @@ ellipsis = _this$props4.ellipsis,

}
return pages;
return (0, _emotion.jsx)("ul", {
css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.pageIndicatorList
}, pages);
};

@@ -409,3 +413,3 @@ this.renderDefaultArrowButton = direction => {

render() {
var _this$props$styles, _this$props$styles2;
var _this$props$styles2, _this$props$styles3;
const currentPageIndex = fastFindIndex(this.childPages, p => p && p.props && p.props.current);

@@ -418,7 +422,7 @@ const passthroughProps = _View.View.omitViewProps((0, _omitProps.omitProps)(this.props, Pagination.allowedProps), Pagination);

margin: this.props.margin,
css: (_this$props$styles = this.props.styles) === null || _this$props$styles === void 0 ? void 0 : _this$props$styles.pagination,
css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.pagination,
"aria-labelledby": this.props.label ? this._labelId : void 0
}), this.props.label && this.renderLabel(), (0, _emotion.jsx)(_View.View, {
display: "inline-block",
css: (_this$props$styles2 = this.props.styles) === null || _this$props$styles2 === void 0 ? void 0 : _this$props$styles2.pages
css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.pages
}, this.renderArrowButton('first', currentPageIndex), this.renderArrowButton('prev', currentPageIndex), this.inputMode ? this.renderPageInput(currentPageIndex) : this.renderPages(currentPageIndex), this.renderArrowButton('next', currentPageIndex), this.renderArrowButton('last', currentPageIndex)));

@@ -439,5 +443,9 @@ }

boundaryCount: 1,
ellipsis: '...',
ellipsis: (0, _emotion.jsx)("li", {
style: {
all: 'unset'
}
}, "..."),
renderPageIndicator: page => page
}, _Pagination.Page = _PaginationButton.PaginationButton, _Pagination.Navigation = _PaginationArrowButton.PaginationArrowButton, _Pagination)) || _class) || _class) || _class);
var _default = exports.default = Pagination;

10

lib/Pagination/PaginationButton/index.js

@@ -54,3 +54,9 @@ "use strict";

const props = (0, _omitProps.omitProps)(this.props, PaginationButton.allowedProps, exclude);
return /*#__PURE__*/_react.default.createElement(_BaseButton.BaseButton, Object.assign({
// wrapped in an unstyled <li> for better a11y
return /*#__PURE__*/_react.default.createElement("li", {
style: {
all: 'unset'
}
}, /*#__PURE__*/_react.default.createElement(_BaseButton.BaseButton, Object.assign({
color: "primary",

@@ -62,3 +68,3 @@ withBackground: this.props.current,

elementRef: this.handleRef
}), this.props.children);
}), this.props.children));
}

@@ -65,0 +71,0 @@ }, _PaginationButton.displayName = "PaginationButton", _PaginationButton.componentId = 'Pagination.Page', _PaginationButton.propTypes = _props.propTypes, _PaginationButton.allowedProps = _props.allowedProps, _PaginationButton.defaultProps = {

8

lib/Pagination/styles.js

@@ -41,4 +41,10 @@ "use strict";

*/
const generateStyle = () => {
const generateStyle = componentTheme => {
return {
pageIndicatorList: {
all: 'unset',
display: 'flex',
alignItems: 'center',
gap: componentTheme.pageIndicatorGap
},
pagination: {

@@ -45,0 +51,0 @@ label: 'pagination',

42

package.json
{
"name": "@instructure/ui-pagination",
"version": "10.6.1-snapshot-1",
"version": "10.6.1-snapshot-11",
"description": "A UI component library made by Instructure Inc.",

@@ -26,5 +26,5 @@ "author": "Instructure, Inc. Engineering and Product Design",

"devDependencies": {
"@instructure/ui-axe-check": "10.6.1-snapshot-1",
"@instructure/ui-babel-preset": "10.6.1-snapshot-1",
"@instructure/ui-test-utils": "10.6.1-snapshot-1",
"@instructure/ui-axe-check": "10.6.1-snapshot-11",
"@instructure/ui-babel-preset": "10.6.1-snapshot-11",
"@instructure/ui-test-utils": "10.6.1-snapshot-11",
"@testing-library/jest-dom": "^6.4.6",

@@ -37,19 +37,19 @@ "@testing-library/react": "^16.0.1",

"@babel/runtime": "^7.25.6",
"@instructure/emotion": "10.6.1-snapshot-1",
"@instructure/shared-types": "10.6.1-snapshot-1",
"@instructure/ui-a11y-content": "10.6.1-snapshot-1",
"@instructure/ui-a11y-utils": "10.6.1-snapshot-1",
"@instructure/ui-buttons": "10.6.1-snapshot-1",
"@instructure/ui-dom-utils": "10.6.1-snapshot-1",
"@instructure/ui-icons": "10.6.1-snapshot-1",
"@instructure/ui-number-input": "10.6.1-snapshot-1",
"@instructure/ui-portal": "10.6.1-snapshot-1",
"@instructure/ui-prop-types": "10.6.1-snapshot-1",
"@instructure/ui-react-utils": "10.6.1-snapshot-1",
"@instructure/ui-testable": "10.6.1-snapshot-1",
"@instructure/ui-themes": "10.6.1-snapshot-1",
"@instructure/ui-tooltip": "10.6.1-snapshot-1",
"@instructure/ui-utils": "10.6.1-snapshot-1",
"@instructure/ui-view": "10.6.1-snapshot-1",
"@instructure/uid": "10.6.1-snapshot-1",
"@instructure/emotion": "10.6.1-snapshot-11",
"@instructure/shared-types": "10.6.1-snapshot-11",
"@instructure/ui-a11y-content": "10.6.1-snapshot-11",
"@instructure/ui-a11y-utils": "10.6.1-snapshot-11",
"@instructure/ui-buttons": "10.6.1-snapshot-11",
"@instructure/ui-dom-utils": "10.6.1-snapshot-11",
"@instructure/ui-icons": "10.6.1-snapshot-11",
"@instructure/ui-number-input": "10.6.1-snapshot-11",
"@instructure/ui-portal": "10.6.1-snapshot-11",
"@instructure/ui-prop-types": "10.6.1-snapshot-11",
"@instructure/ui-react-utils": "10.6.1-snapshot-11",
"@instructure/ui-testable": "10.6.1-snapshot-11",
"@instructure/ui-themes": "10.6.1-snapshot-11",
"@instructure/ui-tooltip": "10.6.1-snapshot-11",
"@instructure/ui-utils": "10.6.1-snapshot-11",
"@instructure/ui-view": "10.6.1-snapshot-11",
"@instructure/uid": "10.6.1-snapshot-11",
"prop-types": "^15.8.1"

@@ -56,0 +56,0 @@ },

4

src/Pagination/props.ts

@@ -200,3 +200,5 @@ /*

type PaginationStyle = ComponentStyle<'pagination' | 'pages'>
type PaginationStyle = ComponentStyle<
'pagination' | 'pages' | 'pageIndicatorList'
>

@@ -203,0 +205,0 @@ const propTypes: PropValidators<PropKeys> = {

9

src/Pagination/styles.ts

@@ -25,2 +25,3 @@ /*

import type { PaginationTheme } from '@instructure/shared-types'
import type { PaginationStyle } from './props'

@@ -38,4 +39,10 @@

*/
const generateStyle = (): PaginationStyle => {
const generateStyle = (componentTheme: PaginationTheme): PaginationStyle => {
return {
pageIndicatorList: {
all: 'unset',
display: 'flex',
alignItems: 'center',
gap: componentTheme.pageIndicatorGap
},
pagination: {

@@ -42,0 +49,0 @@ label: 'pagination',

2

types/Pagination/index.d.ts

@@ -87,3 +87,3 @@ /** @jsx jsx */

boundaryCount: number;
ellipsis: string;
ellipsis: jsx.JSX.Element;
renderPageIndicator: (page: number) => number;

@@ -90,0 +90,0 @@ };

2

types/Pagination/props.d.ts

@@ -121,3 +121,3 @@ import React from 'react';

type PaginationProps = PaginationOwnProps & WithStyleProps<null, PaginationStyle> & OtherHTMLAttributes<PaginationOwnProps> & WithDeterministicIdProps;
type PaginationStyle = ComponentStyle<'pagination' | 'pages'>;
type PaginationStyle = ComponentStyle<'pagination' | 'pages' | 'pageIndicatorList'>;
declare const propTypes: PropValidators<PropKeys>;

@@ -124,0 +124,0 @@ declare const allowedProps: AllowedPropKeys;

3

types/Pagination/styles.d.ts

@@ -0,1 +1,2 @@

import type { PaginationTheme } from '@instructure/shared-types';
import type { PaginationStyle } from './props';

@@ -12,4 +13,4 @@ /**

*/
declare const generateStyle: () => PaginationStyle;
declare const generateStyle: (componentTheme: PaginationTheme) => PaginationStyle;
export default generateStyle;
//# sourceMappingURL=styles.d.ts.map
src/Pagination/__new-tests__/Pagination.test.tsx

Sorry, the diff of this file is not supported yet

src/Pagination/index.tsx

Sorry, the diff of this file is not supported yet

src/Pagination/PaginationButton/index.tsx

Sorry, the diff of this file is not supported yet

tsconfig.build.tsbuildinfo

Sorry, the diff of this file is not supported yet

types/Pagination/index.d.ts.map

Sorry, the diff of this file is not supported yet

types/Pagination/PaginationButton/index.d.ts.map

Sorry, the diff of this file is not supported yet

types/Pagination/props.d.ts.map

Sorry, the diff of this file is not supported yet

types/Pagination/styles.d.ts.map

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc