@instructure/ui-pagination 8.17.1-snapshot.1 → 8.17.1-snapshot.18

package/es/Pagination/index.js

@@ -1,4 +1,4 @@
-var _dec, _dec2, _class, _class2, _temp, _span, _span2;
+var _dec, _dec2, _dec3, _class, _class2, _temp, _span, _span2;
 
 /*
  * The MIT License (MIT)
@@ -28,8 +28,7 @@ var _dec, _dec2, _class, _class2, _temp, _span, _span2;
 import React, { Component } from 'react';
 import { View } from '@instructure/ui-view';
 import { testable } from '@instructure/ui-testable';
-import { omitProps } from '@instructure/ui-react-utils';
-import { uid } from '@instructure/uid';
+import { omitProps, withDeterministicId } from '@instructure/ui-react-utils';
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils';
 import { findTabbable, getActiveElement } from '@instructure/ui-dom-utils';
 import { withStyle, jsx } from '@instructure/emotion';
@@ -62,7 +61,7 @@ category: components
 ---
 @tsProps
 **/
-let Pagination = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Pagination extends Component {
+let Pagination = (_dec = withDeterministicId(), _dec2 = withStyle(generateStyle, null), _dec3 = testable(), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _class2 = class Pagination extends Component {
   constructor(props) {
     super(props);
     this._labelId = void 0;
@@ -86,7 +85,7 @@ let Pagination = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
       }
     };
 
-    this._labelId = uid('Pagination');
+    this._labelId = props.deterministicId();
   }
 
   get _root() {
@@ -338,6 +337,6 @@ let Pagination = (_dec = withStyle(generateStyle, null), _dec2 = testable(), _de
   labelNumberInput: numberOfPages => `of ${numberOfPages}`,
   screenReaderLabelNumberInput: (currentPage, numberOfPages) => `Select page (${currentPage} of ${numberOfPages})`,
   shouldHandleFocus: true
-}, _class2.Page = PaginationButton, _class2.Navigation = PaginationArrowButton, _temp)) || _class) || _class);
+}, _class2.Page = PaginationButton, _class2.Navigation = PaginationArrowButton, _temp)) || _class) || _class) || _class);
 export default Pagination;
 export { Pagination, PaginationButton };

package/lib/Pagination/index.js

@@ -24,7 +24,7 @@ var _testable = require("@instructure/ui-testable/lib/testable.js");
 
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 
-var _uid = require("@instructure/uid");
+var _withDeterministicId = require("@instructure/ui-react-utils/lib/DeterministicIdContext/withDeterministicId.js");
 
 var _hasVisibleChildren = require("@instructure/ui-a11y-utils/lib/hasVisibleChildren.js");
 
@@ -44,7 +44,7 @@ var _styles = _interopRequireDefault(require("./styles"));
 
 var _props = require("./props");
 
-var _dec, _dec2, _class, _class2, _temp, _span, _span2;
+var _dec, _dec2, _dec3, _class, _class2, _temp, _span, _span2;
 
 /** This is an [].findIndex optimized to work on really big, but sparse, arrays */
 const fastFindIndex = (arr, fn) => Number(Object.keys(arr).find(k => fn(arr[Number(k)])));
@@ -69,7 +69,7 @@ category: components
 ---
 @tsProps
 **/
-let Pagination = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class Pagination extends _react.Component {
+let Pagination = (_dec = (0, _withDeterministicId.withDeterministicId)(), _dec2 = (0, _emotion.withStyle)(_styles.default, null), _dec3 = (0, _testable.testable)(), _dec(_class = _dec2(_class = _dec3(_class = (_temp = _class2 = class Pagination extends _react.Component {
   constructor(props) {
     super(props);
     this._labelId = void 0;
@@ -93,7 +93,7 @@ let Pagination = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 =
       }
     };
 
-    this._labelId = (0, _uid.uid)('Pagination');
+    this._labelId = props.deterministicId();
   }
 
   get _root() {
@@ -347,7 +347,7 @@ let Pagination = (_dec = (0, _emotion.withStyle)(_styles.default, null), _dec2 =
   labelNumberInput: numberOfPages => `of ${numberOfPages}`,
   screenReaderLabelNumberInput: (currentPage, numberOfPages) => `Select page (${currentPage} of ${numberOfPages})`,
   shouldHandleFocus: true
-}, _class2.Page = _PaginationButton.PaginationButton, _class2.Navigation = _PaginationArrowButton.PaginationArrowButton, _temp)) || _class) || _class);
+}, _class2.Page = _PaginationButton.PaginationButton, _class2.Navigation = _PaginationArrowButton.PaginationArrowButton, _temp)) || _class) || _class) || _class);
 exports.Pagination = Pagination;
 var _default = Pagination;
 exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-pagination",
