@patternfly/react-styles 5.1.1-prerelease.2 → 5.1.1-prerelease.3

package/css/components/Tooltip/tooltip.mjs

@@ -1,22 +1,41 @@
 import './tooltip.css';
 export default {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "top": "pf-m-top",
     "topLeft": "pf-m-top-left",
     "topRight": "pf-m-top-right",
+    "blockStart": "pf-m-block-start",
+    "blockStartInlineStart": "pf-m-block-start-inline-start",
+    "blockStartInlineEnd": "pf-m-block-start-inline-end",
     "bottom": "pf-m-bottom",
     "bottomLeft": "pf-m-bottom-left",
     "bottomRight": "pf-m-bottom-right",
+    "blockEnd": "pf-m-block-end",
+    "blockEndInlineStart": "pf-m-block-end-inline-start",
+    "blockEndInlineEnd": "pf-m-block-end-inline-end",
     "left": "pf-m-left",
     "leftTop": "pf-m-left-top",
     "leftBottom": "pf-m-left-bottom",
+    "inlineStart": "pf-m-inline-start",
+    "inlineStartBlockStart": "pf-m-inline-start-block-start",
+    "inlineStartBlockEnd": "pf-m-inline-start-block-end",
     "right": "pf-m-right",
     "rightTop": "pf-m-right-top",
     "rightBottom": "pf-m-right-bottom",
-    "textAlignLeft": "pf-m-text-align-left"
+    "inlineEnd": "pf-m-inline-end",
+    "inlineEndBlockStart": "pf-m-inline-end-block-start",
+    "inlineEndBlockEnd": "pf-m-inline-end-block-end",
+    "blockStartBlockStart": "pf-m-block-start-block-start",
+    "blockEndBlockStart": "pf-m-block-end-block-start",
+    "blockStartBlockEnd": "pf-m-block-start-block-end",
+    "blockEndBlockEnd": "pf-m-block-end-block-end",
+    "textAlignLeft": "pf-m-text-align-left",
+    "textAlignStart": "pf-m-text-align-start"
   },
   "themeDark": "pf-v5-theme-dark",
   "tooltip": "pf-v5-c-tooltip",
   "tooltipArrow": "pf-v5-c-tooltip__arrow",
-  "tooltipContent": "pf-v5-c-tooltip__content"
+  "tooltipContent": "pf-v5-c-tooltip__content",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/TreeView/tree-view.css

