@ultraviolet/ui 3.3.0 → 3.4.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/components/ActionBar/styles.css.js +0 -1
- package/dist/components/Avatar/styles.css.js +1 -0
- package/dist/components/Avatar/variables.css.js +0 -1
- package/dist/components/Label/index.d.ts +2 -1
- package/dist/components/Label/index.d.ts.map +1 -1
- package/dist/components/Label/index.js +3 -2
- package/dist/components/Popup/styles.css.js +1 -0
- package/dist/components/Popup/variables.css.js +0 -1
- package/dist/components/ProgressBar/styles.css.js +0 -1
- package/dist/components/ProgressBar/variables.css.js +1 -0
- package/dist/components/SelectInput/components/Dropdown.d.ts.map +1 -1
- package/dist/components/SelectInput/components/Dropdown.js +19 -13
- package/dist/components/SelectInput/components/dropdown.css.d.ts +1 -0
- package/dist/components/SelectInput/components/dropdown.css.d.ts.map +1 -1
- package/dist/components/SelectInput/components/dropdown.css.js +9 -9
- package/dist/components/Text/style.css.js +1 -0
- package/dist/components/Text/variables.css.js +0 -1
- package/dist/components/compositions/OptionSelector/RevealOnHover.d.ts +6 -0
- package/dist/components/compositions/OptionSelector/RevealOnHover.d.ts.map +1 -0
- package/dist/components/compositions/OptionSelector/RevealOnHover.js +12 -0
- package/dist/components/compositions/OptionSelector/__mock__/resources.d.ts +35 -0
- package/dist/components/compositions/OptionSelector/__mock__/resources.d.ts.map +1 -0
- package/dist/components/compositions/OptionSelector/index.d.ts +7 -0
- package/dist/components/compositions/OptionSelector/index.d.ts.map +1 -0
- package/dist/components/compositions/OptionSelector/index.js +149 -0
- package/dist/components/compositions/OptionSelector/styles.css.d.ts +8 -0
- package/dist/components/compositions/OptionSelector/styles.css.d.ts.map +1 -0
- package/dist/components/compositions/OptionSelector/styles.css.js +19 -0
- package/dist/components/compositions/OptionSelector/types.d.ts +37 -0
- package/dist/components/compositions/OptionSelector/types.d.ts.map +1 -0
- package/dist/components/compositions/index.d.ts +2 -0
- package/dist/components/compositions/index.d.ts.map +1 -0
- package/dist/components/compositions/index.js +4 -0
- package/dist/ui.css +1 -1
- package/package.json +9 -4
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* empty css */
|
|
1
2
|
/* empty css */
|
|
2
3
|
import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
3
4
|
var containerAvatar = createRuntimeFn({ defaultClassName: "uv_19x8y1k0", variantClassNames: { shape: { circle: "uv_19x8y1k1", square: "uv_19x8y1k2" }, size: { large: "uv_19x8y1k3", medium: "uv_19x8y1k4", small: "uv_19x8y1k5", xsmall: "uv_19x8y1k6" }, sentiment: { primary: "uv_19x8y1k7", neutral: "uv_19x8y1k8" } }, defaultVariants: {}, compoundVariants: [[{ size: "large", shape: "square" }, "uv_19x8y1k9"], [{ size: "medium", shape: "square" }, "uv_19x8y1ka"], [{ size: "small", shape: "square" }, "uv_19x8y1kb"], [{ size: "xsmall", shape: "square" }, "uv_19x8y1kc"]] });
|
|
@@ -14,10 +14,11 @@ type LabelProps = {
|
|
|
14
14
|
sentiment?: ComponentProps<typeof Text>['sentiment'];
|
|
15
15
|
disabled?: boolean;
|
|
16
16
|
style?: CSSProperties;
|
|
17
|
+
className?: string;
|
|
17
18
|
};
|
|
18
19
|
/**
|
|
19
20
|
* Label is used inside all of our input components, but it can be used outside for design purposes
|
|
20
21
|
*/
|
|
21
|
-
export declare const Label: ({ as, children, labelDescription, required, size, htmlFor, id, sentiment, disabled, style, }: LabelProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
export declare const Label: ({ as, children, labelDescription, required, size, htmlFor, id, sentiment, disabled, style, className, }: LabelProps) => import("react/jsx-runtime").JSX.Element;
|
|
22
23
|
export {};
|
|
23
24
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Label/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGrE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAqE9B,KAAK,UAAU,GAAG;IAChB;;OAEG;IACH,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,WAAW,CAAC,CAAA;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Label/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGrE,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAqE9B,KAAK,UAAU,GAAG;IAChB;;OAEG;IACH,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAA;IACvB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,gBAAgB,CAAC,EAAE,SAAS,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IACnC,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,cAAc,CAAC,OAAO,IAAI,CAAC,CAAC,WAAW,CAAC,CAAA;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;GAEG;AACH,eAAO,MAAM,KAAK,GAAI,yGAYnB,UAAU,4CAoCV,CAAA"}
|
|
@@ -77,8 +77,9 @@ const Label = ({
|
|
|
77
77
|
id,
|
|
78
78
|
sentiment = "neutral",
|
|
79
79
|
disabled,
|
|
80
|
-
style
|
|
81
|
-
|
|
80
|
+
style,
|
|
81
|
+
className
|
|
82
|
+
}) => labelDescription ? /* @__PURE__ */ jsxs(Stack, { alignItems: "center", className, direction: "row", gap: "1", children: [
|
|
82
83
|
/* @__PURE__ */ jsx(
|
|
83
84
|
LabelRequiredOrNot,
|
|
84
85
|
{
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* empty css */
|
|
1
2
|
/* empty css */
|
|
2
3
|
import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
3
4
|
var containerPopup = createRuntimeFn({ defaultClassName: "uv_w40vpo2", variantClassNames: { hasMaxHeight: { true: "uv_w40vpo3" } }, defaultVariants: {}, compoundVariants: [] });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/Dropdown.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAEV,cAAc,EAId,SAAS,EACT,SAAS,EAEV,MAAM,OAAO,CAAA;AAYd,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AA0BnC,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,EAAE,SAAS,CAAA;IACrB,oBAAoB,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtC,UAAU,EAAE,OAAO,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE,CAAC,CAAC,aAAa,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,GAAG,SAAS,CAAA;IAC/D,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;IACvC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,aAAa,CAAC,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,OAAO,CAAC,CAAA;IACrD,YAAY,CAAC,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,cAAc,CAAC,CAAA;CAC5D,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,EAAE,SAAS,CAAA;IACrB,oBAAoB,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;IACvC,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;
|
|
1
|
+
{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/Dropdown.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAEV,cAAc,EAId,SAAS,EACT,SAAS,EAEV,MAAM,OAAO,CAAA;AAYd,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAA;AA0BnC,MAAM,MAAM,aAAa,GAAG;IAC1B,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,QAAQ,EAAE,SAAS,CAAA;IACnB,UAAU,EAAE,SAAS,CAAA;IACrB,oBAAoB,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtC,UAAU,EAAE,OAAO,CAAA;IACnB,WAAW,EAAE,MAAM,CAAA;IACnB,MAAM,CAAC,EAAE,CAAC,CAAC,aAAa,EAAE,MAAM,IAAI,KAAK,SAAS,CAAC,GAAG,SAAS,CAAA;IAC/D,SAAS,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAA;IAC3C,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;IACvC,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,IAAI,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;IAClC,aAAa,CAAC,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,OAAO,CAAC,CAAA;IACrD,YAAY,CAAC,EAAE,cAAc,CAAC,OAAO,KAAK,CAAC,CAAC,cAAc,CAAC,CAAA;CAC5D,CAAA;AAED,MAAM,MAAM,mBAAmB,GAAG;IAChC,OAAO,EAAE,OAAO,CAAA;IAChB,UAAU,EAAE,SAAS,CAAA;IACrB,oBAAoB,EAAE,KAAK,GAAG,QAAQ,CAAA;IACtC,QAAQ,CAAC,EAAE,SAAS,CAAA;IACpB,qBAAqB,EAAE,MAAM,GAAG,OAAO,CAAA;IACvC,kBAAkB,EAAE,MAAM,GAAG,IAAI,CAAA;IACjC,SAAS,CAAC,EAAE,OAAO,CAAA;CACpB,CAAA;AAukBD,eAAO,MAAM,QAAQ,GAAI,gLAetB,aAAa,4CAuMf,CAAA"}
|
|
@@ -3,7 +3,7 @@ import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
|
3
3
|
import { useTheme } from "@ultraviolet/themes";
|
|
4
4
|
import { cn } from "@ultraviolet/utils";
|
|
5
5
|
import { assignInlineVars } from "@vanilla-extract/dynamic";
|
|
6
|
-
import { useState, useRef,
|
|
6
|
+
import { useState, useRef, useContext, useCallback, useLayoutEffect, useEffect, useMemo } from "react";
|
|
7
7
|
import { Checkbox } from "../../Checkbox/index.js";
|
|
8
8
|
import { ModalContext } from "../../Modal/ModalProvider.js";
|
|
9
9
|
import { Popup } from "../../Popup/index.js";
|
|
@@ -13,7 +13,7 @@ import { Text } from "../../Text/index.js";
|
|
|
13
13
|
import { useSelectInput } from "../SelectInputProvider.js";
|
|
14
14
|
import { INPUT_SIZE_HEIGHT } from "../types.js";
|
|
15
15
|
import { DisplayOption } from "./DropdownOption.js";
|
|
16
|
-
import { footer, dropdown, dropdownWidth, dropdownEmptyState, dropdownContainer,
|
|
16
|
+
import { footer, dropdown, dropdownWidth, dropdownEmptyState, dropdownContainer, dropdownCheckbox, dropdownItem, dropdownGroupWrapper, dropdownGroupSelectable, dropdownGroup, dropdownLoadMore, dropdownContainerUnGrouped } from "./dropdown.css.js";
|
|
17
17
|
import { SearchBarDropdown } from "./SearchBarDropdown.js";
|
|
18
18
|
const DROPDOWN_MAX_HEIGHT = 256;
|
|
19
19
|
const NON_SEARCHABLE_KEYS = [
|
|
@@ -208,7 +208,9 @@ const CreateDropdown = ({
|
|
|
208
208
|
"aria-disabled": false,
|
|
209
209
|
"aria-label": "select-all",
|
|
210
210
|
"aria-selected": selectedData.allSelected,
|
|
211
|
-
className:
|
|
211
|
+
className: cn(
|
|
212
|
+
dropdownItem({ selected: selectedData.allSelected })
|
|
213
|
+
),
|
|
212
214
|
"data-testid": "select-all",
|
|
213
215
|
id: "select-all",
|
|
214
216
|
onClick: selectAllOptions,
|
|
@@ -311,10 +313,12 @@ const CreateDropdown = ({
|
|
|
311
313
|
"aria-disabled": !!option.disabled,
|
|
312
314
|
"aria-label": option.value,
|
|
313
315
|
"aria-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
|
|
314
|
-
className:
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
|
|
316
|
+
className: cn(
|
|
317
|
+
dropdownItem({
|
|
318
|
+
disabled: !!option.disabled,
|
|
319
|
+
selected: selectedData.selectedValues.includes(option.value) && !option.disabled
|
|
320
|
+
})
|
|
321
|
+
),
|
|
318
322
|
"data-testid": `option-${option.value}`,
|
|
319
323
|
id: `option-${indexOption}`,
|
|
320
324
|
onClick: (event) => {
|
|
@@ -396,7 +400,7 @@ const CreateDropdown = ({
|
|
|
396
400
|
"aria-disabled": false,
|
|
397
401
|
"aria-label": "select-all",
|
|
398
402
|
"aria-selected": selectedData.allSelected,
|
|
399
|
-
className: dropdownItem({ selected: selectedData.allSelected }),
|
|
403
|
+
className: cn(dropdownItem({ selected: selectedData.allSelected })),
|
|
400
404
|
"data-testid": "select-all",
|
|
401
405
|
onClick: selectAllOptions,
|
|
402
406
|
onKeyDown: (event) => [" ", "Enter"].includes(event.key) ? selectAllOptions() : null,
|
|
@@ -437,10 +441,12 @@ const CreateDropdown = ({
|
|
|
437
441
|
"aria-disabled": !!option.disabled,
|
|
438
442
|
"aria-label": option.value,
|
|
439
443
|
"aria-selected": selectedData.selectedValues.includes(option.value) && !option.disabled,
|
|
440
|
-
className:
|
|
441
|
-
|
|
442
|
-
|
|
443
|
-
|
|
444
|
+
className: cn(
|
|
445
|
+
dropdownItem({
|
|
446
|
+
disabled: !!option.disabled,
|
|
447
|
+
selected: selectedData.selectedValues.includes(option.value) && !option.disabled
|
|
448
|
+
})
|
|
449
|
+
),
|
|
444
450
|
"data-testid": `option-${option.value}`,
|
|
445
451
|
id: `option-${index}`,
|
|
446
452
|
onClick: (event) => {
|
|
@@ -538,7 +544,7 @@ const Dropdown = ({
|
|
|
538
544
|
const [maxWidth, setWidth] = useState(
|
|
539
545
|
refSelect.current?.offsetWidth ?? "100%"
|
|
540
546
|
);
|
|
541
|
-
const modalContext =
|
|
547
|
+
const modalContext = useContext(ModalContext);
|
|
542
548
|
const resizeDropdown = useCallback(() => {
|
|
543
549
|
if (refSelect.current && refSelect.current.getBoundingClientRect().width > 0 && refSelect.current.getBoundingClientRect().width !== maxWidth) {
|
|
544
550
|
setWidth(refSelect.current.getBoundingClientRect().width);
|
|
@@ -5,6 +5,7 @@ export declare const dropdownContainerUnGrouped: string;
|
|
|
5
5
|
export declare const dropdownGroup: string;
|
|
6
6
|
export declare const dropdownGroupSelectable: string;
|
|
7
7
|
export declare const dropdownGroupWrapper: string;
|
|
8
|
+
export declare const dropdownItemBase: string;
|
|
8
9
|
export declare const dropdownItem: import("@vanilla-extract/recipes").RuntimeFn<{
|
|
9
10
|
selected: {
|
|
10
11
|
true: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown.css.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/dropdown.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa,oBAAc,CAAA;AAExC,eAAO,MAAM,QAAQ,
|
|
1
|
+
{"version":3,"file":"dropdown.css.d.ts","sourceRoot":"","sources":["../../../../src/components/SelectInput/components/dropdown.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,aAAa,oBAAc,CAAA;AAExC,eAAO,MAAM,QAAQ,QASnB,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAK5B,CAAA;AAEF,eAAO,MAAM,0BAA0B,QAErC,CAAA;AAEF,eAAO,MAAM,aAAa,QAmBxB,CAAA;AAEF,eAAO,MAAM,uBAAuB,QAQlC,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAG/B,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAgB3B,CAAA;AAEF,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;;;;;;EA2BvB,CAAA;AAEF,eAAO,MAAM,MAAM,QAKjB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAM3B,CAAA;AAEF,eAAO,MAAM,kBAAkB,QAAqC,CAAA;AAEpE,eAAO,MAAM,gBAAgB,QAAyC,CAAA;AAEtE,eAAO,MAAM,YAAY,QAEvB,CAAA;AAEF,eAAO,MAAM,oBAAoB,QAM/B,CAAA;AAEF,eAAO,MAAM,qBAAqB,QAAgC,CAAA;AAElE,eAAO,MAAM,SAAS,QAGpB,CAAA"}
|
|
@@ -7,15 +7,15 @@ var dropdownContainerUnGrouped = "uv_5kpm8k3";
|
|
|
7
7
|
var dropdownGroup = "uv_5kpm8k4";
|
|
8
8
|
var dropdownGroupSelectable = "uv_5kpm8k5";
|
|
9
9
|
var dropdownGroupWrapper = "uv_5kpm8k6";
|
|
10
|
-
var dropdownItem = createRuntimeFn({ defaultClassName: "uv_5kpm8k7", variantClassNames: { selected: { true: "
|
|
11
|
-
var footer = "
|
|
12
|
-
var dropdownCheckbox = "
|
|
13
|
-
var dropdownEmptyState = "
|
|
14
|
-
var dropdownLoadMore = "
|
|
15
|
-
var dropdownInfo = "
|
|
16
|
-
var dropdownInfoTextItem = "
|
|
17
|
-
var dropdownInfoContainer = "
|
|
18
|
-
var searchBar = "
|
|
10
|
+
var dropdownItem = createRuntimeFn({ defaultClassName: "uv_5kpm8k8 uv_5kpm8k7", variantClassNames: { selected: { true: "uv_5kpm8k9" }, disabled: { true: "uv_5kpm8ka" } }, defaultVariants: { disabled: false, selected: false }, compoundVariants: [] });
|
|
11
|
+
var footer = "uv_5kpm8kb";
|
|
12
|
+
var dropdownCheckbox = "uv_5kpm8kc";
|
|
13
|
+
var dropdownEmptyState = "uv_5kpm8kd";
|
|
14
|
+
var dropdownLoadMore = "uv_5kpm8ke";
|
|
15
|
+
var dropdownInfo = "uv_5kpm8kf";
|
|
16
|
+
var dropdownInfoTextItem = "uv_5kpm8kg";
|
|
17
|
+
var dropdownInfoContainer = "uv_5kpm8kh";
|
|
18
|
+
var searchBar = "uv_5kpm8ki";
|
|
19
19
|
export {
|
|
20
20
|
dropdown,
|
|
21
21
|
dropdownCheckbox,
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
/* empty css */
|
|
1
2
|
/* empty css */
|
|
2
3
|
import { createRuntimeFn } from "@vanilla-extract/recipes/createRuntimeFn";
|
|
3
4
|
var text = createRuntimeFn({ defaultClassName: "uv_m4c9ow0", variantClassNames: { strikeThrough: { true: "uv_m4c9ow1", false: "uv_m4c9ow2" }, italic: { true: "uv_m4c9ow3", false: "uv_m4c9ow4" }, underline: { true: "uv_m4c9ow5", false: "uv_m4c9ow6" }, oneLine: { true: "uv_m4c9ow7", false: "uv_m4c9ow8" }, sentiment: { primary: "uv_m4c9ow9", secondary: "uv_m4c9owa", neutral: "uv_m4c9owb", success: "uv_m4c9owc", danger: "uv_m4c9owd", warning: "uv_m4c9owe", info: "uv_m4c9owf", black: "uv_m4c9owg", white: "uv_m4c9owh" }, prominence: { "default": "uv_m4c9owi", strong: "uv_m4c9owj", stronger: "uv_m4c9owk", weak: "uv_m4c9owl" }, variant: { body: "uv_m4c9owm", bodySmall: "uv_m4c9own", bodySmallStrong: "uv_m4c9owo", bodySmallStronger: "uv_m4c9owp", bodyStrong: "uv_m4c9owq", bodyStronger: "uv_m4c9owr", caption: "uv_m4c9ows", captionSmall: "uv_m4c9owt", captionSmallStrong: "uv_m4c9owu", captionSmallStronger: "uv_m4c9owv", captionStrong: "uv_m4c9oww", captionStronger: "uv_m4c9owx", code: "uv_m4c9owy", codeStrong: "uv_m4c9owz", codeStronger: "uv_m4c9ow10", heading: "uv_m4c9ow11", headingLarge: "uv_m4c9ow12", headingLargeStrong: "uv_m4c9ow13", headingLargeStronger: "uv_m4c9ow14", headingSmall: "uv_m4c9ow15", headingSmallStrong: "uv_m4c9ow16", headingSmallStronger: "uv_m4c9ow17", headingStrong: "uv_m4c9ow18", headingStronger: "uv_m4c9ow19" }, disabled: { true: "uv_m4c9ow1a", false: "uv_m4c9ow1b" } }, defaultVariants: { strikeThrough: false, italic: false, underline: false, oneLine: false, sentiment: void 0, prominence: "default", variant: "body", disabled: false }, compoundVariants: [[{ sentiment: "primary", prominence: "default", disabled: false }, "uv_m4c9ow1c"], [{ sentiment: "primary", prominence: "strong", disabled: false }, "uv_m4c9ow1d"], [{ sentiment: "primary", prominence: "stronger", disabled: false }, "uv_m4c9ow1e"], [{ sentiment: "primary", prominence: "weak", disabled: false }, "uv_m4c9ow1f"], [{ sentiment: "secondary", prominence: "default", disabled: false }, "uv_m4c9ow1g"], [{ sentiment: "secondary", prominence: "strong", disabled: false }, "uv_m4c9ow1h"], [{ sentiment: "secondary", prominence: "stronger", disabled: false }, "uv_m4c9ow1i"], [{ sentiment: "secondary", prominence: "weak", disabled: false }, "uv_m4c9ow1j"], [{ sentiment: "danger", prominence: "default", disabled: false }, "uv_m4c9ow1k"], [{ sentiment: "danger", prominence: "strong", disabled: false }, "uv_m4c9ow1l"], [{ sentiment: "danger", prominence: "stronger", disabled: false }, "uv_m4c9ow1m"], [{ sentiment: "danger", prominence: "weak", disabled: false }, "uv_m4c9ow1n"], [{ sentiment: "info", prominence: "default", disabled: false }, "uv_m4c9ow1o"], [{ sentiment: "info", prominence: "strong", disabled: false }, "uv_m4c9ow1p"], [{ sentiment: "info", prominence: "stronger", disabled: false }, "uv_m4c9ow1q"], [{ sentiment: "info", prominence: "weak", disabled: false }, "uv_m4c9ow1r"], [{ sentiment: "success", prominence: "default", disabled: false }, "uv_m4c9ow1s"], [{ sentiment: "success", prominence: "strong", disabled: false }, "uv_m4c9ow1t"], [{ sentiment: "success", prominence: "stronger", disabled: false }, "uv_m4c9ow1u"], [{ sentiment: "success", prominence: "weak", disabled: false }, "uv_m4c9ow1v"], [{ sentiment: "warning", prominence: "default", disabled: false }, "uv_m4c9ow1w"], [{ sentiment: "warning", prominence: "strong", disabled: false }, "uv_m4c9ow1x"], [{ sentiment: "warning", prominence: "stronger", disabled: false }, "uv_m4c9ow1y"], [{ sentiment: "warning", prominence: "weak", disabled: false }, "uv_m4c9ow1z"], [{ sentiment: "neutral", prominence: "default", disabled: false }, "uv_m4c9ow20"], [{ sentiment: "neutral", prominence: "strong", disabled: false }, "uv_m4c9ow21"], [{ sentiment: "neutral", prominence: "stronger", disabled: false }, "uv_m4c9ow22"], [{ sentiment: "neutral", prominence: "weak", disabled: false }, "uv_m4c9ow23"], [{ sentiment: "black", prominence: "default", disabled: false }, "uv_m4c9ow24"], [{ sentiment: "black", prominence: "strong", disabled: false }, "uv_m4c9ow25"], [{ sentiment: "black", prominence: "stronger", disabled: false }, "uv_m4c9ow26"], [{ sentiment: "black", prominence: "weak", disabled: false }, "uv_m4c9ow27"], [{ sentiment: "white", prominence: "default", disabled: false }, "uv_m4c9ow28"], [{ sentiment: "white", prominence: "strong", disabled: false }, "uv_m4c9ow29"], [{ sentiment: "white", prominence: "stronger", disabled: false }, "uv_m4c9ow2a"], [{ sentiment: "white", prominence: "weak", disabled: false }, "uv_m4c9ow2b"], [{ sentiment: "primary", prominence: "default", disabled: true }, "uv_m4c9ow2c"], [{ sentiment: "primary", prominence: "strong", disabled: true }, "uv_m4c9ow2d"], [{ sentiment: "primary", prominence: "stronger", disabled: true }, "uv_m4c9ow2e"], [{ sentiment: "primary", prominence: "weak", disabled: true }, "uv_m4c9ow2f"], [{ sentiment: "secondary", prominence: "default", disabled: true }, "uv_m4c9ow2g"], [{ sentiment: "secondary", prominence: "strong", disabled: true }, "uv_m4c9ow2h"], [{ sentiment: "secondary", prominence: "stronger", disabled: true }, "uv_m4c9ow2i"], [{ sentiment: "secondary", prominence: "weak", disabled: true }, "uv_m4c9ow2j"], [{ sentiment: "danger", prominence: "default", disabled: true }, "uv_m4c9ow2k"], [{ sentiment: "danger", prominence: "strong", disabled: true }, "uv_m4c9ow2l"], [{ sentiment: "danger", prominence: "stronger", disabled: true }, "uv_m4c9ow2m"], [{ sentiment: "danger", prominence: "weak", disabled: true }, "uv_m4c9ow2n"], [{ sentiment: "info", prominence: "default", disabled: true }, "uv_m4c9ow2o"], [{ sentiment: "info", prominence: "strong", disabled: true }, "uv_m4c9ow2p"], [{ sentiment: "info", prominence: "stronger", disabled: true }, "uv_m4c9ow2q"], [{ sentiment: "info", prominence: "weak", disabled: true }, "uv_m4c9ow2r"], [{ sentiment: "success", prominence: "default", disabled: true }, "uv_m4c9ow2s"], [{ sentiment: "success", prominence: "strong", disabled: true }, "uv_m4c9ow2t"], [{ sentiment: "success", prominence: "stronger", disabled: true }, "uv_m4c9ow2u"], [{ sentiment: "success", prominence: "weak", disabled: true }, "uv_m4c9ow2v"], [{ sentiment: "warning", prominence: "default", disabled: true }, "uv_m4c9ow2w"], [{ sentiment: "warning", prominence: "strong", disabled: true }, "uv_m4c9ow2x"], [{ sentiment: "warning", prominence: "stronger", disabled: true }, "uv_m4c9ow2y"], [{ sentiment: "warning", prominence: "weak", disabled: true }, "uv_m4c9ow2z"], [{ sentiment: "neutral", prominence: "default", disabled: true }, "uv_m4c9ow30"], [{ sentiment: "neutral", prominence: "strong", disabled: true }, "uv_m4c9ow31"], [{ sentiment: "neutral", prominence: "stronger", disabled: true }, "uv_m4c9ow32"], [{ sentiment: "neutral", prominence: "weak", disabled: true }, "uv_m4c9ow33"], [{ sentiment: "black", prominence: "default", disabled: true }, "uv_m4c9ow34"], [{ sentiment: "black", prominence: "strong", disabled: true }, "uv_m4c9ow35"], [{ sentiment: "black", prominence: "stronger", disabled: true }, "uv_m4c9ow36"], [{ sentiment: "black", prominence: "weak", disabled: true }, "uv_m4c9ow37"], [{ sentiment: "white", prominence: "default", disabled: true }, "uv_m4c9ow38"], [{ sentiment: "white", prominence: "strong", disabled: true }, "uv_m4c9ow39"], [{ sentiment: "white", prominence: "stronger", disabled: true }, "uv_m4c9ow3a"], [{ sentiment: "white", prominence: "weak", disabled: true }, "uv_m4c9ow3b"], [{ prominence: "default", disabled: false }, "uv_m4c9ow3c"], [{ prominence: "strong", disabled: false }, "uv_m4c9ow3d"], [{ prominence: "stronger", disabled: false }, "uv_m4c9ow3e"], [{ prominence: "weak", disabled: false }, "uv_m4c9ow3f"]] });
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"RevealOnHover.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/OptionSelector/RevealOnHover.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAGtC,eAAO,MAAM,aAAa,GAAI,4BAG3B;IACD,OAAO,EAAE,SAAS,CAAA;IAClB,YAAY,EAAE,SAAS,CAAA;CACxB,4CAKA,CAAA"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
2
|
+
import { revealOnHover } from "./styles.css.js";
|
|
3
|
+
const RevealOnHover = ({
|
|
4
|
+
content,
|
|
5
|
+
hoverContent
|
|
6
|
+
}) => /* @__PURE__ */ jsxs("div", { className: revealOnHover, children: [
|
|
7
|
+
/* @__PURE__ */ jsx("div", { "data-visibility": "unhover", children: content }),
|
|
8
|
+
/* @__PURE__ */ jsx("div", { "data-visibility": "hover", children: hoverContent })
|
|
9
|
+
] });
|
|
10
|
+
export {
|
|
11
|
+
RevealOnHover
|
|
12
|
+
};
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
export declare const firstSelectorOptions: {
|
|
2
|
+
content: import("react/jsx-runtime").JSX.Element;
|
|
3
|
+
icon: import("react/jsx-runtime").JSX.Element;
|
|
4
|
+
value: string;
|
|
5
|
+
}[];
|
|
6
|
+
export declare const franceOptions: ({
|
|
7
|
+
content: import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
hoverContent: import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
icon: import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
optionalInfo: import("react/jsx-runtime").JSX.Element;
|
|
11
|
+
value: string;
|
|
12
|
+
} | {
|
|
13
|
+
content: import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
hoverContent: import("react/jsx-runtime").JSX.Element;
|
|
15
|
+
icon: import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
value: string;
|
|
17
|
+
optionalInfo?: undefined;
|
|
18
|
+
})[];
|
|
19
|
+
export declare const polandOptions: {
|
|
20
|
+
content: import("react/jsx-runtime").JSX.Element;
|
|
21
|
+
hoverContent: import("react/jsx-runtime").JSX.Element;
|
|
22
|
+
icon: import("react/jsx-runtime").JSX.Element;
|
|
23
|
+
value: string;
|
|
24
|
+
}[];
|
|
25
|
+
export declare const netherlandsOptions: {
|
|
26
|
+
content: import("react/jsx-runtime").JSX.Element;
|
|
27
|
+
hoverContent: import("react/jsx-runtime").JSX.Element;
|
|
28
|
+
icon: import("react/jsx-runtime").JSX.Element;
|
|
29
|
+
value: string;
|
|
30
|
+
}[];
|
|
31
|
+
export type ValueType = {
|
|
32
|
+
first?: string;
|
|
33
|
+
second?: string;
|
|
34
|
+
};
|
|
35
|
+
//# sourceMappingURL=resources.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"resources.d.ts","sourceRoot":"","sources":["../../../../../src/components/compositions/OptionSelector/__mock__/resources.tsx"],"names":[],"mappings":"AAUA,eAAO,MAAM,oBAAoB;;;;GA2ChC,CAAA;AAED,eAAO,MAAM,aAAa;;;;;;;;;;;;IAwEzB,CAAA;AAED,eAAO,MAAM,aAAa;;;;;GAmEzB,CAAA;AAED,eAAO,MAAM,kBAAkB;;;;;GAmE9B,CAAA;AAED,MAAM,MAAM,SAAS,GAAG;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,MAAM,CAAC,EAAE,MAAM,CAAA;CAAE,CAAA"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { OptionSelectorProps } from './types';
|
|
2
|
+
/**
|
|
3
|
+
* A compound selection component that displays two sequential select inputs
|
|
4
|
+
* where the first selection contextualizes and filters the options available in the second.
|
|
5
|
+
*/
|
|
6
|
+
export declare const OptionSelector: ({ className, style, "data-testid": dataTestId, firstSelector, secondSelector, size, disabled, readOnly, "aria-label": ariaLabel, error, required, onChange, name, value, }: OptionSelectorProps) => import("react/jsx-runtime").JSX.Element;
|
|
7
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/OptionSelector/index.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAE,mBAAmB,EAAkB,MAAM,SAAS,CAAA;AA0ClE;;;GAGG;AACH,eAAO,MAAM,cAAc,GAAI,4KAe5B,mBAAmB,4CAgHrB,CAAA"}
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { jsxs, jsx, Fragment } from "react/jsx-runtime";
|
|
3
|
+
import { RayStartArrowIcon } from "@ultraviolet/icons";
|
|
4
|
+
import { cn } from "@ultraviolet/utils";
|
|
5
|
+
import { useMemo } from "react";
|
|
6
|
+
import { Label } from "../../Label/index.js";
|
|
7
|
+
import { SelectInput } from "../../SelectInput/index.js";
|
|
8
|
+
import { Stack } from "../../Stack/index.js";
|
|
9
|
+
import { RevealOnHover } from "./RevealOnHover.js";
|
|
10
|
+
import { firstLabel, secondLabel, firstSelectInput, arrow, secondSelectInput, optionSelectorWrapper } from "./styles.css.js";
|
|
11
|
+
const IconWithContent = ({
|
|
12
|
+
content,
|
|
13
|
+
icon
|
|
14
|
+
}) => /* @__PURE__ */ jsxs(Stack, { alignItems: "center", direction: "row", gap: "1.5", children: [
|
|
15
|
+
icon,
|
|
16
|
+
content
|
|
17
|
+
] });
|
|
18
|
+
const makeSelectInputOptions = (options) => options.map((option) => {
|
|
19
|
+
const optionLabel = option.hoverContent ? /* @__PURE__ */ jsx(
|
|
20
|
+
RevealOnHover,
|
|
21
|
+
{
|
|
22
|
+
content: /* @__PURE__ */ jsx(IconWithContent, { content: option.content, icon: option.icon }),
|
|
23
|
+
hoverContent: /* @__PURE__ */ jsx(IconWithContent, { content: option.hoverContent, icon: option.icon })
|
|
24
|
+
}
|
|
25
|
+
) : /* @__PURE__ */ jsx(IconWithContent, { content: option.content, icon: option.icon });
|
|
26
|
+
return {
|
|
27
|
+
disabled: option.disabled,
|
|
28
|
+
label: optionLabel,
|
|
29
|
+
optionalInfo: option.optionalInfo,
|
|
30
|
+
searchText: option.value,
|
|
31
|
+
tooltip: option.tooltip,
|
|
32
|
+
value: option.value
|
|
33
|
+
};
|
|
34
|
+
});
|
|
35
|
+
const OptionSelector = ({
|
|
36
|
+
className,
|
|
37
|
+
style,
|
|
38
|
+
"data-testid": dataTestId,
|
|
39
|
+
firstSelector,
|
|
40
|
+
secondSelector,
|
|
41
|
+
size = "large",
|
|
42
|
+
disabled,
|
|
43
|
+
readOnly,
|
|
44
|
+
"aria-label": ariaLabel,
|
|
45
|
+
error,
|
|
46
|
+
required,
|
|
47
|
+
onChange,
|
|
48
|
+
name,
|
|
49
|
+
value
|
|
50
|
+
}) => {
|
|
51
|
+
const firstValue = useMemo(() => {
|
|
52
|
+
if (value?.first) {
|
|
53
|
+
return value.first;
|
|
54
|
+
}
|
|
55
|
+
if (firstSelector.options.length === 1) {
|
|
56
|
+
onChange?.({
|
|
57
|
+
first: firstSelector.options[0].value,
|
|
58
|
+
second: value?.second
|
|
59
|
+
});
|
|
60
|
+
return firstSelector.options[0].value;
|
|
61
|
+
}
|
|
62
|
+
return void 0;
|
|
63
|
+
}, [value?.first, value?.second, onChange, firstSelector]);
|
|
64
|
+
const secondValue = useMemo(() => {
|
|
65
|
+
if (value?.second) {
|
|
66
|
+
return value.second;
|
|
67
|
+
}
|
|
68
|
+
if (secondSelector?.options.length === 1) {
|
|
69
|
+
onChange?.({
|
|
70
|
+
first: value?.first,
|
|
71
|
+
second: secondSelector.options[0].value
|
|
72
|
+
});
|
|
73
|
+
return secondSelector?.options[0].value;
|
|
74
|
+
}
|
|
75
|
+
return void 0;
|
|
76
|
+
}, [secondSelector, value?.first, value?.second, onChange]);
|
|
77
|
+
const firstSelectorOptions = makeSelectInputOptions(firstSelector.options);
|
|
78
|
+
const secondSelectorOptions = secondSelector?.options ? makeSelectInputOptions(secondSelector.options) : void 0;
|
|
79
|
+
const onChangeFirstSelector = (val) => {
|
|
80
|
+
onChange?.({ first: val, second: value?.second });
|
|
81
|
+
};
|
|
82
|
+
const onChangeSecondSelector = (val) => onChange?.({ first: value?.first, second: val });
|
|
83
|
+
return /* @__PURE__ */ jsxs(
|
|
84
|
+
"fieldset",
|
|
85
|
+
{
|
|
86
|
+
"aria-label": ariaLabel,
|
|
87
|
+
"aria-required": required,
|
|
88
|
+
className: cn(className, optionSelectorWrapper),
|
|
89
|
+
"data-testid": dataTestId,
|
|
90
|
+
name,
|
|
91
|
+
style,
|
|
92
|
+
children: [
|
|
93
|
+
/* @__PURE__ */ jsx(Label, { className: firstLabel, children: firstSelector.label }),
|
|
94
|
+
firstValue && secondSelector && secondSelectorOptions ? /* @__PURE__ */ jsx(Label, { className: secondLabel, children: secondSelector?.label }) : null,
|
|
95
|
+
/* @__PURE__ */ jsx(
|
|
96
|
+
SelectInput,
|
|
97
|
+
{
|
|
98
|
+
className: firstSelectInput,
|
|
99
|
+
"data-testid": "first-selector",
|
|
100
|
+
disabled: firstSelector.disabled || disabled,
|
|
101
|
+
error: error || firstSelector.error,
|
|
102
|
+
helper: firstSelector.helper,
|
|
103
|
+
labelDescription: firstSelector.labelDescription,
|
|
104
|
+
onChange: onChangeFirstSelector,
|
|
105
|
+
optionalInfoPlacement: "right",
|
|
106
|
+
options: firstSelectorOptions,
|
|
107
|
+
placeholder: firstSelector.placeholder,
|
|
108
|
+
readOnly: firstSelector.options.length === 1 || firstSelector.readOnly || readOnly,
|
|
109
|
+
required,
|
|
110
|
+
size,
|
|
111
|
+
value: firstValue
|
|
112
|
+
}
|
|
113
|
+
),
|
|
114
|
+
firstValue && secondSelector && secondSelectorOptions ? /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
115
|
+
/* @__PURE__ */ jsx(
|
|
116
|
+
RayStartArrowIcon,
|
|
117
|
+
{
|
|
118
|
+
className: arrow,
|
|
119
|
+
prominence: "weak",
|
|
120
|
+
sentiment: "neutral",
|
|
121
|
+
size
|
|
122
|
+
}
|
|
123
|
+
),
|
|
124
|
+
/* @__PURE__ */ jsx(
|
|
125
|
+
SelectInput,
|
|
126
|
+
{
|
|
127
|
+
className: secondSelectInput,
|
|
128
|
+
"data-testid": "second-selector",
|
|
129
|
+
disabled: !!firstSelector.error || secondSelector.disabled || disabled,
|
|
130
|
+
error: !!error || secondSelector.error,
|
|
131
|
+
helper: secondSelector.helper,
|
|
132
|
+
labelDescription: secondSelector.labelDescription,
|
|
133
|
+
onChange: onChangeSecondSelector,
|
|
134
|
+
optionalInfoPlacement: "right",
|
|
135
|
+
options: secondSelectorOptions,
|
|
136
|
+
placeholder: secondSelector.placeholder,
|
|
137
|
+
readOnly: secondSelector.options.length === 1 || secondSelector.readOnly || readOnly,
|
|
138
|
+
size,
|
|
139
|
+
value: secondValue
|
|
140
|
+
}
|
|
141
|
+
)
|
|
142
|
+
] }) : null
|
|
143
|
+
]
|
|
144
|
+
}
|
|
145
|
+
);
|
|
146
|
+
};
|
|
147
|
+
export {
|
|
148
|
+
OptionSelector
|
|
149
|
+
};
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
export declare const optionSelectorWrapper: string;
|
|
2
|
+
export declare const revealOnHover: string;
|
|
3
|
+
export declare const firstLabel: string;
|
|
4
|
+
export declare const secondLabel: string;
|
|
5
|
+
export declare const firstSelectInput: string;
|
|
6
|
+
export declare const secondSelectInput: string;
|
|
7
|
+
export declare const arrow: string;
|
|
8
|
+
//# sourceMappingURL=styles.css.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.css.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/OptionSelector/styles.css.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,qBAAqB,QAMhC,CAAA;AAEF,eAAO,MAAM,aAAa,QAAY,CAAA;AAwBtC,eAAO,MAAM,UAAU,QAGrB,CAAA;AAEF,eAAO,MAAM,WAAW,QAGtB,CAAA;AAEF,eAAO,MAAM,gBAAgB,QAG3B,CAAA;AAEF,eAAO,MAAM,iBAAiB,QAG5B,CAAA;AAEF,eAAO,MAAM,KAAK,QAGhB,CAAA"}
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/* empty css */
|
|
2
|
+
/* empty css */
|
|
3
|
+
/* empty css */
|
|
4
|
+
var optionSelectorWrapper = "uv_12opk3l0";
|
|
5
|
+
var revealOnHover = "uv_12opk3l1";
|
|
6
|
+
var firstLabel = "uv_12opk3l2";
|
|
7
|
+
var secondLabel = "uv_12opk3l3";
|
|
8
|
+
var firstSelectInput = "uv_12opk3l4";
|
|
9
|
+
var secondSelectInput = "uv_12opk3l5";
|
|
10
|
+
var arrow = "uv_12opk3l6";
|
|
11
|
+
export {
|
|
12
|
+
arrow,
|
|
13
|
+
firstLabel,
|
|
14
|
+
firstSelectInput,
|
|
15
|
+
optionSelectorWrapper,
|
|
16
|
+
revealOnHover,
|
|
17
|
+
secondLabel,
|
|
18
|
+
secondSelectInput
|
|
19
|
+
};
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import type { ComponentProps, CSSProperties, ReactNode } from 'react';
|
|
2
|
+
import type { SelectInput } from '../../SelectInput';
|
|
3
|
+
export type SelectorOption = {
|
|
4
|
+
content: ReactNode;
|
|
5
|
+
icon?: ReactNode;
|
|
6
|
+
value: string;
|
|
7
|
+
hoverContent?: ReactNode;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
tooltip?: string;
|
|
10
|
+
optionalInfo?: ReactNode;
|
|
11
|
+
};
|
|
12
|
+
export type SelectorProps = Pick<ComponentProps<typeof SelectInput>, 'label' | 'labelDescription' | 'error' | 'disabled' | 'helper' | 'readOnly' | 'placeholder'> & {
|
|
13
|
+
options: SelectorOption[];
|
|
14
|
+
};
|
|
15
|
+
export type OptionSelectorProps = {
|
|
16
|
+
className?: string;
|
|
17
|
+
'data-testid'?: string;
|
|
18
|
+
style?: CSSProperties;
|
|
19
|
+
firstSelector: SelectorProps;
|
|
20
|
+
secondSelector?: SelectorProps;
|
|
21
|
+
size?: ComponentProps<typeof SelectInput>['size'];
|
|
22
|
+
disabled?: boolean;
|
|
23
|
+
readOnly?: boolean;
|
|
24
|
+
name?: string;
|
|
25
|
+
'aria-label'?: string;
|
|
26
|
+
error?: string | boolean;
|
|
27
|
+
required?: boolean;
|
|
28
|
+
onChange?: (values: {
|
|
29
|
+
first?: string;
|
|
30
|
+
second?: string;
|
|
31
|
+
}) => void;
|
|
32
|
+
value?: {
|
|
33
|
+
first?: string;
|
|
34
|
+
second?: string;
|
|
35
|
+
};
|
|
36
|
+
};
|
|
37
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/compositions/OptionSelector/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,aAAa,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACrE,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAA;AAEpD,MAAM,MAAM,cAAc,GAAG;IAC3B,OAAO,EAAE,SAAS,CAAA;IAClB,IAAI,CAAC,EAAE,SAAS,CAAA;IAChB,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,YAAY,CAAC,EAAE,SAAS,CAAA;CACzB,CAAA;AAED,MAAM,MAAM,aAAa,GAAG,IAAI,CAC9B,cAAc,CAAC,OAAO,WAAW,CAAC,EAChC,OAAO,GACP,kBAAkB,GAClB,OAAO,GACP,UAAU,GACV,QAAQ,GACR,UAAU,GACV,aAAa,CAChB,GAAG;IAAE,OAAO,EAAE,cAAc,EAAE,CAAA;CAAE,CAAA;AAEjC,MAAM,MAAM,mBAAmB,GAAG;IAChC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,aAAa,EAAE,aAAa,CAAA;IAC5B,cAAc,CAAC,EAAE,aAAa,CAAA;IAC9B,IAAI,CAAC,EAAE,cAAc,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAA;IACjD,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,KAAK,CAAC,EAAE,MAAM,GAAG,OAAO,CAAA;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAA;IAChE,KAAK,CAAC,EAAE;QAAE,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,CAAA;CAC5C,CAAA"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/compositions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAA"}
|