-  "version": "8.17.1-snapshot.1+3eaf62445",
+  "version": "8.17.1-snapshot.18+9f145a7d2",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -23,29 +23,29 @@
   },
   "license": "MIT",
   "devDependencies": {
-    "@instructure/ui-babel-preset": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-test-locator": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-test-queries": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-test-utils": "8.17.1-snapshot.1+3eaf62445"
+    "@instructure/ui-babel-preset": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-test-locator": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-test-queries": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-test-utils": "8.17.1-snapshot.18+9f145a7d2"
   },
   "dependencies": {
     "@babel/runtime": "^7.13.10",
-    "@instructure/emotion": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/shared-types": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-a11y-content": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-a11y-utils": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-buttons": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-dom-utils": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-icons": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-number-input": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-portal": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-prop-types": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-react-utils": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-testable": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-tooltip": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-utils": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/ui-view": "8.17.1-snapshot.1+3eaf62445",
-    "@instructure/uid": "8.17.1-snapshot.1+3eaf62445",
+    "@instructure/emotion": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/shared-types": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-a11y-content": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-a11y-utils": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-buttons": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-dom-utils": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-icons": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-number-input": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-portal": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-prop-types": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-react-utils": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-testable": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-tooltip": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-utils": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/ui-view": "8.17.1-snapshot.18+9f145a7d2",
+    "@instructure/uid": "8.17.1-snapshot.18+9f145a7d2",
     "keycode": "^2",
     "prop-types": "^15"
   },
@@ -56,5 +56,5 @@
     "access": "public"
   },
   "sideEffects": false,
-  "gitHead": "3eaf62445635c7ef2927ddfcf610fb561a729fd1"
+  "gitHead": "9f145a7d2f84eda965b570fa5702e1fda0c92e58"
 }

package/src/Pagination/index.tsx

@@ -26,8 +26,7 @@ import React, { Component } from 'react'
 
 import { View } from '@instructure/ui-view'
 import { testable } from '@instructure/ui-testable'
-import { omitProps } from '@instructure/ui-react-utils'
-import { uid } from '@instructure/uid'
+import { omitProps, withDeterministicId } from '@instructure/ui-react-utils'
 import { hasVisibleChildren } from '@instructure/ui-a11y-utils'
 import { findTabbable, getActiveElement } from '@instructure/ui-dom-utils'
 import { withStyle, jsx } from '@instructure/emotion'
@@ -79,6 +78,7 @@ category: components
 ---
 @tsProps
 **/
+@withDeterministicId()
 @withStyle(generateStyle, null)
 @testable()
 class Pagination extends Component<PaginationProps> {
@@ -115,7 +115,7 @@ class Pagination extends Component<PaginationProps> {
   constructor(props: PaginationProps) {
     super(props)
 
-    this._labelId = uid('Pagination')
+    this._labelId = props.deterministicId!()
   }
 
   get _root() {

package/src/Pagination/props.ts

@@ -41,7 +41,7 @@ import type {
   PropValidators
 } from '@instructure/shared-types'
 import type { PaginationPageProps } from './PaginationButton/props'
-
+import type { WithDeterministicIdProps } from '@instructure/ui-react-utils'
 type ChildPage = React.ReactElement<PaginationPageProps>
 
 type PaginationOwnProps = {
@@ -154,7 +154,7 @@ type AllowedPropKeys = Readonly<Array<PropKeys>>
 
 type PaginationProps = PaginationOwnProps &
   WithStyleProps<null, PaginationStyle> &
-  OtherHTMLAttributes<PaginationOwnProps>
+  OtherHTMLAttributes<PaginationOwnProps> & WithDeterministicIdProps
 
 type PaginationStyle = ComponentStyle<'pagination' | 'pages'>