@codecademy/gamut-styles 17.13.2-alpha.ea023d.0 → 17.13.2-alpha.f19d29.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/AssetProvider.d.ts +1 -1
- package/dist/AssetProvider.js +1 -1
- package/dist/globals/Typography.js +2 -2
- package/dist/remoteAssets/fonts.d.ts +1 -1
- package/dist/utilities/index.d.ts +0 -2
- package/dist/utilities/index.js +1 -3
- package/package.json +2 -2
- package/dist/utilities/elementDir.d.ts +0 -22
- package/dist/utilities/elementDir.js +0 -59
- package/dist/utilities/useLogicalProperties.d.ts +0 -7
- package/dist/utilities/useLogicalProperties.js +0 -12
- /package/dist/{utilities → utils}/fontUtils.d.ts +0 -0
- /package/dist/{utilities → utils}/fontUtils.js +0 -0
package/dist/AssetProvider.d.ts
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Theme } from '@emotion/react';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { FontConfig } from './
|
|
3
|
+
import { FontConfig } from './utils/fontUtils';
|
|
4
4
|
export declare const createFontLinks: (fonts?: readonly FontConfig[]) => import("react/jsx-runtime").JSX.Element[];
|
|
5
5
|
export declare const AssetProvider: React.FC<{
|
|
6
6
|
theme?: Theme;
|
package/dist/AssetProvider.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { webFonts } from './remoteAssets/fonts';
|
|
3
3
|
import { coreTheme } from './themes';
|
|
4
|
-
import { getFonts } from './
|
|
4
|
+
import { getFonts } from './utils/fontUtils';
|
|
5
5
|
|
|
6
6
|
/*
|
|
7
7
|
* Only preload woff2 fonts, since woff1 are only included as fallbacks.
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { css, Global } from '@emotion/react';
|
|
2
2
|
import * as React from 'react';
|
|
3
|
-
import { getFonts } from '../
|
|
3
|
+
import { getFonts } from '../utils/fontUtils';
|
|
4
4
|
|
|
5
5
|
/**
|
|
6
6
|
* Typography component that applies global typography styles to the application.
|
|
@@ -37,7 +37,7 @@ export const Typography = ({
|
|
|
37
37
|
weight = 'normal',
|
|
38
38
|
extensions,
|
|
39
39
|
filePath
|
|
40
|
-
}) => /*#__PURE__*/css("@font-face{font-display:swap;font-family:'", name, "';font-style:", style, ";font-weight:", weight, ";src:", extensions.map(ext => `url("${filePath}.${ext}") format("${ext}")`).join(', '), ";};label:typographyGlobals;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,
|
|
40
|
+
}) => /*#__PURE__*/css("@font-face{font-display:swap;font-family:'", name, "';font-style:", style, ";font-weight:", weight, ";src:", extensions.map(ext => `url("${filePath}.${ext}") format("${ext}")`).join(', '), ";};label:typographyGlobals;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9nbG9iYWxzL1R5cG9ncmFwaHkudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQTZDNkIiLCJmaWxlIjoiLi4vLi4vc3JjL2dsb2JhbHMvVHlwb2dyYXBoeS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgY29yZVRoZW1lIH0gZnJvbSAnLi4vdGhlbWVzJztcbmltcG9ydCB7IEZvbnRDb25maWcsIGdldEZvbnRzIH0gZnJvbSAnLi4vdXRpbHMvZm9udFV0aWxzJztcblxuLyoqXG4gKiBUeXBvZ3JhcGh5IGNvbXBvbmVudCB0aGF0IGFwcGxpZXMgZ2xvYmFsIHR5cG9ncmFwaHkgc3R5bGVzIHRvIHRoZSBhcHBsaWNhdGlvbi5cbiAqXG4gKiBUaGlzIGNvbXBvbmVudCBnZW5lcmF0ZXMgQ1NTLWluLUpTIHN0eWxlcyBmb3I6XG4gKiAtIEZvbnQgZmFjZSBkZWNsYXJhdGlvbnMgZm9yIGFsbCBjb25maWd1cmVkIGZvbnRzXG4gKiAtIEdsb2JhbCBoZWFkaW5nIHN0eWxlcyAoaDEtaDYpIHdpdGggdGhlbWUtYmFzZWQgc2l6aW5nIGFuZCBzcGFjaW5nXG4gKiAtIFNtYWxsIHRleHQgc3R5bGluZ1xuICpcbiAqIEBwYXJhbSBwcm9wcyAtIENvbXBvbmVudCBwcm9wc1xuICogQHBhcmFtIHByb3BzLnRoZW1lIC0gRW1vdGlvbiB0aGVtZSBvYmplY3QgY29udGFpbmluZyB0eXBvZ3JhcGh5IGNvbmZpZ3VyYXRpb24gYW5kIGFuIG9wdGlvbmFsIG5hbWVcbiAqIEByZXR1cm5zIEpTWCBlbGVtZW50IHdpdGggZ2xvYmFsIHR5cG9ncmFwaHkgc3R5bGVzIGFwcGxpZWRcbiAqXG4gKiBAZXhhbXBsZVxuICogYGBgdHN4XG4gKiA8VHlwb2dyYXBoeSB0aGVtZT17bXlUaGVtZX0gLz5cbiAqIGBgYFxuICovXG5cbmV4cG9ydCBjb25zdCBUeXBvZ3JhcGh5OiBSZWFjdC5GQzx7IHRoZW1lOiB0eXBlb2YgY29yZVRoZW1lIH0+ID0gKHtcbiAgdGhlbWUsXG59KSA9PiB7XG4gIHRyeSB7XG4gICAgY29uc3QgZm9udHMgPSBnZXRGb250cyh0aGVtZT8ubmFtZSk7XG5cbiAgICBpZiAoIUFycmF5LmlzQXJyYXkoZm9udHMpKSB7XG4gICAgICAvLyBFcnJvciBpZiB0aGUgZm9udHMgYXJlIG5vdCBhbiBhcnJheVxuICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLWNvbnNvbGVcbiAgICAgIGNvbnNvbGUud2FybignVHlwb2dyYXBoeTogSW52YWxpZCBmb250cyBkYXRhIHJlY2VpdmVkJyk7XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICB9XG5cbiAgICBjb25zdCB0eXBvZ3JhcGh5R2xvYmFscyA9IGNzc2BcbiAgICAgICR7Zm9udHMubWFwKFxuICAgICAgICAoe1xuICAgICAgICAgIG5hbWUsXG4gICAgICAgICAgc3R5bGUgPSAnbm9ybWFsJyxcbiAgICAgICAgICB3ZWlnaHQgPSAnbm9ybWFsJyxcbiAgICAgICAgICBleHRlbnNpb25zLFxuICAgICAgICAgIGZpbGVQYXRoLFxuICAgICAgICB9OiBGb250Q29uZmlnKSA9PiBjc3NgXG4gICAgICAgICAgQGZvbnQtZmFjZSB7XG4gICAgICAgICAgICBmb250LWRpc3BsYXk6IHN3YXA7XG4gICAgICAgICAgICBmb250LWZhbWlseTogJyR7bmFtZX0nO1xuICAgICAgICAgICAgZm9udC1zdHlsZTogJHtzdHlsZX07XG4gICAgICAgICAgICBmb250LXdlaWdodDogJHt3ZWlnaHR9O1xuICAgICAgICAgICAgc3JjOiAke2V4dGVuc2lvbnNcbiAgICAgICAgICAgICAgLm1hcCgoZXh0KSA9PiBgdXJsKFwiJHtmaWxlUGF0aH0uJHtleHR9XCIpIGZvcm1hdChcIiR7ZXh0fVwiKWApXG4gICAgICAgICAgICAgIC5qb2luKCcsICcpfTtcbiAgICAgICAgICB9XG4gICAgICAgIGBcbiAgICAgICl9XG5cbiAgICAgIGgxLFxuICAgIGgyLFxuICAgIGgzLFxuICAgIGg0LFxuICAgIGg1LFxuICAgIGg2IHtcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogJHt0aGVtZS5zcGFjaW5nWzE2XX07XG4gICAgICAgIGZvbnQtd2VpZ2h0OiAke3RoZW1lLmZvbnRXZWlnaHQudGl0bGV9O1xuICAgICAgICBsaW5lLWhlaWdodDogJHt0aGVtZS5saW5lSGVpZ2h0LnRpdGxlfTtcbiAgICAgIH1cblxuICAgICAgaDEge1xuICAgICAgICBmb250LXNpemU6ICR7dGhlbWUuZm9udFNpemVbNjRdfTtcbiAgICAgIH1cbiAgICAgIGgyIHtcbiAgICAgICAgZm9udC1zaXplOiAke3RoZW1lLmZvbnRTaXplWzQ0XX07XG4gICAgICB9XG4gICAgICBoMyB7XG4gICAgICAgIGZvbnQtc2l6ZTogJHt0aGVtZS5mb250U2l6ZVszNF19O1xuICAgICAgfVxuICAgICAgaDQge1xuICAgICAgICBmb250LXNpemU6ICR7dGhlbWUuZm9udFNpemVbMjZdfTtcbiAgICAgIH1cbiAgICAgIGg1IHtcbiAgICAgICAgZm9udC1zaXplOiAke3RoZW1lLmZvbnRTaXplWzIyXX07XG4gICAgICB9XG4gICAgICBoNiB7XG4gICAgICAgIGZvbnQtc2l6ZTogJHt0aGVtZS5mb250U2l6ZVsyMF19O1xuICAgICAgfVxuXG4gICAgICBzbWFsbCB7XG4gICAgICAgIGZvbnQtc2l6ZTogJHt0aGVtZS5mb250U2l6ZVsxNF19O1xuICAgICAgICBmb250LXdlaWdodDogJHt0aGVtZS5mb250V2VpZ2h0LmJhc2V9O1xuICAgICAgfVxuICAgIGA7XG5cbiAgICByZXR1cm4gPEdsb2JhbCBzdHlsZXM9e3R5cG9ncmFwaHlHbG9iYWxzfSAvPjtcbiAgfSBjYXRjaCAoZXJyb3IpIHtcbiAgICAvLyBIYW5kbGUgZm9udCBsb2FkaW5nIGVycm9ycyBncmFjZWZ1bGx5XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLWNvbnNvbGVcbiAgICBjb25zb2xlLndhcm4oJ1R5cG9ncmFwaHk6IEZvbnQgbG9hZGluZyBmYWlsZWQ6JywgZXJyb3IpO1xuICAgIHJldHVybiBudWxsO1xuICB9XG59O1xuIl19 */"))), " h1,h2,h3,h4,h5,h6{margin-bottom:", theme.spacing[16], ";font-weight:", theme.fontWeight.title, ";line-height:", theme.lineHeight.title, ";}h1{font-size:", theme.fontSize[64], ";}h2{font-size:", theme.fontSize[44], ";}h3{font-size:", theme.fontSize[34], ";}h4{font-size:", theme.fontSize[26], ";}h5{font-size:", theme.fontSize[22], ";}h6{font-size:", theme.fontSize[20], ";}small{font-size:", theme.fontSize[14], ";font-weight:", theme.fontWeight.base, ";};label:typographyGlobals;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9nbG9iYWxzL1R5cG9ncmFwaHkudHN4Il0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFDaUMiLCJmaWxlIjoiLi4vLi4vc3JjL2dsb2JhbHMvVHlwb2dyYXBoeS50c3giLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MsIEdsb2JhbCB9IGZyb20gJ0BlbW90aW9uL3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgY29yZVRoZW1lIH0gZnJvbSAnLi4vdGhlbWVzJztcbmltcG9ydCB7IEZvbnRDb25maWcsIGdldEZvbnRzIH0gZnJvbSAnLi4vdXRpbHMvZm9udFV0aWxzJztcblxuLyoqXG4gKiBUeXBvZ3JhcGh5IGNvbXBvbmVudCB0aGF0IGFwcGxpZXMgZ2xvYmFsIHR5cG9ncmFwaHkgc3R5bGVzIHRvIHRoZSBhcHBsaWNhdGlvbi5cbiAqXG4gKiBUaGlzIGNvbXBvbmVudCBnZW5lcmF0ZXMgQ1NTLWluLUpTIHN0eWxlcyBmb3I6XG4gKiAtIEZvbnQgZmFjZSBkZWNsYXJhdGlvbnMgZm9yIGFsbCBjb25maWd1cmVkIGZvbnRzXG4gKiAtIEdsb2JhbCBoZWFkaW5nIHN0eWxlcyAoaDEtaDYpIHdpdGggdGhlbWUtYmFzZWQgc2l6aW5nIGFuZCBzcGFjaW5nXG4gKiAtIFNtYWxsIHRleHQgc3R5bGluZ1xuICpcbiAqIEBwYXJhbSBwcm9wcyAtIENvbXBvbmVudCBwcm9wc1xuICogQHBhcmFtIHByb3BzLnRoZW1lIC0gRW1vdGlvbiB0aGVtZSBvYmplY3QgY29udGFpbmluZyB0eXBvZ3JhcGh5IGNvbmZpZ3VyYXRpb24gYW5kIGFuIG9wdGlvbmFsIG5hbWVcbiAqIEByZXR1cm5zIEpTWCBlbGVtZW50IHdpdGggZ2xvYmFsIHR5cG9ncmFwaHkgc3R5bGVzIGFwcGxpZWRcbiAqXG4gKiBAZXhhbXBsZVxuICogYGBgdHN4XG4gKiA8VHlwb2dyYXBoeSB0aGVtZT17bXlUaGVtZX0gLz5cbiAqIGBgYFxuICovXG5cbmV4cG9ydCBjb25zdCBUeXBvZ3JhcGh5OiBSZWFjdC5GQzx7IHRoZW1lOiB0eXBlb2YgY29yZVRoZW1lIH0+ID0gKHtcbiAgdGhlbWUsXG59KSA9PiB7XG4gIHRyeSB7XG4gICAgY29uc3QgZm9udHMgPSBnZXRGb250cyh0aGVtZT8ubmFtZSk7XG5cbiAgICBpZiAoIUFycmF5LmlzQXJyYXkoZm9udHMpKSB7XG4gICAgICAvLyBFcnJvciBpZiB0aGUgZm9udHMgYXJlIG5vdCBhbiBhcnJheVxuICAgICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLWNvbnNvbGVcbiAgICAgIGNvbnNvbGUud2FybignVHlwb2dyYXBoeTogSW52YWxpZCBmb250cyBkYXRhIHJlY2VpdmVkJyk7XG4gICAgICByZXR1cm4gbnVsbDtcbiAgICB9XG5cbiAgICBjb25zdCB0eXBvZ3JhcGh5R2xvYmFscyA9IGNzc2BcbiAgICAgICR7Zm9udHMubWFwKFxuICAgICAgICAoe1xuICAgICAgICAgIG5hbWUsXG4gICAgICAgICAgc3R5bGUgPSAnbm9ybWFsJyxcbiAgICAgICAgICB3ZWlnaHQgPSAnbm9ybWFsJyxcbiAgICAgICAgICBleHRlbnNpb25zLFxuICAgICAgICAgIGZpbGVQYXRoLFxuICAgICAgICB9OiBGb250Q29uZmlnKSA9PiBjc3NgXG4gICAgICAgICAgQGZvbnQtZmFjZSB7XG4gICAgICAgICAgICBmb250LWRpc3BsYXk6IHN3YXA7XG4gICAgICAgICAgICBmb250LWZhbWlseTogJyR7bmFtZX0nO1xuICAgICAgICAgICAgZm9udC1zdHlsZTogJHtzdHlsZX07XG4gICAgICAgICAgICBmb250LXdlaWdodDogJHt3ZWlnaHR9O1xuICAgICAgICAgICAgc3JjOiAke2V4dGVuc2lvbnNcbiAgICAgICAgICAgICAgLm1hcCgoZXh0KSA9PiBgdXJsKFwiJHtmaWxlUGF0aH0uJHtleHR9XCIpIGZvcm1hdChcIiR7ZXh0fVwiKWApXG4gICAgICAgICAgICAgIC5qb2luKCcsICcpfTtcbiAgICAgICAgICB9XG4gICAgICAgIGBcbiAgICAgICl9XG5cbiAgICAgIGgxLFxuICAgIGgyLFxuICAgIGgzLFxuICAgIGg0LFxuICAgIGg1LFxuICAgIGg2IHtcbiAgICAgICAgbWFyZ2luLWJvdHRvbTogJHt0aGVtZS5zcGFjaW5nWzE2XX07XG4gICAgICAgIGZvbnQtd2VpZ2h0OiAke3RoZW1lLmZvbnRXZWlnaHQudGl0bGV9O1xuICAgICAgICBsaW5lLWhlaWdodDogJHt0aGVtZS5saW5lSGVpZ2h0LnRpdGxlfTtcbiAgICAgIH1cblxuICAgICAgaDEge1xuICAgICAgICBmb250LXNpemU6ICR7dGhlbWUuZm9udFNpemVbNjRdfTtcbiAgICAgIH1cbiAgICAgIGgyIHtcbiAgICAgICAgZm9udC1zaXplOiAke3RoZW1lLmZvbnRTaXplWzQ0XX07XG4gICAgICB9XG4gICAgICBoMyB7XG4gICAgICAgIGZvbnQtc2l6ZTogJHt0aGVtZS5mb250U2l6ZVszNF19O1xuICAgICAgfVxuICAgICAgaDQge1xuICAgICAgICBmb250LXNpemU6ICR7dGhlbWUuZm9udFNpemVbMjZdfTtcbiAgICAgIH1cbiAgICAgIGg1IHtcbiAgICAgICAgZm9udC1zaXplOiAke3RoZW1lLmZvbnRTaXplWzIyXX07XG4gICAgICB9XG4gICAgICBoNiB7XG4gICAgICAgIGZvbnQtc2l6ZTogJHt0aGVtZS5mb250U2l6ZVsyMF19O1xuICAgICAgfVxuXG4gICAgICBzbWFsbCB7XG4gICAgICAgIGZvbnQtc2l6ZTogJHt0aGVtZS5mb250U2l6ZVsxNF19O1xuICAgICAgICBmb250LXdlaWdodDogJHt0aGVtZS5mb250V2VpZ2h0LmJhc2V9O1xuICAgICAgfVxuICAgIGA7XG5cbiAgICByZXR1cm4gPEdsb2JhbCBzdHlsZXM9e3R5cG9ncmFwaHlHbG9iYWxzfSAvPjtcbiAgfSBjYXRjaCAoZXJyb3IpIHtcbiAgICAvLyBIYW5kbGUgZm9udCBsb2FkaW5nIGVycm9ycyBncmFjZWZ1bGx5XG4gICAgLy8gZXNsaW50LWRpc2FibGUtbmV4dC1saW5lIG5vLWNvbnNvbGVcbiAgICBjb25zb2xlLndhcm4oJ1R5cG9ncmFwaHk6IEZvbnQgbG9hZGluZyBmYWlsZWQ6JywgZXJyb3IpO1xuICAgIHJldHVybiBudWxsO1xuICB9XG59O1xuIl19 */"));
|
|
41
41
|
return /*#__PURE__*/_jsx(Global, {
|
|
42
42
|
styles: typographyGlobals
|
|
43
43
|
});
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { FontConfig } from '../
|
|
1
|
+
import { FontConfig } from '../utils/fontUtils';
|
|
2
2
|
export declare const FONT_ASSET_PATH = "https://www.codecademy.com/gamut";
|
|
3
3
|
export declare const core: readonly FontConfig[];
|
|
4
4
|
export declare const percipio: readonly FontConfig[];
|
package/dist/utilities/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codecademy/gamut-styles",
|
|
3
3
|
"description": "Styleguide & Component library for codecademy.com",
|
|
4
|
-
"version": "17.13.2-alpha.
|
|
4
|
+
"version": "17.13.2-alpha.f19d29.0",
|
|
5
5
|
"author": "Jake Hiller <jake@codecademy.com>",
|
|
6
6
|
"dependencies": {
|
|
7
|
-
"@codecademy/variance": "0.26.2-alpha.
|
|
7
|
+
"@codecademy/variance": "0.26.2-alpha.f19d29.0",
|
|
8
8
|
"@emotion/is-prop-valid": "^1.1.0",
|
|
9
9
|
"framer-motion": "^11.18.0",
|
|
10
10
|
"get-nonce": "^1.0.0",
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import type { RefObject } from 'react';
|
|
2
|
-
/** Resolved HTML `dir` keyword: effective writing direction after `dir`, then CSS `direction`, then document root. */
|
|
3
|
-
export type DirValue = 'rtl' | 'ltr';
|
|
4
|
-
/**
|
|
5
|
-
* Resolves the effective `dir` for an element (`rtl` or `ltr`), including JSDOM where
|
|
6
|
-
* `getComputedStyle(el).direction` is often empty while `dir` is set on the root.
|
|
7
|
-
*/
|
|
8
|
-
export declare function elementDir(el: Element): DirValue;
|
|
9
|
-
/**
|
|
10
|
-
* Ref whose `current` may be any DOM {@link Element} subclass (`HTMLElement`, `SVGElement`,
|
|
11
|
-
* `HTMLButtonElement`, etc.). For structural/minimal types (e.g. tests), intersect with
|
|
12
|
-
* `Element` so `current` is still typed as an `Element` (e.g. `Pick<HTMLAnchorElement, 'id'> & Element`).
|
|
13
|
-
*/
|
|
14
|
-
export type ElementDirRef<T extends Element = Element> = RefObject<T | null>;
|
|
15
|
-
/**
|
|
16
|
-
* Returns the effective `dir` for the resolved element (`rtl` or `ltr`), and updates when `dir`
|
|
17
|
-
* changes on the document subtree or after layout (so `ref.current` is current).
|
|
18
|
-
* Resolution uses {@link elementDir}.
|
|
19
|
-
*
|
|
20
|
-
* @param elementRef - Optional ref; when missing or `current` is not an `Element`, uses `document.documentElement`.
|
|
21
|
-
*/
|
|
22
|
-
export declare function useElementDir<T extends Element = Element>(elementRef?: ElementDirRef<T>): DirValue;
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import { useEffect, useLayoutEffect, useReducer } from 'react';
|
|
2
|
-
|
|
3
|
-
/** Resolved HTML `dir` keyword: effective writing direction after `dir`, then CSS `direction`, then document root. */
|
|
4
|
-
|
|
5
|
-
/**
|
|
6
|
-
* Resolves the effective `dir` for an element (`rtl` or `ltr`), including JSDOM where
|
|
7
|
-
* `getComputedStyle(el).direction` is often empty while `dir` is set on the root.
|
|
8
|
-
*/
|
|
9
|
-
export function elementDir(el) {
|
|
10
|
-
const ownDir = el.getAttribute('dir');
|
|
11
|
-
if (ownDir === 'rtl') return 'rtl';
|
|
12
|
-
if (ownDir === 'ltr') return 'ltr';
|
|
13
|
-
const {
|
|
14
|
-
direction
|
|
15
|
-
} = getComputedStyle(el);
|
|
16
|
-
if (direction === 'rtl' || direction === 'ltr') {
|
|
17
|
-
return direction;
|
|
18
|
-
}
|
|
19
|
-
return document.documentElement.getAttribute('dir') === 'rtl' ? 'rtl' : 'ltr';
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
/**
|
|
23
|
-
* Ref whose `current` may be any DOM {@link Element} subclass (`HTMLElement`, `SVGElement`,
|
|
24
|
-
* `HTMLButtonElement`, etc.). For structural/minimal types (e.g. tests), intersect with
|
|
25
|
-
* `Element` so `current` is still typed as an `Element` (e.g. `Pick<HTMLAnchorElement, 'id'> & Element`).
|
|
26
|
-
*/
|
|
27
|
-
|
|
28
|
-
function resolveElement(elementRef) {
|
|
29
|
-
return elementRef?.current instanceof Element ? elementRef.current : document.documentElement;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
/**
|
|
33
|
-
* Returns the effective `dir` for the resolved element (`rtl` or `ltr`), and updates when `dir`
|
|
34
|
-
* changes on the document subtree or after layout (so `ref.current` is current).
|
|
35
|
-
* Resolution uses {@link elementDir}.
|
|
36
|
-
*
|
|
37
|
-
* @param elementRef - Optional ref; when missing or `current` is not an `Element`, uses `document.documentElement`.
|
|
38
|
-
*/
|
|
39
|
-
export function useElementDir(elementRef) {
|
|
40
|
-
const [, bump] = useReducer(n => n + 1, 0);
|
|
41
|
-
useLayoutEffect(() => {
|
|
42
|
-
bump();
|
|
43
|
-
}, [elementRef]);
|
|
44
|
-
useEffect(() => {
|
|
45
|
-
const observer = new MutationObserver(() => {
|
|
46
|
-
bump();
|
|
47
|
-
});
|
|
48
|
-
observer.observe(document.documentElement, {
|
|
49
|
-
attributeFilter: ['dir'],
|
|
50
|
-
attributes: true,
|
|
51
|
-
subtree: true
|
|
52
|
-
});
|
|
53
|
-
return () => observer.disconnect();
|
|
54
|
-
}, []);
|
|
55
|
-
if (typeof document === 'undefined') {
|
|
56
|
-
return 'ltr';
|
|
57
|
-
}
|
|
58
|
-
return elementDir(resolveElement(elementRef));
|
|
59
|
-
}
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Whether Gamut system props emit logical CSS properties (`marginInlineStart`, etc.)
|
|
3
|
-
* vs physical (`marginLeft`, etc.).
|
|
4
|
-
*
|
|
5
|
-
* `GamutProvider` always merges an explicit boolean (default `false`).
|
|
6
|
-
*/
|
|
7
|
-
export declare function useLogicalProperties(): boolean | undefined;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { useTheme } from '@emotion/react';
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* Whether Gamut system props emit logical CSS properties (`marginInlineStart`, etc.)
|
|
5
|
-
* vs physical (`marginLeft`, etc.).
|
|
6
|
-
*
|
|
7
|
-
* `GamutProvider` always merges an explicit boolean (default `false`).
|
|
8
|
-
*/
|
|
9
|
-
export function useLogicalProperties() {
|
|
10
|
-
const theme = useTheme();
|
|
11
|
-
return theme?.useLogicalProperties;
|
|
12
|
-
}
|
|
File without changes
|
|
File without changes
|