@@ -229,6 +229,9 @@
   transition: var(--pf-v5-c-tree-view__node-toggle-icon--Transition);
   transform: rotate(var(--pf-v5-c-tree-view__node-toggle-icon--Rotate));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle-icon {
+  scale: -1 1;
+}
 
 .pf-v5-c-tree-view__list-item .pf-v5-c-tree-view__list-item {
   --pf-v5-c-tree-view__node-toggle-icon--Rotate: var(--pf-v5-c-tree-view__node-toggle-icon--base--Rotate);
@@ -318,6 +321,9 @@
   border: 0;
   transform: translateX(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX));
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-tree-view__node-toggle {
+  transform: translateX(calc(var(--pf-v5-c-tree-view__list-item__list-item__node-toggle--TranslateX) * var(--pf-v5-global--inverse--multiplier)));
+}
 
 .pf-v5-c-tree-view__node-title.pf-m-truncate,
 .pf-v5-c-tree-view__node-text.pf-m-truncate {

package/css/components/TreeView/tree-view.d.ts

@@ -1,6 +1,7 @@
 import './tree-view.css';
 declare const _default: {
   "badge": "pf-v5-c-badge",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "compact": "pf-m-compact",
     "guides": "pf-m-guides",
@@ -26,6 +27,7 @@ declare const _default: {
   "treeViewNodeTitle": "pf-v5-c-tree-view__node-title",
   "treeViewNodeToggle": "pf-v5-c-tree-view__node-toggle",
   "treeViewNodeToggleIcon": "pf-v5-c-tree-view__node-toggle-icon",
-  "treeViewSearch": "pf-v5-c-tree-view__search"
+  "treeViewSearch": "pf-v5-c-tree-view__search",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/TreeView/tree-view.js

@@ -3,6 +3,7 @@ exports.__esModule = true;
 require('./tree-view.css');
 exports.default = {
   "badge": "pf-v5-c-badge",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "compact": "pf-m-compact",
     "guides": "pf-m-guides",
@@ -28,5 +29,6 @@ exports.default = {
   "treeViewNodeTitle": "pf-v5-c-tree-view__node-title",
   "treeViewNodeToggle": "pf-v5-c-tree-view__node-toggle",
   "treeViewNodeToggleIcon": "pf-v5-c-tree-view__node-toggle-icon",
-  "treeViewSearch": "pf-v5-c-tree-view__search"
+  "treeViewSearch": "pf-v5-c-tree-view__search",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/TreeView/tree-view.mjs

@@ -1,6 +1,7 @@
 import './tree-view.css';
 export default {
   "badge": "pf-v5-c-badge",
+  "dirRtl": "pf-v5-m-dir-rtl",
   "modifiers": {
     "compact": "pf-m-compact",
     "guides": "pf-m-guides",
@@ -26,5 +27,6 @@ export default {
   "treeViewNodeTitle": "pf-v5-c-tree-view__node-title",
   "treeViewNodeToggle": "pf-v5-c-tree-view__node-toggle",
   "treeViewNodeToggleIcon": "pf-v5-c-tree-view__node-toggle-icon",
-  "treeViewSearch": "pf-v5-c-tree-view__search"
+  "treeViewSearch": "pf-v5-c-tree-view__search",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Truncate/truncate.css

@@ -21,14 +21,23 @@
 .pf-v5-c-truncate__end {
   direction: rtl;
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
+  direction: ltr;
+}
 
 .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
   overflow: visible;
   direction: ltr;
 }
+:where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__start + .pf-v5-c-truncate__end {
+  direction: rtl;
+}
 
 @supports (-webkit-hyphens: none) {
   .pf-v5-c-truncate__end {
     direction: ltr;
   }
+  :where(.ws-dir-rtl, .pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-truncate__end {
+    direction: rtl;
+  }
 }

package/css/components/Truncate/truncate.d.ts

@@ -1,7 +1,9 @@
 import './truncate.css';
 declare const _default: {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "truncate": "pf-v5-c-truncate",
   "truncateEnd": "pf-v5-c-truncate__end",
-  "truncateStart": "pf-v5-c-truncate__start"
+  "truncateStart": "pf-v5-c-truncate__start",
+  "wsDirRtl": "ws-dir-rtl"
 };
 export default _default;

package/css/components/Truncate/truncate.js

@@ -2,7 +2,9 @@
 exports.__esModule = true;
 require('./truncate.css');
 exports.default = {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "truncate": "pf-v5-c-truncate",
   "truncateEnd": "pf-v5-c-truncate__end",
-  "truncateStart": "pf-v5-c-truncate__start"
+  "truncateStart": "pf-v5-c-truncate__start",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/components/Truncate/truncate.mjs

@@ -1,6 +1,8 @@
 import './truncate.css';
 export default {
+  "dirRtl": "pf-v5-m-dir-rtl",
   "truncate": "pf-v5-c-truncate",
   "truncateEnd": "pf-v5-c-truncate__end",
-  "truncateStart": "pf-v5-c-truncate__start"
+  "truncateStart": "pf-v5-c-truncate__start",
+  "wsDirRtl": "ws-dir-rtl"
 };

package/css/docs/components/ModalBox/examples/ModalBox.css

@@ -1,10 +1,4 @@
 .ws-core-c-modal .ws-preview-html {
-  position: relative;
-}
-
-.ws-core-c-modal .pf-v5-c-modal-box {
-  position: absolute;
- inset-block-start: 50%;
- inset-inline-start: 50%;
-  transform: translate(-50%, -50%);
+  display: grid;
+  place-items: center;
 }

package/css/docs/components/ModalBox/examples/ModalBox.d.ts

@@ -1,6 +1,5 @@
 import './ModalBox.css';
 declare const _default: {
-  "modalBox": "pf-v5-c-modal-box",
   "wsCoreCModal": "ws-core-c-modal",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/ModalBox/examples/ModalBox.js

@@ -2,7 +2,6 @@
 exports.__esModule = true;
 require('./ModalBox.css');
 exports.default = {
-  "modalBox": "pf-v5-c-modal-box",
   "wsCoreCModal": "ws-core-c-modal",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/ModalBox/examples/ModalBox.mjs

@@ -1,6 +1,5 @@
 import './ModalBox.css';
 export default {
-  "modalBox": "pf-v5-c-modal-box",
   "wsCoreCModal": "ws-core-c-modal",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/Popover/examples/Popover.css

@@ -1,10 +1,4 @@
 .ws-core-c-popover .ws-preview-html {
-  position: relative;
- }
-
- .ws-core-c-popover .pf-v5-c-popover {
-   position: absolute;
-  inset-block-start: 50%;
-  inset-inline-start: 50%;
-   transform: translate(-50%, -50%);
- }
+  display: grid;
+  place-items: center;
+}

package/css/docs/components/Popover/examples/Popover.d.ts

@@ -1,6 +1,5 @@
 import './Popover.css';
 declare const _default: {
-  "popover": "pf-v5-c-popover",
   "wsCoreCPopover": "ws-core-c-popover",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/Popover/examples/Popover.js

@@ -2,7 +2,6 @@
 exports.__esModule = true;
 require('./Popover.css');
 exports.default = {
-  "popover": "pf-v5-c-popover",
   "wsCoreCPopover": "ws-core-c-popover",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/Popover/examples/Popover.mjs

@@ -1,6 +1,5 @@
 import './Popover.css';
 export default {
-  "popover": "pf-v5-c-popover",
   "wsCoreCPopover": "ws-core-c-popover",
   "wsPreviewHtml": "ws-preview-html"
 };

package/css/docs/components/Tooltip/examples/Tooltip.css

@@ -0,0 +1,4 @@
+/* adds padding to full page examples so arrows are visible */
+.ws-core-c-tooltip:not(.ws-preview) {
+  padding: var(--pf-v5-global--spacer--md);
+}

package/css/docs/components/Tooltip/examples/Tooltip.d.ts

@@ -0,0 +1,6 @@
+import './Tooltip.css';
+declare const _default: {
+  "wsCoreCTooltip": "ws-core-c-tooltip",
+  "wsPreview": "ws-preview"
+};
+export default _default;

package/css/docs/components/Tooltip/examples/Tooltip.js

@@ -0,0 +1,7 @@
+"use strict";
+exports.__esModule = true;
+require('./Tooltip.css');
+exports.default = {
+  "wsCoreCTooltip": "ws-core-c-tooltip",
+  "wsPreview": "ws-preview"
+};

package/css/docs/components/Tooltip/examples/Tooltip.mjs

@@ -0,0 +1,5 @@
+import './Tooltip.css';
+export default {
+  "wsCoreCTooltip": "ws-core-c-tooltip",
+  "wsPreview": "ws-preview"
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-styles",
-  "version": "5.1.1-prerelease.2",
+  "version": "5.1.1-prerelease.3",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",
@@ -18,7 +18,7 @@
     "clean": "rimraf dist css"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "5.1.0-prerelease.13",
+    "@patternfly/patternfly": "5.1.0-prerelease.20",
     "camel-case": "^3.0.0",
     "css": "^2.2.3",
     "fs-extra": "^11.1.1",
@@ -28,5 +28,5 @@
     "typescript": "^4.7.4"
   },
   "license": "MIT",
-  "gitHead": "52cbf11e7e407d70d674a160da7f432d197c5f57"
+  "gitHead": "f3dbce4c4d20bf3a0f21b90244d146e316c4e837"
 }