@trafilea/afrodita-components 6.4.1 → 6.4.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.
- package/build/index.d.ts +5 -5
- package/build/index.esm.js +41 -39
- package/build/index.esm.js.map +1 -1
- package/build/index.js +41 -39
- package/build/index.js.map +1 -1
- package/package.json +1 -1
package/build/index.js
CHANGED
|
@@ -3147,7 +3147,7 @@ var DEFAULT_BREAKPOINTS = {
|
|
|
3147
3147
|
desktop: 1280,
|
|
3148
3148
|
};
|
|
3149
3149
|
|
|
3150
|
-
var Container$17 = newStyled.div(templateObject_1$
|
|
3150
|
+
var Container$17 = newStyled.div(templateObject_1$1P || (templateObject_1$1P = __makeTemplateObject(["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"], ["\n @keyframes shimmer {\n 100% {\n transform: translateX(100%);\n }\n }\n\n display: inline-block;\n height: ", ";\n width: ", ";\n position: relative;\n overflow: hidden;\n background-color: ", ";\n border-radius: ", ";\n box-sizing: border-box;\n\n ::after {\n position: absolute;\n top: 0;\n right: 0;\n bottom: 0;\n left: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n ", ",\n ", ",\n ", "\n );\n animation: shimmer 2s infinite;\n content: '';\n box-sizing: border-box;\n }\n"])), function (_a) {
|
|
3151
3151
|
var height = _a.height;
|
|
3152
3152
|
return (height ? height : '1.5em');
|
|
3153
3153
|
}, function (_a) {
|
|
@@ -3174,9 +3174,9 @@ var SkeletonBox = function (_a) {
|
|
|
3174
3174
|
var theme = useTheme();
|
|
3175
3175
|
return jsxRuntime.jsx(Container$17, { "data-testid": "skeleton-container", width: width, height: height, theme: theme }, void 0);
|
|
3176
3176
|
};
|
|
3177
|
-
var templateObject_1$
|
|
3177
|
+
var templateObject_1$1P;
|
|
3178
3178
|
|
|
3179
|
-
var StyledSvgWrapper = newStyled.svg(templateObject_1$
|
|
3179
|
+
var StyledSvgWrapper = newStyled.svg(templateObject_1$1O || (templateObject_1$1O = __makeTemplateObject(["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"], ["\n width: ", ";\n height: ", ";\n color: ", ";\n display: inline-block;\n vertical-align: middle;\n flex: none;\n ", "\n ", "\n"])), function (_a) {
|
|
3180
3180
|
var width = _a.width;
|
|
3181
3181
|
return width;
|
|
3182
3182
|
}, function (_a) {
|
|
@@ -3205,7 +3205,7 @@ var StyledImageWrapper = newStyled.img(templateObject_2$1b || (templateObject_2$
|
|
|
3205
3205
|
var opacity = _a.opacity;
|
|
3206
3206
|
return opacity && "opacity: ".concat(opacity, ";");
|
|
3207
3207
|
});
|
|
3208
|
-
var templateObject_1$
|
|
3208
|
+
var templateObject_1$1O, templateObject_2$1b;
|
|
3209
3209
|
|
|
3210
3210
|
/* eslint-disable no-undef */
|
|
3211
3211
|
var cache = new Map();
|
|
@@ -3283,7 +3283,7 @@ var getIconDimension = function (dimension) {
|
|
|
3283
3283
|
return "".concat(dimension, "rem");
|
|
3284
3284
|
};
|
|
3285
3285
|
|
|
3286
|
-
var
|
|
3286
|
+
var UnmemoIconFromExtSource = function (_a) {
|
|
3287
3287
|
var height = _a.height, width = _a.width, title = _a.title, testId = _a.testId, fill = _a.fill, name = _a.name, svgProps = _a.svgProps, iconURL = _a.iconURL, svgId = _a.svgId, rest = __rest(_a, ["height", "width", "title", "testId", "fill", "name", "svgProps", "iconURL", "svgId"]);
|
|
3288
3288
|
var _b = React$2.useState(false), error = _b[0], setError = _b[1];
|
|
3289
3289
|
var _c = React$2.useState(), localSource = _c[0], setLocalSource = _c[1];
|
|
@@ -3321,7 +3321,8 @@ var IconFromExtSource = function (_a) {
|
|
|
3321
3321
|
return jsxRuntime.jsx(StyledImageWrapper, __assign$1({}, imageProperties, rest, { src: localSource.src }), void 0);
|
|
3322
3322
|
}
|
|
3323
3323
|
return (jsxRuntime.jsxs(StyledSvgWrapper, __assign$1({ "data-testid": testId, fill: fill, height: height, type: "image/svg+xml", width: width }, rest, svgProps, { children: [jsxRuntime.jsx("title", { children: title !== null && title !== void 0 ? title : name }, void 0), jsxRuntime.jsx("use", { xlinkHref: "".concat(localSource.src, "#").concat(svgId) }, void 0)] }), void 0));
|
|
3324
|
-
};
|
|
3324
|
+
};
|
|
3325
|
+
var IconFromExtSource = React__default["default"].memo(UnmemoIconFromExtSource);
|
|
3325
3326
|
|
|
3326
3327
|
/* eslint-disable react/forbid-component-props */
|
|
3327
3328
|
var UnmemoIcon = function (_a) {
|
|
@@ -4080,7 +4081,7 @@ function jsxs(type, props, key) {
|
|
|
4080
4081
|
// This defines which HTML tag to render for each `variant`, it also defines
|
|
4081
4082
|
// `variants` styles that are consistent through all themes.
|
|
4082
4083
|
var TAGS = {
|
|
4083
|
-
hero1: newStyled.h1(templateObject_1$
|
|
4084
|
+
hero1: newStyled.h1(templateObject_1$1N || (templateObject_1$1N = __makeTemplateObject([""], [""]))),
|
|
4084
4085
|
hero2: newStyled.h2(templateObject_2$1a || (templateObject_2$1a = __makeTemplateObject([""], [""]))),
|
|
4085
4086
|
hero3: newStyled.h3(templateObject_3$U || (templateObject_3$U = __makeTemplateObject([""], [""]))),
|
|
4086
4087
|
display1: newStyled.h1(templateObject_4$F || (templateObject_4$F = __makeTemplateObject([""], [""]))),
|
|
@@ -4216,9 +4217,9 @@ var DEFAULTS = {
|
|
|
4216
4217
|
size: 'regular',
|
|
4217
4218
|
},
|
|
4218
4219
|
};
|
|
4219
|
-
var templateObject_1$
|
|
4220
|
+
var templateObject_1$1N, templateObject_2$1a, templateObject_3$U, templateObject_4$F, templateObject_5$r, templateObject_6$p, templateObject_7$h, templateObject_8$d, templateObject_9$6, templateObject_10$5, templateObject_11$4, templateObject_12$3, templateObject_13$3, templateObject_14$2, templateObject_15$2, templateObject_16$2, templateObject_17$2, templateObject_18$2, templateObject_19$2, templateObject_20$1;
|
|
4220
4221
|
|
|
4221
|
-
var Container$16 = newStyled.div(templateObject_1$
|
|
4222
|
+
var Container$16 = newStyled.div(templateObject_1$1M || (templateObject_1$1M = __makeTemplateObject(["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"], ["\n position: relative;\n display: flex;\n border-radius: 6px;\n gap: 6px;\n"])));
|
|
4222
4223
|
var Card$3 = newStyled.div(templateObject_2$19 || (templateObject_2$19 = __makeTemplateObject(["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"], ["\n --background: var(--colors-background-color);\n\n flex: 1;\n position: relative;\n overflow: hidden;\n cursor: pointer;\n border: 2px solid var(--component-packSelector-borderColor);\n padding: 16px 7px 7px;\n text-align: center;\n background-color: var(--background);\n border-radius: var(--component-packSelector-borderRadius);\n\n &[aria-checked='true'] {\n --color: var(--component-packSelector-selectedColor);\n\n border-color: var(--color);\n\n & * {\n p {\n color: var(--color);\n }\n }\n }\n"])));
|
|
4223
4224
|
var Tag$2 = newStyled.div(templateObject_3$T || (templateObject_3$T = __makeTemplateObject(["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"], ["\n position: absolute;\n width: 100%;\n left: 50%;\n top: 0;\n transform: translateX(-50%);\n background-color: var(--component-packSelector-tagColor);\n display: flex;\n align-items: center;\n justify-content: center;\n padding: 1px 0;\n\n [aria-checked='true'] & {\n background-color: var(--component-packSelector-selectedColor);\n\n & * {\n color: var(--component-packSelector-selectedContrast) !important;\n }\n }\n"])));
|
|
4224
4225
|
var Label$4 = newStyled.div(templateObject_4$E || (templateObject_4$E = __makeTemplateObject(["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"], ["\n position: relative;\n width: fit-content;\n margin: 0 auto;\n"])));
|
|
@@ -4248,9 +4249,9 @@ var PackCard$1 = function (_a) {
|
|
|
4248
4249
|
currency: currencyCode || 'USD',
|
|
4249
4250
|
}), ' ', "each", ')'] }), void 0)) : null] }, void 0)] }), void 0));
|
|
4250
4251
|
};
|
|
4251
|
-
var templateObject_1$
|
|
4252
|
+
var templateObject_1$1M, templateObject_2$19, templateObject_3$T, templateObject_4$E, templateObject_5$q, templateObject_6$o;
|
|
4252
4253
|
|
|
4253
|
-
var Container$15 = newStyled.div(templateObject_1$
|
|
4254
|
+
var Container$15 = newStyled.div(templateObject_1$1L || (templateObject_1$1L = __makeTemplateObject(["\n height: 32px;\n display: flex;\n align-items: center;\n"], ["\n height: 32px;\n display: flex;\n align-items: center;\n"])));
|
|
4254
4255
|
var DropContainer = newStyled.div(templateObject_2$18 || (templateObject_2$18 = __makeTemplateObject(["\n display: flex;\n"], ["\n display: flex;\n"])));
|
|
4255
4256
|
var DropList = function (_a) {
|
|
4256
4257
|
var dropTotal = _a.dropTotal, drops = _a.drops;
|
|
@@ -4258,17 +4259,17 @@ var DropList = function (_a) {
|
|
|
4258
4259
|
return (jsxRuntime.jsx(DropContainer, __assign$1({ "data-testid": "star-container" }, { children: index < Math.floor(drops) ? (jsxRuntime.jsx(Icon.PDP.Drop, { width: 0.875, height: 0.875 }, void 0)) : (jsxRuntime.jsx(Icon.PDP.DropEmpty, { width: 0.875, height: 0.875 }, void 0)) }), index));
|
|
4259
4260
|
}) }, void 0));
|
|
4260
4261
|
};
|
|
4261
|
-
var templateObject_1$
|
|
4262
|
+
var templateObject_1$1L, templateObject_2$18;
|
|
4262
4263
|
|
|
4263
4264
|
var DROPS_TOTAL = 5;
|
|
4264
|
-
var Container$14 = newStyled.div(templateObject_1$
|
|
4265
|
+
var Container$14 = newStyled.div(templateObject_1$1K || (templateObject_1$1K = __makeTemplateObject(["\n height: 32px;\n display: flex;\n"], ["\n height: 32px;\n display: flex;\n"])));
|
|
4265
4266
|
var Title$8 = newStyled.p(templateObject_2$17 || (templateObject_2$17 = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-right: 7px;\n"])));
|
|
4266
4267
|
var Description$3 = newStyled.p(templateObject_3$S || (templateObject_3$S = __makeTemplateObject(["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"], ["\n height: 32px;\n font-size: 14px;\n line-height: 22px;\n margin: 0;\n display: flex;\n align-items: center;\n font-weight: 600;\n margin-left: 7px;\n"])));
|
|
4267
4268
|
var AbsorbencyLevel = function (_a) {
|
|
4268
4269
|
var dropTotal = _a.dropTotal, drops = _a.drops, absorbencyTitle = _a.absorbencyTitle, absorbencyDescription = _a.absorbencyDescription;
|
|
4269
4270
|
return (jsxRuntime.jsxs(Container$14, { children: [jsxRuntime.jsx(Title$8, { children: absorbencyTitle }, void 0), jsxRuntime.jsx(DropList, { dropTotal: dropTotal || DROPS_TOTAL, drops: drops }, void 0), jsxRuntime.jsx(Description$3, { children: absorbencyDescription }, void 0)] }, void 0));
|
|
4270
4271
|
};
|
|
4271
|
-
var templateObject_1$
|
|
4272
|
+
var templateObject_1$1K, templateObject_2$17, templateObject_3$S;
|
|
4272
4273
|
|
|
4273
4274
|
function k$1(){let e=[],t=[],r={enqueue(o){t.push(o);},requestAnimationFrame(...o){let n=requestAnimationFrame(...o);r.add(()=>cancelAnimationFrame(n));},nextFrame(...o){r.requestAnimationFrame(()=>{r.requestAnimationFrame(...o);});},setTimeout(...o){let n=setTimeout(...o);r.add(()=>clearTimeout(n));},add(o){e.push(o);},dispose(){for(let o of e.splice(0))o();},async workQueue(){for(let o of t.splice(0))await o();}};return r}function Q(){let[e]=React$2.useState(k$1);return React$2.useEffect(()=>()=>e.dispose(),[e]),e}var x$1=typeof window!="undefined"?React$2.useLayoutEffect:React$2.useEffect;var yt={serverHandoffComplete:!1};function q$1(){let[e,t]=React$2.useState(yt.serverHandoffComplete);return React$2.useEffect(()=>{e!==!0&&t(!0);},[e]),React$2.useEffect(()=>{yt.serverHandoffComplete===!1&&(yt.serverHandoffComplete=!0);},[]),e}var or=0;function to(){return ++or}function A$1(){let e=q$1(),[t,r]=React$2.useState(e?to:null);return x$1(()=>{t===null&&r(to());},[t]),t!=null?""+t:void 0}function ke(e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),t}function ee(e,t){let[r,o]=React$2.useState(e),n=ke(e);return x$1(()=>o(n.current),[n,o,...t]),r}function I(...e){let t=React$2.useRef(e);return React$2.useEffect(()=>{t.current=e;},[e]),React$2.useCallback(r=>{for(let o of t.current)o!=null&&(typeof o=="function"?o(r):o.current=r);},[t])}function S(e,t,...r){if(e in t){let n=t[e];return typeof n=="function"?n(...r):n}let o=new Error(`Tried to handle "${e}" but there is no handler defined. Only defined handlers are: ${Object.keys(t).map(n=>`"${n}"`).join(", ")}.`);throw Error.captureStackTrace&&Error.captureStackTrace(o,S),o}function E({props:e,slot:t,defaultTag:r,features:o,visible:n=!0,name:i}){if(n)return _e(e,t,r,i);let a=o!=null?o:0;if(a&2){let{static:l=!1,...s}=e;if(l)return _e(s,t,r,i)}if(a&1){let{unmount:l=!0,...s}=e;return S(l?0:1,{[0](){return null},[1](){return _e({...s,hidden:!0,style:{display:"none"}},t,r,i)}})}return _e(e,t,r,i)}function _e(e,t={},r,o){let{as:n=r,children:i,refName:a="ref",...l}=gt(e,["unmount","static"]),s=e.ref!==void 0?{[a]:e.ref}:{},u=typeof i=="function"?i(t):i;if(l.className&&typeof l.className=="function"&&(l.className=l.className(t)),n===React$2.Fragment&&Object.keys(l).length>0){if(!React$2.isValidElement(u)||Array.isArray(u)&&u.length>1)throw new Error(['Passing props on "Fragment"!',"",`The current component <${o} /> is rendering a "Fragment".`,"However we need to passthrough the following props:",Object.keys(l).map(c=>` - ${c}`).join(`
|
|
4274
4275
|
`),"","You can apply a few solutions:",['Add an `as="..."` prop, to ensure that we render an actual element instead of a "Fragment".',"Render a single element as the child so that we can forward the props onto that element."].map(c=>` - ${c}`).join(`
|
|
@@ -4344,7 +4345,7 @@ var StyledButton$2 = newStyled(Ye.Button)(AccordionSummaryStyles.baseStyles, fun
|
|
|
4344
4345
|
AccordionSummaryStyles[props.variant](props.theme, props.disabled, props.controlIconPos),
|
|
4345
4346
|
]; }, function (props) { return [AccordionSummaryStyles.title(props.titlecolor)]; });
|
|
4346
4347
|
var StyledPanel = newStyled(Ye.Panel)(AccordionDetailsStyles.baseStyles, function (props) { return [AccordionDetailsStyles[props.variant](props.theme)]; });
|
|
4347
|
-
var StyledContent = newStyled.button(templateObject_1$
|
|
4348
|
+
var StyledContent = newStyled.button(templateObject_1$1J || (templateObject_1$1J = __makeTemplateObject(["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"], ["\n appearance: none;\n padding: 0;\n margin: 0;\n border: none;\n background: none;\n font-size: inherit;\n line-height: inherit;\n color: inherit;\n cursor: auto;\n user-select: text;\n writing-mode: unset;\n font-family: inherit;\n"])));
|
|
4348
4349
|
var Accordion$1 = function (_a) {
|
|
4349
4350
|
var header = _a.header, headerOnOpen = _a.headerOnOpen, content = _a.content, defaultOpen = _a.defaultOpen, _b = _a.forceOpenHandler, forceOpenHandler = _b === void 0 ? false : _b, _c = _a.forceOpenValue, forceOpenValue = _c === void 0 ? false : _c, titleColor = _a.titleColor, variant = _a.variant, _d = _a.disabled, disabled = _d === void 0 ? false : _d, _e = _a.innerHTML, innerHTML = _e === void 0 ? false : _e, _f = _a.backgroundCover, backgroundCover = _f === void 0 ? { value: false, iconBgColor: 'inherit' } : _f, _g = _a.controlIconPos, controlIconPos = _g === void 0 ? 'right' : _g, openIcon = _a.openIcon, closeIcon = _a.closeIcon, onClick = _a.onClick;
|
|
4350
4351
|
var theme = useTheme();
|
|
@@ -4368,9 +4369,9 @@ var Accordion$1 = function (_a) {
|
|
|
4368
4369
|
} }, { children: jsxRuntime.jsx(ControlIcon, { title: "close icon", height: theme.component.accordion.variant[variant].icon.height, width: theme.component.accordion.variant[variant].icon.width, fill: theme.component.accordion.variant[variant].icon.color }, void 0) }), void 0)] }, void 0))] }), void 0), controlIconPos === 'right' && showPanel && (jsxRuntime.jsx(StyledContent, __assign$1({ onClick: function (e) { return e.stopPropagation(); } }, { children: !innerHTML ? (jsxRuntime.jsx(StyledPanel, __assign$1({ static: true, variant: variant, theme: theme }, { children: content }), void 0)) : (jsxRuntime.jsx("div", { dangerouslySetInnerHTML: { __html: content } }, void 0)) }), void 0))] }, void 0));
|
|
4369
4370
|
} }), void 0));
|
|
4370
4371
|
};
|
|
4371
|
-
var templateObject_1$
|
|
4372
|
+
var templateObject_1$1J;
|
|
4372
4373
|
|
|
4373
|
-
var Container$13 = newStyled.div(templateObject_1$
|
|
4374
|
+
var Container$13 = newStyled.div(templateObject_1$1I || (templateObject_1$1I = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"], ["\n display: flex;\n flex-direction: column;\n gap: 16px;\n"])));
|
|
4374
4375
|
var AccordionOptions = function (_a) {
|
|
4375
4376
|
var titleColor = _a.titleColor, accordions = _a.accordions;
|
|
4376
4377
|
var _b = React$2.useState({
|
|
@@ -4394,7 +4395,7 @@ var AccordionOptions = function (_a) {
|
|
|
4394
4395
|
} }, accordion, { forceOpenHandler: true, forceOpenValue: getForceOpen(index), titleColor: accordionTitleColor }), "accordion-".concat(index)));
|
|
4395
4396
|
}) }, void 0));
|
|
4396
4397
|
};
|
|
4397
|
-
var templateObject_1$
|
|
4398
|
+
var templateObject_1$1I;
|
|
4398
4399
|
|
|
4399
4400
|
exports.CardSectionType = void 0;
|
|
4400
4401
|
(function (CardSectionType) {
|
|
@@ -4556,14 +4557,14 @@ var mediaQueries = index$2(["@media(max-width: 900px)", "@media(min-width: 900px
|
|
|
4556
4557
|
literal: true,
|
|
4557
4558
|
});
|
|
4558
4559
|
|
|
4559
|
-
var ErrorText = newStyled.h3(templateObject_1$
|
|
4560
|
+
var ErrorText = newStyled.h3(templateObject_1$1H || (templateObject_1$1H = __makeTemplateObject(["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"], ["\n color: ", " !important;\n font-size: 0.75rem;\n font-weight: 600;\n margin: 0;\n font-height: 1rem;\n margin-left: 0.313rem;\n"])), function (props) { return props.color; });
|
|
4560
4561
|
var ErrorContainer = newStyled.div(templateObject_2$16 || (templateObject_2$16 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"], ["\n display: flex;\n align-items: center;\n margin-top: 12px;\n"])));
|
|
4561
4562
|
var Error$1 = function (_a) {
|
|
4562
4563
|
var error = _a.error;
|
|
4563
4564
|
var theme = useTheme();
|
|
4564
4565
|
return (jsxRuntime.jsxs(ErrorContainer, { children: [jsxRuntime.jsx(Icon.Actions.LightExclamation, { fill: theme.colors.semantic.urgent.color, width: 0.875, height: 0.875 }, void 0), jsxRuntime.jsx(ErrorText, __assign$1({ color: theme.colors.semantic.urgent.color }, { children: error }), void 0)] }, void 0));
|
|
4565
4566
|
};
|
|
4566
|
-
var templateObject_1$
|
|
4567
|
+
var templateObject_1$1H, templateObject_2$16;
|
|
4567
4568
|
|
|
4568
4569
|
var BaseSelectButton = function (_a) {
|
|
4569
4570
|
var children = _a.children, as = _a.as;
|
|
@@ -4580,7 +4581,7 @@ function BaseSelectOption(_a) {
|
|
|
4580
4581
|
return (jsxRuntime.jsx(Ee.Option, __assign$1({ className: className, as: as, value: value, disabled: disabled }, { children: children }), void 0));
|
|
4581
4582
|
}
|
|
4582
4583
|
|
|
4583
|
-
var CustomListBox = newStyled(Ee)(templateObject_1$
|
|
4584
|
+
var CustomListBox = newStyled(Ee)(templateObject_1$1G || (templateObject_1$1G = __makeTemplateObject(["\n position: relative;\n"], ["\n position: relative;\n"])));
|
|
4584
4585
|
function BaseSelect(_a) {
|
|
4585
4586
|
var value = _a.value, onChange = _a.onChange, disabled = _a.disabled, children = _a.children, className = _a.className;
|
|
4586
4587
|
return (jsxRuntime.jsx(CustomListBox, __assign$1({ disabled: disabled, as: "div", value: value, onChange: onChange, className: className }, { children: children }), void 0));
|
|
@@ -4590,7 +4591,7 @@ var BaseSelect$1 = Object.assign(BaseSelect, {
|
|
|
4590
4591
|
Options: BaseSelectOptions,
|
|
4591
4592
|
Option: BaseSelectOption,
|
|
4592
4593
|
});
|
|
4593
|
-
var templateObject_1$
|
|
4594
|
+
var templateObject_1$1G;
|
|
4594
4595
|
|
|
4595
4596
|
var CustomButton = newStyled.button(function (_a) {
|
|
4596
4597
|
var theme = _a.theme, wide = _a.wide, isSortOrFilter = _a.isSortOrFilter;
|
|
@@ -4628,26 +4629,28 @@ var CustomButton = newStyled.button(function (_a) {
|
|
|
4628
4629
|
},
|
|
4629
4630
|
});
|
|
4630
4631
|
});
|
|
4632
|
+
//TODO Remove this when we find the real solution
|
|
4633
|
+
var StyledIcon$1 = newStyled.span(templateObject_1$1F || (templateObject_1$1F = __makeTemplateObject(["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"], ["\n [data-testid='CloseIcon'] {\n display: none;\n }\n ", "\n"])), function (_a) {
|
|
4634
|
+
var open = _a.open;
|
|
4635
|
+
return open &&
|
|
4636
|
+
"\n [data-testid=\"CloseIcon\"] {\n display: block;\n }\n [data-testid=\"OpenIcon\"] {\n display: none;\n }\n";
|
|
4637
|
+
});
|
|
4631
4638
|
var BaseDropdownButton = function (_a) {
|
|
4632
|
-
var OpenIcon = _a.OpenIcon, CloseIcon = _a.CloseIcon, wide = _a.wide, children = _a.children, isSortOrFilter = _a.isSortOrFilter, testId = _a.testId;
|
|
4639
|
+
var OpenIcon = _a.OpenIcon, CloseIcon = _a.CloseIcon, label = _a.label, wide = _a.wide, children = _a.children, isSortOrFilter = _a.isSortOrFilter, testId = _a.testId;
|
|
4633
4640
|
var theme = useTheme();
|
|
4634
4641
|
return (jsx(BaseSelect$1.Button, __assign$1({ as: React$2.Fragment }, { children: function (_a) {
|
|
4635
4642
|
var open = _a.open;
|
|
4636
|
-
return (jsxs(CustomButton, __assign$1({ theme: theme, wide: wide, "data-testid": testId, isSortOrFilter: isSortOrFilter }, { children: [
|
|
4643
|
+
return (jsxs(CustomButton, __assign$1({ theme: theme, wide: wide, "data-testid": testId, isSortOrFilter: isSortOrFilter }, { children: [label ? (jsxs("div", __assign$1({ css: {
|
|
4644
|
+
display: 'flex',
|
|
4645
|
+
flexDirection: 'column',
|
|
4646
|
+
alignItems: 'flex-start',
|
|
4647
|
+
whiteSpace: 'nowrap',
|
|
4648
|
+
overflowX: 'hidden',
|
|
4649
|
+
} }, { children: [jsx("div", __assign$1({ css: { fontSize: '0.75rem', fontWeight: 400, margin: '0.125rem 0' } }, { children: label }), void 0), children] }), void 0)) : (children), jsxs(StyledIcon$1, __assign$1({ open: open }, { children: [jsx(CloseIcon, { testId: "CloseIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0), jsx(OpenIcon, { testId: "OpenIcon", height: 0.875, width: 0.875, fill: "inherit" }, void 0)] }), void 0)] }), void 0));
|
|
4637
4650
|
} }), void 0));
|
|
4638
4651
|
};
|
|
4639
|
-
var
|
|
4640
|
-
|
|
4641
|
-
var CloseIcon = _a.CloseIcon, OpenIcon = _a.OpenIcon, children = _a.children, testId = _a.testId, wide = _a.wide;
|
|
4642
|
-
return (jsx(Button, __assign$1({ CloseIcon: CloseIcon, OpenIcon: OpenIcon, wide: wide, "data-testid": testId }, { children: jsxs("div", __assign$1({ css: {
|
|
4643
|
-
display: 'flex',
|
|
4644
|
-
flexDirection: 'column',
|
|
4645
|
-
alignItems: 'flex-start',
|
|
4646
|
-
whiteSpace: 'nowrap',
|
|
4647
|
-
overflowX: 'hidden',
|
|
4648
|
-
} }, { children: [jsx("div", __assign$1({ css: { fontSize: '0.75rem', fontWeight: 400, margin: '0.125rem 0' } }, { children: label }), void 0), children] }), void 0) }), void 0));
|
|
4649
|
-
};
|
|
4650
|
-
};
|
|
4652
|
+
var BaseDropdownButton$1 = React__default["default"].memo(BaseDropdownButton);
|
|
4653
|
+
var templateObject_1$1F;
|
|
4651
4654
|
|
|
4652
4655
|
var DropdownOptions$1 = newStyled(BaseSelect$1.Options)(function (_a) {
|
|
4653
4656
|
var theme = _a.theme;
|
|
@@ -4885,7 +4888,7 @@ function BaseDropdown(_a) {
|
|
|
4885
4888
|
}, disabled: disabled }, { children: children }), void 0));
|
|
4886
4889
|
}
|
|
4887
4890
|
var BaseDropdown$1 = Object.assign(BaseDropdown, {
|
|
4888
|
-
Button: BaseDropdownButton,
|
|
4891
|
+
Button: BaseDropdownButton$1,
|
|
4889
4892
|
Options: BaseDropdownOptions,
|
|
4890
4893
|
Option: BaseDropdownOption,
|
|
4891
4894
|
});
|
|
@@ -4920,9 +4923,8 @@ function SimpleDropdown(_a) {
|
|
|
4920
4923
|
}
|
|
4921
4924
|
setSelectedValue(value);
|
|
4922
4925
|
}, [value, options, initialValue]);
|
|
4923
|
-
var Button = label ? withLabel(BaseDropdown$1.Button, label) : BaseDropdown$1.Button;
|
|
4924
4926
|
var DropdownContainer = showRequiredPlaceholder ? Container$11 : React$2.Fragment;
|
|
4925
|
-
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(Button, __assign$1({ OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
4927
|
+
return (jsxRuntime.jsxs(DropdownContainer, { children: [jsxRuntime.jsxs(BaseDropdown$1, __assign$1({ value: selectedValue, onChange: onChangeHandler, disabled: disabled, wide: wide }, { children: [jsxRuntime.jsx(BaseDropdown$1.Button, __assign$1({ label: label, OpenIcon: Icon.Arrows.ChevronDown, CloseIcon: Icon.Arrows.ChevronUp, wide: wide, isSortOrFilter: sort, testId: testId }, { children: selectedOptionLabel }), void 0), jsxRuntime.jsx(BaseDropdown$1.Options, { children: options.map(function (item) { return (jsxRuntime.jsx(BaseDropdown$1.Option, __assign$1({ value: item, disabled: item.disabled }, { children: item.label }), item.key)); }) }, void 0)] }), void 0), !!required && jsxRuntime.jsx(Error$1, { error: required }, void 0)] }, void 0));
|
|
4926
4928
|
}
|
|
4927
4929
|
var templateObject_1$1D, templateObject_2$14;
|
|
4928
4930
|
|