@deephaven/components 1.19.1-console-types-fixes.0 → 1.21.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/shortcuts/GlobalShortcuts.js +2 -2
- package/dist/shortcuts/GlobalShortcuts.js.map +1 -1
- package/dist/spectrum/comboBox/ComboBox.d.ts +1 -1
- package/dist/spectrum/index.d.ts +1 -0
- package/dist/spectrum/index.d.ts.map +1 -1
- package/dist/spectrum/index.js +1 -0
- package/dist/spectrum/index.js.map +1 -1
- package/dist/spectrum/listView/ListView.d.ts +1 -1
- package/dist/spectrum/listView/ListView.d.ts.map +1 -1
- package/dist/spectrum/listView/ListView.js.map +1 -1
- package/dist/spectrum/multiSelect/MultiSelect.css +326 -0
- package/dist/spectrum/multiSelect/MultiSelect.css.map +1 -0
- package/dist/spectrum/multiSelect/MultiSelect.d.ts +7 -0
- package/dist/spectrum/multiSelect/MultiSelect.d.ts.map +1 -0
- package/dist/spectrum/multiSelect/MultiSelect.js +445 -0
- package/dist/spectrum/multiSelect/MultiSelect.js.map +1 -0
- package/dist/spectrum/multiSelect/MultiSelectListBox.d.ts +29 -0
- package/dist/spectrum/multiSelect/MultiSelectListBox.d.ts.map +1 -0
- package/dist/spectrum/multiSelect/MultiSelectListBox.js +41 -0
- package/dist/spectrum/multiSelect/MultiSelectListBox.js.map +1 -0
- package/dist/spectrum/multiSelect/MultiSelectNormalized.d.ts +8 -0
- package/dist/spectrum/multiSelect/MultiSelectNormalized.d.ts.map +1 -0
- package/dist/spectrum/multiSelect/MultiSelectNormalized.js +37 -0
- package/dist/spectrum/multiSelect/MultiSelectNormalized.js.map +1 -0
- package/dist/spectrum/multiSelect/MultiSelectProps.d.ts +121 -0
- package/dist/spectrum/multiSelect/MultiSelectProps.d.ts.map +1 -0
- package/dist/spectrum/multiSelect/MultiSelectProps.js +2 -0
- package/dist/spectrum/multiSelect/MultiSelectProps.js.map +1 -0
- package/dist/spectrum/multiSelect/MultiSelectTag.d.ts +14 -0
- package/dist/spectrum/multiSelect/MultiSelectTag.d.ts.map +1 -0
- package/dist/spectrum/multiSelect/MultiSelectTag.js +36 -0
- package/dist/spectrum/multiSelect/MultiSelectTag.js.map +1 -0
- package/dist/spectrum/multiSelect/index.d.ts +4 -0
- package/dist/spectrum/multiSelect/index.d.ts.map +1 -0
- package/dist/spectrum/multiSelect/index.js +4 -0
- package/dist/spectrum/multiSelect/index.js.map +1 -0
- package/dist/spectrum/multiSelect/multiSelectUtils.d.ts +53 -0
- package/dist/spectrum/multiSelect/multiSelectUtils.d.ts.map +1 -0
- package/dist/spectrum/multiSelect/multiSelectUtils.js +166 -0
- package/dist/spectrum/multiSelect/multiSelectUtils.js.map +1 -0
- package/dist/spectrum/multiSelect/useMultiSelectFilter.d.ts +27 -0
- package/dist/spectrum/multiSelect/useMultiSelectFilter.d.ts.map +1 -0
- package/dist/spectrum/multiSelect/useMultiSelectFilter.js +51 -0
- package/dist/spectrum/multiSelect/useMultiSelectFilter.js.map +1 -0
- package/dist/spectrum/multiSelect/useMultiSelectKeyboard.d.ts +40 -0
- package/dist/spectrum/multiSelect/useMultiSelectKeyboard.d.ts.map +1 -0
- package/dist/spectrum/multiSelect/useMultiSelectKeyboard.js +200 -0
- package/dist/spectrum/multiSelect/useMultiSelectKeyboard.js.map +1 -0
- package/dist/spectrum/multiSelect/useMultiSelectLoadingSpinner.d.ts +11 -0
- package/dist/spectrum/multiSelect/useMultiSelectLoadingSpinner.d.ts.map +1 -0
- package/dist/spectrum/multiSelect/useMultiSelectLoadingSpinner.js +44 -0
- package/dist/spectrum/multiSelect/useMultiSelectLoadingSpinner.js.map +1 -0
- package/dist/spectrum/multiSelect/useMultiSelectNormalizedProps.d.ts +21 -0
- package/dist/spectrum/multiSelect/useMultiSelectNormalizedProps.d.ts.map +1 -0
- package/dist/spectrum/multiSelect/useMultiSelectNormalizedProps.js +83 -0
- package/dist/spectrum/multiSelect/useMultiSelectNormalizedProps.js.map +1 -0
- package/dist/spectrum/multiSelect/useMultiSelectScrollListener.d.ts +17 -0
- package/dist/spectrum/multiSelect/useMultiSelectScrollListener.d.ts.map +1 -0
- package/dist/spectrum/multiSelect/useMultiSelectScrollListener.js +55 -0
- package/dist/spectrum/multiSelect/useMultiSelectScrollListener.js.map +1 -0
- package/dist/spectrum/multiSelect/useMultiSelectState.d.ts +26 -0
- package/dist/spectrum/multiSelect/useMultiSelectState.d.ts.map +1 -0
- package/dist/spectrum/multiSelect/useMultiSelectState.js +67 -0
- package/dist/spectrum/multiSelect/useMultiSelectState.js.map +1 -0
- package/dist/spectrum/picker/Picker.d.ts +1 -1
- package/dist/spectrum/picker/PickerProps.d.ts +1 -1
- package/dist/spectrum/picker/PickerProps.d.ts.map +1 -1
- package/dist/spectrum/picker/PickerProps.js.map +1 -1
- package/dist/spectrum/picker/usePickerProps.js +1 -1
- package/dist/spectrum/picker/usePickerProps.js.map +1 -1
- package/dist/spectrum/utils/itemWrapperUtils.d.ts +1 -1
- package/dist/spectrum/utils/itemWrapperUtils.d.ts.map +1 -1
- package/dist/spectrum/utils/itemWrapperUtils.js +3 -0
- package/dist/spectrum/utils/itemWrapperUtils.js.map +1 -1
- package/dist/spectrum/utils/useStringifiedMultiSelection.d.ts.map +1 -1
- package/dist/spectrum/utils/useStringifiedMultiSelection.js +12 -1
- package/dist/spectrum/utils/useStringifiedMultiSelection.js.map +1 -1
- package/package.json +15 -8
|
@@ -67,8 +67,8 @@ var GLOBAL_SHORTCUTS = {
|
|
|
67
67
|
OPEN_DASHBOARD_LIST: ShortcutRegistry.createAndAdd({
|
|
68
68
|
id: 'GLOBAL.OPEN_DASHBOARD_LIST',
|
|
69
69
|
name: 'Open Dashboard List',
|
|
70
|
-
shortcut: [MODIFIER.
|
|
71
|
-
macShortcut: [MODIFIER.
|
|
70
|
+
shortcut: [MODIFIER.ALT, MODIFIER.SHIFT, KEY.D],
|
|
71
|
+
macShortcut: [MODIFIER.OPTION, MODIFIER.SHIFT, KEY.D],
|
|
72
72
|
isEditable: true
|
|
73
73
|
}),
|
|
74
74
|
NEXT: ShortcutRegistry.createAndAdd({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalShortcuts.js","names":["ShortcutRegistry","MODIFIER","KEY","GLOBAL_SHORTCUTS","COPY","createAndAdd","id","name","shortcut","CTRL","C","macShortcut","CMD","isEditable","PASTE","V","SAVE","S","SELECT_ALL","A","REOPEN_CLOSED_PANEL","ALT","SHIFT","T","OPTION","LINKER","L","LINKER_CLOSE","ESCAPE","COPY_VERSION_INFO","I","EXPORT_LOGS","OPEN_DASHBOARD_LIST","D","NEXT","ENTER","PREVIOUS","UNDO","Z","REDO"],"sources":["../../src/shortcuts/GlobalShortcuts.ts"],"sourcesContent":["import ShortcutRegistry from './ShortcutRegistry';\nimport { MODIFIER, KEY } from './Shortcut';\n\nconst GLOBAL_SHORTCUTS = {\n COPY: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.COPY',\n name: 'Copy',\n shortcut: [MODIFIER.CTRL, KEY.C],\n macShortcut: [MODIFIER.CMD, KEY.C],\n isEditable: false,\n }),\n PASTE: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.PASTE',\n name: 'Paste',\n shortcut: [MODIFIER.CTRL, KEY.V],\n macShortcut: [MODIFIER.CMD, KEY.V],\n isEditable: false,\n }),\n SAVE: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.SAVE',\n name: 'Save',\n shortcut: [MODIFIER.CTRL, KEY.S],\n macShortcut: [MODIFIER.CMD, KEY.S],\n isEditable: false,\n }),\n SELECT_ALL: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.SELECT_ALL',\n name: 'Select All',\n shortcut: [MODIFIER.CTRL, KEY.A],\n macShortcut: [MODIFIER.CMD, KEY.A],\n isEditable: false,\n }),\n REOPEN_CLOSED_PANEL: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.REOPEN_CLOSED_PANEL',\n name: 'Re-open Closed Panel',\n shortcut: [MODIFIER.ALT, MODIFIER.SHIFT, KEY.T],\n macShortcut: [MODIFIER.OPTION, MODIFIER.SHIFT, KEY.T],\n isEditable: true,\n }),\n LINKER: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.LINKER',\n name: 'Linker',\n shortcut: [MODIFIER.CTRL, KEY.L],\n macShortcut: [MODIFIER.CMD, KEY.L],\n }),\n LINKER_CLOSE: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.LINKER_CLOSE',\n name: 'Close Linker Overlay',\n shortcut: [KEY.ESCAPE],\n macShortcut: [KEY.ESCAPE],\n isEditable: false,\n }),\n COPY_VERSION_INFO: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.COPY_VERSION_INFO',\n name: 'Copy Version Info',\n // alt vs shift to not be the devtools shortcut on each platform\n shortcut: [MODIFIER.CTRL, MODIFIER.ALT, KEY.I],\n macShortcut: [MODIFIER.CMD, MODIFIER.SHIFT, KEY.I],\n isEditable: true,\n }),\n EXPORT_LOGS: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.EXPORT_LOGS',\n name: 'Export Logs',\n shortcut: [MODIFIER.CTRL, MODIFIER.ALT, MODIFIER.SHIFT, KEY.L],\n macShortcut: [MODIFIER.CMD, MODIFIER.OPTION, MODIFIER.SHIFT, KEY.L],\n isEditable: true,\n }),\n OPEN_DASHBOARD_LIST: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.OPEN_DASHBOARD_LIST',\n name: 'Open Dashboard List',\n shortcut: [MODIFIER.
|
|
1
|
+
{"version":3,"file":"GlobalShortcuts.js","names":["ShortcutRegistry","MODIFIER","KEY","GLOBAL_SHORTCUTS","COPY","createAndAdd","id","name","shortcut","CTRL","C","macShortcut","CMD","isEditable","PASTE","V","SAVE","S","SELECT_ALL","A","REOPEN_CLOSED_PANEL","ALT","SHIFT","T","OPTION","LINKER","L","LINKER_CLOSE","ESCAPE","COPY_VERSION_INFO","I","EXPORT_LOGS","OPEN_DASHBOARD_LIST","D","NEXT","ENTER","PREVIOUS","UNDO","Z","REDO"],"sources":["../../src/shortcuts/GlobalShortcuts.ts"],"sourcesContent":["import ShortcutRegistry from './ShortcutRegistry';\nimport { MODIFIER, KEY } from './Shortcut';\n\nconst GLOBAL_SHORTCUTS = {\n COPY: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.COPY',\n name: 'Copy',\n shortcut: [MODIFIER.CTRL, KEY.C],\n macShortcut: [MODIFIER.CMD, KEY.C],\n isEditable: false,\n }),\n PASTE: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.PASTE',\n name: 'Paste',\n shortcut: [MODIFIER.CTRL, KEY.V],\n macShortcut: [MODIFIER.CMD, KEY.V],\n isEditable: false,\n }),\n SAVE: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.SAVE',\n name: 'Save',\n shortcut: [MODIFIER.CTRL, KEY.S],\n macShortcut: [MODIFIER.CMD, KEY.S],\n isEditable: false,\n }),\n SELECT_ALL: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.SELECT_ALL',\n name: 'Select All',\n shortcut: [MODIFIER.CTRL, KEY.A],\n macShortcut: [MODIFIER.CMD, KEY.A],\n isEditable: false,\n }),\n REOPEN_CLOSED_PANEL: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.REOPEN_CLOSED_PANEL',\n name: 'Re-open Closed Panel',\n shortcut: [MODIFIER.ALT, MODIFIER.SHIFT, KEY.T],\n macShortcut: [MODIFIER.OPTION, MODIFIER.SHIFT, KEY.T],\n isEditable: true,\n }),\n LINKER: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.LINKER',\n name: 'Linker',\n shortcut: [MODIFIER.CTRL, KEY.L],\n macShortcut: [MODIFIER.CMD, KEY.L],\n }),\n LINKER_CLOSE: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.LINKER_CLOSE',\n name: 'Close Linker Overlay',\n shortcut: [KEY.ESCAPE],\n macShortcut: [KEY.ESCAPE],\n isEditable: false,\n }),\n COPY_VERSION_INFO: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.COPY_VERSION_INFO',\n name: 'Copy Version Info',\n // alt vs shift to not be the devtools shortcut on each platform\n shortcut: [MODIFIER.CTRL, MODIFIER.ALT, KEY.I],\n macShortcut: [MODIFIER.CMD, MODIFIER.SHIFT, KEY.I],\n isEditable: true,\n }),\n EXPORT_LOGS: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.EXPORT_LOGS',\n name: 'Export Logs',\n shortcut: [MODIFIER.CTRL, MODIFIER.ALT, MODIFIER.SHIFT, KEY.L],\n macShortcut: [MODIFIER.CMD, MODIFIER.OPTION, MODIFIER.SHIFT, KEY.L],\n isEditable: true,\n }),\n OPEN_DASHBOARD_LIST: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.OPEN_DASHBOARD_LIST',\n name: 'Open Dashboard List',\n shortcut: [MODIFIER.ALT, MODIFIER.SHIFT, KEY.D],\n macShortcut: [MODIFIER.OPTION, MODIFIER.SHIFT, KEY.D],\n isEditable: true,\n }),\n NEXT: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.NEXT',\n name: 'Next',\n shortcut: [KEY.ENTER],\n macShortcut: [KEY.ENTER],\n isEditable: false,\n }),\n PREVIOUS: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.PREVIOUS',\n name: 'Previous',\n shortcut: [MODIFIER.SHIFT, KEY.ENTER],\n macShortcut: [MODIFIER.SHIFT, KEY.ENTER],\n isEditable: false,\n }),\n UNDO: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.UNDO',\n name: 'Undo',\n shortcut: [MODIFIER.CTRL, KEY.Z],\n macShortcut: [MODIFIER.CMD, KEY.Z],\n isEditable: false,\n }),\n REDO: ShortcutRegistry.createAndAdd({\n id: 'GLOBAL.REDO',\n name: 'Redo',\n shortcut: [MODIFIER.CTRL, MODIFIER.SHIFT, KEY.Z],\n macShortcut: [MODIFIER.CMD, MODIFIER.SHIFT, KEY.Z],\n isEditable: false,\n }),\n};\n\nexport default GLOBAL_SHORTCUTS;\n"],"mappings":"OAAOA,gBAAgB;AAAA,SACdC,QAAQ,EAAEC,GAAG;AAEtB,IAAMC,gBAAgB,GAAG;EACvBC,IAAI,EAAEJ,gBAAgB,CAACK,YAAY,CAAC;IAClCC,EAAE,EAAE,aAAa;IACjBC,IAAI,EAAE,MAAM;IACZC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACQ,CAAC,CAAC;IAChCC,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACQ,CAAC,CAAC;IAClCG,UAAU,EAAE;EACd,CAAC,CAAC;EACFC,KAAK,EAAEd,gBAAgB,CAACK,YAAY,CAAC;IACnCC,EAAE,EAAE,cAAc;IAClBC,IAAI,EAAE,OAAO;IACbC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACa,CAAC,CAAC;IAChCJ,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACa,CAAC,CAAC;IAClCF,UAAU,EAAE;EACd,CAAC,CAAC;EACFG,IAAI,EAAEhB,gBAAgB,CAACK,YAAY,CAAC;IAClCC,EAAE,EAAE,aAAa;IACjBC,IAAI,EAAE,MAAM;IACZC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACe,CAAC,CAAC;IAChCN,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACe,CAAC,CAAC;IAClCJ,UAAU,EAAE;EACd,CAAC,CAAC;EACFK,UAAU,EAAElB,gBAAgB,CAACK,YAAY,CAAC;IACxCC,EAAE,EAAE,mBAAmB;IACvBC,IAAI,EAAE,YAAY;IAClBC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACiB,CAAC,CAAC;IAChCR,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACiB,CAAC,CAAC;IAClCN,UAAU,EAAE;EACd,CAAC,CAAC;EACFO,mBAAmB,EAAEpB,gBAAgB,CAACK,YAAY,CAAC;IACjDC,EAAE,EAAE,4BAA4B;IAChCC,IAAI,EAAE,sBAAsB;IAC5BC,QAAQ,EAAE,CAACP,QAAQ,CAACoB,GAAG,EAAEpB,QAAQ,CAACqB,KAAK,EAAEpB,GAAG,CAACqB,CAAC,CAAC;IAC/CZ,WAAW,EAAE,CAACV,QAAQ,CAACuB,MAAM,EAAEvB,QAAQ,CAACqB,KAAK,EAAEpB,GAAG,CAACqB,CAAC,CAAC;IACrDV,UAAU,EAAE;EACd,CAAC,CAAC;EACFY,MAAM,EAAEzB,gBAAgB,CAACK,YAAY,CAAC;IACpCC,EAAE,EAAE,eAAe;IACnBC,IAAI,EAAE,QAAQ;IACdC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACwB,CAAC,CAAC;IAChCf,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACwB,CAAC;EACnC,CAAC,CAAC;EACFC,YAAY,EAAE3B,gBAAgB,CAACK,YAAY,CAAC;IAC1CC,EAAE,EAAE,qBAAqB;IACzBC,IAAI,EAAE,sBAAsB;IAC5BC,QAAQ,EAAE,CAACN,GAAG,CAAC0B,MAAM,CAAC;IACtBjB,WAAW,EAAE,CAACT,GAAG,CAAC0B,MAAM,CAAC;IACzBf,UAAU,EAAE;EACd,CAAC,CAAC;EACFgB,iBAAiB,EAAE7B,gBAAgB,CAACK,YAAY,CAAC;IAC/CC,EAAE,EAAE,0BAA0B;IAC9BC,IAAI,EAAE,mBAAmB;IACzB;IACAC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAER,QAAQ,CAACoB,GAAG,EAAEnB,GAAG,CAAC4B,CAAC,CAAC;IAC9CnB,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEX,QAAQ,CAACqB,KAAK,EAAEpB,GAAG,CAAC4B,CAAC,CAAC;IAClDjB,UAAU,EAAE;EACd,CAAC,CAAC;EACFkB,WAAW,EAAE/B,gBAAgB,CAACK,YAAY,CAAC;IACzCC,EAAE,EAAE,oBAAoB;IACxBC,IAAI,EAAE,aAAa;IACnBC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAER,QAAQ,CAACoB,GAAG,EAAEpB,QAAQ,CAACqB,KAAK,EAAEpB,GAAG,CAACwB,CAAC,CAAC;IAC9Df,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEX,QAAQ,CAACuB,MAAM,EAAEvB,QAAQ,CAACqB,KAAK,EAAEpB,GAAG,CAACwB,CAAC,CAAC;IACnEb,UAAU,EAAE;EACd,CAAC,CAAC;EACFmB,mBAAmB,EAAEhC,gBAAgB,CAACK,YAAY,CAAC;IACjDC,EAAE,EAAE,4BAA4B;IAChCC,IAAI,EAAE,qBAAqB;IAC3BC,QAAQ,EAAE,CAACP,QAAQ,CAACoB,GAAG,EAAEpB,QAAQ,CAACqB,KAAK,EAAEpB,GAAG,CAAC+B,CAAC,CAAC;IAC/CtB,WAAW,EAAE,CAACV,QAAQ,CAACuB,MAAM,EAAEvB,QAAQ,CAACqB,KAAK,EAAEpB,GAAG,CAAC+B,CAAC,CAAC;IACrDpB,UAAU,EAAE;EACd,CAAC,CAAC;EACFqB,IAAI,EAAElC,gBAAgB,CAACK,YAAY,CAAC;IAClCC,EAAE,EAAE,aAAa;IACjBC,IAAI,EAAE,MAAM;IACZC,QAAQ,EAAE,CAACN,GAAG,CAACiC,KAAK,CAAC;IACrBxB,WAAW,EAAE,CAACT,GAAG,CAACiC,KAAK,CAAC;IACxBtB,UAAU,EAAE;EACd,CAAC,CAAC;EACFuB,QAAQ,EAAEpC,gBAAgB,CAACK,YAAY,CAAC;IACtCC,EAAE,EAAE,iBAAiB;IACrBC,IAAI,EAAE,UAAU;IAChBC,QAAQ,EAAE,CAACP,QAAQ,CAACqB,KAAK,EAAEpB,GAAG,CAACiC,KAAK,CAAC;IACrCxB,WAAW,EAAE,CAACV,QAAQ,CAACqB,KAAK,EAAEpB,GAAG,CAACiC,KAAK,CAAC;IACxCtB,UAAU,EAAE;EACd,CAAC,CAAC;EACFwB,IAAI,EAAErC,gBAAgB,CAACK,YAAY,CAAC;IAClCC,EAAE,EAAE,aAAa;IACjBC,IAAI,EAAE,MAAM;IACZC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAEP,GAAG,CAACoC,CAAC,CAAC;IAChC3B,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEV,GAAG,CAACoC,CAAC,CAAC;IAClCzB,UAAU,EAAE;EACd,CAAC,CAAC;EACF0B,IAAI,EAAEvC,gBAAgB,CAACK,YAAY,CAAC;IAClCC,EAAE,EAAE,aAAa;IACjBC,IAAI,EAAE,MAAM;IACZC,QAAQ,EAAE,CAACP,QAAQ,CAACQ,IAAI,EAAER,QAAQ,CAACqB,KAAK,EAAEpB,GAAG,CAACoC,CAAC,CAAC;IAChD3B,WAAW,EAAE,CAACV,QAAQ,CAACW,GAAG,EAAEX,QAAQ,CAACqB,KAAK,EAAEpB,GAAG,CAACoC,CAAC,CAAC;IAClDzB,UAAU,EAAE;EACd,CAAC;AACH,CAAC;AAED,eAAeV,gBAAgB","ignoreList":[]}
|
|
@@ -6,7 +6,7 @@ export type ComboBoxProps = PickerPropsT<SpectrumComboBoxProps<NormalizedItem>>;
|
|
|
6
6
|
export type { MenuTriggerAction } from '@react-types/combobox';
|
|
7
7
|
export { SpectrumComboBox };
|
|
8
8
|
export declare const ComboBox: React.ForwardRefExoticComponent<Omit<SpectrumComboBoxProps<NormalizedItem>, "children" | "items" | "selectedKey" | "defaultSelectedKey" | "disabledKeys" | "onSelectionChange" | "defaultItems"> & {
|
|
9
|
-
children
|
|
9
|
+
children?: import("../utils").ItemOrSection | import("../utils").ItemOrSection[] | null | undefined;
|
|
10
10
|
tooltip?: boolean | import("../utils").TooltipOptions;
|
|
11
11
|
selectedKey?: import("../utils").ItemKey | null;
|
|
12
12
|
defaultSelectedKey?: import("../utils").ItemKey;
|
package/dist/spectrum/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/spectrum/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AAEzB;;GAEG;AACH,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAEhC;;GAEG;AACH,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/spectrum/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,WAAW,CAAC;AAC1B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AACzB,cAAc,cAAc,CAAC;AAC7B,cAAc,YAAY,CAAC;AAC3B,cAAc,UAAU,CAAC;AACzB,cAAc,UAAU,CAAC;AAEzB;;GAEG;AACH,cAAc,cAAc,CAAC;AAC7B,cAAc,eAAe,CAAC;AAC9B,cAAc,YAAY,CAAC;AAC3B,cAAc,mBAAmB,CAAC;AAClC,cAAc,kBAAkB,CAAC;AACjC,cAAc,YAAY,CAAC;AAC3B,cAAc,eAAe,CAAC;AAC9B,cAAc,UAAU,CAAC;AACzB,cAAc,WAAW,CAAC;AAC1B,cAAc,QAAQ,CAAC;AACvB,cAAc,QAAQ,CAAC;AACvB,cAAc,iBAAiB,CAAC;AAEhC;;GAEG;AACH,cAAc,eAAe,CAAC;AAC9B,cAAc,eAAe,CAAC;AAC9B,cAAc,SAAS,CAAC"}
|
package/dist/spectrum/index.js
CHANGED
|
@@ -21,6 +21,7 @@ export * from "./comboBox/index.js";
|
|
|
21
21
|
export * from "./ListActionGroup.js";
|
|
22
22
|
export * from "./ListActionMenu.js";
|
|
23
23
|
export * from "./listView/index.js";
|
|
24
|
+
export * from "./multiSelect/index.js";
|
|
24
25
|
export * from "./picker/index.js";
|
|
25
26
|
export * from "./Heading.js";
|
|
26
27
|
export * from "./Text.js";
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/spectrum/index.ts"],"sourcesContent":["/**\n * Re-exporting React Spectrum components + props.\n */\nexport * from './buttons';\nexport * from './collections';\nexport * from './content';\nexport * from './dateAndTime';\nexport * from './forms';\nexport * from './icons';\nexport * from './layout';\nexport * from './navigation';\nexport * from './overlays';\nexport * from './shared';\nexport * from './status';\n\n/**\n * Custom DH components wrapping React Spectrum components.\n */\nexport * from './ActionMenu';\nexport * from './ActionGroup';\nexport * from './comboBox';\nexport * from './ListActionGroup';\nexport * from './ListActionMenu';\nexport * from './listView';\nexport * from './picker';\nexport * from './Heading';\nexport * from './Text';\nexport * from './View';\nexport * from './CheckboxGroup';\n\n/**\n * Custom DH spectrum utils\n */\nexport * from './ItemContent';\nexport * from './ItemTooltip';\nexport * from './utils';\n"],"mappings":"AAAA;AACA;AACA;AAFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AACA;AACA;AAFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/spectrum/index.ts"],"sourcesContent":["/**\n * Re-exporting React Spectrum components + props.\n */\nexport * from './buttons';\nexport * from './collections';\nexport * from './content';\nexport * from './dateAndTime';\nexport * from './forms';\nexport * from './icons';\nexport * from './layout';\nexport * from './navigation';\nexport * from './overlays';\nexport * from './shared';\nexport * from './status';\n\n/**\n * Custom DH components wrapping React Spectrum components.\n */\nexport * from './ActionMenu';\nexport * from './ActionGroup';\nexport * from './comboBox';\nexport * from './ListActionGroup';\nexport * from './ListActionMenu';\nexport * from './listView';\nexport * from './multiSelect';\nexport * from './picker';\nexport * from './Heading';\nexport * from './Text';\nexport * from './View';\nexport * from './CheckboxGroup';\n\n/**\n * Custom DH spectrum utils\n */\nexport * from './ItemContent';\nexport * from './ItemTooltip';\nexport * from './utils';\n"],"mappings":"AAAA;AACA;AACA;AAFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAeA;AACA;AACA;AAFA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBA;AACA;AACA;AAFA;AAAA;AAAA","ignoreList":[]}
|
|
@@ -2,7 +2,7 @@ import { type SpectrumListViewProps } from '@adobe/react-spectrum';
|
|
|
2
2
|
import { type MultipleItemSelectionProps, type NormalizedItem, type TooltipOptions } from '../utils';
|
|
3
3
|
import { type ItemElementOrPrimitive } from '../shared';
|
|
4
4
|
export type ListViewProps = MultipleItemSelectionProps & {
|
|
5
|
-
children
|
|
5
|
+
children?: ItemElementOrPrimitive | ItemElementOrPrimitive[] | null | undefined;
|
|
6
6
|
/** Can be set to true or a TooltipOptions to enable item tooltips */
|
|
7
7
|
tooltip?: boolean | TooltipOptions;
|
|
8
8
|
/** Handler that is called when the picker is scrolled. */
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../src/spectrum/listView/ListView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAGnE,OAAO,EACL,KAAK,0BAA0B,EAC/B,KAAK,cAAc,EAEnB,KAAK,cAAc,EAEpB,MAAM,UAAU,CAAC;AAElB,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAExD,MAAM,MAAM,aAAa,GAAG,0BAA0B,GAAG;IACvD,QAAQ,
|
|
1
|
+
{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../src/spectrum/listView/ListView.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,qBAAqB,EAAE,MAAM,uBAAuB,CAAC;AAGnE,OAAO,EACL,KAAK,0BAA0B,EAC/B,KAAK,cAAc,EAEnB,KAAK,cAAc,EAEpB,MAAM,UAAU,CAAC;AAElB,OAAO,EAAE,KAAK,sBAAsB,EAAE,MAAM,WAAW,CAAC;AAExD,MAAM,MAAM,aAAa,GAAG,0BAA0B,GAAG;IACvD,QAAQ,CAAC,EACL,sBAAsB,GACtB,sBAAsB,EAAE,GACxB,IAAI,GACJ,SAAS,CAAC;IACd,qEAAqE;IACrE,OAAO,CAAC,EAAE,OAAO,GAAG,cAAc,CAAC;IAEnC,0DAA0D;IAC1D,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;CACnC,GAAG,IAAI,CACJ,qBAAqB,CAAC,cAAc,CAAC,EACnC,UAAU,GACV,OAAO,GACP,cAAc,GACd,qBAAqB,GACrB,cAAc,GACd,mBAAmB,CACtB,CAAC;AAEJ,wBAAgB,QAAQ,CAAC,EACvB,QAAQ,EACR,OAAc,EACd,YAAY,EACZ,mBAAmB,EACnB,YAAY,EACZ,gBAAgB,EAChB,QAAQ,EACR,QAAyB,EACzB,iBAAiB,EACjB,GAAG,qBAAqB,EACzB,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA+BpC;AAED,eAAe,QAAQ,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListView.js","names":["useMemo","cl","EMPTY_FUNCTION","normalizeTooltipOptions","wrapItemChildren","ListViewWrapper","jsx","_jsx","ListView","_ref","children","tooltip","selectedKeys","defaultSelectedKeys","disabledKeys","UNSAFE_className","onChange","onScroll","onSelectionChange","spectrumListViewProps","_objectWithoutProperties","_excluded","tooltipOptions","wrappedItems","_objectSpread"],"sources":["../../../src/spectrum/listView/ListView.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { type SpectrumListViewProps } from '@adobe/react-spectrum';\nimport cl from 'classnames';\nimport { EMPTY_FUNCTION } from '@deephaven/utils';\nimport {\n type MultipleItemSelectionProps,\n type NormalizedItem,\n normalizeTooltipOptions,\n type TooltipOptions,\n wrapItemChildren,\n} from '../utils';\nimport { ListViewWrapper, type ListViewWrapperProps } from './ListViewWrapper';\nimport { type ItemElementOrPrimitive } from '../shared';\n\nexport type ListViewProps = MultipleItemSelectionProps & {\n children
|
|
1
|
+
{"version":3,"file":"ListView.js","names":["useMemo","cl","EMPTY_FUNCTION","normalizeTooltipOptions","wrapItemChildren","ListViewWrapper","jsx","_jsx","ListView","_ref","children","tooltip","selectedKeys","defaultSelectedKeys","disabledKeys","UNSAFE_className","onChange","onScroll","onSelectionChange","spectrumListViewProps","_objectWithoutProperties","_excluded","tooltipOptions","wrappedItems","_objectSpread"],"sources":["../../../src/spectrum/listView/ListView.tsx"],"sourcesContent":["import { useMemo } from 'react';\nimport { type SpectrumListViewProps } from '@adobe/react-spectrum';\nimport cl from 'classnames';\nimport { EMPTY_FUNCTION } from '@deephaven/utils';\nimport {\n type MultipleItemSelectionProps,\n type NormalizedItem,\n normalizeTooltipOptions,\n type TooltipOptions,\n wrapItemChildren,\n} from '../utils';\nimport { ListViewWrapper, type ListViewWrapperProps } from './ListViewWrapper';\nimport { type ItemElementOrPrimitive } from '../shared';\n\nexport type ListViewProps = MultipleItemSelectionProps & {\n children?:\n | ItemElementOrPrimitive\n | ItemElementOrPrimitive[]\n | null\n | undefined;\n /** Can be set to true or a TooltipOptions to enable item tooltips */\n tooltip?: boolean | TooltipOptions;\n\n /** Handler that is called when the picker is scrolled. */\n onScroll?: (event: Event) => void;\n} & Omit<\n SpectrumListViewProps<NormalizedItem>,\n | 'children'\n | 'items'\n | 'selectedKeys'\n | 'defaultSelectedKeys'\n | 'disabledKeys'\n | 'onSelectionChange'\n >;\n\nexport function ListView({\n children,\n tooltip = true,\n selectedKeys,\n defaultSelectedKeys,\n disabledKeys,\n UNSAFE_className,\n onChange,\n onScroll = EMPTY_FUNCTION,\n onSelectionChange,\n ...spectrumListViewProps\n}: ListViewProps): JSX.Element | null {\n const tooltipOptions = useMemo(\n () => normalizeTooltipOptions(tooltip, 'bottom'),\n [tooltip]\n );\n\n const wrappedItems = useMemo(\n () => wrapItemChildren(children, tooltipOptions),\n [children, tooltipOptions]\n );\n\n return (\n <ListViewWrapper\n // eslint-disable-next-line react/jsx-props-no-spreading\n {...spectrumListViewProps}\n UNSAFE_className={cl('dh-list-view', UNSAFE_className)}\n selectedKeys={\n selectedKeys as ListViewWrapperProps<unknown>['selectedKeys']\n }\n defaultSelectedKeys={\n defaultSelectedKeys as ListViewWrapperProps<unknown>['defaultSelectedKeys']\n }\n disabledKeys={\n disabledKeys as ListViewWrapperProps<unknown>['disabledKeys']\n }\n onScroll={onScroll}\n onSelectionChange={onChange ?? onSelectionChange}\n >\n {wrappedItems}\n </ListViewWrapper>\n );\n}\n\nexport default ListView;\n"],"mappings":";;;;;;;;AAAA,SAASA,OAAO,QAAQ,OAAO;AAE/B,OAAOC,EAAE,MAAM,YAAY;AAC3B,SAASC,cAAc,QAAQ,kBAAkB;AAAC,SAIhDC,uBAAuB,EAEvBC,gBAAgB;AAAA,SAETC,eAAe;AAAA,SAAAC,GAAA,IAAAC,IAAA;AAwBxB,OAAO,SAASC,QAAQA,CAAAC,IAAA,EAWc;EAAA,IAXb;MACvBC,QAAQ;MACRC,OAAO,GAAG,IAAI;MACdC,YAAY;MACZC,mBAAmB;MACnBC,YAAY;MACZC,gBAAgB;MAChBC,QAAQ;MACRC,QAAQ,GAAGf,cAAc;MACzBgB;IAEa,CAAC,GAAAT,IAAA;IADXU,qBAAqB,GAAAC,wBAAA,CAAAX,IAAA,EAAAY,SAAA;EAExB,IAAMC,cAAc,GAAGtB,OAAO,CAC5B,MAAMG,uBAAuB,CAACQ,OAAO,EAAE,QAAQ,CAAC,EAChD,CAACA,OAAO,CACV,CAAC;EAED,IAAMY,YAAY,GAAGvB,OAAO,CAC1B,MAAMI,gBAAgB,CAACM,QAAQ,EAAEY,cAAc,CAAC,EAChD,CAACZ,QAAQ,EAAEY,cAAc,CAC3B,CAAC;EAED,oBACEf,IAAA,CAACF;EACC;EAAA,EAAAmB,aAAA,CAAAA,aAAA,KACIL,qBAAqB;IACzBJ,gBAAgB,EAAEd,EAAE,CAAC,cAAc,EAAEc,gBAAgB,CAAE;IACvDH,YAAY,EACVA,YACD;IACDC,mBAAmB,EACjBA,mBACD;IACDC,YAAY,EACVA,YACD;IACDG,QAAQ,EAAEA,QAAS;IACnBC,iBAAiB,EAAEF,QAAQ,aAARA,QAAQ,cAARA,QAAQ,GAAIE,iBAAkB;IAAAR,QAAA,EAEhDa;EAAY,EACE,CAAC;AAEtB;AAEA,eAAef,QAAQ","ignoreList":[]}
|
|
@@ -0,0 +1,326 @@
|
|
|
1
|
+
/* stylelint-disable no-descending-specificity */
|
|
2
|
+
.dh-multi-select-trigger {
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: stretch;
|
|
5
|
+
border: none;
|
|
6
|
+
border-radius: var(--spectrum-alias-border-radius-regular, 4px);
|
|
7
|
+
background-color: var(--dh-color-input-bg);
|
|
8
|
+
color: var(--dh-color-input-fg);
|
|
9
|
+
cursor: pointer;
|
|
10
|
+
outline: none;
|
|
11
|
+
position: relative;
|
|
12
|
+
min-height: var(--spectrum-alias-single-line-height, var(--spectrum-global-dimension-size-400, 32px));
|
|
13
|
+
}
|
|
14
|
+
.dh-multi-select-trigger::after {
|
|
15
|
+
content: "";
|
|
16
|
+
position: absolute;
|
|
17
|
+
inset: 0;
|
|
18
|
+
border: 1px solid var(--dh-color-input-border);
|
|
19
|
+
border-radius: var(--spectrum-alias-border-radius-regular, 4px);
|
|
20
|
+
pointer-events: none;
|
|
21
|
+
transition: border-color 130ms ease-in-out;
|
|
22
|
+
}
|
|
23
|
+
.dh-multi-select-trigger:hover:not(.is-disabled):not(.is-read-only):not(.is-focused)::after {
|
|
24
|
+
border-color: var(--dh-color-input-hover-border);
|
|
25
|
+
}
|
|
26
|
+
.dh-multi-select-trigger:hover:not(.is-disabled):not(.is-read-only):not(.is-focused) .dh-multi-select-chevron {
|
|
27
|
+
color: var(--dh-color-selector-hover-fg);
|
|
28
|
+
background-color: var(--dh-color-selector-hover-bg);
|
|
29
|
+
}
|
|
30
|
+
.dh-multi-select-trigger:hover:not(.is-disabled):not(.is-read-only):not(.is-focused) .dh-multi-select-chevron::before {
|
|
31
|
+
border-left-color: var(--dh-color-input-hover-border);
|
|
32
|
+
}
|
|
33
|
+
.dh-multi-select-trigger.is-focused::after {
|
|
34
|
+
border-color: var(--dh-color-input-focus-border);
|
|
35
|
+
}
|
|
36
|
+
.dh-multi-select-trigger.is-focused .dh-multi-select-chevron:not(.is-open) {
|
|
37
|
+
background-color: var(--dh-color-selector-hover-bg);
|
|
38
|
+
}
|
|
39
|
+
.dh-multi-select-trigger.is-focused .dh-multi-select-chevron:not(.is-open)::before {
|
|
40
|
+
border-left-color: var(--dh-color-input-focus-border);
|
|
41
|
+
}
|
|
42
|
+
.dh-multi-select-trigger.focus-ring {
|
|
43
|
+
box-shadow: 0 0 0 1px var(--dh-color-input-focus-border);
|
|
44
|
+
}
|
|
45
|
+
.dh-multi-select-trigger.is-invalid::after {
|
|
46
|
+
border-color: var(--spectrum-textfield-border-color-error, var(--spectrum-red-900));
|
|
47
|
+
}
|
|
48
|
+
.dh-multi-select-trigger.is-invalid .dh-multi-select-chevron::before {
|
|
49
|
+
border-left-color: var(--spectrum-textfield-border-color-error, var(--spectrum-red-900));
|
|
50
|
+
}
|
|
51
|
+
.dh-multi-select-trigger.is-invalid:hover:not(.is-disabled):not(.is-read-only):not(.is-focused)::after {
|
|
52
|
+
border-color: var(--spectrum-textfield-border-color-error-hover, var(--spectrum-red-1000));
|
|
53
|
+
}
|
|
54
|
+
.dh-multi-select-trigger.is-invalid:hover:not(.is-disabled):not(.is-read-only):not(.is-focused) .dh-multi-select-chevron::before {
|
|
55
|
+
border-left-color: var(--spectrum-textfield-border-color-error-hover, var(--spectrum-red-1000));
|
|
56
|
+
}
|
|
57
|
+
.dh-multi-select-trigger.is-invalid:active:not(.is-disabled):not(.is-read-only)::after {
|
|
58
|
+
border-color: var(--spectrum-textfield-border-color-error-down, var(--spectrum-red-1100));
|
|
59
|
+
}
|
|
60
|
+
.dh-multi-select-trigger.is-invalid:active:not(.is-disabled):not(.is-read-only) .dh-multi-select-chevron::before {
|
|
61
|
+
border-left-color: var(--spectrum-textfield-border-color-error-down, var(--spectrum-red-1100));
|
|
62
|
+
}
|
|
63
|
+
.dh-multi-select-trigger.is-invalid.is-focused::after {
|
|
64
|
+
border-color: var(--dh-color-input-focus-border);
|
|
65
|
+
}
|
|
66
|
+
.dh-multi-select-trigger.is-invalid.is-focused .dh-multi-select-chevron::before {
|
|
67
|
+
border-left-color: var(--dh-color-input-focus-border);
|
|
68
|
+
}
|
|
69
|
+
.dh-multi-select-trigger.is-disabled {
|
|
70
|
+
background-color: var(--dh-color-input-disabled-bg);
|
|
71
|
+
color: var(--dh-color-input-disabled-fg);
|
|
72
|
+
cursor: default;
|
|
73
|
+
}
|
|
74
|
+
.dh-multi-select-trigger.is-disabled::after {
|
|
75
|
+
border-color: var(--dh-color-input-disabled-border);
|
|
76
|
+
}
|
|
77
|
+
.dh-multi-select-trigger.is-disabled .dh-multi-select-chevron {
|
|
78
|
+
color: var(--dh-color-selector-disabled-fg);
|
|
79
|
+
background-color: var(--dh-color-input-disabled-bg);
|
|
80
|
+
}
|
|
81
|
+
.dh-multi-select-trigger.is-disabled .dh-multi-select-chevron::before {
|
|
82
|
+
border-left-color: var(--dh-color-input-disabled-border);
|
|
83
|
+
}
|
|
84
|
+
.dh-multi-select-trigger.is-read-only {
|
|
85
|
+
cursor: default;
|
|
86
|
+
}
|
|
87
|
+
.dh-multi-select-trigger.is-quiet {
|
|
88
|
+
background: none;
|
|
89
|
+
border-radius: 0;
|
|
90
|
+
min-width: calc(2 * var(--spectrum-dropdown-height, var(--spectrum-global-dimension-size-400, 32px)));
|
|
91
|
+
}
|
|
92
|
+
.dh-multi-select-trigger.is-quiet::after {
|
|
93
|
+
border: none;
|
|
94
|
+
border-bottom: var(--spectrum-alias-input-border-size, 1px) solid var(--dh-color-input-border);
|
|
95
|
+
border-radius: 0;
|
|
96
|
+
}
|
|
97
|
+
.dh-multi-select-trigger.is-quiet:hover:not(.is-disabled):not(.is-read-only):not(.is-focused)::after {
|
|
98
|
+
border-bottom-color: var(--dh-color-input-hover-border);
|
|
99
|
+
}
|
|
100
|
+
.dh-multi-select-trigger.is-quiet:hover:not(.is-disabled):not(.is-read-only):not(.is-focused) .dh-multi-select-chevron {
|
|
101
|
+
background-color: transparent;
|
|
102
|
+
}
|
|
103
|
+
.dh-multi-select-trigger.is-quiet:hover:not(.is-disabled):not(.is-read-only):not(.is-focused) .dh-multi-select-chevron::before {
|
|
104
|
+
border-bottom-color: var(--dh-color-input-hover-border);
|
|
105
|
+
}
|
|
106
|
+
.dh-multi-select-trigger.is-quiet.is-focused::after {
|
|
107
|
+
border-bottom-color: var(--dh-color-input-focus-border);
|
|
108
|
+
}
|
|
109
|
+
.dh-multi-select-trigger.is-quiet.is-focused .dh-multi-select-chevron:not(.is-open) {
|
|
110
|
+
background-color: transparent;
|
|
111
|
+
}
|
|
112
|
+
.dh-multi-select-trigger.is-quiet.is-focused .dh-multi-select-chevron::before {
|
|
113
|
+
border-bottom-color: var(--dh-color-input-focus-border);
|
|
114
|
+
}
|
|
115
|
+
.dh-multi-select-trigger.is-quiet.focus-ring {
|
|
116
|
+
box-shadow: 0 2px 0 0 var(--dh-color-input-focus-border);
|
|
117
|
+
}
|
|
118
|
+
.dh-multi-select-trigger.is-quiet .dh-multi-select-chevron {
|
|
119
|
+
inline-size: auto;
|
|
120
|
+
padding-inline-start: var(--spectrum-global-dimension-size-130, 10px);
|
|
121
|
+
padding-inline-end: 0;
|
|
122
|
+
background-color: transparent;
|
|
123
|
+
border-radius: 0;
|
|
124
|
+
}
|
|
125
|
+
.dh-multi-select-trigger.is-quiet .dh-multi-select-chevron::before {
|
|
126
|
+
border-left: none;
|
|
127
|
+
border-bottom: var(--spectrum-alias-input-border-size, 1px) solid var(--dh-color-input-border);
|
|
128
|
+
border-radius: 0;
|
|
129
|
+
top: auto;
|
|
130
|
+
bottom: 0;
|
|
131
|
+
left: 0;
|
|
132
|
+
right: 0;
|
|
133
|
+
width: auto;
|
|
134
|
+
height: 0;
|
|
135
|
+
}
|
|
136
|
+
.dh-multi-select-trigger.is-quiet .dh-multi-select-chevron.is-open {
|
|
137
|
+
background-color: var(--spectrum-alias-background-color-transparent, transparent);
|
|
138
|
+
}
|
|
139
|
+
.dh-multi-select-trigger.is-quiet.is-disabled .dh-multi-select-chevron {
|
|
140
|
+
border-radius: 0;
|
|
141
|
+
}
|
|
142
|
+
.dh-multi-select-trigger.is-quiet.is-disabled .dh-multi-select-chevron::before {
|
|
143
|
+
border-bottom-color: var(--dh-color-input-disabled-border);
|
|
144
|
+
}
|
|
145
|
+
.dh-multi-select-trigger.is-quiet.is-invalid::after {
|
|
146
|
+
border-bottom-color: var(--spectrum-textfield-border-color-error, var(--spectrum-red-900));
|
|
147
|
+
}
|
|
148
|
+
.dh-multi-select-trigger.is-quiet.is-invalid .dh-multi-select-chevron::before {
|
|
149
|
+
border-bottom-color: var(--spectrum-textfield-border-color-error, var(--spectrum-red-900));
|
|
150
|
+
}
|
|
151
|
+
.dh-multi-select-trigger.is-quiet.is-invalid:hover:not(.is-disabled):not(.is-read-only):not(.is-focused)::after {
|
|
152
|
+
border-bottom-color: var(--spectrum-textfield-border-color-error-hover, var(--spectrum-red-1000));
|
|
153
|
+
}
|
|
154
|
+
.dh-multi-select-trigger.is-quiet.is-invalid:hover:not(.is-disabled):not(.is-read-only):not(.is-focused) .dh-multi-select-chevron::before {
|
|
155
|
+
border-bottom-color: var(--spectrum-textfield-border-color-error-hover, var(--spectrum-red-1000));
|
|
156
|
+
}
|
|
157
|
+
.dh-multi-select-trigger.is-quiet.is-invalid:active:not(.is-disabled):not(.is-read-only)::after {
|
|
158
|
+
border-bottom-color: var(--spectrum-textfield-border-color-error-down, var(--spectrum-red-1100));
|
|
159
|
+
}
|
|
160
|
+
.dh-multi-select-trigger.is-quiet.is-invalid:active:not(.is-disabled):not(.is-read-only) .dh-multi-select-chevron::before {
|
|
161
|
+
border-bottom-color: var(--spectrum-textfield-border-color-error-down, var(--spectrum-red-1100));
|
|
162
|
+
}
|
|
163
|
+
.dh-multi-select-trigger.is-quiet.is-invalid.is-focused::after {
|
|
164
|
+
border-bottom-color: var(--dh-color-input-focus-border);
|
|
165
|
+
}
|
|
166
|
+
.dh-multi-select-trigger.is-quiet.is-invalid.is-focused .dh-multi-select-chevron::before {
|
|
167
|
+
border-bottom-color: var(--dh-color-input-focus-border);
|
|
168
|
+
}
|
|
169
|
+
|
|
170
|
+
.dh-multi-select-content {
|
|
171
|
+
display: flex;
|
|
172
|
+
flex-wrap: wrap;
|
|
173
|
+
align-items: center;
|
|
174
|
+
flex: 1;
|
|
175
|
+
min-width: 0;
|
|
176
|
+
gap: calc(var(--spectrum-taggroup-tag-gap-y, var(--spectrum-global-dimension-size-100)) / 2) calc(var(--spectrum-taggroup-tag-gap-x, var(--spectrum-global-dimension-size-100)) / 2);
|
|
177
|
+
padding: 3px 0 3px 4px;
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.dh-multi-select-tag {
|
|
181
|
+
display: inline-grid;
|
|
182
|
+
grid-template-columns: 1fr auto;
|
|
183
|
+
align-items: center;
|
|
184
|
+
box-sizing: border-box;
|
|
185
|
+
max-inline-size: 100%;
|
|
186
|
+
cursor: default;
|
|
187
|
+
user-select: none;
|
|
188
|
+
block-size: var(--spectrum-tag-height, var(--spectrum-global-dimension-size-300));
|
|
189
|
+
padding-inline-start: calc(var(--spectrum-tag-padding-x, var(--spectrum-global-dimension-size-125)) - var(--spectrum-tag-border-size, var(--spectrum-alias-border-size-thin)));
|
|
190
|
+
border-style: solid;
|
|
191
|
+
border-width: var(--spectrum-tag-border-size, var(--spectrum-alias-border-size-thin));
|
|
192
|
+
border-radius: var(--spectrum-tag-border-radius, var(--spectrum-alias-border-radius-regular));
|
|
193
|
+
color: var(--spectrum-tag-text-color, var(--spectrum-global-color-gray-700));
|
|
194
|
+
background-color: var(--spectrum-tag-background-color, var(--spectrum-global-color-gray-75));
|
|
195
|
+
border-color: var(--spectrum-tag-border-color, var(--spectrum-global-color-gray-600));
|
|
196
|
+
font-size: var(--spectrum-tag-text-size, var(--spectrum-global-dimension-font-size-75));
|
|
197
|
+
transition: border-color 0.13s ease-in-out, color 0.13s ease-in-out, box-shadow 0.13s ease-in-out, background-color 0.13s ease-in-out;
|
|
198
|
+
}
|
|
199
|
+
.dh-multi-select-tag:hover {
|
|
200
|
+
background-color: var(--spectrum-tag-background-color-hover, var(--spectrum-global-color-gray-75));
|
|
201
|
+
color: var(--spectrum-tag-text-color-hover, var(--spectrum-global-color-gray-900));
|
|
202
|
+
border-color: var(--spectrum-tag-border-color-hover, var(--spectrum-global-color-gray-900));
|
|
203
|
+
}
|
|
204
|
+
.is-disabled .dh-multi-select-tag {
|
|
205
|
+
color: var(--spectrum-tag-text-color-disabled, var(--spectrum-global-color-gray-500));
|
|
206
|
+
background-color: var(--spectrum-tag-background-color-disabled, var(--spectrum-global-color-gray-200));
|
|
207
|
+
border-color: var(--spectrum-tag-border-color-disabled, var(--spectrum-global-color-gray-200));
|
|
208
|
+
pointer-events: none;
|
|
209
|
+
}
|
|
210
|
+
|
|
211
|
+
.dh-multi-select-tag-label {
|
|
212
|
+
white-space: nowrap;
|
|
213
|
+
text-overflow: ellipsis;
|
|
214
|
+
overflow: hidden;
|
|
215
|
+
line-height: calc(var(--spectrum-tag-height, var(--spectrum-global-dimension-size-300)) - var(--spectrum-tag-border-size, var(--spectrum-alias-border-size-thin)) * 2);
|
|
216
|
+
margin-inline-end: 0;
|
|
217
|
+
}
|
|
218
|
+
.dh-multi-select-tag-label:last-child {
|
|
219
|
+
margin-inline-end: var(--spectrum-tag-padding-x, var(--spectrum-global-dimension-size-125));
|
|
220
|
+
}
|
|
221
|
+
|
|
222
|
+
.dh-multi-select-tag-remove {
|
|
223
|
+
display: flex;
|
|
224
|
+
align-items: center;
|
|
225
|
+
justify-content: center;
|
|
226
|
+
box-sizing: border-box;
|
|
227
|
+
padding: 0;
|
|
228
|
+
margin: 0;
|
|
229
|
+
border: none;
|
|
230
|
+
background: transparent;
|
|
231
|
+
cursor: pointer;
|
|
232
|
+
color: inherit;
|
|
233
|
+
height: calc(var(--spectrum-tag-height, var(--spectrum-global-dimension-size-300)) - 2 * var(--spectrum-tag-border-size, var(--spectrum-alias-border-size-thin)));
|
|
234
|
+
width: var(--spectrum-global-dimension-size-300);
|
|
235
|
+
}
|
|
236
|
+
.dh-multi-select-tag-remove:hover {
|
|
237
|
+
color: var(--spectrum-tag-removable-button-icon-color-hover, var(--spectrum-global-color-gray-900));
|
|
238
|
+
}
|
|
239
|
+
.dh-multi-select-tag-remove svg {
|
|
240
|
+
width: 8px;
|
|
241
|
+
height: 8px;
|
|
242
|
+
}
|
|
243
|
+
|
|
244
|
+
.dh-multi-select-input {
|
|
245
|
+
border: none;
|
|
246
|
+
outline: none;
|
|
247
|
+
background: transparent;
|
|
248
|
+
color: var(--dh-color-input-fg);
|
|
249
|
+
font-family: inherit;
|
|
250
|
+
font-size: inherit;
|
|
251
|
+
line-height: inherit;
|
|
252
|
+
flex: 1;
|
|
253
|
+
min-width: 40px;
|
|
254
|
+
padding: 2px 0 2px 4px;
|
|
255
|
+
height: var(--spectrum-tag-height, var(--spectrum-global-dimension-size-300));
|
|
256
|
+
}
|
|
257
|
+
.dh-multi-select-input:disabled {
|
|
258
|
+
color: var(--dh-color-input-disabled-fg);
|
|
259
|
+
cursor: default;
|
|
260
|
+
}
|
|
261
|
+
|
|
262
|
+
.dh-multi-select-chevron {
|
|
263
|
+
display: flex;
|
|
264
|
+
align-items: center;
|
|
265
|
+
justify-content: center;
|
|
266
|
+
inline-size: var(--spectrum-global-dimension-size-400, 32px);
|
|
267
|
+
flex-shrink: 0;
|
|
268
|
+
align-self: stretch;
|
|
269
|
+
box-sizing: border-box;
|
|
270
|
+
position: relative;
|
|
271
|
+
padding: var(--spectrum-combobox-fieldbutton-inset, 0);
|
|
272
|
+
background-color: var(--dh-color-selector-bg);
|
|
273
|
+
background-clip: content-box;
|
|
274
|
+
color: var(--dh-color-selector-fg);
|
|
275
|
+
border-radius: 0 calc(var(--spectrum-alias-border-radius-regular, 4px) - 1px) calc(var(--spectrum-alias-border-radius-regular, 4px) - 1px) 0;
|
|
276
|
+
transition: background-color 130ms ease-in-out, color 130ms ease-in-out;
|
|
277
|
+
}
|
|
278
|
+
.dh-multi-select-chevron::before {
|
|
279
|
+
content: "";
|
|
280
|
+
position: absolute;
|
|
281
|
+
top: 0;
|
|
282
|
+
bottom: 0;
|
|
283
|
+
left: 0;
|
|
284
|
+
width: 0;
|
|
285
|
+
border-left: 1px solid var(--dh-color-input-border);
|
|
286
|
+
pointer-events: none;
|
|
287
|
+
}
|
|
288
|
+
.dh-multi-select-chevron.is-open {
|
|
289
|
+
background-color: var(--spectrum-fieldbutton-background-color-down, var(--spectrum-global-color-gray-200));
|
|
290
|
+
color: var(--spectrum-fieldbutton-icon-color-down, var(--spectrum-alias-icon-color-down));
|
|
291
|
+
}
|
|
292
|
+
.dh-multi-select-chevron.is-open::before {
|
|
293
|
+
border-left-color: var(--spectrum-fieldbutton-border-color-down, var(--spectrum-alias-border-color-down));
|
|
294
|
+
}
|
|
295
|
+
|
|
296
|
+
.dh-multi-select-invalid-icon {
|
|
297
|
+
display: flex;
|
|
298
|
+
align-items: center;
|
|
299
|
+
padding-inline-start: var(--spectrum-global-dimension-size-100, 8px);
|
|
300
|
+
padding-inline-end: var(--spectrum-global-dimension-size-100, 8px);
|
|
301
|
+
color: var(--spectrum-semantic-negative-color-icon);
|
|
302
|
+
flex-shrink: 0;
|
|
303
|
+
}
|
|
304
|
+
|
|
305
|
+
.dh-multi-select-empty {
|
|
306
|
+
display: block;
|
|
307
|
+
padding-top: var(--spectrum-selectlist-option-padding-height);
|
|
308
|
+
padding-inline-start: var(--spectrum-selectlist-option-padding, var(--spectrum-global-dimension-static-size-150));
|
|
309
|
+
font-size: var(--spectrum-selectlist-option-text-size, var(--spectrum-alias-font-size-default));
|
|
310
|
+
font-weight: var(--spectrum-selectlist-option-text-font-weight, var(--spectrum-global-font-weight-regular));
|
|
311
|
+
}
|
|
312
|
+
|
|
313
|
+
.dh-multi-select-loading-circle {
|
|
314
|
+
display: flex;
|
|
315
|
+
align-items: center;
|
|
316
|
+
justify-content: center;
|
|
317
|
+
padding-inline-end: 8px;
|
|
318
|
+
padding-inline-start: 4px;
|
|
319
|
+
}
|
|
320
|
+
|
|
321
|
+
[role=option][data-dh-focused=true] {
|
|
322
|
+
background-color: var(--dh-color-item-list-hover-bg);
|
|
323
|
+
border-inline-start-color: var(--spectrum-selectlist-option-focus-indicator-color, var(--spectrum-alias-border-color-focus));
|
|
324
|
+
}
|
|
325
|
+
|
|
326
|
+
/*# sourceMappingURL=MultiSelect.css.map */
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sourceRoot":"","sources":["../../../src/spectrum/multiSelect/MultiSelect.scss"],"names":[],"mappings":"AAAA;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAKA;EACE;;AAGF;EACE;EACA;;AAEA;EACE;;AAOJ;EACE;;AAGF;EACE;;AAEA;EACE;;AAMN;EACE;;AAKA;EACE;;AAMF;EACE;;AAOA;EACE;;AAMF;EACE;;AAQF;EACE;;AAMF;EACE;;AAQF;EACE;;AAGF;EACE;;AAMN;EACE;EACA;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEA;EACE;;AAMN;EACE;;AAIF;EACE;EACA;EACA;;AAQA;EACE;EACA;EAEA;;AAIA;EACE;;AAGF;EACE;;AAEA;EACE;;AAMJ;EACE;;AAGF;EACE;;AAGF;EACE;;AAKJ;EACE;;AAGF;EACE;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAOJ;EACE;;AAEA;EACE;;AAMF;EACE;;AAMF;EACE;;AAOA;EACE;;AAMF;EACE;;AAQF;EACE;;AAMF;EACE;;AASF;EACE;;AAGF;EACE;;;AAQV;EACE;EACA;EACA;EACA;EACA;EAGA;EAYA;;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAIA;EAIA;EACA;EAIA;EAIA;EACA;EAIA;EAIA;EAIA,YACE;;AAKF;EACE;EAIA;EAIA;;AAMF;EACE;EAIA;EAIA;EAIA;;;AAKJ;EACE;EACA;EACA;EACA;EAOA;;AAGA;EACE;;;AAQJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAUA;;AAEA;EACE;;AAOF;EACE;EACA;;;AAKJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;;AAEA;EACE;EACA;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAEA,YACE;;AAIF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACE;EAIA;;AAKA;EACE;;;AASN;EACE;EACA;EACA;EACA;EACA;EACA;;;AAIF;EACE;EACA;EACA;EAIA;EAIA;;;AAOF;EACE;EACA;EACA;EAEA;EACA;;;AAKF;EACE;EACA","file":"MultiSelect.css","sourcesContent":["/* stylelint-disable no-descending-specificity */\n.dh-multi-select-trigger {\n display: flex;\n align-items: stretch;\n border: none;\n border-radius: var(--spectrum-alias-border-radius-regular, 4px);\n background-color: var(--dh-color-input-bg);\n color: var(--dh-color-input-fg);\n cursor: pointer;\n outline: none;\n position: relative;\n min-height: var(\n --spectrum-alias-single-line-height,\n var(--spectrum-global-dimension-size-400, 32px)\n );\n\n // Visual border via ::after: paints on top of all children (including chevron)\n &::after {\n content: '';\n position: absolute;\n inset: 0;\n border: 1px solid var(--dh-color-input-border);\n border-radius: var(--spectrum-alias-border-radius-regular, 4px);\n pointer-events: none;\n transition: border-color 130ms ease-in-out;\n }\n\n // Hover state: :not(.is-focused) ensures focus styles take precedence\n &:hover:not(.is-disabled):not(.is-read-only):not(.is-focused) {\n &::after {\n border-color: var(--dh-color-input-hover-border);\n }\n\n .dh-multi-select-chevron {\n color: var(--dh-color-selector-hover-fg);\n background-color: var(--dh-color-selector-hover-bg);\n\n &::before {\n border-left-color: var(--dh-color-input-hover-border);\n }\n }\n }\n\n // Focus state: applied by FocusRing `focusClass`\n &.is-focused {\n &::after {\n border-color: var(--dh-color-input-focus-border);\n }\n\n .dh-multi-select-chevron:not(.is-open) {\n background-color: var(--dh-color-selector-hover-bg);\n\n &::before {\n border-left-color: var(--dh-color-input-focus-border);\n }\n }\n }\n\n // Focus ring: applied by FocusRing `focusRingClass`\n &.focus-ring {\n box-shadow: 0 0 0 1px var(--dh-color-input-focus-border);\n }\n\n // Invalid state: outer border + chevron divider red.\n &.is-invalid {\n &::after {\n border-color: var(\n --spectrum-textfield-border-color-error,\n var(--spectrum-red-900)\n );\n }\n\n .dh-multi-select-chevron::before {\n border-left-color: var(\n --spectrum-textfield-border-color-error,\n var(--spectrum-red-900)\n );\n }\n\n &:hover:not(.is-disabled):not(.is-read-only):not(.is-focused) {\n &::after {\n border-color: var(\n --spectrum-textfield-border-color-error-hover,\n var(--spectrum-red-1000)\n );\n }\n\n .dh-multi-select-chevron::before {\n border-left-color: var(\n --spectrum-textfield-border-color-error-hover,\n var(--spectrum-red-1000)\n );\n }\n }\n\n &:active:not(.is-disabled):not(.is-read-only) {\n &::after {\n border-color: var(\n --spectrum-textfield-border-color-error-down,\n var(--spectrum-red-1100)\n );\n }\n\n .dh-multi-select-chevron::before {\n border-left-color: var(\n --spectrum-textfield-border-color-error-down,\n var(--spectrum-red-1100)\n );\n }\n }\n\n &.is-focused {\n &::after {\n border-color: var(--dh-color-input-focus-border);\n }\n\n .dh-multi-select-chevron::before {\n border-left-color: var(--dh-color-input-focus-border);\n }\n }\n }\n\n // Disabled state\n &.is-disabled {\n background-color: var(--dh-color-input-disabled-bg);\n color: var(--dh-color-input-disabled-fg);\n cursor: default;\n\n &::after {\n border-color: var(--dh-color-input-disabled-border);\n }\n\n .dh-multi-select-chevron {\n color: var(--dh-color-selector-disabled-fg);\n background-color: var(--dh-color-input-disabled-bg);\n\n &::before {\n border-left-color: var(--dh-color-input-disabled-border);\n }\n }\n }\n\n // Read-only state\n &.is-read-only {\n cursor: default;\n }\n\n // Quiet variant: matches Spectrum ComboBox quiet\n &.is-quiet {\n background: none;\n border-radius: 0;\n min-width: calc(\n 2 *\n var(\n --spectrum-dropdown-height,\n var(--spectrum-global-dimension-size-400, 32px)\n )\n );\n\n &::after {\n border: none;\n border-bottom: var(--spectrum-alias-input-border-size, 1px) solid\n var(--dh-color-input-border);\n border-radius: 0;\n }\n\n &:hover:not(.is-disabled):not(.is-read-only):not(.is-focused) {\n &::after {\n border-bottom-color: var(--dh-color-input-hover-border);\n }\n\n .dh-multi-select-chevron {\n background-color: transparent;\n\n &::before {\n border-bottom-color: var(--dh-color-input-hover-border);\n }\n }\n }\n\n &.is-focused {\n &::after {\n border-bottom-color: var(--dh-color-input-focus-border);\n }\n\n .dh-multi-select-chevron:not(.is-open) {\n background-color: transparent;\n }\n\n .dh-multi-select-chevron::before {\n border-bottom-color: var(--dh-color-input-focus-border);\n }\n }\n\n // Quiet focus ring for bottom-only line (not full outline)\n &.focus-ring {\n box-shadow: 0 2px 0 0 var(--dh-color-input-focus-border);\n }\n\n .dh-multi-select-chevron {\n inline-size: auto;\n padding-inline-start: var(--spectrum-global-dimension-size-130, 10px);\n padding-inline-end: 0;\n background-color: transparent;\n border-radius: 0;\n\n // Bottom border continuation instead of left separator\n &::before {\n border-left: none;\n border-bottom: var(--spectrum-alias-input-border-size, 1px) solid\n var(--dh-color-input-border);\n border-radius: 0;\n top: auto;\n bottom: 0;\n left: 0;\n right: 0;\n width: auto;\n height: 0;\n }\n\n &.is-open {\n background-color: var(\n --spectrum-alias-background-color-transparent,\n transparent\n );\n }\n }\n\n &.is-disabled .dh-multi-select-chevron {\n border-radius: 0;\n\n &::before {\n border-bottom-color: var(--dh-color-input-disabled-border);\n }\n }\n\n // Invalid quiet variant: bottom borders red.\n &.is-invalid {\n &::after {\n border-bottom-color: var(\n --spectrum-textfield-border-color-error,\n var(--spectrum-red-900)\n );\n }\n\n .dh-multi-select-chevron::before {\n border-bottom-color: var(\n --spectrum-textfield-border-color-error,\n var(--spectrum-red-900)\n );\n }\n\n &:hover:not(.is-disabled):not(.is-read-only):not(.is-focused) {\n &::after {\n border-bottom-color: var(\n --spectrum-textfield-border-color-error-hover,\n var(--spectrum-red-1000)\n );\n }\n\n .dh-multi-select-chevron::before {\n border-bottom-color: var(\n --spectrum-textfield-border-color-error-hover,\n var(--spectrum-red-1000)\n );\n }\n }\n\n &:active:not(.is-disabled):not(.is-read-only) {\n &::after {\n border-bottom-color: var(\n --spectrum-textfield-border-color-error-down,\n var(--spectrum-red-1100)\n );\n }\n\n .dh-multi-select-chevron::before {\n border-bottom-color: var(\n --spectrum-textfield-border-color-error-down,\n var(--spectrum-red-1100)\n );\n }\n }\n\n // Focus overrides red (specificity boost via &.is-invalid).\n &.is-focused {\n &::after {\n border-bottom-color: var(--dh-color-input-focus-border);\n }\n\n .dh-multi-select-chevron::before {\n border-bottom-color: var(--dh-color-input-focus-border);\n }\n }\n }\n }\n}\n\n// Content area tags + input wrapping flow.\n.dh-multi-select-content {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n flex: 1;\n min-width: 0;\n // Half Spectrum's tag-group gap tokens: container gap is single-spaced, while\n // Spectrum's per-tag margins double up between adjacent items.\n gap: calc(\n var(\n --spectrum-taggroup-tag-gap-y,\n var(--spectrum-global-dimension-size-100)\n ) / 2\n )\n calc(\n var(\n --spectrum-taggroup-tag-gap-x,\n var(--spectrum-global-dimension-size-100)\n ) / 2\n );\n padding: 3px 0 3px 4px;\n}\n\n// Custom tag chip: matches Spectrum .spectrum-Tag exactly.\n.dh-multi-select-tag {\n display: inline-grid;\n grid-template-columns: 1fr auto;\n align-items: center;\n box-sizing: border-box;\n max-inline-size: 100%;\n cursor: default;\n user-select: none;\n block-size: var(\n --spectrum-tag-height,\n var(--spectrum-global-dimension-size-300)\n );\n padding-inline-start: calc(\n var(--spectrum-tag-padding-x, var(--spectrum-global-dimension-size-125)) -\n var(--spectrum-tag-border-size, var(--spectrum-alias-border-size-thin))\n );\n border-style: solid;\n border-width: var(\n --spectrum-tag-border-size,\n var(--spectrum-alias-border-size-thin)\n );\n border-radius: var(\n --spectrum-tag-border-radius,\n var(--spectrum-alias-border-radius-regular)\n );\n color: var(--spectrum-tag-text-color, var(--spectrum-global-color-gray-700));\n background-color: var(\n --spectrum-tag-background-color,\n var(--spectrum-global-color-gray-75)\n );\n border-color: var(\n --spectrum-tag-border-color,\n var(--spectrum-global-color-gray-600)\n );\n font-size: var(\n --spectrum-tag-text-size,\n var(--spectrum-global-dimension-font-size-75)\n );\n transition:\n border-color 0.13s ease-in-out,\n color 0.13s ease-in-out,\n box-shadow 0.13s ease-in-out,\n background-color 0.13s ease-in-out;\n\n &:hover {\n background-color: var(\n --spectrum-tag-background-color-hover,\n var(--spectrum-global-color-gray-75)\n );\n color: var(\n --spectrum-tag-text-color-hover,\n var(--spectrum-global-color-gray-900)\n );\n border-color: var(\n --spectrum-tag-border-color-hover,\n var(--spectrum-global-color-gray-900)\n );\n }\n\n .is-disabled & {\n color: var(\n --spectrum-tag-text-color-disabled,\n var(--spectrum-global-color-gray-500)\n );\n background-color: var(\n --spectrum-tag-background-color-disabled,\n var(--spectrum-global-color-gray-200)\n );\n border-color: var(\n --spectrum-tag-border-color-disabled,\n var(--spectrum-global-color-gray-200)\n );\n pointer-events: none;\n }\n}\n\n// Tag label: matches Spectrum .spectrum-Tag-content\n.dh-multi-select-tag-label {\n white-space: nowrap;\n text-overflow: ellipsis;\n overflow: hidden;\n line-height: calc(\n var(--spectrum-tag-height, var(--spectrum-global-dimension-size-300)) -\n calc(\n var(--spectrum-tag-border-size, var(--spectrum-alias-border-size-thin)) *\n 2\n )\n );\n margin-inline-end: 0;\n\n // When there's no remove button, add end padding to match Spectrum.\n &:last-child {\n margin-inline-end: var(\n --spectrum-tag-padding-x,\n var(--spectrum-global-dimension-size-125)\n );\n }\n}\n\n// Tag remove button: matches Spectrum .spectrum-Tag-removeButton dimensions\n.dh-multi-select-tag-remove {\n display: flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n padding: 0;\n margin: 0;\n border: none;\n background: transparent;\n cursor: pointer;\n color: inherit;\n height: calc(\n var(--spectrum-tag-height, var(--spectrum-global-dimension-size-300)) -\n (\n 2 *\n var(\n --spectrum-tag-border-size,\n var(--spectrum-alias-border-size-thin)\n )\n )\n );\n width: var(--spectrum-global-dimension-size-300);\n\n &:hover {\n color: var(\n --spectrum-tag-removable-button-icon-color-hover,\n var(--spectrum-global-color-gray-900)\n );\n }\n\n // Scale down the CrossSmall icon to fit the tag\n svg {\n width: 8px;\n height: 8px;\n }\n}\n\n// Inline filter input: fills remaining space on the last row of tags.\n.dh-multi-select-input {\n border: none;\n outline: none;\n background: transparent;\n color: var(--dh-color-input-fg);\n font-family: inherit;\n font-size: inherit;\n line-height: inherit;\n flex: 1;\n min-width: 40px;\n padding: 2px 0 2px 4px;\n // Match tag height so input aligns with tags on the same row\n height: var(--spectrum-tag-height, var(--spectrum-global-dimension-size-300));\n\n &:disabled {\n color: var(--dh-color-input-disabled-fg);\n cursor: default;\n }\n}\n\n.dh-multi-select-chevron {\n display: flex;\n align-items: center;\n justify-content: center;\n inline-size: var(--spectrum-global-dimension-size-400, 32px);\n flex-shrink: 0;\n align-self: stretch;\n box-sizing: border-box;\n position: relative;\n padding: var(--spectrum-combobox-fieldbutton-inset, 0);\n background-color: var(--dh-color-selector-bg);\n background-clip: content-box;\n color: var(--dh-color-selector-fg);\n border-radius: 0 calc(var(--spectrum-alias-border-radius-regular, 4px) - 1px)\n calc(var(--spectrum-alias-border-radius-regular, 4px) - 1px) 0;\n transition:\n background-color 130ms ease-in-out,\n color 130ms ease-in-out;\n\n // Left separator line via pseudo-element (matches Spectrum FieldButton pattern)\n &::before {\n content: '';\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 0;\n border-left: 1px solid var(--dh-color-input-border);\n pointer-events: none;\n }\n\n // Active/open state: matches Spectrum FieldButton is-active.\n &.is-open {\n background-color: var(\n --spectrum-fieldbutton-background-color-down,\n var(--spectrum-global-color-gray-200)\n );\n color: var(\n --spectrum-fieldbutton-icon-color-down,\n var(--spectrum-alias-icon-color-down)\n );\n\n &::before {\n border-left-color: var(\n --spectrum-fieldbutton-border-color-down,\n var(--spectrum-alias-border-color-down)\n );\n }\n }\n}\n\n// Validation icon shown left of chevron when validationState=\"invalid\".\n.dh-multi-select-invalid-icon {\n display: flex;\n align-items: center;\n padding-inline-start: var(--spectrum-global-dimension-size-100, 8px);\n padding-inline-end: var(--spectrum-global-dimension-size-100, 8px);\n color: var(--spectrum-semantic-negative-color-icon);\n flex-shrink: 0;\n}\n\n// Mirrors Spectrum ComboBox .no-results rule.\n.dh-multi-select-empty {\n display: block;\n padding-top: var(--spectrum-selectlist-option-padding-height);\n padding-inline-start: var(\n --spectrum-selectlist-option-padding,\n var(--spectrum-global-dimension-static-size-150)\n );\n font-size: var(\n --spectrum-selectlist-option-text-size,\n var(--spectrum-alias-font-size-default)\n );\n font-weight: var(\n --spectrum-selectlist-option-text-font-weight,\n var(--spectrum-global-font-weight-regular)\n );\n}\n\n// Inline loading spinner.\n.dh-multi-select-loading-circle {\n display: flex;\n align-items: center;\n justify-content: center;\n // Inset to align with single-select spinner position.\n padding-inline-end: 8px;\n padding-inline-start: 4px;\n}\n\n// Virtual focus highlight (keyboard nav). Popover lives in a portal,\n// so the selector is unscoped.\n[role='option'][data-dh-focused='true'] {\n background-color: var(--dh-color-item-list-hover-bg);\n border-inline-start-color: var(\n --spectrum-selectlist-option-focus-indicator-color,\n var(--spectrum-alias-border-color-focus)\n );\n}\n"]}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { type MultiSelectProps } from './MultiSelectProps';
|
|
3
|
+
import './MultiSelect.scss';
|
|
4
|
+
/** Forwarded-ref wrapper. Trigger is a <div>, matching Picker's DOMRef shape. */
|
|
5
|
+
export declare const MultiSelect: React.ForwardRefExoticComponent<MultiSelectProps & React.RefAttributes<HTMLDivElement>>;
|
|
6
|
+
export default MultiSelect;
|
|
7
|
+
//# sourceMappingURL=MultiSelect.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MultiSelect.d.ts","sourceRoot":"","sources":["../../../src/spectrum/multiSelect/MultiSelect.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA8C,MAAM,OAAO,CAAC;AAgBnE,OAAO,EAAE,KAAK,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AAa3D,OAAO,oBAAoB,CAAC;AAkf5B,iFAAiF;AACjF,eAAO,MAAM,WAAW,yFAAqC,CAAC;AAG9D,eAAe,WAAW,CAAC"}
|