@jobber/components 4.60.9 → 4.60.10
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/DataList/index.js +6 -6
- package/package.json +2 -2
package/dist/DataList/index.js
CHANGED
|
@@ -201,8 +201,8 @@ styleInject_es.styleInject(css_248z$c);
|
|
|
201
201
|
|
|
202
202
|
const CONTAINER_TEST_ID = "ATL-DataListFilters-Container";
|
|
203
203
|
|
|
204
|
-
var css_248z$b = ".jbBRoxlZlNI- {\n --overflow-fade--offset: var(--space-smaller);\n --overflow-fade--negative-offset: calc(var(--overflow-fade--offset) * -1);\n\n -ms-flex-item-align: center;\n\n align-self: center;\n position: relative;\n min-width: 0;\n}\n\n.MnN8qbS4hw4- {\n display: grid;\n
|
|
205
|
-
var styles$b = {"fadeContainer":"jbBRoxlZlNI-","overflowGrid":"MnN8qbS4hw4-","overflowTrigger":"b-5P7Z8eGO8-","overflowLeft":"xzaCS4slLpI-","overflowRight":"Jf227kC8Nu0-"};
|
|
204
|
+
var css_248z$b = ".jbBRoxlZlNI- {\n --overflow-fade--offset: var(--space-smaller);\n --overflow-fade--negative-offset: calc(var(--overflow-fade--offset) * -1);\n\n -ms-flex-item-align: center;\n\n align-self: center;\n position: relative;\n min-width: 0;\n}\n\n.P6uJ-vHfKrM-,\n.MnN8qbS4hw4- {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: -webkit-max-content;\n grid-auto-columns: max-content;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.P6uJ-vHfKrM- {\n gap: calc(16px / 2);\n gap: var(--space-small);\n}\n\n.MnN8qbS4hw4- {\n margin: var(--overflow-fade--negative-offset);\n padding: var(--overflow-fade--offset);\n overflow-x: auto;\n overflow-y: visible;\n}\n\n.b-5P7Z8eGO8- {\n visibility: hidden;\n}\n\n.xzaCS4slLpI-::before,\n.Jf227kC8Nu0-::after {\n content: \"\";\n position: absolute;\n top: 0;\n width: calc(16px * 1.5);\n width: var(--space-large);\n height: 100%;\n background-image: linear-gradient(\n to right,\n rgba(255, 255, 255, 1) 0%,\n rgba(255, 255, 255, 0) 100%\n );\n background-image: linear-gradient(\n var(--data-list-overflow-shadow-angle, to right),\n var(--color-surface) 0%,\n rgba(var(--color-white--rgb), 0) 100%\n );\n pointer-events: none;\n}\n\n.xzaCS4slLpI-::before {\n left: var(--overflow-fade--negative-offset);\n}\n\n.Jf227kC8Nu0-::after {\n --data-list-overflow-shadow-angle: to left;\n right: var(--overflow-fade--negative-offset);\n}\n";
|
|
205
|
+
var styles$b = {"fadeContainer":"jbBRoxlZlNI-","overflowItems":"P6uJ-vHfKrM-","overflowGrid":"MnN8qbS4hw4-","overflowTrigger":"b-5P7Z8eGO8-","overflowLeft":"xzaCS4slLpI-","overflowRight":"Jf227kC8Nu0-"};
|
|
206
206
|
styleInject_es.styleInject(css_248z$b);
|
|
207
207
|
|
|
208
208
|
function DataListOverflowFade({ children }) {
|
|
@@ -214,7 +214,7 @@ function DataListOverflowFade({ children }) {
|
|
|
214
214
|
}) },
|
|
215
215
|
React__default["default"].createElement("div", { className: styles$b.overflowGrid },
|
|
216
216
|
React__default["default"].createElement("span", { ref: leftRef, className: styles$b.overflowTrigger }),
|
|
217
|
-
children,
|
|
217
|
+
React__default["default"].createElement("div", { className: styles$b.overflowItems }, children),
|
|
218
218
|
React__default["default"].createElement("span", { ref: rightRef, className: styles$b.overflowTrigger }))));
|
|
219
219
|
}
|
|
220
220
|
|
|
@@ -834,8 +834,8 @@ function DataListStickyHeader({ children }) {
|
|
|
834
834
|
return (React__default["default"].createElement("div", { ref: ref, className: classnames__default["default"](styles$5.header, { [styles$5.stuck]: isStuck }) }, children));
|
|
835
835
|
}
|
|
836
836
|
|
|
837
|
-
var css_248z$4 = ".SaPMOnvw-3c- {\n --transition-properties: var(--timing-base) ease-in-out;\n --button-offset: calc(var(--space-largest) - var(--space-
|
|
838
|
-
var styles$4 = {"searchInput":"SaPMOnvw-3c-","searchInputVisible":"_3S1-91v2SYI-","searchButton":"_9GlBktsUALw-","withNoFilters":"_3Pjrt42x454-"};
|
|
837
|
+
var css_248z$4 = ".tj0MOMhLEEY- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.SaPMOnvw-3c- {\n --transition-properties: var(--timing-base) ease-in-out;\n --button-offset: calc(var(--space-largest) - var(--space-smaller));\n\n position: absolute;\n /* Inputs are off by 1 when put beside a button */\n top: 50%;\n right: calc((16px * 3) - (16px / 4));\n right: calc(calc(16px * 3) - calc(16px / 4));\n right: var(--button-offset);\n visibility: hidden;\n width: 0;\n padding: calc(16px / 4) 0;\n padding: var(--space-smaller) 0;\n background-color: rgba(255, 255, 255, 1);\n background-color: var(--color-surface);\n opacity: 0;\n -webkit-transform: translateY(-50%);\n transform: translateY(-50%);\n transition: opacity 200ms ease-in-out,\n width 200ms ease-in-out, visibility 200ms ease-in-out;\n transition: opacity var(--transition-properties),\n width var(--transition-properties), visibility var(--transition-properties);\n}\n\n._3S1-91v2SYI- {\n visibility: visible;\n width: calc(100% - var(--button-offset));\n opacity: 1;\n}\n\n@media (min-width: 768px) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n position: static;\n visibility: visible;\n width: auto;\n padding: 0;\n background-color: transparent;\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n transition: none;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n.SaPMOnvw-3c-,\n._3S1-91v2SYI- {\n position: static;\n visibility: visible;\n width: auto;\n padding: 0;\n background-color: transparent;\n opacity: 1;\n -webkit-transform: none;\n transform: none;\n transition: none;\n}\n }\n\n._9GlBktsUALw- {\n display: block;\n}\n\n@media (min-width: 768px) {\n\n._9GlBktsUALw- {\n display: none;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n._9GlBktsUALw- {\n display: none;\n}\n }\n\n/*\n * No Filters Styling\n *\n * When there are no filters, the search input is always visible.\n * ------------------------------------------------------------------------- */\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n position: static;\n visibility: visible;\n width: auto;\n opacity: 1;\n transition: none;\n}\n\n@media (min-width: 768px) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n max-width: 30%;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n._3Pjrt42x454- .SaPMOnvw-3c- {\n max-width: 30%;\n}\n }\n\n._3Pjrt42x454- ._9GlBktsUALw- {\n display: none;\n}\n";
|
|
838
|
+
var styles$4 = {"wrapper":"tj0MOMhLEEY-","searchInput":"SaPMOnvw-3c-","searchInputVisible":"_3S1-91v2SYI-","searchButton":"_9GlBktsUALw-","withNoFilters":"_3Pjrt42x454-"};
|
|
839
839
|
styleInject_es.styleInject(css_248z$4);
|
|
840
840
|
|
|
841
841
|
const DATA_LIST_SEARCH_TEST_ID = "ATL-DataList-Search-input-wrapper";
|
|
@@ -855,7 +855,7 @@ function InternalDataListSearch() {
|
|
|
855
855
|
if (!searchComponent)
|
|
856
856
|
return null;
|
|
857
857
|
const { placeholder, initialValue } = searchComponent.props;
|
|
858
|
-
return (React__default["default"].createElement("div", { className: classnames__default["default"]({
|
|
858
|
+
return (React__default["default"].createElement("div", { className: classnames__default["default"](styles$4.wrapper, {
|
|
859
859
|
[styles$4.withNoFilters]: !filterComponent && !sorting,
|
|
860
860
|
}) },
|
|
861
861
|
React__default["default"].createElement("div", { "data-testid": DATA_LIST_SEARCH_TEST_ID, className: classnames__default["default"](styles$4.searchInput, {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "4.60.
|
|
3
|
+
"version": "4.60.10",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -83,5 +83,5 @@
|
|
|
83
83
|
"> 1%",
|
|
84
84
|
"IE 10"
|
|
85
85
|
],
|
|
86
|
-
"gitHead": "
|
|
86
|
+
"gitHead": "249ce3cfc569791ad307ed50078939cdff48be70"
|
|
87
87
|
}
|