@bspk/ui 1.1.26 → 1.1.27
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/FormField.d.ts +2 -2
- package/dist/FormField.js +1 -1
- package/dist/{Dropdown.d.ts → Select.d.ts} +15 -15
- package/dist/Select.js +68 -0
- package/dist/Select.js.map +1 -0
- package/dist/{DropdownField.d.ts → SelectField.d.ts} +9 -9
- package/dist/SelectField.js +39 -0
- package/dist/SelectField.js.map +1 -0
- package/dist/demo/examples.js +1 -1
- package/dist/demo/examples.js.map +1 -1
- package/dist/hooks/useKeyboardNavigation.d.ts +1 -1
- package/dist/hooks/useKeyboardNavigation.js +1 -1
- package/dist/hooks/useOutsideClick.d.ts +2 -2
- package/dist/hooks/useOutsideClick.js +2 -2
- package/dist/select.css +1 -0
- package/package.json +1 -1
- package/src/FormField.tsx +2 -2
- package/src/{Dropdown.tsx → Select.tsx} +21 -21
- package/src/{DropdownField.tsx → SelectField.tsx} +15 -15
- package/src/demo/examples.tsx +6 -6
- package/src/hooks/useKeyboardNavigation.ts +1 -1
- package/src/hooks/useOutsideClick.ts +2 -2
- package/src/{dropdown.scss → select.scss} +36 -36
- package/dist/Dropdown.js +0 -68
- package/dist/Dropdown.js.map +0 -1
- package/dist/DropdownField.js +0 -39
- package/dist/DropdownField.js.map +0 -1
- package/dist/dropdown.css +0 -1
package/dist/FormField.d.ts
CHANGED
|
@@ -22,7 +22,7 @@ export type FormFieldProps = CommonProps<'required'> & InvalidPropsLibrary & {
|
|
|
22
22
|
/** The id of the control. */
|
|
23
23
|
controlId: string;
|
|
24
24
|
/**
|
|
25
|
-
* The children of the form field. This should be a control such as TextInput,
|
|
25
|
+
* The children of the form field. This should be a control such as TextInput, Select, DatePicker, or
|
|
26
26
|
* TimePicker.
|
|
27
27
|
*
|
|
28
28
|
* @type (childProps: FieldControlProps) => JSX.Element
|
|
@@ -37,7 +37,7 @@ export type FormFieldProps = CommonProps<'required'> & InvalidPropsLibrary & {
|
|
|
37
37
|
/**
|
|
38
38
|
* Wrapper component for form controls.
|
|
39
39
|
*
|
|
40
|
-
* Children may be one of the following: TextInput,
|
|
40
|
+
* Children may be one of the following: TextInput, Select, DatePicker, or TimePicker.
|
|
41
41
|
*
|
|
42
42
|
* @example
|
|
43
43
|
* import { TextInput } from '@bspk/ui/TextInput';
|
package/dist/FormField.js
CHANGED
|
@@ -7,7 +7,7 @@ import { Txt } from './Txt';
|
|
|
7
7
|
/**
|
|
8
8
|
* Wrapper component for form controls.
|
|
9
9
|
*
|
|
10
|
-
* Children may be one of the following: TextInput,
|
|
10
|
+
* Children may be one of the following: TextInput, Select, DatePicker, or TimePicker.
|
|
11
11
|
*
|
|
12
12
|
* @example
|
|
13
13
|
* import { TextInput } from '@bspk/ui/TextInput';
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import './
|
|
1
|
+
import './select.scss';
|
|
2
2
|
import { MenuProps } from './Menu';
|
|
3
3
|
import { Placement } from './hooks/useFloating';
|
|
4
4
|
import { CommonProps, InvalidPropsLibrary } from './';
|
|
5
|
-
export type
|
|
5
|
+
export type SelectOption = Record<string, unknown> & {
|
|
6
6
|
/** The value of the option. */
|
|
7
7
|
value: string;
|
|
8
8
|
/** The label of the option. This is the text that will be displayed on the option. */
|
|
9
9
|
label: string;
|
|
10
10
|
};
|
|
11
|
-
export type
|
|
11
|
+
export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'size'> & InvalidPropsLibrary & Pick<MenuProps<T>, 'isMulti' | 'itemCount' | 'renderListItem' | 'selectAll'> & {
|
|
12
12
|
/**
|
|
13
|
-
* Array of options to display in the
|
|
13
|
+
* Array of options to display in the select
|
|
14
14
|
*
|
|
15
15
|
* @example
|
|
16
16
|
* [
|
|
@@ -26,7 +26,7 @@ export type DropdownProps<T extends DropdownOption = DropdownOption> = CommonPro
|
|
|
26
26
|
* { value: '10', label: 'Option 10' },
|
|
27
27
|
* ];
|
|
28
28
|
*
|
|
29
|
-
* @type Array<
|
|
29
|
+
* @type Array<SelectOption>
|
|
30
30
|
* @required
|
|
31
31
|
*/
|
|
32
32
|
options: T[];
|
|
@@ -37,18 +37,18 @@ export type DropdownProps<T extends DropdownOption = DropdownOption> = CommonPro
|
|
|
37
37
|
*/
|
|
38
38
|
value?: Array<string>;
|
|
39
39
|
/**
|
|
40
|
-
* Placeholder for the
|
|
40
|
+
* Placeholder for the select
|
|
41
41
|
*
|
|
42
42
|
* @default Select one...
|
|
43
43
|
*/
|
|
44
44
|
placeholder?: string;
|
|
45
45
|
/**
|
|
46
|
-
* The placement of the
|
|
46
|
+
* The placement of the select menu. Will be ignored if the menu is too close to the edge of the screen.
|
|
47
47
|
*
|
|
48
48
|
* @default bottom
|
|
49
49
|
*/
|
|
50
50
|
placement?: Extract<Placement, 'bottom' | 'top'>;
|
|
51
|
-
/** The style of the
|
|
51
|
+
/** The style of the select. */
|
|
52
52
|
style?: React.CSSProperties;
|
|
53
53
|
/**
|
|
54
54
|
* The function to call when the selected values change.
|
|
@@ -61,15 +61,15 @@ export type DropdownProps<T extends DropdownOption = DropdownOption> = CommonPro
|
|
|
61
61
|
* A field element that allows users to select one option from a list of available choices. *
|
|
62
62
|
*
|
|
63
63
|
* @example
|
|
64
|
-
* import {
|
|
64
|
+
* import { Select } from '@bspk/ui/Select';
|
|
65
65
|
*
|
|
66
66
|
* export function Example() {
|
|
67
67
|
* const [selected, setSelected] = React.useState<string[]>([]);
|
|
68
68
|
* return (
|
|
69
|
-
* <
|
|
69
|
+
* <Select
|
|
70
70
|
* aria-label="Select an option"
|
|
71
71
|
* itemCount={5}
|
|
72
|
-
* name="example-
|
|
72
|
+
* name="example-select"
|
|
73
73
|
* onChange={setSelected}
|
|
74
74
|
* options={[
|
|
75
75
|
* { value: '1', label: 'Option 1' },
|
|
@@ -90,11 +90,11 @@ export type DropdownProps<T extends DropdownOption = DropdownOption> = CommonPro
|
|
|
90
90
|
* );
|
|
91
91
|
* }
|
|
92
92
|
*
|
|
93
|
-
* @name
|
|
93
|
+
* @name Select
|
|
94
94
|
*/
|
|
95
|
-
declare function
|
|
96
|
-
declare namespace
|
|
95
|
+
declare function Select({ options, value: selected, onChange, 'aria-label': ariaLabel, placeholder, size, itemCount, disabled, id: propId, invalid, errorMessage, readOnly, placement, name, isMulti, renderListItem, style: styleProp, selectAll, }: SelectProps): import("react/jsx-runtime").JSX.Element;
|
|
96
|
+
declare namespace Select {
|
|
97
97
|
var bspkName: string;
|
|
98
98
|
}
|
|
99
|
-
export {
|
|
99
|
+
export { Select };
|
|
100
100
|
/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
|
package/dist/Select.js
ADDED
|
@@ -0,0 +1,68 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
+
import { SvgChevronRight } from '@bspk/icons/ChevronRight';
|
|
3
|
+
import { styleAdd } from './utils/styleAdd';
|
|
4
|
+
styleAdd(`[data-bspk=select]{--select-background: var(--surface-neutral-t1-base);--select-border-color: var(--stroke-neutral-base);--select-text-color: var(--foreground-neutral-on-surface);--select-height: var(--spacing-sizing-10);--select-font: var(--body-base);--select-clear-height: var(--spacing-sizing-05);--select-padding: var(--spacing-sizing-03);--select-icon-width: var(--spacing-sizing-05);position:relative;width:100%;max-width:280px;outline:unset;min-height:var(--select-height);max-height:var(--select-height);display:flex;flex-direction:row;gap:var(--spacing-sizing-02);flex-grow:0;flex-shrink:0;text-align:left;font:var(--select-font);border:1px solid var(--select-border-color);border-radius:var(--radius-small);background:var(--select-background);padding:0 var(--select-padding)}[data-bspk=select] [data-placeholder]{display:block;max-width:100%;text-overflow:ellipsis;overflow:hidden;padding:0}[data-bspk=select] [data-placeholder] [data-inner]{min-height:auto;padding:0}[data-bspk=select] [data-placeholder] [data-item-label] [data-text]{color:var(--select-text-color)}[data-bspk=select] [data-icon]{display:flex;flex-direction:column;justify-content:center}[data-bspk=select] [data-icon] svg{transform:rotate(90deg);width:var(--select-icon-width)}[data-bspk=select] [data-bspk=list-item][data-selected]{background:var(--surface-brand-primary-highlight)}[data-bspk=select][data-size=small]{--select-height: var(--spacing-sizing-08);--select-font: var(--body-small);--select-clear-height: var(--spacing-sizing-05);--select-padding: var(--spacing-sizing-02);--select-icon-width: var(--spacing-sizing-05)}[data-bspk=select][data-size=large]{--select-height: var(--spacing-sizing-12);--select-font: var(--body-large);--select-clear-height: var(--spacing-sizing-06);--select-icon-width: var(--spacing-sizing-06)}[data-bspk=select]:disabled{--select-text-color: var(--foreground-neutral-disabled-on-surface);--select-border-color: var(--stroke-neutral-disabled-light);--select-background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=select]:disabled[aria-readonly]:not([data-empty]){--select-text-color: var(--foreground-neutral-on-surface)}[data-bspk=select]:not(:disabled):focus{--select-border-color: var(--stroke-brand-primary)}[data-bspk=select]:not(:disabled):hover{--select-background: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=select]:not(:disabled):active{--select-background: linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=select][data-invalid]{--select-border-color: var(--status-error)}[data-bspk=select][data-empty]{--select-text-color: var(--foreground-neutral-on-surface-variant-03)}`);;
|
|
5
|
+
import { ListItem } from './ListItem';
|
|
6
|
+
import { Menu } from './Menu';
|
|
7
|
+
import { Portal } from './Portal';
|
|
8
|
+
import { useFloatingMenu } from './hooks/useFloatingMenu';
|
|
9
|
+
import { useId } from './hooks/useId';
|
|
10
|
+
/**
|
|
11
|
+
* A field element that allows users to select one option from a list of available choices. *
|
|
12
|
+
*
|
|
13
|
+
* @example
|
|
14
|
+
* import { Select } from '@bspk/ui/Select';
|
|
15
|
+
*
|
|
16
|
+
* export function Example() {
|
|
17
|
+
* const [selected, setSelected] = React.useState<string[]>([]);
|
|
18
|
+
* return (
|
|
19
|
+
* <Select
|
|
20
|
+
* aria-label="Select an option"
|
|
21
|
+
* itemCount={5}
|
|
22
|
+
* name="example-select"
|
|
23
|
+
* onChange={setSelected}
|
|
24
|
+
* options={[
|
|
25
|
+
* { value: '1', label: 'Option 1' },
|
|
26
|
+
* { value: '2', label: 'Option 2' },
|
|
27
|
+
* { value: '3', label: 'Option 3' },
|
|
28
|
+
* { value: '4', label: 'Option 4' },
|
|
29
|
+
* { value: '5', label: 'Option 5' },
|
|
30
|
+
* { value: '6', label: 'Option 6' },
|
|
31
|
+
* { value: '7', label: 'Option 7' },
|
|
32
|
+
* { value: '8', label: 'Option 8' },
|
|
33
|
+
* { value: '9', label: 'Option 9' },
|
|
34
|
+
* { value: '10', label: 'Option 10' },
|
|
35
|
+
* ]}
|
|
36
|
+
* placeholder="Select an option"
|
|
37
|
+
* size="medium"
|
|
38
|
+
* value={selected}
|
|
39
|
+
* />
|
|
40
|
+
* );
|
|
41
|
+
* }
|
|
42
|
+
*
|
|
43
|
+
* @name Select
|
|
44
|
+
*/
|
|
45
|
+
function Select({ options = [], value: selected, onChange, 'aria-label': ariaLabel, placeholder = 'Select...', size = 'medium', itemCount = 5, disabled, id: propId, invalid, errorMessage, readOnly, placement = 'bottom', name, isMulti, renderListItem, style: styleProp, selectAll, }) {
|
|
46
|
+
const id = useId(propId);
|
|
47
|
+
const { triggerProps, menuProps, closeMenu } = useFloatingMenu({
|
|
48
|
+
placement,
|
|
49
|
+
triggerProps: {
|
|
50
|
+
disabled,
|
|
51
|
+
invalid,
|
|
52
|
+
readOnly,
|
|
53
|
+
errorMessage,
|
|
54
|
+
},
|
|
55
|
+
});
|
|
56
|
+
const selectLabel = isMulti
|
|
57
|
+
? `${selected?.length || 0} option${selected?.length !== 1 ? 's' : ''} selected`
|
|
58
|
+
: options.find((o) => o.value === selected?.[0])?.label;
|
|
59
|
+
return (_jsxs(_Fragment, { children: [_jsx("input", { defaultValue: selected, name: name, type: "hidden" }), _jsxs("button", { "aria-label": ariaLabel, "data-bspk": "select", "data-empty": selectLabel ? undefined : '', "data-invalid": invalid || undefined, "data-size": size, disabled: disabled || readOnly, id: id, style: styleProp, ...triggerProps, children: [_jsx(ListItem, { "data-placeholder": "", label: selectLabel || placeholder, readOnly: true }), _jsx("span", { "data-icon": true, children: _jsx(SvgChevronRight, {}) })] }), _jsx(Portal, { children: _jsx(Menu, { "data-floating": true, isMulti: isMulti, itemCount: itemCount, items: options, onChange: (next, event) => {
|
|
60
|
+
event?.preventDefault();
|
|
61
|
+
if (!isMulti)
|
|
62
|
+
closeMenu();
|
|
63
|
+
onChange?.(next);
|
|
64
|
+
}, renderListItem: renderListItem, selectAll: selectAll, selectedValues: selected, ...menuProps }) })] }));
|
|
65
|
+
}
|
|
66
|
+
Select.bspkName = 'Select';
|
|
67
|
+
export { Select };
|
|
68
|
+
//# sourceMappingURL=Select.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../src/Select.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,eAAe,CAAC;AACvB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAiEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,SAAS,MAAM,CAAC,EACZ,OAAO,GAAG,EAAE,EACZ,KAAK,EAAE,QAAQ,EACf,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,WAAW,GAAG,WAAW,EACzB,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,CAAC,EACb,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,SAAS,GAAG,QAAQ,EACpB,IAAI,EACJ,OAAO,EACP,cAAc,EACd,KAAK,EAAE,SAAS,EAChB,SAAS,GACC;IACV,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,eAAe,CAAC;QAC3D,SAAS;QACT,YAAY,EAAE;YACV,QAAQ;YACR,OAAO;YACP,QAAQ;YACR,YAAY;SACf;KACJ,CAAC,CAAC;IAEH,MAAM,WAAW,GAAG,OAAO;QACvB,CAAC,CAAC,GAAG,QAAQ,EAAE,MAAM,IAAI,CAAC,UAAU,QAAQ,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,WAAW;QAChF,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC;IAE5D,OAAO,CACH,8BACI,gBAAO,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,QAAQ,GAAG,EAC3D,gCACgB,SAAS,eACX,QAAQ,gBACN,WAAW,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,kBAC1B,OAAO,IAAI,SAAS,eACvB,IAAI,EACf,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,SAAS,KACZ,YAAY,aAEhB,KAAC,QAAQ,wBAAkB,EAAE,EAAC,KAAK,EAAE,WAAW,IAAI,WAAW,EAAE,QAAQ,SAAG,EAC5E,4CACI,KAAC,eAAe,KAAG,GAChB,IACF,EACT,KAAC,MAAM,cACH,KAAC,IAAI,2BAED,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;wBACtB,KAAK,EAAE,cAAc,EAAE,CAAC;wBACxB,IAAI,CAAC,OAAO;4BAAE,SAAS,EAAE,CAAC;wBAC1B,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;oBACrB,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,QAAQ,KACpB,SAAS,GACf,GACG,IACV,CACN,CAAC;AACN,CAAC;AAED,MAAM,CAAC,QAAQ,GAAG,QAAQ,CAAC;AAE3B,OAAO,EAAE,MAAM,EAAE,CAAC"}
|
|
@@ -1,18 +1,18 @@
|
|
|
1
|
-
import { DropdownProps } from './Dropdown';
|
|
2
1
|
import { FormFieldProps } from './FormField';
|
|
3
|
-
|
|
2
|
+
import { SelectProps } from './Select';
|
|
3
|
+
export type SelectFieldProps = Pick<SelectProps, 'disabled' | 'itemCount' | 'name' | 'onChange' | 'options' | 'placeholder' | 'placement' | 'readOnly' | 'size' | 'value'> & Pick<FormFieldProps, 'controlId' | 'errorMessage' | 'helperText' | 'label' | 'labelTrailing' | 'required'>;
|
|
4
4
|
/**
|
|
5
5
|
* A component that allows users to input large amounts of text that could span multiple lines.
|
|
6
6
|
*
|
|
7
|
-
* This component takes properties from the FormField and
|
|
7
|
+
* This component takes properties from the FormField and Select components.
|
|
8
8
|
*
|
|
9
9
|
* @example
|
|
10
|
-
* import {
|
|
10
|
+
* import { SelectField } from '@bspk/ui/SelectField';
|
|
11
11
|
*
|
|
12
12
|
* export function Example() {
|
|
13
13
|
* const [state, setState] = React.useState(['option1']);
|
|
14
14
|
* return (
|
|
15
|
-
* <
|
|
15
|
+
* <SelectField
|
|
16
16
|
* controlId="Example controlId"
|
|
17
17
|
* label="Example label"
|
|
18
18
|
* name="Example name"
|
|
@@ -28,11 +28,11 @@ export type DropdownFieldProps = Pick<DropdownProps, 'disabled' | 'itemCount' |
|
|
|
28
28
|
* );
|
|
29
29
|
* }
|
|
30
30
|
*
|
|
31
|
-
* @name
|
|
31
|
+
* @name SelectField
|
|
32
32
|
*/
|
|
33
|
-
declare function
|
|
34
|
-
declare namespace
|
|
33
|
+
declare function SelectField({ label, errorMessage: errorMessageProp, helperText, controlId: id, labelTrailing, required, ...selectProps }: SelectFieldProps): import("react/jsx-runtime").JSX.Element;
|
|
34
|
+
declare namespace SelectField {
|
|
35
35
|
var bspkName: string;
|
|
36
36
|
}
|
|
37
|
-
export {
|
|
37
|
+
export { SelectField };
|
|
38
38
|
/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { FormField } from './FormField';
|
|
3
|
+
import { Select } from './Select';
|
|
4
|
+
/**
|
|
5
|
+
* A component that allows users to input large amounts of text that could span multiple lines.
|
|
6
|
+
*
|
|
7
|
+
* This component takes properties from the FormField and Select components.
|
|
8
|
+
*
|
|
9
|
+
* @example
|
|
10
|
+
* import { SelectField } from '@bspk/ui/SelectField';
|
|
11
|
+
*
|
|
12
|
+
* export function Example() {
|
|
13
|
+
* const [state, setState] = React.useState(['option1']);
|
|
14
|
+
* return (
|
|
15
|
+
* <SelectField
|
|
16
|
+
* controlId="Example controlId"
|
|
17
|
+
* label="Example label"
|
|
18
|
+
* name="Example name"
|
|
19
|
+
* onChange={(nextValue) => setState(nextValue)}
|
|
20
|
+
* options={[
|
|
21
|
+
* { label: 'Option 1', value: 'option1' },
|
|
22
|
+
* { label: 'Option 2', value: 'option2' },
|
|
23
|
+
* { label: 'Option 3', value: 'option3' },
|
|
24
|
+
* ]}
|
|
25
|
+
* placeholder="Select one..."
|
|
26
|
+
* value={state}
|
|
27
|
+
* />
|
|
28
|
+
* );
|
|
29
|
+
* }
|
|
30
|
+
*
|
|
31
|
+
* @name SelectField
|
|
32
|
+
*/
|
|
33
|
+
function SelectField({ label, errorMessage: errorMessageProp, helperText, controlId: id, labelTrailing, required, ...selectProps }) {
|
|
34
|
+
const errorMessage = (!selectProps.readOnly && !selectProps.disabled && errorMessageProp) || undefined;
|
|
35
|
+
return (_jsx(FormField, { controlId: id, "data-bspk": "select-field", errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => (_jsx(Select, { ...selectProps, ...fieldProps, "aria-label": label, id: id, invalid: !!errorMessage })) }));
|
|
36
|
+
}
|
|
37
|
+
SelectField.bspkName = 'SelectField';
|
|
38
|
+
export { SelectField };
|
|
39
|
+
//# sourceMappingURL=SelectField.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SelectField.js","sourceRoot":"","sources":["../src/SelectField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAkB,SAAS,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,EAAe,MAAM,EAAE,MAAM,UAAU,CAAC;AAiB/C;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,SAAS,WAAW,CAAC,EACjB,KAAK,EACL,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EACV,SAAS,EAAE,EAAE,EACb,aAAa,EACb,QAAQ,EACR,GAAG,WAAW,EACC;IACf,MAAM,YAAY,GAAG,CAAC,CAAC,WAAW,CAAC,QAAQ,IAAI,CAAC,WAAW,CAAC,QAAQ,IAAI,gBAAgB,CAAC,IAAI,SAAS,CAAC;IAEvG,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,EAAE,eACH,cAAc,EACxB,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,CACb,KAAC,MAAM,OAAK,WAAW,KAAM,UAAU,gBAAc,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,YAAY,GAAI,CAClG,GACO,CACf,CAAC;AACN,CAAC;AAED,WAAW,CAAC,QAAQ,GAAG,aAAa,CAAC;AAErC,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
package/dist/demo/examples.js
CHANGED
|
@@ -156,7 +156,7 @@ export const examples = (setState, action) => ({
|
|
|
156
156
|
}, children: [_jsx(ExamplePlaceholder, { direction: props.orientation !== 'vertical' ? 'row' : 'column', style: style }), _jsx(Component, { ...props }), _jsx(ExamplePlaceholder, { direction: props.orientation !== 'vertical' ? 'row' : 'column', style: style })] }));
|
|
157
157
|
},
|
|
158
158
|
},
|
|
159
|
-
|
|
159
|
+
Select: {
|
|
160
160
|
presets: setPresets(() => {
|
|
161
161
|
return [
|
|
162
162
|
{
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"examples.js","sourceRoot":"","sources":["../../src/demo/examples.tsx"],"names":[],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"examples.js","sourceRoot":"","sources":["../../src/demo/examples.tsx"],"names":[],"mappings":"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"}
|
|
@@ -2,7 +2,7 @@ import { useState } from 'react';
|
|
|
2
2
|
import { EVENT_KEY } from '../utils/keyboard';
|
|
3
3
|
import { scrollElementIntoView } from '../utils/scrollElementIntoView';
|
|
4
4
|
/**
|
|
5
|
-
* This hook provides keyboard navigation for a list of elements. Used inside the
|
|
5
|
+
* This hook provides keyboard navigation for a list of elements. Used inside the Select component.
|
|
6
6
|
*
|
|
7
7
|
* @example
|
|
8
8
|
* import { useRef } from 'react';
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* A hook which calls a method when a click occurs outside of the provided ref. Used inside the
|
|
2
|
+
* A hook which calls a method when a click occurs outside of the provided ref. Used inside the DropDown and Modal
|
|
3
3
|
* components.
|
|
4
4
|
*
|
|
5
5
|
* @example
|
|
6
6
|
* import { useOutsideClick } from '@bspk/ui/hooks/useOutsideClick';
|
|
7
7
|
* import React, { useRef, useState } from 'react';
|
|
8
8
|
*
|
|
9
|
-
* export function
|
|
9
|
+
* export function Example() {
|
|
10
10
|
* const [isOpen, setIsOpen] = useState(false);
|
|
11
11
|
* const containerRef = useRef<HTMLDivElement>(null);
|
|
12
12
|
*
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { useEffect } from 'react';
|
|
2
2
|
/**
|
|
3
|
-
* A hook which calls a method when a click occurs outside of the provided ref. Used inside the
|
|
3
|
+
* A hook which calls a method when a click occurs outside of the provided ref. Used inside the DropDown and Modal
|
|
4
4
|
* components.
|
|
5
5
|
*
|
|
6
6
|
* @example
|
|
7
7
|
* import { useOutsideClick } from '@bspk/ui/hooks/useOutsideClick';
|
|
8
8
|
* import React, { useRef, useState } from 'react';
|
|
9
9
|
*
|
|
10
|
-
* export function
|
|
10
|
+
* export function Example() {
|
|
11
11
|
* const [isOpen, setIsOpen] = useState(false);
|
|
12
12
|
* const containerRef = useRef<HTMLDivElement>(null);
|
|
13
13
|
*
|
package/dist/select.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
[data-bspk=select]{--select-background: var(--surface-neutral-t1-base);--select-border-color: var(--stroke-neutral-base);--select-text-color: var(--foreground-neutral-on-surface);--select-height: var(--spacing-sizing-10);--select-font: var(--body-base);--select-clear-height: var(--spacing-sizing-05);--select-padding: var(--spacing-sizing-03);--select-icon-width: var(--spacing-sizing-05);position:relative;width:100%;max-width:280px;outline:unset;min-height:var(--select-height);max-height:var(--select-height);display:flex;flex-direction:row;gap:var(--spacing-sizing-02);flex-grow:0;flex-shrink:0;text-align:left;font:var(--select-font);border:1px solid var(--select-border-color);border-radius:var(--radius-small);background:var(--select-background);padding:0 var(--select-padding)}[data-bspk=select] [data-placeholder]{display:block;max-width:100%;text-overflow:ellipsis;overflow:hidden;padding:0}[data-bspk=select] [data-placeholder] [data-inner]{min-height:auto;padding:0}[data-bspk=select] [data-placeholder] [data-item-label] [data-text]{color:var(--select-text-color)}[data-bspk=select] [data-icon]{display:flex;flex-direction:column;justify-content:center}[data-bspk=select] [data-icon] svg{transform:rotate(90deg);width:var(--select-icon-width)}[data-bspk=select] [data-bspk=list-item][data-selected]{background:var(--surface-brand-primary-highlight)}[data-bspk=select][data-size=small]{--select-height: var(--spacing-sizing-08);--select-font: var(--body-small);--select-clear-height: var(--spacing-sizing-05);--select-padding: var(--spacing-sizing-02);--select-icon-width: var(--spacing-sizing-05)}[data-bspk=select][data-size=large]{--select-height: var(--spacing-sizing-12);--select-font: var(--body-large);--select-clear-height: var(--spacing-sizing-06);--select-icon-width: var(--spacing-sizing-06)}[data-bspk=select]:disabled{--select-text-color: var(--foreground-neutral-disabled-on-surface);--select-border-color: var(--stroke-neutral-disabled-light);--select-background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=select]:disabled[aria-readonly]:not([data-empty]){--select-text-color: var(--foreground-neutral-on-surface)}[data-bspk=select]:not(:disabled):focus{--select-border-color: var(--stroke-brand-primary)}[data-bspk=select]:not(:disabled):hover{--select-background: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=select]:not(:disabled):active{--select-background: linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=select][data-invalid]{--select-border-color: var(--status-error)}[data-bspk=select][data-empty]{--select-text-color: var(--foreground-neutral-on-surface-variant-03)}
|
package/package.json
CHANGED
package/src/FormField.tsx
CHANGED
|
@@ -29,7 +29,7 @@ export type FormFieldProps = CommonProps<'required'> &
|
|
|
29
29
|
/** The id of the control. */
|
|
30
30
|
controlId: string;
|
|
31
31
|
/**
|
|
32
|
-
* The children of the form field. This should be a control such as TextInput,
|
|
32
|
+
* The children of the form field. This should be a control such as TextInput, Select, DatePicker, or
|
|
33
33
|
* TimePicker.
|
|
34
34
|
*
|
|
35
35
|
* @type (childProps: FieldControlProps) => JSX.Element
|
|
@@ -45,7 +45,7 @@ export type FormFieldProps = CommonProps<'required'> &
|
|
|
45
45
|
/**
|
|
46
46
|
* Wrapper component for form controls.
|
|
47
47
|
*
|
|
48
|
-
* Children may be one of the following: TextInput,
|
|
48
|
+
* Children may be one of the following: TextInput, Select, DatePicker, or TimePicker.
|
|
49
49
|
*
|
|
50
50
|
* @example
|
|
51
51
|
* import { TextInput } from '@bspk/ui/TextInput';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { SvgChevronRight } from '@bspk/icons/ChevronRight';
|
|
2
2
|
|
|
3
|
-
import './
|
|
3
|
+
import './select.scss';
|
|
4
4
|
import { ListItem } from './ListItem';
|
|
5
5
|
import { Menu, MenuProps } from './Menu';
|
|
6
6
|
import { Portal } from './Portal';
|
|
@@ -10,20 +10,20 @@ import { useId } from './hooks/useId';
|
|
|
10
10
|
|
|
11
11
|
import { CommonProps, InvalidPropsLibrary } from './';
|
|
12
12
|
|
|
13
|
-
export type
|
|
13
|
+
export type SelectOption = Record<string, unknown> & {
|
|
14
14
|
/** The value of the option. */
|
|
15
15
|
value: string;
|
|
16
16
|
/** The label of the option. This is the text that will be displayed on the option. */
|
|
17
17
|
label: string;
|
|
18
18
|
};
|
|
19
19
|
|
|
20
|
-
export type
|
|
20
|
+
export type SelectProps<T extends SelectOption = SelectOption> = CommonProps<
|
|
21
21
|
'aria-label' | 'disabled' | 'id' | 'name' | 'readOnly' | 'size'
|
|
22
22
|
> &
|
|
23
23
|
InvalidPropsLibrary &
|
|
24
24
|
Pick<MenuProps<T>, 'isMulti' | 'itemCount' | 'renderListItem' | 'selectAll'> & {
|
|
25
25
|
/**
|
|
26
|
-
* Array of options to display in the
|
|
26
|
+
* Array of options to display in the select
|
|
27
27
|
*
|
|
28
28
|
* @example
|
|
29
29
|
* [
|
|
@@ -39,7 +39,7 @@ export type DropdownProps<T extends DropdownOption = DropdownOption> = CommonPro
|
|
|
39
39
|
* { value: '10', label: 'Option 10' },
|
|
40
40
|
* ];
|
|
41
41
|
*
|
|
42
|
-
* @type Array<
|
|
42
|
+
* @type Array<SelectOption>
|
|
43
43
|
* @required
|
|
44
44
|
*/
|
|
45
45
|
options: T[];
|
|
@@ -50,18 +50,18 @@ export type DropdownProps<T extends DropdownOption = DropdownOption> = CommonPro
|
|
|
50
50
|
*/
|
|
51
51
|
value?: Array<string>;
|
|
52
52
|
/**
|
|
53
|
-
* Placeholder for the
|
|
53
|
+
* Placeholder for the select
|
|
54
54
|
*
|
|
55
55
|
* @default Select one...
|
|
56
56
|
*/
|
|
57
57
|
placeholder?: string;
|
|
58
58
|
/**
|
|
59
|
-
* The placement of the
|
|
59
|
+
* The placement of the select menu. Will be ignored if the menu is too close to the edge of the screen.
|
|
60
60
|
*
|
|
61
61
|
* @default bottom
|
|
62
62
|
*/
|
|
63
63
|
placement?: Extract<Placement, 'bottom' | 'top'>;
|
|
64
|
-
/** The style of the
|
|
64
|
+
/** The style of the select. */
|
|
65
65
|
style?: React.CSSProperties;
|
|
66
66
|
/**
|
|
67
67
|
* The function to call when the selected values change.
|
|
@@ -75,15 +75,15 @@ export type DropdownProps<T extends DropdownOption = DropdownOption> = CommonPro
|
|
|
75
75
|
* A field element that allows users to select one option from a list of available choices. *
|
|
76
76
|
*
|
|
77
77
|
* @example
|
|
78
|
-
* import {
|
|
78
|
+
* import { Select } from '@bspk/ui/Select';
|
|
79
79
|
*
|
|
80
80
|
* export function Example() {
|
|
81
81
|
* const [selected, setSelected] = React.useState<string[]>([]);
|
|
82
82
|
* return (
|
|
83
|
-
* <
|
|
83
|
+
* <Select
|
|
84
84
|
* aria-label="Select an option"
|
|
85
85
|
* itemCount={5}
|
|
86
|
-
* name="example-
|
|
86
|
+
* name="example-select"
|
|
87
87
|
* onChange={setSelected}
|
|
88
88
|
* options={[
|
|
89
89
|
* { value: '1', label: 'Option 1' },
|
|
@@ -104,9 +104,9 @@ export type DropdownProps<T extends DropdownOption = DropdownOption> = CommonPro
|
|
|
104
104
|
* );
|
|
105
105
|
* }
|
|
106
106
|
*
|
|
107
|
-
* @name
|
|
107
|
+
* @name Select
|
|
108
108
|
*/
|
|
109
|
-
function
|
|
109
|
+
function Select({
|
|
110
110
|
options = [],
|
|
111
111
|
value: selected,
|
|
112
112
|
onChange,
|
|
@@ -125,7 +125,7 @@ function Dropdown({
|
|
|
125
125
|
renderListItem,
|
|
126
126
|
style: styleProp,
|
|
127
127
|
selectAll,
|
|
128
|
-
}:
|
|
128
|
+
}: SelectProps) {
|
|
129
129
|
const id = useId(propId);
|
|
130
130
|
|
|
131
131
|
const { triggerProps, menuProps, closeMenu } = useFloatingMenu({
|
|
@@ -138,7 +138,7 @@ function Dropdown({
|
|
|
138
138
|
},
|
|
139
139
|
});
|
|
140
140
|
|
|
141
|
-
const
|
|
141
|
+
const selectLabel = isMulti
|
|
142
142
|
? `${selected?.length || 0} option${selected?.length !== 1 ? 's' : ''} selected`
|
|
143
143
|
: options.find((o) => o.value === selected?.[0])?.label;
|
|
144
144
|
|
|
@@ -147,8 +147,8 @@ function Dropdown({
|
|
|
147
147
|
<input defaultValue={selected} name={name} type="hidden" />
|
|
148
148
|
<button
|
|
149
149
|
aria-label={ariaLabel}
|
|
150
|
-
data-bspk="
|
|
151
|
-
data-empty={
|
|
150
|
+
data-bspk="select"
|
|
151
|
+
data-empty={selectLabel ? undefined : ''}
|
|
152
152
|
data-invalid={invalid || undefined}
|
|
153
153
|
data-size={size}
|
|
154
154
|
disabled={disabled || readOnly}
|
|
@@ -156,8 +156,8 @@ function Dropdown({
|
|
|
156
156
|
style={styleProp}
|
|
157
157
|
{...triggerProps}
|
|
158
158
|
>
|
|
159
|
-
<ListItem data-placeholder="" label={
|
|
160
|
-
<span data-
|
|
159
|
+
<ListItem data-placeholder="" label={selectLabel || placeholder} readOnly />
|
|
160
|
+
<span data-icon>
|
|
161
161
|
<SvgChevronRight />
|
|
162
162
|
</span>
|
|
163
163
|
</button>
|
|
@@ -182,8 +182,8 @@ function Dropdown({
|
|
|
182
182
|
);
|
|
183
183
|
}
|
|
184
184
|
|
|
185
|
-
|
|
185
|
+
Select.bspkName = 'Select';
|
|
186
186
|
|
|
187
|
-
export {
|
|
187
|
+
export { Select };
|
|
188
188
|
|
|
189
189
|
/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { DropdownProps, Dropdown } from './Dropdown';
|
|
2
1
|
import { FormFieldProps, FormField } from './FormField';
|
|
2
|
+
import { SelectProps, Select } from './Select';
|
|
3
3
|
|
|
4
|
-
export type
|
|
5
|
-
|
|
4
|
+
export type SelectFieldProps = Pick<
|
|
5
|
+
SelectProps,
|
|
6
6
|
| 'disabled'
|
|
7
7
|
| 'itemCount'
|
|
8
8
|
| 'name'
|
|
@@ -19,15 +19,15 @@ export type DropdownFieldProps = Pick<
|
|
|
19
19
|
/**
|
|
20
20
|
* A component that allows users to input large amounts of text that could span multiple lines.
|
|
21
21
|
*
|
|
22
|
-
* This component takes properties from the FormField and
|
|
22
|
+
* This component takes properties from the FormField and Select components.
|
|
23
23
|
*
|
|
24
24
|
* @example
|
|
25
|
-
* import {
|
|
25
|
+
* import { SelectField } from '@bspk/ui/SelectField';
|
|
26
26
|
*
|
|
27
27
|
* export function Example() {
|
|
28
28
|
* const [state, setState] = React.useState(['option1']);
|
|
29
29
|
* return (
|
|
30
|
-
* <
|
|
30
|
+
* <SelectField
|
|
31
31
|
* controlId="Example controlId"
|
|
32
32
|
* label="Example label"
|
|
33
33
|
* name="Example name"
|
|
@@ -43,23 +43,23 @@ export type DropdownFieldProps = Pick<
|
|
|
43
43
|
* );
|
|
44
44
|
* }
|
|
45
45
|
*
|
|
46
|
-
* @name
|
|
46
|
+
* @name SelectField
|
|
47
47
|
*/
|
|
48
|
-
function
|
|
48
|
+
function SelectField({
|
|
49
49
|
label,
|
|
50
50
|
errorMessage: errorMessageProp,
|
|
51
51
|
helperText,
|
|
52
52
|
controlId: id,
|
|
53
53
|
labelTrailing,
|
|
54
54
|
required,
|
|
55
|
-
...
|
|
56
|
-
}:
|
|
57
|
-
const errorMessage = (!
|
|
55
|
+
...selectProps
|
|
56
|
+
}: SelectFieldProps) {
|
|
57
|
+
const errorMessage = (!selectProps.readOnly && !selectProps.disabled && errorMessageProp) || undefined;
|
|
58
58
|
|
|
59
59
|
return (
|
|
60
60
|
<FormField
|
|
61
61
|
controlId={id}
|
|
62
|
-
data-bspk="
|
|
62
|
+
data-bspk="select-field"
|
|
63
63
|
errorMessage={errorMessage}
|
|
64
64
|
helperText={helperText}
|
|
65
65
|
label={label}
|
|
@@ -67,14 +67,14 @@ function DropdownField({
|
|
|
67
67
|
required={required}
|
|
68
68
|
>
|
|
69
69
|
{(fieldProps) => (
|
|
70
|
-
<
|
|
70
|
+
<Select {...selectProps} {...fieldProps} aria-label={label} id={id} invalid={!!errorMessage} />
|
|
71
71
|
)}
|
|
72
72
|
</FormField>
|
|
73
73
|
);
|
|
74
74
|
}
|
|
75
75
|
|
|
76
|
-
|
|
76
|
+
SelectField.bspkName = 'SelectField';
|
|
77
77
|
|
|
78
|
-
export {
|
|
78
|
+
export { SelectField };
|
|
79
79
|
|
|
80
80
|
/** Copyright 2025 Anywhere Real Estate - CC BY 4.0 */
|
package/src/demo/examples.tsx
CHANGED
|
@@ -12,7 +12,6 @@ import { BadgeProps } from '../Badge';
|
|
|
12
12
|
import { BannerAlertProps } from '../BannerAlert';
|
|
13
13
|
import { Button, ButtonProps } from '../Button';
|
|
14
14
|
import { Checkbox } from '../Checkbox';
|
|
15
|
-
import { DropdownOption, DropdownProps } from '../Dropdown';
|
|
16
15
|
import { EmptyStateProps } from '../EmptyState';
|
|
17
16
|
import { Img } from '../Img';
|
|
18
17
|
import { LEADING_COMPONENTS, TRAILING_COMPONENTS, ListItem } from '../ListItem';
|
|
@@ -23,6 +22,7 @@ import { ProgressionStepperProps } from '../ProgressionStepper';
|
|
|
23
22
|
import { Radio } from '../Radio';
|
|
24
23
|
import { SearchBarProps } from '../SearchBar';
|
|
25
24
|
import { SegmentedControlProps } from '../SegmentedControl';
|
|
25
|
+
import { SelectOption, SelectProps } from '../Select';
|
|
26
26
|
import { Switch } from '../Switch';
|
|
27
27
|
import { TabGroupProps } from '../TabGroup';
|
|
28
28
|
import { Tag } from '../Tag';
|
|
@@ -309,8 +309,8 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
|
|
|
309
309
|
);
|
|
310
310
|
},
|
|
311
311
|
},
|
|
312
|
-
|
|
313
|
-
presets: setPresets<
|
|
312
|
+
Select: {
|
|
313
|
+
presets: setPresets<SelectProps>(() => {
|
|
314
314
|
return [
|
|
315
315
|
{
|
|
316
316
|
label: 'Simple',
|
|
@@ -322,7 +322,7 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
|
|
|
322
322
|
},
|
|
323
323
|
{
|
|
324
324
|
label: 'Trailing Tags',
|
|
325
|
-
state: asProps<
|
|
325
|
+
state: asProps<SelectProps<SelectOption & { tag?: string; tagColor?: ColorVariant }>>({
|
|
326
326
|
options: [
|
|
327
327
|
//
|
|
328
328
|
{ value: 'a', label: 'Package A', tag: 'Recommended', tagColor: 'blue' },
|
|
@@ -344,7 +344,7 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
|
|
|
344
344
|
},
|
|
345
345
|
{
|
|
346
346
|
label: 'Trailing Text',
|
|
347
|
-
state: asProps<
|
|
347
|
+
state: asProps<SelectProps<SelectOption & { price: number }>>({
|
|
348
348
|
options: [
|
|
349
349
|
//
|
|
350
350
|
{ value: '1', label: 'Option A', price: 400 },
|
|
@@ -367,7 +367,7 @@ export const examples: (setState: DemoSetState, action: DemoAction) => Record<st
|
|
|
367
367
|
{
|
|
368
368
|
label: 'Leading Avatar',
|
|
369
369
|
state: asProps<
|
|
370
|
-
|
|
370
|
+
SelectProps<
|
|
371
371
|
MenuItem & {
|
|
372
372
|
profile: AvatarProps;
|
|
373
373
|
}
|
|
@@ -4,7 +4,7 @@ import { EVENT_KEY } from '../utils/keyboard';
|
|
|
4
4
|
import { scrollElementIntoView } from '../utils/scrollElementIntoView';
|
|
5
5
|
|
|
6
6
|
/**
|
|
7
|
-
* This hook provides keyboard navigation for a list of elements. Used inside the
|
|
7
|
+
* This hook provides keyboard navigation for a list of elements. Used inside the Select component.
|
|
8
8
|
*
|
|
9
9
|
* @example
|
|
10
10
|
* import { useRef } from 'react';
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { useEffect } from 'react';
|
|
2
2
|
/**
|
|
3
|
-
* A hook which calls a method when a click occurs outside of the provided ref. Used inside the
|
|
3
|
+
* A hook which calls a method when a click occurs outside of the provided ref. Used inside the DropDown and Modal
|
|
4
4
|
* components.
|
|
5
5
|
*
|
|
6
6
|
* @example
|
|
7
7
|
* import { useOutsideClick } from '@bspk/ui/hooks/useOutsideClick';
|
|
8
8
|
* import React, { useRef, useState } from 'react';
|
|
9
9
|
*
|
|
10
|
-
* export function
|
|
10
|
+
* export function Example() {
|
|
11
11
|
* const [isOpen, setIsOpen] = useState(false);
|
|
12
12
|
* const containerRef = useRef<HTMLDivElement>(null);
|
|
13
13
|
*
|
|
@@ -1,32 +1,32 @@
|
|
|
1
|
-
[data-bspk='
|
|
1
|
+
[data-bspk='select'] {
|
|
2
2
|
// default -- size medium not disabled or readonly
|
|
3
3
|
|
|
4
|
-
--
|
|
5
|
-
--
|
|
6
|
-
--
|
|
7
|
-
--
|
|
8
|
-
--
|
|
9
|
-
--
|
|
10
|
-
--
|
|
11
|
-
--
|
|
4
|
+
--select-background: var(--surface-neutral-t1-base);
|
|
5
|
+
--select-border-color: var(--stroke-neutral-base);
|
|
6
|
+
--select-text-color: var(--foreground-neutral-on-surface);
|
|
7
|
+
--select-height: var(--spacing-sizing-10);
|
|
8
|
+
--select-font: var(--body-base);
|
|
9
|
+
--select-clear-height: var(--spacing-sizing-05);
|
|
10
|
+
--select-padding: var(--spacing-sizing-03);
|
|
11
|
+
--select-icon-width: var(--spacing-sizing-05);
|
|
12
12
|
|
|
13
13
|
position: relative;
|
|
14
14
|
width: 100%;
|
|
15
15
|
max-width: 280px;
|
|
16
16
|
outline: unset;
|
|
17
|
-
min-height: var(--
|
|
18
|
-
max-height: var(--
|
|
17
|
+
min-height: var(--select-height);
|
|
18
|
+
max-height: var(--select-height);
|
|
19
19
|
display: flex;
|
|
20
20
|
flex-direction: row;
|
|
21
21
|
gap: var(--spacing-sizing-02);
|
|
22
22
|
flex-grow: 0;
|
|
23
23
|
flex-shrink: 0;
|
|
24
24
|
text-align: left;
|
|
25
|
-
font: var(--
|
|
26
|
-
border: 1px solid var(--
|
|
25
|
+
font: var(--select-font);
|
|
26
|
+
border: 1px solid var(--select-border-color);
|
|
27
27
|
border-radius: var(--radius-small);
|
|
28
|
-
background: var(--
|
|
29
|
-
padding: 0 var(--
|
|
28
|
+
background: var(--select-background);
|
|
29
|
+
padding: 0 var(--select-padding);
|
|
30
30
|
|
|
31
31
|
[data-placeholder] {
|
|
32
32
|
display: block;
|
|
@@ -41,18 +41,18 @@
|
|
|
41
41
|
}
|
|
42
42
|
|
|
43
43
|
[data-item-label] [data-text] {
|
|
44
|
-
color: var(--
|
|
44
|
+
color: var(--select-text-color);
|
|
45
45
|
}
|
|
46
46
|
}
|
|
47
47
|
|
|
48
|
-
[data-
|
|
48
|
+
[data-icon] {
|
|
49
49
|
display: flex;
|
|
50
50
|
flex-direction: column;
|
|
51
51
|
justify-content: center;
|
|
52
52
|
|
|
53
53
|
svg {
|
|
54
54
|
transform: rotate(90deg);
|
|
55
|
-
width: var(--
|
|
55
|
+
width: var(--select-icon-width);
|
|
56
56
|
}
|
|
57
57
|
}
|
|
58
58
|
|
|
@@ -61,56 +61,56 @@
|
|
|
61
61
|
}
|
|
62
62
|
|
|
63
63
|
&[data-size='small'] {
|
|
64
|
-
--
|
|
65
|
-
--
|
|
66
|
-
--
|
|
67
|
-
--
|
|
68
|
-
--
|
|
64
|
+
--select-height: var(--spacing-sizing-08);
|
|
65
|
+
--select-font: var(--body-small);
|
|
66
|
+
--select-clear-height: var(--spacing-sizing-05);
|
|
67
|
+
--select-padding: var(--spacing-sizing-02);
|
|
68
|
+
--select-icon-width: var(--spacing-sizing-05);
|
|
69
69
|
}
|
|
70
70
|
|
|
71
71
|
&[data-size='large'] {
|
|
72
|
-
--
|
|
73
|
-
--
|
|
74
|
-
--
|
|
75
|
-
--
|
|
72
|
+
--select-height: var(--spacing-sizing-12);
|
|
73
|
+
--select-font: var(--body-large);
|
|
74
|
+
--select-clear-height: var(--spacing-sizing-06);
|
|
75
|
+
--select-icon-width: var(--spacing-sizing-06);
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
&:disabled {
|
|
79
|
-
--
|
|
80
|
-
--
|
|
81
|
-
--
|
|
79
|
+
--select-text-color: var(--foreground-neutral-disabled-on-surface);
|
|
80
|
+
--select-border-color: var(--stroke-neutral-disabled-light);
|
|
81
|
+
--select-background:
|
|
82
82
|
linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)),
|
|
83
83
|
linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
|
|
84
84
|
|
|
85
85
|
&[aria-readonly]:not([data-empty]) {
|
|
86
|
-
--
|
|
86
|
+
--select-text-color: var(--foreground-neutral-on-surface);
|
|
87
87
|
}
|
|
88
88
|
}
|
|
89
89
|
|
|
90
90
|
&:not(:disabled) {
|
|
91
91
|
&:focus {
|
|
92
|
-
--
|
|
92
|
+
--select-border-color: var(--stroke-brand-primary);
|
|
93
93
|
}
|
|
94
94
|
|
|
95
95
|
&:hover {
|
|
96
|
-
--
|
|
96
|
+
--select-background:
|
|
97
97
|
linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)),
|
|
98
98
|
linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
|
|
99
99
|
}
|
|
100
100
|
|
|
101
101
|
&:active {
|
|
102
|
-
--
|
|
102
|
+
--select-background:
|
|
103
103
|
linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)),
|
|
104
104
|
linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base));
|
|
105
105
|
}
|
|
106
106
|
}
|
|
107
107
|
|
|
108
108
|
&[data-invalid] {
|
|
109
|
-
--
|
|
109
|
+
--select-border-color: var(--status-error);
|
|
110
110
|
}
|
|
111
111
|
|
|
112
112
|
&[data-empty] {
|
|
113
|
-
--
|
|
113
|
+
--select-text-color: var(--foreground-neutral-on-surface-variant-03);
|
|
114
114
|
}
|
|
115
115
|
}
|
|
116
116
|
|
package/dist/Dropdown.js
DELETED
|
@@ -1,68 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
|
|
2
|
-
import { SvgChevronRight } from '@bspk/icons/ChevronRight';
|
|
3
|
-
import { styleAdd } from './utils/styleAdd';
|
|
4
|
-
styleAdd(`[data-bspk=dropdown]{--dropdown-background: var(--surface-neutral-t1-base);--dropdown-border-color: var(--stroke-neutral-base);--dropdown-text-color: var(--foreground-neutral-on-surface);--dropdown-height: var(--spacing-sizing-10);--dropdown-font: var(--body-base);--dropdown-clear-height: var(--spacing-sizing-05);--dropdown-padding: var(--spacing-sizing-03);--dropdown-icon-width: var(--spacing-sizing-05);position:relative;width:100%;max-width:280px;outline:unset;min-height:var(--dropdown-height);max-height:var(--dropdown-height);display:flex;flex-direction:row;gap:var(--spacing-sizing-02);flex-grow:0;flex-shrink:0;text-align:left;font:var(--dropdown-font);border:1px solid var(--dropdown-border-color);border-radius:var(--radius-small);background:var(--dropdown-background);padding:0 var(--dropdown-padding)}[data-bspk=dropdown] [data-placeholder]{display:block;max-width:100%;text-overflow:ellipsis;overflow:hidden;padding:0}[data-bspk=dropdown] [data-placeholder] [data-inner]{min-height:auto;padding:0}[data-bspk=dropdown] [data-placeholder] [data-item-label] [data-text]{color:var(--dropdown-text-color)}[data-bspk=dropdown] [data-svg]{display:flex;flex-direction:column;justify-content:center}[data-bspk=dropdown] [data-svg] svg{transform:rotate(90deg);width:var(--dropdown-icon-width)}[data-bspk=dropdown] [data-bspk=list-item][data-selected]{background:var(--surface-brand-primary-highlight)}[data-bspk=dropdown][data-size=small]{--dropdown-height: var(--spacing-sizing-08);--dropdown-font: var(--body-small);--dropdown-clear-height: var(--spacing-sizing-05);--dropdown-padding: var(--spacing-sizing-02);--dropdown-icon-width: var(--spacing-sizing-05)}[data-bspk=dropdown][data-size=large]{--dropdown-height: var(--spacing-sizing-12);--dropdown-font: var(--body-large);--dropdown-clear-height: var(--spacing-sizing-06);--dropdown-icon-width: var(--spacing-sizing-06)}[data-bspk=dropdown]:disabled{--dropdown-text-color: var(--foreground-neutral-disabled-on-surface);--dropdown-border-color: var(--stroke-neutral-disabled-light);--dropdown-background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=dropdown]:disabled[aria-readonly]:not([data-empty]){--dropdown-text-color: var(--foreground-neutral-on-surface)}[data-bspk=dropdown]:not(:disabled):focus{--dropdown-border-color: var(--stroke-brand-primary)}[data-bspk=dropdown]:not(:disabled):hover{--dropdown-background: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=dropdown]:not(:disabled):active{--dropdown-background: linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=dropdown][data-invalid]{--dropdown-border-color: var(--status-error)}[data-bspk=dropdown][data-empty]{--dropdown-text-color: var(--foreground-neutral-on-surface-variant-03)}`);;
|
|
5
|
-
import { ListItem } from './ListItem';
|
|
6
|
-
import { Menu } from './Menu';
|
|
7
|
-
import { Portal } from './Portal';
|
|
8
|
-
import { useFloatingMenu } from './hooks/useFloatingMenu';
|
|
9
|
-
import { useId } from './hooks/useId';
|
|
10
|
-
/**
|
|
11
|
-
* A field element that allows users to select one option from a list of available choices. *
|
|
12
|
-
*
|
|
13
|
-
* @example
|
|
14
|
-
* import { Dropdown } from '@bspk/ui/Dropdown';
|
|
15
|
-
*
|
|
16
|
-
* export function Example() {
|
|
17
|
-
* const [selected, setSelected] = React.useState<string[]>([]);
|
|
18
|
-
* return (
|
|
19
|
-
* <Dropdown
|
|
20
|
-
* aria-label="Select an option"
|
|
21
|
-
* itemCount={5}
|
|
22
|
-
* name="example-dropdown"
|
|
23
|
-
* onChange={setSelected}
|
|
24
|
-
* options={[
|
|
25
|
-
* { value: '1', label: 'Option 1' },
|
|
26
|
-
* { value: '2', label: 'Option 2' },
|
|
27
|
-
* { value: '3', label: 'Option 3' },
|
|
28
|
-
* { value: '4', label: 'Option 4' },
|
|
29
|
-
* { value: '5', label: 'Option 5' },
|
|
30
|
-
* { value: '6', label: 'Option 6' },
|
|
31
|
-
* { value: '7', label: 'Option 7' },
|
|
32
|
-
* { value: '8', label: 'Option 8' },
|
|
33
|
-
* { value: '9', label: 'Option 9' },
|
|
34
|
-
* { value: '10', label: 'Option 10' },
|
|
35
|
-
* ]}
|
|
36
|
-
* placeholder="Select an option"
|
|
37
|
-
* size="medium"
|
|
38
|
-
* value={selected}
|
|
39
|
-
* />
|
|
40
|
-
* );
|
|
41
|
-
* }
|
|
42
|
-
*
|
|
43
|
-
* @name Dropdown
|
|
44
|
-
*/
|
|
45
|
-
function Dropdown({ options = [], value: selected, onChange, 'aria-label': ariaLabel, placeholder = 'Select...', size = 'medium', itemCount = 5, disabled, id: propId, invalid, errorMessage, readOnly, placement = 'bottom', name, isMulti, renderListItem, style: styleProp, selectAll, }) {
|
|
46
|
-
const id = useId(propId);
|
|
47
|
-
const { triggerProps, menuProps, closeMenu } = useFloatingMenu({
|
|
48
|
-
placement,
|
|
49
|
-
triggerProps: {
|
|
50
|
-
disabled,
|
|
51
|
-
invalid,
|
|
52
|
-
readOnly,
|
|
53
|
-
errorMessage,
|
|
54
|
-
},
|
|
55
|
-
});
|
|
56
|
-
const dropdownLabel = isMulti
|
|
57
|
-
? `${selected?.length || 0} option${selected?.length !== 1 ? 's' : ''} selected`
|
|
58
|
-
: options.find((o) => o.value === selected?.[0])?.label;
|
|
59
|
-
return (_jsxs(_Fragment, { children: [_jsx("input", { defaultValue: selected, name: name, type: "hidden" }), _jsxs("button", { "aria-label": ariaLabel, "data-bspk": "dropdown", "data-empty": dropdownLabel ? undefined : '', "data-invalid": invalid || undefined, "data-size": size, disabled: disabled || readOnly, id: id, style: styleProp, ...triggerProps, children: [_jsx(ListItem, { "data-placeholder": "", label: dropdownLabel || placeholder, readOnly: true }), _jsx("span", { "data-svg": true, children: _jsx(SvgChevronRight, {}) })] }), _jsx(Portal, { children: _jsx(Menu, { "data-floating": true, isMulti: isMulti, itemCount: itemCount, items: options, onChange: (next, event) => {
|
|
60
|
-
event?.preventDefault();
|
|
61
|
-
if (!isMulti)
|
|
62
|
-
closeMenu();
|
|
63
|
-
onChange?.(next);
|
|
64
|
-
}, renderListItem: renderListItem, selectAll: selectAll, selectedValues: selected, ...menuProps }) })] }));
|
|
65
|
-
}
|
|
66
|
-
Dropdown.bspkName = 'Dropdown';
|
|
67
|
-
export { Dropdown };
|
|
68
|
-
//# sourceMappingURL=Dropdown.js.map
|
package/dist/Dropdown.js.map
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../src/Dropdown.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAE3D,OAAO,iBAAiB,CAAC;AACzB,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,IAAI,EAAa,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAElC,OAAO,EAAE,eAAe,EAAE,MAAM,yBAAyB,CAAC;AAC1D,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAiEtC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,SAAS,QAAQ,CAAC,EACd,OAAO,GAAG,EAAE,EACZ,KAAK,EAAE,QAAQ,EACf,QAAQ,EACR,YAAY,EAAE,SAAS,EACvB,WAAW,GAAG,WAAW,EACzB,IAAI,GAAG,QAAQ,EACf,SAAS,GAAG,CAAC,EACb,QAAQ,EACR,EAAE,EAAE,MAAM,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACR,SAAS,GAAG,QAAQ,EACpB,IAAI,EACJ,OAAO,EACP,cAAc,EACd,KAAK,EAAE,SAAS,EAChB,SAAS,GACG;IACZ,MAAM,EAAE,GAAG,KAAK,CAAC,MAAM,CAAC,CAAC;IAEzB,MAAM,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,eAAe,CAAC;QAC3D,SAAS;QACT,YAAY,EAAE;YACV,QAAQ;YACR,OAAO;YACP,QAAQ;YACR,YAAY;SACf;KACJ,CAAC,CAAC;IAEH,MAAM,aAAa,GAAG,OAAO;QACzB,CAAC,CAAC,GAAG,QAAQ,EAAE,MAAM,IAAI,CAAC,UAAU,QAAQ,EAAE,MAAM,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,WAAW;QAChF,CAAC,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,KAAK,KAAK,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAC,EAAE,KAAK,CAAC;IAE5D,OAAO,CACH,8BACI,gBAAO,YAAY,EAAE,QAAQ,EAAE,IAAI,EAAE,IAAI,EAAE,IAAI,EAAC,QAAQ,GAAG,EAC3D,gCACgB,SAAS,eACX,UAAU,gBACR,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,kBAC5B,OAAO,IAAI,SAAS,eACvB,IAAI,EACf,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,SAAS,KACZ,YAAY,aAEhB,KAAC,QAAQ,wBAAkB,EAAE,EAAC,KAAK,EAAE,aAAa,IAAI,WAAW,EAAE,QAAQ,SAAG,EAC9E,2CACI,KAAC,eAAe,KAAG,GAChB,IACF,EACT,KAAC,MAAM,cACH,KAAC,IAAI,2BAED,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,KAAK,EAAE,OAAO,EACd,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;wBACtB,KAAK,EAAE,cAAc,EAAE,CAAC;wBACxB,IAAI,CAAC,OAAO;4BAAE,SAAS,EAAE,CAAC;wBAC1B,QAAQ,EAAE,CAAC,IAAI,CAAC,CAAC;oBACrB,CAAC,EACD,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,QAAQ,KACpB,SAAS,GACf,GACG,IACV,CACN,CAAC;AACN,CAAC;AAED,QAAQ,CAAC,QAAQ,GAAG,UAAU,CAAC;AAE/B,OAAO,EAAE,QAAQ,EAAE,CAAC"}
|
package/dist/DropdownField.js
DELETED
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { Dropdown } from './Dropdown';
|
|
3
|
-
import { FormField } from './FormField';
|
|
4
|
-
/**
|
|
5
|
-
* A component that allows users to input large amounts of text that could span multiple lines.
|
|
6
|
-
*
|
|
7
|
-
* This component takes properties from the FormField and Dropdown components.
|
|
8
|
-
*
|
|
9
|
-
* @example
|
|
10
|
-
* import { DropdownField } from '@bspk/ui/DropdownField';
|
|
11
|
-
*
|
|
12
|
-
* export function Example() {
|
|
13
|
-
* const [state, setState] = React.useState(['option1']);
|
|
14
|
-
* return (
|
|
15
|
-
* <DropdownField
|
|
16
|
-
* controlId="Example controlId"
|
|
17
|
-
* label="Example label"
|
|
18
|
-
* name="Example name"
|
|
19
|
-
* onChange={(nextValue) => setState(nextValue)}
|
|
20
|
-
* options={[
|
|
21
|
-
* { label: 'Option 1', value: 'option1' },
|
|
22
|
-
* { label: 'Option 2', value: 'option2' },
|
|
23
|
-
* { label: 'Option 3', value: 'option3' },
|
|
24
|
-
* ]}
|
|
25
|
-
* placeholder="Select one..."
|
|
26
|
-
* value={state}
|
|
27
|
-
* />
|
|
28
|
-
* );
|
|
29
|
-
* }
|
|
30
|
-
*
|
|
31
|
-
* @name DropdownField
|
|
32
|
-
*/
|
|
33
|
-
function DropdownField({ label, errorMessage: errorMessageProp, helperText, controlId: id, labelTrailing, required, ...dropdownProps }) {
|
|
34
|
-
const errorMessage = (!dropdownProps.readOnly && !dropdownProps.disabled && errorMessageProp) || undefined;
|
|
35
|
-
return (_jsx(FormField, { controlId: id, "data-bspk": "dropdown-field", errorMessage: errorMessage, helperText: helperText, label: label, labelTrailing: labelTrailing, required: required, children: (fieldProps) => (_jsx(Dropdown, { ...dropdownProps, ...fieldProps, "aria-label": label, id: id, invalid: !!errorMessage })) }));
|
|
36
|
-
}
|
|
37
|
-
DropdownField.bspkName = 'DropdownField';
|
|
38
|
-
export { DropdownField };
|
|
39
|
-
//# sourceMappingURL=DropdownField.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"DropdownField.js","sourceRoot":"","sources":["../src/DropdownField.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAiB,QAAQ,EAAE,MAAM,YAAY,CAAC;AACrD,OAAO,EAAkB,SAAS,EAAE,MAAM,aAAa,CAAC;AAiBxD;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA4BG;AACH,SAAS,aAAa,CAAC,EACnB,KAAK,EACL,YAAY,EAAE,gBAAgB,EAC9B,UAAU,EACV,SAAS,EAAE,EAAE,EACb,aAAa,EACb,QAAQ,EACR,GAAG,aAAa,EACC;IACjB,MAAM,YAAY,GAAG,CAAC,CAAC,aAAa,CAAC,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,IAAI,gBAAgB,CAAC,IAAI,SAAS,CAAC;IAE3G,OAAO,CACH,KAAC,SAAS,IACN,SAAS,EAAE,EAAE,eACH,gBAAgB,EAC1B,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,EACtB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,QAAQ,YAEjB,CAAC,UAAU,EAAE,EAAE,CAAC,CACb,KAAC,QAAQ,OAAK,aAAa,KAAM,UAAU,gBAAc,KAAK,EAAE,EAAE,EAAE,EAAE,EAAE,OAAO,EAAE,CAAC,CAAC,YAAY,GAAI,CACtG,GACO,CACf,CAAC;AACN,CAAC;AAED,aAAa,CAAC,QAAQ,GAAG,eAAe,CAAC;AAEzC,OAAO,EAAE,aAAa,EAAE,CAAC"}
|
package/dist/dropdown.css
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
[data-bspk=dropdown]{--dropdown-background: var(--surface-neutral-t1-base);--dropdown-border-color: var(--stroke-neutral-base);--dropdown-text-color: var(--foreground-neutral-on-surface);--dropdown-height: var(--spacing-sizing-10);--dropdown-font: var(--body-base);--dropdown-clear-height: var(--spacing-sizing-05);--dropdown-padding: var(--spacing-sizing-03);--dropdown-icon-width: var(--spacing-sizing-05);position:relative;width:100%;max-width:280px;outline:unset;min-height:var(--dropdown-height);max-height:var(--dropdown-height);display:flex;flex-direction:row;gap:var(--spacing-sizing-02);flex-grow:0;flex-shrink:0;text-align:left;font:var(--dropdown-font);border:1px solid var(--dropdown-border-color);border-radius:var(--radius-small);background:var(--dropdown-background);padding:0 var(--dropdown-padding)}[data-bspk=dropdown] [data-placeholder]{display:block;max-width:100%;text-overflow:ellipsis;overflow:hidden;padding:0}[data-bspk=dropdown] [data-placeholder] [data-inner]{min-height:auto;padding:0}[data-bspk=dropdown] [data-placeholder] [data-item-label] [data-text]{color:var(--dropdown-text-color)}[data-bspk=dropdown] [data-svg]{display:flex;flex-direction:column;justify-content:center}[data-bspk=dropdown] [data-svg] svg{transform:rotate(90deg);width:var(--dropdown-icon-width)}[data-bspk=dropdown] [data-bspk=list-item][data-selected]{background:var(--surface-brand-primary-highlight)}[data-bspk=dropdown][data-size=small]{--dropdown-height: var(--spacing-sizing-08);--dropdown-font: var(--body-small);--dropdown-clear-height: var(--spacing-sizing-05);--dropdown-padding: var(--spacing-sizing-02);--dropdown-icon-width: var(--spacing-sizing-05)}[data-bspk=dropdown][data-size=large]{--dropdown-height: var(--spacing-sizing-12);--dropdown-font: var(--body-large);--dropdown-clear-height: var(--spacing-sizing-06);--dropdown-icon-width: var(--spacing-sizing-06)}[data-bspk=dropdown]:disabled{--dropdown-text-color: var(--foreground-neutral-disabled-on-surface);--dropdown-border-color: var(--stroke-neutral-disabled-light);--dropdown-background: linear-gradient(var(--interactions-disabled-opacity), var(--interactions-disabled-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=dropdown]:disabled[aria-readonly]:not([data-empty]){--dropdown-text-color: var(--foreground-neutral-on-surface)}[data-bspk=dropdown]:not(:disabled):focus{--dropdown-border-color: var(--stroke-brand-primary)}[data-bspk=dropdown]:not(:disabled):hover{--dropdown-background: linear-gradient(var(--interactions-neutral-hover-opacity), var(--interactions-neutral-hover-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=dropdown]:not(:disabled):active{--dropdown-background: linear-gradient(var(--interactions-neutral-press-opacity), var(--interactions-neutral-press-opacity)), linear-gradient(var(--surface-neutral-t1-base), var(--surface-neutral-t1-base))}[data-bspk=dropdown][data-invalid]{--dropdown-border-color: var(--status-error)}[data-bspk=dropdown][data-empty]{--dropdown-text-color: var(--foreground-neutral-on-surface-variant-03)}
|