@uva-glass/component-library 2.5.2 → 2.6.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/{SelectListbox.module-BWavTmq8.js → SelectListbox.module-DX1IVM9E.js} +23 -22
- package/dist/SelectListbox.module-DX1IVM9E.js.map +1 -0
- package/dist/assets/SelectListbox.css +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.d.ts +1 -1
- package/dist/components/PeriodSelector/PeriodSelector.js.map +1 -1
- package/dist/components/SelectListbox/SelectListbox.d.ts +4 -2
- package/dist/components/SelectListbox/SelectListbox.js +28 -21
- package/dist/components/SelectListbox/SelectListbox.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectButton.js +1 -1
- package/dist/components/SelectListbox/components/SelectContainer.js +1 -1
- package/dist/components/SelectListbox/components/SelectOption.d.ts +2 -1
- package/dist/components/SelectListbox/components/SelectOption.js +37 -33
- package/dist/components/SelectListbox/components/SelectOption.js.map +1 -1
- package/dist/components/SelectListbox/components/SelectOptionBox.js +1 -1
- package/package.json +1 -1
- package/dist/SelectListbox.module-BWavTmq8.js.map +0 -1
|
@@ -1,25 +1,26 @@
|
|
|
1
|
-
import './assets/SelectListbox.css';const
|
|
2
|
-
"select-listbox-container": "_select-listbox-
|
|
3
|
-
"select-listbox__wrapper": "_select-
|
|
4
|
-
"select-listbox-trigger": "_select-listbox-
|
|
5
|
-
"select-listbox-trigger--default": "_select-listbox-trigger--
|
|
6
|
-
"select-listbox-trigger--small": "_select-listbox-trigger--
|
|
7
|
-
"select-listbox-trigger--medium": "_select-listbox-trigger--
|
|
8
|
-
"select-listbox-trigger-label": "_select-listbox-trigger-
|
|
9
|
-
"select-listbox__wrapper--align-right": "_select-listbox__wrapper--align-
|
|
10
|
-
"select-listbox-trigger--bold": "_select-listbox-trigger--
|
|
11
|
-
"select-listbox-trigger--pill": "_select-listbox-trigger--
|
|
12
|
-
"select-listbox-trigger--pillLeft": "_select-listbox-trigger--
|
|
13
|
-
"select-listbox-trigger--pillRight": "_select-listbox-trigger--
|
|
14
|
-
"select-listbox-trigger--darkBorder": "_select-listbox-trigger--
|
|
15
|
-
"select-listbox-trigger--noborder": "_select-listbox-trigger--
|
|
16
|
-
"select-listbox-trigger-icon": "_select-listbox-trigger-
|
|
17
|
-
"select-listbox-trigger-icon--open": "_select-listbox-trigger-icon--
|
|
18
|
-
"select-listbox": "_select-
|
|
19
|
-
"select-listbox-option": "_select-listbox-
|
|
20
|
-
"select-listbox-option--active": "_select-listbox-option--
|
|
1
|
+
import './assets/SelectListbox.css';const e = {
|
|
2
|
+
"select-listbox-container": "_select-listbox-container_w4hvm_1",
|
|
3
|
+
"select-listbox__wrapper": "_select-listbox__wrapper_w4hvm_5",
|
|
4
|
+
"select-listbox-trigger": "_select-listbox-trigger_w4hvm_15",
|
|
5
|
+
"select-listbox-trigger--default": "_select-listbox-trigger--default_w4hvm_30",
|
|
6
|
+
"select-listbox-trigger--small": "_select-listbox-trigger--small_w4hvm_34",
|
|
7
|
+
"select-listbox-trigger--medium": "_select-listbox-trigger--medium_w4hvm_38",
|
|
8
|
+
"select-listbox-trigger-label": "_select-listbox-trigger-label_w4hvm_43",
|
|
9
|
+
"select-listbox__wrapper--align-right": "_select-listbox__wrapper--align-right_w4hvm_52",
|
|
10
|
+
"select-listbox-trigger--bold": "_select-listbox-trigger--bold_w4hvm_56",
|
|
11
|
+
"select-listbox-trigger--pill": "_select-listbox-trigger--pill_w4hvm_60",
|
|
12
|
+
"select-listbox-trigger--pillLeft": "_select-listbox-trigger--pillLeft_w4hvm_65",
|
|
13
|
+
"select-listbox-trigger--pillRight": "_select-listbox-trigger--pillRight_w4hvm_70",
|
|
14
|
+
"select-listbox-trigger--darkBorder": "_select-listbox-trigger--darkBorder_w4hvm_75",
|
|
15
|
+
"select-listbox-trigger--noborder": "_select-listbox-trigger--noborder_w4hvm_89",
|
|
16
|
+
"select-listbox-trigger-icon": "_select-listbox-trigger-icon_w4hvm_101",
|
|
17
|
+
"select-listbox-trigger-icon--open": "_select-listbox-trigger-icon--open_w4hvm_106",
|
|
18
|
+
"select-listbox": "_select-listbox_w4hvm_1",
|
|
19
|
+
"select-listbox-option": "_select-listbox-option_w4hvm_120",
|
|
20
|
+
"select-listbox-option--active": "_select-listbox-option--active_w4hvm_133",
|
|
21
|
+
"select-listbox-divider": "_select-listbox-divider_w4hvm_143"
|
|
21
22
|
};
|
|
22
23
|
export {
|
|
23
|
-
|
|
24
|
+
e as s
|
|
24
25
|
};
|
|
25
|
-
//# sourceMappingURL=SelectListbox.module-
|
|
26
|
+
//# sourceMappingURL=SelectListbox.module-DX1IVM9E.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectListbox.module-DX1IVM9E.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
._select-listbox-
|
|
1
|
+
._select-listbox-container_w4hvm_1{position:relative}._select-listbox__wrapper_w4hvm_5{border-radius:.5rem;box-shadow:0 0 .25rem #00000040;height:auto;overflow:hidden;position:fixed;width:auto;z-index:20}._select-listbox-trigger_w4hvm_15{align-items:center;background-color:var(--color-white);border:1px solid var(--color-silver);border-radius:.5rem;cursor:pointer;display:flex;font:inherit;justify-content:space-between;line-height:inherit;overflow:hidden;padding:.4rem 2rem .4rem 1rem;width:100%}._select-listbox-trigger--default_w4hvm_30{padding:.75rem 2rem .75rem 1rem}._select-listbox-trigger--small_w4hvm_34{padding:.4rem 2rem .4rem 1rem}._select-listbox-trigger--medium_w4hvm_38{height:2.75rem;padding:.5rem 2rem .5rem 1rem}._select-listbox-trigger-label_w4hvm_43{min-height:.65rem;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}._select-listbox__wrapper--align-right_w4hvm_52{right:0}._select-listbox-trigger--bold_w4hvm_56{font-weight:var(--semibold)}._select-listbox-trigger--pill_w4hvm_60{border-radius:6.25rem;padding:.5rem 1.5rem}._select-listbox-trigger--pillLeft_w4hvm_65{border-radius:6.25rem 0 0 6.25rem;padding-left:1.5rem}._select-listbox-trigger--pillRight_w4hvm_70{border-radius:0 6.25rem 6.25rem 0;padding-right:1.25rem}._select-listbox-trigger--darkBorder_w4hvm_75{border-color:var(--color-dark)}._select-listbox-trigger_w4hvm_15:focus-visible{background-color:var(--color-lavender);outline:1px solid var(--color-scarpa-flow)}._select-listbox-trigger_w4hvm_15:focus-visible,._select-listbox-trigger_w4hvm_15:hover{background-color:var(--color-lavender)}._select-listbox-trigger--noborder_w4hvm_89{border:none}._select-listbox-trigger--pillLeft_w4hvm_65+._select-listbox__wrapper_w4hvm_5{left:1rem}._select-listbox-trigger--pillRight_w4hvm_70+._select-listbox__wrapper--align-right_w4hvm_52{right:1rem}._select-listbox-trigger-icon_w4hvm_101{position:absolute;right:.875rem}._select-listbox-trigger-icon--open_w4hvm_106{transform:rotate(180deg)}._select-listbox_w4hvm_1{background-color:var(--color-white);list-style:none;margin:0;min-width:100%;overflow-y:auto;padding:4px;width:fit-content}._select-listbox-option_w4hvm_120{align-items:center;border-radius:.25rem;cursor:pointer;display:flex;justify-content:space-between;padding:.5rem .75rem;position:relative;-webkit-user-select:none;user-select:none}._select-listbox-option--active_w4hvm_133,._select-listbox-option_w4hvm_120:hover{background-color:var(--color-grey-100);box-shadow:0 0 0 1px var(--color-white)}._select-listbox-option_w4hvm_120[aria-selected=true]{font-weight:var(--semibold)}._select-listbox-divider_w4hvm_143{height:1px;background-color:var(--color-grey-200);margin:1px -.25rem}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PeriodSelector.js","sources":["../../../src/components/PeriodSelector/PeriodSelector.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport styles from './PeriodSelector.module.css';\n\nimport { Label, CheckboxButtonBar, FeedbackBox } from 'components';\n\nexport interface PeriodSelectorProps {\n /** Indicates how many periods are shown. */\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n maxPeriods: 6 | 7;\n /** array of period values [3, 5 ...] */\n defaultValues?: number[];\n label
|
|
1
|
+
{"version":3,"file":"PeriodSelector.js","sources":["../../../src/components/PeriodSelector/PeriodSelector.tsx"],"sourcesContent":["import clsx from 'clsx';\nimport { useEffect, useRef, useState } from 'react';\n\nimport styles from './PeriodSelector.module.css';\n\nimport { Label, CheckboxButtonBar, FeedbackBox } from 'components';\n\nexport interface PeriodSelectorProps {\n /** Indicates how many periods are shown. */\n // eslint-disable-next-line @typescript-eslint/no-magic-numbers\n maxPeriods: 6 | 7;\n /** array of period values [3, 5 ...] */\n defaultValues?: number[];\n label?: string;\n labelPosition?: 'top' | 'left';\n /** Shows red * */\n required?: boolean;\n /** error text to display if set */\n notValidatedText?: string;\n /** Returns array of selected values as number */\n onChange: (values: number[]) => void;\n}\n\nconst SEMESTER_1 = 0;\nconst SEMESTER_2 = 1;\nconst SEMESTER_3 = 2;\n\nconst PERIODS_PER_SEMESTER = 3;\nconst MAX_PERIODS = 7;\n\nconst chunkPeriods = (array: number[]): number[][] => {\n const result: number[][] = [];\n for (let count = 0; count < array.length; count += PERIODS_PER_SEMESTER) {\n result.push(array.slice(count, count + PERIODS_PER_SEMESTER));\n }\n return result;\n};\n\n/** Checkbox group for selecting periods */\nexport const PeriodSelector = ({\n maxPeriods = MAX_PERIODS,\n defaultValues,\n label,\n labelPosition = 'top',\n required = false,\n notValidatedText = '',\n onChange,\n}: PeriodSelectorProps) => {\n const maxPeriodsList = Array.from({ length: maxPeriods }, (_, index) => index + 1);\n const chunkedPeriods = chunkPeriods(maxPeriodsList);\n\n const checkboxItems = chunkedPeriods.map((periods, semester) => {\n return periods.map((period) => ({\n label: `${semester + 1}${periods.length === 1 ? '' : `.${((period - 1) % PERIODS_PER_SEMESTER) + 1}`}`,\n value: period.toString(),\n }));\n });\n\n const returnValues = useRef<number[][]>(\n chunkedPeriods.map((semester) =>\n semester.reduce((periods, period) => {\n if (defaultValues?.includes(period)) periods.push(period);\n return periods;\n }, [] as number[])\n )\n );\n const [disableSemesters, setDisableSemesters] = useState<number[]>([]);\n\n const disableGroups = (selects: number[][]) => {\n if (selects[SEMESTER_1].length !== 0 || selects[SEMESTER_2].length !== 0) return [SEMESTER_3];\n if (selects[SEMESTER_3].length !== 0) return [SEMESTER_1, SEMESTER_2];\n return [];\n };\n\n const handleChange = (values: string[], index: number) => {\n returnValues.current[index] = values.map((num) => Number(num));\n setDisableSemesters(disableGroups(returnValues.current));\n onChange([...returnValues.current.flat()].sort());\n };\n\n useEffect(() => {\n setDisableSemesters(disableGroups(returnValues.current));\n }, []);\n\n return (\n <div\n className={clsx(\n styles['period-selector__container'],\n styles[`period-selector__container--label-${labelPosition}`]\n )}\n >\n {label && (\n <Label htmlFor=\"\" required={required}>\n {label}\n </Label>\n )}\n <div className={styles['period-selector__selector-container']}>\n <div className={styles['period-selector__selector-row']}>\n {checkboxItems.map((checkboxes, semester) => (\n <CheckboxButtonBar\n key={`group_${semester}`}\n checkboxes={checkboxes}\n defaultValues={returnValues.current[semester].map((num) => num.toString())}\n disableGroup={disableSemesters.includes(semester)}\n required={required}\n onSetValues={(event) => handleChange(event, semester)}\n />\n ))}\n </div>\n {notValidatedText !== '' && <FeedbackBox level=\"error\" feedback={notValidatedText} />}\n </div>\n </div>\n );\n};\n"],"names":["SEMESTER_1","SEMESTER_2","SEMESTER_3","PERIODS_PER_SEMESTER","MAX_PERIODS","chunkPeriods","array","result","count","PeriodSelector","maxPeriods","defaultValues","label","labelPosition","required","notValidatedText","onChange","maxPeriodsList","_","index","chunkedPeriods","checkboxItems","periods","semester","period","returnValues","useRef","disableSemesters","setDisableSemesters","useState","disableGroups","selects","handleChange","values","num","useEffect","jsxs","clsx","styles","jsx","Label","checkboxes","CheckboxButtonBar","event","FeedbackBox"],"mappings":"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"}
|
|
@@ -25,9 +25,11 @@ export interface SelectListboxProps {
|
|
|
25
25
|
mobileBreakpoint?: `${number}${'px' | 'rem'}`;
|
|
26
26
|
/** The callback function that is invoked when an option is selected. */
|
|
27
27
|
onChange?: (option: OptionValue) => void;
|
|
28
|
+
/** Option to add a devider after a given amout of ouptions in the select option box. */
|
|
29
|
+
dividerAfter?: number;
|
|
28
30
|
}
|
|
29
31
|
/** Represents a component to render a select list box. */
|
|
30
32
|
export declare const SelectListbox: {
|
|
31
|
-
({ options, variant, fullWidth, size, optionPositionRight, defaultValue, maxOptionHeight, disabled, buttonLabelProp, buttonLabelBold, onChange, children, }: PropsWithChildren<SelectListboxProps>): import("react/jsx-runtime").JSX.Element;
|
|
32
|
-
SelectOption: ({ option, index, children }: import('./components/SelectOption').SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
33
|
+
({ options, variant, fullWidth, size, optionPositionRight, defaultValue, maxOptionHeight, disabled, buttonLabelProp, buttonLabelBold, onChange, dividerAfter, children, }: PropsWithChildren<SelectListboxProps>): import("react/jsx-runtime").JSX.Element;
|
|
34
|
+
SelectOption: ({ option, index, dividerAfter, children }: import('./components/SelectOption').SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
33
35
|
};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { jsx as e, jsxs as
|
|
2
|
-
import { useState as t } from "react";
|
|
3
|
-
import { SelectProvider as
|
|
4
|
-
import { SelectButton as
|
|
5
|
-
import { SelectContainer as
|
|
6
|
-
import { SelectOptionBox as
|
|
7
|
-
import { SelectOption as
|
|
8
|
-
import { usePositionedFloaters as
|
|
9
|
-
const
|
|
1
|
+
import { jsx as e, jsxs as y } from "react/jsx-runtime";
|
|
2
|
+
import { useState as t, Children as B, cloneElement as O } from "react";
|
|
3
|
+
import { SelectProvider as g } from "./SelectProvider.js";
|
|
4
|
+
import { SelectButton as j } from "./components/SelectButton.js";
|
|
5
|
+
import { SelectContainer as v } from "./components/SelectContainer.js";
|
|
6
|
+
import { SelectOptionBox as C } from "./components/SelectOptionBox.js";
|
|
7
|
+
import { SelectOption as F } from "./components/SelectOption.js";
|
|
8
|
+
import { usePositionedFloaters as L } from "../hooks/usePositionedFloaters.js";
|
|
9
|
+
const z = ({
|
|
10
10
|
options: o,
|
|
11
11
|
variant: i,
|
|
12
12
|
fullWidth: r = !1,
|
|
@@ -14,13 +14,14 @@ const v = ({
|
|
|
14
14
|
optionPositionRight: l,
|
|
15
15
|
defaultValue: m = -1,
|
|
16
16
|
maxOptionHeight: s,
|
|
17
|
-
disabled:
|
|
18
|
-
buttonLabelProp:
|
|
17
|
+
disabled: c,
|
|
18
|
+
buttonLabelProp: f = "label",
|
|
19
19
|
buttonLabelBold: p,
|
|
20
20
|
onChange: a,
|
|
21
|
-
|
|
21
|
+
dividerAfter: S,
|
|
22
|
+
children: d
|
|
22
23
|
}) => {
|
|
23
|
-
const [u,
|
|
24
|
+
const [u, h] = t(null), [x, E] = t(null), { style: b } = L(u, x, {
|
|
24
25
|
mouseEvent: "click",
|
|
25
26
|
position: "bottomLeft",
|
|
26
27
|
offset: 4,
|
|
@@ -29,24 +30,30 @@ const v = ({
|
|
|
29
30
|
mobileBreakpoint: "28rem",
|
|
30
31
|
fullWidth: r
|
|
31
32
|
});
|
|
32
|
-
return /* @__PURE__ */ e(
|
|
33
|
+
return /* @__PURE__ */ e(g, { options: o, defaultValue: m, children: /* @__PURE__ */ y(v, { children: [
|
|
33
34
|
/* @__PURE__ */ e(
|
|
34
|
-
|
|
35
|
+
j,
|
|
35
36
|
{
|
|
36
|
-
disabled:
|
|
37
|
-
buttonLabelProp:
|
|
37
|
+
disabled: c,
|
|
38
|
+
buttonLabelProp: f,
|
|
38
39
|
buttonLabelBold: p,
|
|
39
40
|
variant: i,
|
|
40
41
|
size: n,
|
|
41
42
|
onChange: a,
|
|
42
|
-
ref:
|
|
43
|
+
ref: E
|
|
43
44
|
}
|
|
44
45
|
),
|
|
45
|
-
/* @__PURE__ */ e(
|
|
46
|
+
/* @__PURE__ */ e(C, { ref: h, ...b, children: B.map(
|
|
47
|
+
d,
|
|
48
|
+
(P, k) => O(P, {
|
|
49
|
+
dividerAfter: S,
|
|
50
|
+
key: k
|
|
51
|
+
})
|
|
52
|
+
) })
|
|
46
53
|
] }) });
|
|
47
54
|
};
|
|
48
|
-
|
|
55
|
+
z.SelectOption = F;
|
|
49
56
|
export {
|
|
50
|
-
|
|
57
|
+
z as SelectListbox
|
|
51
58
|
};
|
|
52
59
|
//# sourceMappingURL=SelectListbox.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectListbox.js","sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import { useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\n\nimport { SelectProvider } from './SelectProvider';\nimport { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\n\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport interface SelectListboxProps {\n /** The possible options to select. */\n options: OptionValue[];\n /** The selected value by default. */\n defaultValue?: SelectValue;\n /** The max height of the options. */\n maxOptionHeight?: `${number}${'px' | 'rem'}`;\n /** `true` to disable the select box; otherwise, `false`. The default is `false`. */\n disabled?: boolean;\n /** The name of the property in the options structure that contains the label of the options. */\n buttonLabelProp?: string;\n /** `true` to render the labels in bold; otherwise, `false`. The default is `false`. */\n buttonLabelBold?: boolean;\n /** The variant of the select box. */\n variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder';\n /** If true sets the option dropdown min-width to the width of the select button. */\n fullWidth?: boolean;\n /** The size of the select box. */\n size?: 'small' | 'medium' | 'default';\n /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\n optionPositionRight?: boolean;\n /** The breakpoint at which to switch to the mobile view. */\n mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n /** The callback function that is invoked when an option is selected. */\n onChange?: (option: OptionValue) => void;\n}\n\n/** Represents a component to render a select list box. */\nexport const SelectListbox = ({\n options,\n variant,\n fullWidth = false,\n size = 'default',\n optionPositionRight,\n defaultValue = -1,\n maxOptionHeight,\n disabled,\n buttonLabelProp = 'label',\n buttonLabelBold,\n onChange,\n children,\n}: PropsWithChildren<SelectListboxProps>) => {\n const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n const { style: positionStyle } = usePositionedFloaters(positionElement, referenceElement, {\n mouseEvent: 'click',\n position: 'bottomLeft',\n offset: 4,\n maxFixedHeight: maxOptionHeight,\n horizontalPosition: optionPositionRight ? 'right' : 'left',\n mobileBreakpoint: '28rem',\n fullWidth,\n });\n\n return (\n <SelectProvider options={options} defaultValue={defaultValue}>\n <SelectContainer>\n <SelectButton\n disabled={disabled}\n buttonLabelProp={buttonLabelProp}\n buttonLabelBold={buttonLabelBold}\n variant={variant}\n size={size}\n onChange={onChange}\n ref={setReferenceElement}\n />\n\n <SelectOptionBox ref={setPositionElement} {...positionStyle}>\n {children}\n </SelectOptionBox>\n </SelectContainer>\n </SelectProvider>\n );\n};\n\nSelectListbox.SelectOption = SelectOption;\n"],"names":["SelectListbox","options","variant","fullWidth","size","optionPositionRight","defaultValue","maxOptionHeight","disabled","buttonLabelProp","buttonLabelBold","onChange","children","positionElement","setPositionElement","useState","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","jsx","SelectProvider","SelectContainer","SelectButton","SelectOptionBox","SelectOption"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"SelectListbox.js","sources":["../../../src/components/SelectListbox/SelectListbox.tsx"],"sourcesContent":["import { Children, cloneElement, useState } from 'react';\n\nimport type { PropsWithChildren } from 'react';\nimport type { OptionValue, SelectValue } from './SelectProvider';\n\nimport { SelectProvider } from './SelectProvider';\nimport { SelectButton } from './components/SelectButton';\nimport { SelectContainer } from './components/SelectContainer';\nimport { SelectOptionBox } from './components/SelectOptionBox';\nimport { SelectOption } from './components/SelectOption';\n\nimport { usePositionedFloaters } from 'components/hooks/usePositionedFloaters';\n\nexport interface SelectListboxProps {\n /** The possible options to select. */\n options: OptionValue[];\n /** The selected value by default. */\n defaultValue?: SelectValue;\n /** The max height of the options. */\n maxOptionHeight?: `${number}${'px' | 'rem'}`;\n /** `true` to disable the select box; otherwise, `false`. The default is `false`. */\n disabled?: boolean;\n /** The name of the property in the options structure that contains the label of the options. */\n buttonLabelProp?: string;\n /** `true` to render the labels in bold; otherwise, `false`. The default is `false`. */\n buttonLabelBold?: boolean;\n /** The variant of the select box. */\n variant?: 'noborder' | 'pill' | 'pillLeft' | 'pillRight' | 'darkBorder';\n /** If true sets the option dropdown min-width to the width of the select button. */\n fullWidth?: boolean;\n /** The size of the select box. */\n size?: 'small' | 'medium' | 'default';\n /** `true` to align the right side of the options with the select box; otherwise, `false` to align on the left side. */\n optionPositionRight?: boolean;\n /** The breakpoint at which to switch to the mobile view. */\n mobileBreakpoint?: `${number}${'px' | 'rem'}`;\n /** The callback function that is invoked when an option is selected. */\n onChange?: (option: OptionValue) => void;\n /** Option to add a devider after a given amout of ouptions in the select option box. */\n dividerAfter?: number;\n}\n\n/** Represents a component to render a select list box. */\nexport const SelectListbox = ({\n options,\n variant,\n fullWidth = false,\n size = 'default',\n optionPositionRight,\n defaultValue = -1,\n maxOptionHeight,\n disabled,\n buttonLabelProp = 'label',\n buttonLabelBold,\n onChange,\n dividerAfter,\n children,\n}: PropsWithChildren<SelectListboxProps>) => {\n const [positionElement, setPositionElement] = useState<HTMLElement | null>(null);\n const [referenceElement, setReferenceElement] = useState<HTMLElement | null>(null);\n const { style: positionStyle } = usePositionedFloaters(positionElement, referenceElement, {\n mouseEvent: 'click',\n position: 'bottomLeft',\n offset: 4,\n maxFixedHeight: maxOptionHeight,\n horizontalPosition: optionPositionRight ? 'right' : 'left',\n mobileBreakpoint: '28rem',\n fullWidth,\n });\n\n return (\n <SelectProvider options={options} defaultValue={defaultValue}>\n <SelectContainer>\n <SelectButton\n disabled={disabled}\n buttonLabelProp={buttonLabelProp}\n buttonLabelBold={buttonLabelBold}\n variant={variant}\n size={size}\n onChange={onChange}\n ref={setReferenceElement}\n />\n\n <SelectOptionBox ref={setPositionElement} {...positionStyle}>\n {Children.map(children, (child, index) =>\n cloneElement(child as React.ReactElement, {\n dividerAfter,\n key: index,\n })\n )}\n </SelectOptionBox>\n </SelectContainer>\n </SelectProvider>\n );\n};\n\nSelectListbox.SelectOption = SelectOption;\n"],"names":["SelectListbox","options","variant","fullWidth","size","optionPositionRight","defaultValue","maxOptionHeight","disabled","buttonLabelProp","buttonLabelBold","onChange","dividerAfter","children","positionElement","setPositionElement","useState","referenceElement","setReferenceElement","positionStyle","usePositionedFloaters","jsx","SelectProvider","SelectContainer","SelectButton","SelectOptionBox","Children","child","index","cloneElement","SelectOption"],"mappings":";;;;;;;;AA2CO,MAAMA,IAAgB,CAAC;AAAA,EAC5B,SAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,MAAAC,IAAO;AAAA,EACP,qBAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,UAAAC;AACF,MAA6C;AAC3C,QAAM,CAACC,GAAiBC,CAAkB,IAAIC,EAA6B,IAAI,GACzE,CAACC,GAAkBC,CAAmB,IAAIF,EAA6B,IAAI,GAC3E,EAAE,OAAOG,EAAA,IAAkBC,EAAsBN,GAAiBG,GAAkB;AAAA,IACxF,YAAY;AAAA,IACZ,UAAU;AAAA,IACV,QAAQ;AAAA,IACR,gBAAgBV;AAAA,IAChB,oBAAoBF,IAAsB,UAAU;AAAA,IACpD,kBAAkB;AAAA,IAClB,WAAAF;AAAA,EAAA,CACD;AAED,SACG,gBAAAkB,EAAAC,GAAA,EAAe,SAAArB,GAAkB,cAAAK,GAChC,4BAACiB,GACC,EAAA,UAAA;AAAA,IAAA,gBAAAF;AAAA,MAACG;AAAA,MAAA;AAAA,QACC,UAAAhB;AAAA,QACA,iBAAAC;AAAA,QACA,iBAAAC;AAAA,QACA,SAAAR;AAAA,QACA,MAAAE;AAAA,QACA,UAAAO;AAAA,QACA,KAAKO;AAAA,MAAA;AAAA,IACP;AAAA,sBAECO,GAAgB,EAAA,KAAKV,GAAqB,GAAGI,GAC3C,UAASO,EAAA;AAAA,MAAIb;AAAA,MAAU,CAACc,GAAOC,MAC9BC,EAAaF,GAA6B;AAAA,QACxC,cAAAf;AAAA,QACA,KAAKgB;AAAA,MACN,CAAA;AAAA,IAAA,EAEL,CAAA;AAAA,EAAA,EAAA,CACF,EACF,CAAA;AAEJ;AAEA5B,EAAc,eAAe8B;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as a, jsxs as C } from "react/jsx-runtime";
|
|
2
2
|
import { c as f } from "../../../clsx-OuTLNxxd.js";
|
|
3
3
|
import { forwardRef as E, useRef as g, useEffect as c } from "react";
|
|
4
|
-
import { s as t } from "../../../SelectListbox.module-
|
|
4
|
+
import { s as t } from "../../../SelectListbox.module-DX1IVM9E.js";
|
|
5
5
|
import { Icon as L } from "../../Icon/Icon.js";
|
|
6
6
|
import { useSelect as N } from "../SelectProvider.js";
|
|
7
7
|
const O = E((d, u) => {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as c } from "react/jsx-runtime";
|
|
2
2
|
import { useRef as i, useCallback as u, useEffect as l } from "react";
|
|
3
3
|
import { useSelect as m } from "../SelectProvider.js";
|
|
4
|
-
import { s as f } from "../../../SelectListbox.module-
|
|
4
|
+
import { s as f } from "../../../SelectListbox.module-DX1IVM9E.js";
|
|
5
5
|
const E = ({ children: o }) => {
|
|
6
6
|
const { isOpen: r, setIsOpen: n } = m(), t = i(null), e = u(
|
|
7
7
|
({ target: s }) => {
|
|
@@ -4,6 +4,7 @@ export interface SelectOptionProps {
|
|
|
4
4
|
option: OptionValue;
|
|
5
5
|
index: number;
|
|
6
6
|
key: string;
|
|
7
|
+
dividerAfter?: number;
|
|
7
8
|
children: ReactNode;
|
|
8
9
|
}
|
|
9
|
-
export declare const SelectOption: ({ option, index, children }: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
10
|
+
export declare const SelectOption: ({ option, index, dividerAfter, children }: SelectOptionProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,15 +1,15 @@
|
|
|
1
|
-
import { jsx as
|
|
2
|
-
import { c as
|
|
3
|
-
import { useRef as
|
|
4
|
-
import { useSelect as
|
|
5
|
-
import { s as
|
|
6
|
-
const
|
|
7
|
-
const
|
|
8
|
-
|
|
1
|
+
import { jsxs as D, Fragment as h, jsx as m } from "react/jsx-runtime";
|
|
2
|
+
import { c as y } from "../../../clsx-OuTLNxxd.js";
|
|
3
|
+
import { useRef as O, useEffect as d } from "react";
|
|
4
|
+
import { useSelect as x } from "../SelectProvider.js";
|
|
5
|
+
import { s as o } from "../../../SelectListbox.module-DX1IVM9E.js";
|
|
6
|
+
const j = ({ option: l, index: t, dividerAfter: u, children: v }) => {
|
|
7
|
+
const i = O(null), { isOpen: r, activeIndex: s, setActiveIndex: c, selectedValue: f, setSelectedValue: p, setIsOpen: n, options: a } = x(), w = (e) => {
|
|
8
|
+
p(a[e]), n(!1);
|
|
9
9
|
}, k = (e) => {
|
|
10
10
|
switch (e.key) {
|
|
11
11
|
case "Tab":
|
|
12
|
-
e.preventDefault(), r &&
|
|
12
|
+
e.preventDefault(), r && n(!1);
|
|
13
13
|
break;
|
|
14
14
|
case "ArrowDown":
|
|
15
15
|
case "ArrowUp":
|
|
@@ -21,35 +21,39 @@ const S = ({ option: t, index: l, children: m }) => {
|
|
|
21
21
|
e.preventDefault(), a != null && a.length && s > -1 && !a[s].disabled && w(s);
|
|
22
22
|
break;
|
|
23
23
|
case "Escape":
|
|
24
|
-
r && (e.stopPropagation(),
|
|
24
|
+
r && (e.stopPropagation(), n(!1));
|
|
25
25
|
break;
|
|
26
26
|
}
|
|
27
27
|
};
|
|
28
|
-
return
|
|
29
|
-
var e,
|
|
30
|
-
|
|
31
|
-
}, [s,
|
|
32
|
-
f.value ===
|
|
33
|
-
}, [
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
[
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
28
|
+
return d(() => {
|
|
29
|
+
var e, b;
|
|
30
|
+
t === s && (r ? (e = i.current) == null || e.focus() : (b = i.current) == null || b.blur());
|
|
31
|
+
}, [s, t, r]), d(() => {
|
|
32
|
+
f.value === l.value && c(t);
|
|
33
|
+
}, [t, l.value, f.value, c]), /* @__PURE__ */ D(h, { children: [
|
|
34
|
+
/* @__PURE__ */ m(
|
|
35
|
+
"li",
|
|
36
|
+
{
|
|
37
|
+
className: y(o["select-listbox-option"], {
|
|
38
|
+
[o["select-listbox-option--active"]]: t === s,
|
|
39
|
+
[o["select-listbox-option--divider"]]: t + 1 === u
|
|
40
|
+
}),
|
|
41
|
+
...!l.disabled && {
|
|
42
|
+
onClick: () => p(l),
|
|
43
|
+
onKeyDown: k,
|
|
44
|
+
tabIndex: 0,
|
|
45
|
+
role: "option",
|
|
46
|
+
"aria-selected": f.value === l.value
|
|
47
|
+
},
|
|
48
|
+
ref: i,
|
|
49
|
+
children: v
|
|
45
50
|
},
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
);
|
|
51
|
+
`${l.value}`
|
|
52
|
+
),
|
|
53
|
+
t + 1 === u && /* @__PURE__ */ m("div", { className: o["select-listbox-divider"], "aria-hidden": "true" })
|
|
54
|
+
] });
|
|
51
55
|
};
|
|
52
56
|
export {
|
|
53
|
-
|
|
57
|
+
j as SelectOption
|
|
54
58
|
};
|
|
55
59
|
//# sourceMappingURL=SelectOption.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectOption.js","sources":["../../../../src/components/SelectListbox/components/SelectOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { OptionValue } from 'components/SelectListbox/SelectProvider';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport interface SelectOptionProps {\n option: OptionValue;\n index: number;\n key: string;\n children: ReactNode;\n}\n\nexport const SelectOption = ({ option, index, children }: SelectOptionProps) => {\n const selectOptionRef = useRef<HTMLLIElement>(null);\n const { isOpen, activeIndex, setActiveIndex, selectedValue, setSelectedValue, setIsOpen, options } = useSelect();\n\n const handleSelectOption = (aIndex: number) => {\n setSelectedValue(options[aIndex]);\n setIsOpen(false);\n };\n\n const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\n switch (event.key) {\n case 'Tab':\n event.preventDefault();\n if (isOpen) {\n setIsOpen(false);\n }\n break;\n case 'ArrowDown':\n case 'ArrowUp':\n event.preventDefault();\n if (!isOpen) {\n return;\n }\n if (event.key === 'ArrowDown' && activeIndex < options.length - 1) {\n setActiveIndex(activeIndex + 1);\n }\n if (event.key === 'ArrowUp' && activeIndex > 0) {\n setActiveIndex(activeIndex - 1);\n }\n break;\n case 'Enter':\n event.preventDefault();\n if (options?.length && activeIndex > -1 && !options[activeIndex].disabled) {\n handleSelectOption(activeIndex);\n }\n break;\n case 'Escape':\n if (isOpen) {\n event.stopPropagation();\n setIsOpen(false);\n }\n break;\n }\n };\n\n useEffect(() => {\n if (index === activeIndex) {\n isOpen ? selectOptionRef.current?.focus() : selectOptionRef.current?.blur();\n }\n }, [activeIndex, index, isOpen]);\n\n useEffect(() => {\n if (selectedValue.value === option.value) {\n setActiveIndex(index);\n }\n }, [index, option.value, selectedValue.value, setActiveIndex]);\n\n return (\n <li\n
|
|
1
|
+
{"version":3,"file":"SelectOption.js","sources":["../../../../src/components/SelectListbox/components/SelectOption.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { useEffect, useRef } from 'react';\n\nimport type { KeyboardEvent, ReactNode } from 'react';\nimport type { OptionValue } from 'components/SelectListbox/SelectProvider';\n\nimport { useSelect } from 'components/SelectListbox/SelectProvider';\nimport styles from 'components/SelectListbox/SelectListbox.module.css';\n\nexport interface SelectOptionProps {\n option: OptionValue;\n index: number;\n key: string;\n dividerAfter?: number;\n children: ReactNode;\n}\n\nexport const SelectOption = ({ option, index, dividerAfter, children }: SelectOptionProps) => {\n const selectOptionRef = useRef<HTMLLIElement>(null);\n const { isOpen, activeIndex, setActiveIndex, selectedValue, setSelectedValue, setIsOpen, options } = useSelect();\n\n const handleSelectOption = (aIndex: number) => {\n setSelectedValue(options[aIndex]);\n setIsOpen(false);\n };\n\n const onOptionKeyDown = (event: KeyboardEvent<HTMLLIElement>) => {\n switch (event.key) {\n case 'Tab':\n event.preventDefault();\n if (isOpen) {\n setIsOpen(false);\n }\n break;\n case 'ArrowDown':\n case 'ArrowUp':\n event.preventDefault();\n if (!isOpen) {\n return;\n }\n if (event.key === 'ArrowDown' && activeIndex < options.length - 1) {\n setActiveIndex(activeIndex + 1);\n }\n if (event.key === 'ArrowUp' && activeIndex > 0) {\n setActiveIndex(activeIndex - 1);\n }\n break;\n case 'Enter':\n event.preventDefault();\n if (options?.length && activeIndex > -1 && !options[activeIndex].disabled) {\n handleSelectOption(activeIndex);\n }\n break;\n case 'Escape':\n if (isOpen) {\n event.stopPropagation();\n setIsOpen(false);\n }\n break;\n }\n };\n\n useEffect(() => {\n if (index === activeIndex) {\n isOpen ? selectOptionRef.current?.focus() : selectOptionRef.current?.blur();\n }\n }, [activeIndex, index, isOpen]);\n\n useEffect(() => {\n if (selectedValue.value === option.value) {\n setActiveIndex(index);\n }\n }, [index, option.value, selectedValue.value, setActiveIndex]);\n\n return (\n <>\n <li\n className={clsx(styles['select-listbox-option'], {\n [styles['select-listbox-option--active']]: index === activeIndex,\n [styles['select-listbox-option--divider']]: index + 1 === dividerAfter,\n })}\n key={`${option.value}`}\n {...(!option.disabled && {\n onClick: () => setSelectedValue(option),\n onKeyDown: onOptionKeyDown,\n tabIndex: 0,\n role: 'option',\n 'aria-selected': selectedValue.value === option.value,\n })}\n ref={selectOptionRef}\n >\n {children}\n </li>\n {index + 1 === dividerAfter && <div className={styles['select-listbox-divider']} aria-hidden=\"true\" />}\n </>\n );\n};\n"],"names":["SelectOption","option","index","dividerAfter","children","selectOptionRef","useRef","isOpen","activeIndex","setActiveIndex","selectedValue","setSelectedValue","setIsOpen","options","useSelect","handleSelectOption","aIndex","onOptionKeyDown","event","useEffect","_a","_b","jsxs","Fragment","jsx","clsx","styles"],"mappings":";;;;;AAiBO,MAAMA,IAAe,CAAC,EAAE,QAAAC,GAAQ,OAAAC,GAAO,cAAAC,GAAc,UAAAC,QAAkC;AACtF,QAAAC,IAAkBC,EAAsB,IAAI,GAC5C,EAAE,QAAAC,GAAQ,aAAAC,GAAa,gBAAAC,GAAgB,eAAAC,GAAe,kBAAAC,GAAkB,WAAAC,GAAW,SAAAC,EAAQ,IAAIC,EAAU,GAEzGC,IAAqB,CAACC,MAAmB;AAC5B,IAAAL,EAAAE,EAAQG,CAAM,CAAC,GAChCJ,EAAU,EAAK;AAAA,EACjB,GAEMK,IAAkB,CAACC,MAAwC;AAC/D,YAAQA,EAAM,KAAK;AAAA,MACjB,KAAK;AACH,QAAAA,EAAM,eAAe,GACjBX,KACFK,EAAU,EAAK;AAEjB;AAAA,MACF,KAAK;AAAA,MACL,KAAK;AAEH,YADAM,EAAM,eAAe,GACjB,CAACX;AACH;AAEF,QAAIW,EAAM,QAAQ,eAAeV,IAAcK,EAAQ,SAAS,KAC9DJ,EAAeD,IAAc,CAAC,GAE5BU,EAAM,QAAQ,aAAaV,IAAc,KAC3CC,EAAeD,IAAc,CAAC;AAEhC;AAAA,MACF,KAAK;AACH,QAAAU,EAAM,eAAe,GACjBL,KAAA,QAAAA,EAAS,UAAUL,IAAc,MAAM,CAACK,EAAQL,CAAW,EAAE,YAC/DO,EAAmBP,CAAW;AAEhC;AAAA,MACF,KAAK;AACH,QAAID,MACFW,EAAM,gBAAgB,GACtBN,EAAU,EAAK;AAEjB;AAAA,IAAA;AAAA,EAEN;AAEA,SAAAO,EAAU,MAAM;;AACd,IAAIjB,MAAUM,MACZD,KAASa,IAAAf,EAAgB,YAAhB,QAAAe,EAAyB,WAAUC,IAAAhB,EAAgB,YAAhB,QAAAgB,EAAyB;AAAA,EAEtE,GAAA,CAACb,GAAaN,GAAOK,CAAM,CAAC,GAE/BY,EAAU,MAAM;AACV,IAAAT,EAAc,UAAUT,EAAO,SACjCQ,EAAeP,CAAK;AAAA,EACtB,GACC,CAACA,GAAOD,EAAO,OAAOS,EAAc,OAAOD,CAAc,CAAC,GAIzD,gBAAAa,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAA,gBAAAC;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWC,EAAKC,EAAO,uBAAuB,GAAG;AAAA,UAC/C,CAACA,EAAO,+BAA+B,CAAC,GAAGxB,MAAUM;AAAA,UACrD,CAACkB,EAAO,gCAAgC,CAAC,GAAGxB,IAAQ,MAAMC;AAAA,QAAA,CAC3D;AAAA,QAEA,GAAI,CAACF,EAAO,YAAY;AAAA,UACvB,SAAS,MAAMU,EAAiBV,CAAM;AAAA,UACtC,WAAWgB;AAAA,UACX,UAAU;AAAA,UACV,MAAM;AAAA,UACN,iBAAiBP,EAAc,UAAUT,EAAO;AAAA,QAClD;AAAA,QACA,KAAKI;AAAA,QAEJ,UAAAD;AAAA,MAAA;AAAA,MAVI,GAAGH,EAAO,KAAK;AAAA,IAWtB;AAAA,IACCC,IAAQ,MAAMC,KAAiB,gBAAAqB,EAAA,OAAA,EAAI,WAAWE,EAAO,wBAAwB,GAAG,eAAY,OAAO,CAAA;AAAA,EAAA,GACtG;AAEJ;"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as s } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef as m, useRef as x } from "react";
|
|
3
|
-
import { s as i } from "../../../SelectListbox.module-
|
|
3
|
+
import { s as i } from "../../../SelectListbox.module-DX1IVM9E.js";
|
|
4
4
|
import { useSelect as a } from "../SelectProvider.js";
|
|
5
5
|
const h = m((l, e) => {
|
|
6
6
|
const { style: t, children: o } = l, { listboxId: r, isOpen: c } = a(), n = x(null);
|
package/package.json
CHANGED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SelectListbox.module-BWavTmq8.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}
|