@jobber/components 4.79.2 → 4.80.1-fixrender.2
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.
|
@@ -15,6 +15,7 @@ export declare const SEARCH_DEBOUNCE_DELAY: number;
|
|
|
15
15
|
export declare const DATA_LIST_FILTERING_SPINNER_TEST_ID = "ATL-DataList-filteringSpinner";
|
|
16
16
|
export declare const DATA_LIST_LOADING_MORE_SPINNER_TEST_ID = "ATL-DataList-loadingMoreSpinner";
|
|
17
17
|
export declare const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
|
|
18
|
+
export declare const DATA_LIST_STICKY_HEADER_TEST_ID = "ATL-DataList-stickyHeader";
|
|
18
19
|
export declare const TRANSITION_DURATION_IN_SECONDS: number;
|
|
19
20
|
export declare const TRANSITION_DELAY_IN_SECONDS: number;
|
|
20
21
|
export {};
|
package/dist/DataList/index.js
CHANGED
|
@@ -53,7 +53,7 @@ var classnames__default = /*#__PURE__*/_interopDefaultLegacy(classnames);
|
|
|
53
53
|
var isEmpty__default = /*#__PURE__*/_interopDefaultLegacy(isEmpty);
|
|
54
54
|
var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
|
|
55
55
|
|
|
56
|
-
var css_248z$g = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n box-sizing: border-box;\n}\n\n.TkdrExYnvcY- {\n --data-list--minimum-item-height: calc(var(--base-unit) * 3.5);\n\n display: -ms-flexbox;\n\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n position: relative;\n z-index: 0;\n z-index: var(--elevation-default);\n -ms-flex: 1;\n flex: 1;\n}\n\n/*\n * Header\n */\n\n.IcAlZHoB4LI- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n z-index: 1;\n z-index: var(--elevation-base);\n margin-bottom: calc(16px / 2);\n margin-bottom: var(--space-small);\n -ms-flex-align: center;\n align-items: center;\n}\n\n.TFO76ysivmg- {\n display: grid;\n padding: calc((16px / 2) + (16px / 4)) 0;\n padding: calc(calc(16px / 2) + calc(16px / 4)) 0;\n padding: calc(var(--space-small) + var(--space-smaller)) 0;\n gap: calc(16px / 2);\n grid-gap: calc(16px / 2);\n grid-gap: var(--space-small);\n gap: var(--space-small);\n grid-template-columns: auto fit-content(calc(16px * 14));\n grid-template-columns: auto fit-content(calc(var(--base-unit) * 14));\n}\n\n.jGHZZYZm1ZY- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n -ms-flex-pack: center;\n justify-content: center;\n min-height: calc(16px * 3);\n min-height: var(--space-largest);\n padding: calc(16px / 2);\n padding: var(--space-small);\n border-bottom: calc(16px / 8) solid rgb(217, 223, 225);\n border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.GiD7MjZJbcw- {\n --data-list--header-actions-gap: var(--space-small);\n display: -ms-flexbox;\n display: flex;\n gap: calc(16px / 2);\n gap: var(--data-list--header-actions-gap);\n}\n\n@media (max-width: 489px) {\n\n.GiD7MjZJbcw- {\n -ms-flex-pack: justify;\n justify-content: space-between;\n width: 100%;\n}\n }\n\n@media (--small-screens-and-below) {\n\n.GiD7MjZJbcw- {\n -ms-flex-pack: justify;\n justify-content: space-between;\n width: 100%;\n}\n }\n\n.jMSVGIAr5tk- > p {\n font-weight: 500;\n white-space: nowrap;\n}\n\n.jMSVGIAr5tk- {\n display: -ms-flexbox;\n display: flex;\n margin: calc((16px / 2) * -1) 0;\n margin: calc(calc(16px / 2) * -1) 0;\n margin: calc(var(--space-small) * -1) 0;\n -ms-flex-align: center;\n align-items: center;\n gap: var(--data-list--header-actions-gap);\n}\n\n/*\n * List Item\n */\n\n.ise8kHCfhCY- {\n position: relative;\n padding: calc(16px / 2);\n padding: var(--space-small);\n border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n border-bottom: var(--border-base) solid var(--color-border);\n transition: all 200ms;\n transition: all var(--timing-base);\n}\n\n.ise8kHCfhCY-,\n.Tq6e0BGwcSM- {\n display: grid;\n grid-template-columns: minmax(0px, auto);\n min-height: var(--data-list--minimum-item-height);\n -ms-flex-align: center;\n align-items: center;\n}\n\n.ise8kHCfhCY-.Pc0JGX6jCD4-,\n.ise8kHCfhCY-:hover,\n.ise8kHCfhCY-:focus-within {\n --data-list-item-active-color: var(--color-surface--hover);\n background-color: rgb(244, 246, 250);\n background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n margin: calc((16px / 2) * -1) 0;\n margin: calc(calc(16px / 2) * -1) 0;\n margin: calc(var(--space-small) * -1) 0;\n padding: calc(16px / 2) 0;\n padding: var(--space-small) 0;\n border: none;\n text-align: left;\n -webkit-text-decoration: none;\n text-decoration: none;\n background-color: transparent;\n cursor: pointer;\n}\n\n/**\n * Reset CSS properties on focus to ensure we only have the focus state on the\n * parent .listItem\n */\n\n.Tq6e0BGwcSM-:focus {\n outline: none;\n background-color: transparent;\n}\n\n/**\n * Enable a better hover and focus experience when :has() is supported.\n * This is a workaround for Firefox where the :has() selector is not supported.\n */\n\n@supports selector(*:has(*)) {\n .ise8kHCfhCY-:hover,\n .ise8kHCfhCY-:focus-within {\n background-color: transparent;\n }\n\n .ise8kHCfhCY-:has(.Tq6e0BGwcSM-:hover, .Tq6e0BGwcSM-:focus) {\n background-color: var(--data-list-item-active-color);\n }\n}\n\n/*\n * List Item Selection\n */\n\n.d-79rkMqufg- {\n display: grid;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n@media (min-width: 768px) {\n\n.d-79rkMqufg- {\n -ms-flex-align: center;\n align-items: center;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n.d-79rkMqufg- {\n -ms-flex-align: center;\n align-items: center;\n}\n }\n\n.d-79rkMqufg-,\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n grid-template-columns: -webkit-max-content minmax(0px, auto);\n grid-template-columns: max-content minmax(0px, auto);\n -webkit-column-gap: calc(16px / 2);\n -webkit-column-gap: var(--space-small);\n -moz-column-gap: calc(16px / 2);\n -moz-column-gap: var(--space-small);\n column-gap: calc(16px / 2);\n column-gap: var(--space-small);\n}\n\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n display: grid;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.qm-SSuWTXkI- {\n display: -ms-flexbox;\n display: flex;\n visibility: hidden;\n\n /* To compensate the Checkbox's label margin that we are using for screen-readers */\n margin-right: calc((16px * 1) * -1);\n margin-right: calc(calc(16px * 1) * -1);\n margin-right: calc(var(--space-base) * -1);\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n visibility: visible;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n -ms-flex-order: 2;\n order: 2;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n -ms-flex-order: 1;\n order: 1;\n padding-top: calc(16px / 4);\n padding-top: var(--space-smaller);\n opacity: 1;\n transition: opacity 100ms ease-in-out;\n transition: opacity var(--transition-properties);\n --transition-properties: var(--timing-quick) ease-in-out;\n}\n\n@media (min-width: 768px) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n padding-top: 0;\n opacity: 0;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n padding-top: 0;\n opacity: 0;\n}\n }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :last-child {\n opacity: 1;\n}\n\n/*\n * Filters\n */\n\n.Kkp-IYmwq-s- {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(255, 255, 255, 0.6);\n background-color: var(--color-overlay--dimmed);\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.m-eCShL7TU4- {\n position: sticky;\n top: 50vh;\n}\n\n/* This hides the text from the UI but not from the screen readers */\n\n.esUiRgWabYw- {\n position: absolute;\n top: auto;\n left: -10000px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n text-indent: -10000px;\n}\n";
|
|
56
|
+
var css_248z$g = ".TkdrExYnvcY-,\n.TkdrExYnvcY- * {\n box-sizing: border-box;\n}\n\n.TkdrExYnvcY- {\n --data-list--minimum-item-height: calc(var(--base-unit) * 3.5);\n\n display: -ms-flexbox;\n\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n position: relative;\n z-index: 0;\n z-index: var(--elevation-default);\n -ms-flex: 1;\n flex: 1;\n}\n\n/*\n * Header\n */\n\n.IcAlZHoB4LI- {\n display: -ms-flexbox;\n display: flex;\n position: relative;\n z-index: 1;\n z-index: var(--elevation-base);\n margin-bottom: calc(16px / 2);\n margin-bottom: var(--space-small);\n -ms-flex-align: center;\n align-items: center;\n}\n\n.TFO76ysivmg- {\n display: grid;\n padding: calc((16px / 2) + (16px / 4)) 0;\n padding: calc(calc(16px / 2) + calc(16px / 4)) 0;\n padding: calc(var(--space-small) + var(--space-smaller)) 0;\n gap: calc(16px / 2);\n grid-gap: calc(16px / 2);\n grid-gap: var(--space-small);\n gap: var(--space-small);\n grid-template-columns: auto fit-content(calc(16px * 14));\n grid-template-columns: auto fit-content(calc(var(--base-unit) * 14));\n}\n\n.TFO76ysivmg-:empty {\n display: none;\n}\n\n.jGHZZYZm1ZY- {\n display: -ms-flexbox;\n display: flex;\n -ms-flex-direction: column;\n flex-direction: column;\n -ms-flex-pack: center;\n justify-content: center;\n min-height: calc(16px * 3);\n min-height: var(--space-largest);\n padding: calc(16px / 2);\n padding: var(--space-small);\n border-bottom: calc(16px / 8) solid rgb(217, 223, 225);\n border-bottom: var(--border-thick) solid var(--color-border);\n}\n\n.GiD7MjZJbcw- {\n --data-list--header-actions-gap: var(--space-small);\n display: -ms-flexbox;\n display: flex;\n gap: calc(16px / 2);\n gap: var(--data-list--header-actions-gap);\n}\n\n@media (max-width: 489px) {\n\n.GiD7MjZJbcw- {\n -ms-flex-pack: justify;\n justify-content: space-between;\n width: 100%;\n}\n }\n\n@media (--small-screens-and-below) {\n\n.GiD7MjZJbcw- {\n -ms-flex-pack: justify;\n justify-content: space-between;\n width: 100%;\n}\n }\n\n.jMSVGIAr5tk- > p {\n font-weight: 500;\n white-space: nowrap;\n}\n\n.jMSVGIAr5tk- {\n display: -ms-flexbox;\n display: flex;\n margin: calc((16px / 2) * -1) 0;\n margin: calc(calc(16px / 2) * -1) 0;\n margin: calc(var(--space-small) * -1) 0;\n -ms-flex-align: center;\n align-items: center;\n gap: var(--data-list--header-actions-gap);\n}\n\n/*\n * List Item\n */\n\n.ise8kHCfhCY- {\n position: relative;\n padding: calc(16px / 2);\n padding: var(--space-small);\n border-bottom: calc(16px / 16) solid rgb(217, 223, 225);\n border-bottom: var(--border-base) solid var(--color-border);\n transition: all 200ms;\n transition: all var(--timing-base);\n}\n\n.ise8kHCfhCY-,\n.Tq6e0BGwcSM- {\n display: grid;\n grid-template-columns: minmax(0px, auto);\n min-height: var(--data-list--minimum-item-height);\n -ms-flex-align: center;\n align-items: center;\n}\n\n.ise8kHCfhCY-.Pc0JGX6jCD4-,\n.ise8kHCfhCY-:hover,\n.ise8kHCfhCY-:focus-within {\n --data-list-item-active-color: var(--color-surface--hover);\n background-color: rgb(244, 246, 250);\n background-color: var(--data-list-item-active-color);\n}\n\n.Tq6e0BGwcSM- {\n margin: calc((16px / 2) * -1) 0;\n margin: calc(calc(16px / 2) * -1) 0;\n margin: calc(var(--space-small) * -1) 0;\n padding: calc(16px / 2) 0;\n padding: var(--space-small) 0;\n border: none;\n text-align: left;\n -webkit-text-decoration: none;\n text-decoration: none;\n background-color: transparent;\n cursor: pointer;\n}\n\n/**\n * Reset CSS properties on focus to ensure we only have the focus state on the\n * parent .listItem\n */\n\n.Tq6e0BGwcSM-:focus {\n outline: none;\n background-color: transparent;\n}\n\n/**\n * Enable a better hover and focus experience when :has() is supported.\n * This is a workaround for Firefox where the :has() selector is not supported.\n */\n\n@supports selector(*:has(*)) {\n .ise8kHCfhCY-:hover,\n .ise8kHCfhCY-:focus-within {\n background-color: transparent;\n }\n\n .ise8kHCfhCY-:has(.Tq6e0BGwcSM-:hover, .Tq6e0BGwcSM-:focus) {\n background-color: var(--data-list-item-active-color);\n }\n}\n\n/*\n * List Item Selection\n */\n\n.d-79rkMqufg- {\n display: grid;\n -ms-flex-align: start;\n align-items: flex-start;\n}\n\n@media (min-width: 768px) {\n\n.d-79rkMqufg- {\n -ms-flex-align: center;\n align-items: center;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n.d-79rkMqufg- {\n -ms-flex-align: center;\n align-items: center;\n}\n }\n\n.d-79rkMqufg-,\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n grid-template-columns: -webkit-max-content minmax(0px, auto);\n grid-template-columns: max-content minmax(0px, auto);\n -webkit-column-gap: calc(16px / 2);\n -webkit-column-gap: var(--space-small);\n -moz-column-gap: calc(16px / 2);\n -moz-column-gap: var(--space-small);\n column-gap: calc(16px / 2);\n column-gap: var(--space-small);\n}\n\n.jGHZZYZm1ZY- .d-79rkMqufg- {\n display: grid;\n -ms-flex-align: center;\n align-items: center;\n}\n\n.qm-SSuWTXkI- {\n display: -ms-flexbox;\n display: flex;\n visibility: hidden;\n\n /* To compensate the Checkbox's label margin that we are using for screen-readers */\n margin-right: calc((16px * 1) * -1);\n margin-right: calc(calc(16px * 1) * -1);\n margin-right: calc(var(--space-base) * -1);\n}\n\n.qm-SSuWTXkI-.VA9RnQp6nbI- {\n visibility: visible;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :first-child {\n -ms-flex-order: 2;\n order: 2;\n}\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n -ms-flex-order: 1;\n order: 1;\n padding-top: calc(16px / 4);\n padding-top: var(--space-smaller);\n opacity: 1;\n transition: opacity 100ms ease-in-out;\n transition: opacity var(--transition-properties);\n --transition-properties: var(--timing-quick) ease-in-out;\n}\n\n@media (min-width: 768px) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n padding-top: 0;\n opacity: 0;\n}\n }\n\n@media (--medium-screens-and-up) {\n\n.ise8kHCfhCY- .d-79rkMqufg- > :last-child {\n padding-top: 0;\n opacity: 0;\n}\n }\n\n.ise8kHCfhCY-:hover .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY-:focus-within .d-79rkMqufg- > :last-child,\n.ise8kHCfhCY- .d-79rkMqufg-._4L7iXXzLr5k- > :last-child {\n opacity: 1;\n}\n\n/*\n * Filters\n */\n\n.Kkp-IYmwq-s- {\n display: -ms-flexbox;\n display: flex;\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n background-color: rgba(255, 255, 255, 0.6);\n background-color: var(--color-overlay--dimmed);\n -ms-flex-align: start;\n align-items: flex-start;\n -ms-flex-pack: center;\n justify-content: center;\n}\n\n.m-eCShL7TU4- {\n position: sticky;\n top: 50vh;\n}\n\n/* This hides the text from the UI but not from the screen readers */\n\n.esUiRgWabYw- {\n position: absolute;\n top: auto;\n left: -10000px;\n width: 1px;\n height: 1px;\n overflow: hidden;\n text-indent: -10000px;\n}\n";
|
|
57
57
|
var styles$g = {"wrapper":"TkdrExYnvcY-","titleContainer":"IcAlZHoB4LI-","headerFilters":"TFO76ysivmg-","headerTitles":"jGHZZYZm1ZY-","batchSelectContainer":"GiD7MjZJbcw-","headerBatchSelect":"jMSVGIAr5tk-","listItem":"ise8kHCfhCY-","listItemClickable":"Tq6e0BGwcSM-","active":"Pc0JGX6jCD4-","selectable":"d-79rkMqufg-","selectAllCheckbox":"qm-SSuWTXkI-","visible":"VA9RnQp6nbI-","selected":"_4L7iXXzLr5k-","filtering":"Kkp-IYmwq-s-","filteringSpinner":"m-eCShL7TU4-","srOnly":"esUiRgWabYw-"};
|
|
58
58
|
styleInject_es.styleInject(css_248z$g);
|
|
59
59
|
|
|
@@ -145,6 +145,7 @@ const SEARCH_DEBOUNCE_DELAY = design.tokens["timing-slowest"];
|
|
|
145
145
|
const DATA_LIST_FILTERING_SPINNER_TEST_ID = "ATL-DataList-filteringSpinner";
|
|
146
146
|
const DATA_LIST_LOADING_MORE_SPINNER_TEST_ID = "ATL-DataList-loadingMoreSpinner";
|
|
147
147
|
const DATA_LOAD_MORE_TEST_ID = "ATL-DataList-LoadMore-trigger";
|
|
148
|
+
const DATA_LIST_STICKY_HEADER_TEST_ID = "ATL-DataList-stickyHeader";
|
|
148
149
|
const TRANSITION_DURATION_IN_SECONDS = design.tokens["timing-base"] / 1000;
|
|
149
150
|
const TRANSITION_DELAY_IN_SECONDS = design.tokens["timing-quick"] / 1000;
|
|
150
151
|
|
|
@@ -1017,7 +1018,7 @@ function DataListStickyHeader({ children }) {
|
|
|
1017
1018
|
ref.current && observer.unobserve(ref.current);
|
|
1018
1019
|
};
|
|
1019
1020
|
}, [handleObserver, ref.current]);
|
|
1020
|
-
return (React__default["default"].createElement("div", { ref: ref, className: classnames__default["default"](styles$5.header, { [styles$5.stuck]: isStuck }) }, children));
|
|
1021
|
+
return (React__default["default"].createElement("div", { "data-testid": DATA_LIST_STICKY_HEADER_TEST_ID, ref: ref, className: classnames__default["default"](styles$5.header, { [styles$5.stuck]: isStuck }) }, children));
|
|
1021
1022
|
}
|
|
1022
1023
|
|
|
1023
1024
|
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 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";
|
|
@@ -1231,6 +1232,8 @@ function DataList(_a) {
|
|
|
1231
1232
|
const emptyStateComponents = getCompoundComponents(props.children, DataListEmptyState);
|
|
1232
1233
|
const itemActionComponent = getCompoundComponent(props.children, DataListItemActions);
|
|
1233
1234
|
const bulkActionsComponent = getCompoundComponent(props.children, DataListBulkActions);
|
|
1235
|
+
const headerCount = Object.keys(props.headers).length;
|
|
1236
|
+
const shouldRenderStickyHeader = !!filterComponent || !!searchComponent || !!(headerCount > 0);
|
|
1234
1237
|
return (React__default["default"].createElement(DataListContext.Provider, { value: Object.assign(Object.assign({ searchComponent,
|
|
1235
1238
|
filterComponent,
|
|
1236
1239
|
layoutComponents,
|
|
@@ -1243,7 +1246,7 @@ function DataList(_a) {
|
|
|
1243
1246
|
registerLayout }, props), { selected,
|
|
1244
1247
|
// T !== DataListObject
|
|
1245
1248
|
sorting: sorting }) },
|
|
1246
|
-
React__default["default"].createElement(InternalDataList,
|
|
1249
|
+
React__default["default"].createElement(InternalDataList, { shouldRenderStickyHeader: shouldRenderStickyHeader })));
|
|
1247
1250
|
function registerLayoutBreakpoints(size) {
|
|
1248
1251
|
setLayoutBreakpoints(prev => sortBreakpoints([...prev, size]));
|
|
1249
1252
|
}
|
|
@@ -1251,7 +1254,7 @@ function DataList(_a) {
|
|
|
1251
1254
|
setLayouts(prev => (Object.assign(Object.assign({}, prev), { [size]: children })));
|
|
1252
1255
|
}
|
|
1253
1256
|
}
|
|
1254
|
-
function InternalDataList() {
|
|
1257
|
+
function InternalDataList({ shouldRenderStickyHeader, }) {
|
|
1255
1258
|
const { data, title, totalCount, loadingState = "none", layoutComponents, } = useDataListContext();
|
|
1256
1259
|
const backToTopRef = React.useRef(null);
|
|
1257
1260
|
const initialLoading = loadingState === "initial";
|
|
@@ -1262,12 +1265,12 @@ function InternalDataList() {
|
|
|
1262
1265
|
title && React__default["default"].createElement(Heading.Heading, { level: 3 }, title),
|
|
1263
1266
|
React__default["default"].createElement(DataListTotalCount, { totalCount: totalCount, loading: initialLoading })),
|
|
1264
1267
|
React__default["default"].createElement("div", { ref: backToTopRef }),
|
|
1265
|
-
React__default["default"].createElement(DataListStickyHeader, null,
|
|
1268
|
+
shouldRenderStickyHeader && (React__default["default"].createElement(DataListStickyHeader, null,
|
|
1266
1269
|
React__default["default"].createElement("div", { className: styles$g.headerFilters },
|
|
1267
1270
|
React__default["default"].createElement(InternalDataListFilters, null),
|
|
1268
1271
|
React__default["default"].createElement(InternalDataListSearch, null)),
|
|
1269
1272
|
React__default["default"].createElement(InternalDataListStatusBar, null),
|
|
1270
|
-
React__default["default"].createElement(DataListHeader, null)),
|
|
1273
|
+
React__default["default"].createElement(DataListHeader, null))),
|
|
1271
1274
|
initialLoading && React__default["default"].createElement(DataListLoadingState, null),
|
|
1272
1275
|
showEmptyState && React__default["default"].createElement(InternalDataListEmptyState, null),
|
|
1273
1276
|
layoutComponents,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jobber/components",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.80.1-fixrender.2+f5f32634",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
],
|
|
21
21
|
"dependencies": {
|
|
22
22
|
"@jobber/design": "^0.53.0",
|
|
23
|
-
"@jobber/formatters": "
|
|
23
|
+
"@jobber/formatters": "^0.2.2",
|
|
24
24
|
"@jobber/hooks": "^2.8.2",
|
|
25
25
|
"@popperjs/core": "^2.0.6",
|
|
26
26
|
"@std-proposal/temporal": "0.0.1",
|
|
@@ -84,5 +84,5 @@
|
|
|
84
84
|
"> 1%",
|
|
85
85
|
"IE 10"
|
|
86
86
|
],
|
|
87
|
-
"gitHead": "
|
|
87
|
+
"gitHead": "f5f32634283d2220a4242bbdf6688f1be78b0997"
|
|
88
88
|
}
|