@navikt/ds-react 8.5.2 → 8.7.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/cjs/data/drag-and-drop/item/DataDragAndDropItem.d.ts +27 -0
- package/cjs/data/drag-and-drop/item/DataDragAndDropItem.js +91 -0
- package/cjs/data/drag-and-drop/item/DataDragAndDropItem.js.map +1 -0
- package/cjs/data/drag-and-drop/root/DataDragAndDrop.context.d.ts +5 -0
- package/cjs/data/drag-and-drop/root/DataDragAndDrop.context.js +6 -0
- package/cjs/data/drag-and-drop/root/DataDragAndDrop.context.js.map +1 -0
- package/cjs/data/drag-and-drop/root/DataDragAndDropRoot.d.ts +24 -0
- package/cjs/data/drag-and-drop/root/DataDragAndDropRoot.js +111 -0
- package/cjs/data/drag-and-drop/root/DataDragAndDropRoot.js.map +1 -0
- package/cjs/data/table/helpers/table-keyboard.d.ts +1 -0
- package/cjs/data/table/helpers/table-keyboard.js +5 -3
- package/cjs/data/table/helpers/table-keyboard.js.map +1 -1
- package/cjs/data/table/root/DataTableRoot.context.d.ts +8 -0
- package/cjs/data/table/root/DataTableRoot.context.js +11 -0
- package/cjs/data/table/root/DataTableRoot.context.js.map +1 -0
- package/cjs/data/table/root/DataTableRoot.js +5 -3
- package/cjs/data/table/root/DataTableRoot.js.map +1 -1
- package/cjs/data/table/th/DataTableTh.d.ts +18 -2
- package/cjs/data/table/th/DataTableTh.js +45 -20
- package/cjs/data/table/th/DataTableTh.js.map +1 -1
- package/cjs/data/table/tr/DataTableTr.js +9 -2
- package/cjs/data/table/tr/DataTableTr.js.map +1 -1
- package/cjs/data/token-filter/AutoSuggest.d.ts +6 -2
- package/cjs/data/token-filter/AutoSuggest.js +46 -14
- package/cjs/data/token-filter/AutoSuggest.js.map +1 -1
- package/cjs/data/token-filter/AutoSuggest.types.d.ts +0 -1
- package/cjs/data/token-filter/TokenFilter.d.ts +10 -5
- package/cjs/data/token-filter/TokenFilter.js +110 -48
- package/cjs/data/token-filter/TokenFilter.js.map +1 -1
- package/cjs/data/token-filter/TokenFilter.types.d.ts +51 -35
- package/cjs/data/token-filter/helpers/generate-autocomplete-options.d.ts +3 -6
- package/cjs/data/token-filter/helpers/generate-autocomplete-options.js +24 -37
- package/cjs/data/token-filter/helpers/generate-autocomplete-options.js.map +1 -1
- package/cjs/data/token-filter/helpers/operators.d.ts +6 -6
- package/cjs/data/token-filter/helpers/operators.js +3 -4
- package/cjs/data/token-filter/helpers/operators.js.map +1 -1
- package/cjs/data/token-filter/helpers/parse-query-text.d.ts +2 -20
- package/cjs/data/token-filter/helpers/parse-query-text.js +1 -1
- package/cjs/data/token-filter/helpers/parse-query-text.js.map +1 -1
- package/cjs/data/token-filter/helpers/query-builder.d.ts +2 -2
- package/cjs/data/token-filter/helpers/query-builder.js.map +1 -1
- package/cjs/date/Date.Dialog.d.ts +5 -1
- package/cjs/date/Date.Dialog.js +6 -2
- package/cjs/date/Date.Dialog.js.map +1 -1
- package/cjs/date/datepicker/DatePicker.js +3 -2
- package/cjs/date/datepicker/DatePicker.js.map +1 -1
- package/cjs/date/datepicker/hooks/useDatepicker.js +5 -2
- package/cjs/date/datepicker/hooks/useDatepicker.js.map +1 -1
- package/cjs/date/datepicker/hooks/useRangeDatepicker.js +3 -1
- package/cjs/date/datepicker/hooks/useRangeDatepicker.js.map +1 -1
- package/cjs/date/datepicker/parts/DatePicker.Months.d.ts +2 -1
- package/cjs/date/datepicker/parts/DatePicker.Months.js +3 -3
- package/cjs/date/datepicker/parts/DatePicker.Months.js.map +1 -1
- package/cjs/date/datepicker/parts/DatePicker.RDP.d.ts +5 -1
- package/cjs/date/datepicker/parts/DatePicker.RDP.js +2 -2
- package/cjs/date/datepicker/parts/DatePicker.RDP.js.map +1 -1
- package/cjs/date/monthpicker/MonthPicker.js +3 -2
- package/cjs/date/monthpicker/MonthPicker.js.map +1 -1
- package/cjs/date/monthpicker/hooks/useMonthPicker.js +3 -1
- package/cjs/date/monthpicker/hooks/useMonthPicker.js.map +1 -1
- package/cjs/date/monthpicker/parts/MonthPicker.Caption.d.ts +4 -1
- package/cjs/date/monthpicker/parts/MonthPicker.Caption.js +3 -2
- package/cjs/date/monthpicker/parts/MonthPicker.Caption.js.map +1 -1
- package/cjs/dropdown/Toggle.js +5 -12
- package/cjs/dropdown/Toggle.js.map +1 -1
- package/cjs/form/combobox/Input/Input.js +1 -1
- package/cjs/form/combobox/Input/Input.js.map +1 -1
- package/cjs/inline-message/root/InlineMessage.js +2 -2
- package/cjs/inline-message/root/InlineMessage.js.map +1 -1
- package/cjs/provider/Provider.d.ts +2 -2
- package/cjs/toggle-group/useToggleGroup.js +5 -3
- package/cjs/toggle-group/useToggleGroup.js.map +1 -1
- package/cjs/tooltip/Tooltip.js +1 -3
- package/cjs/tooltip/Tooltip.js.map +1 -1
- package/cjs/utils/components/HighlightText/HighlightText.d.ts +8 -0
- package/cjs/utils/components/HighlightText/HighlightText.js +27 -0
- package/cjs/utils/components/HighlightText/HighlightText.js.map +1 -0
- package/cjs/utils/components/Listbox/group/ListboxGroup.d.ts +7 -0
- package/cjs/utils/components/Listbox/group/ListboxGroup.js +15 -0
- package/cjs/utils/components/Listbox/group/ListboxGroup.js.map +1 -0
- package/cjs/utils/components/Listbox/input-slot/ListboxInputSlot.d.ts +7 -0
- package/cjs/utils/components/Listbox/input-slot/ListboxInputSlot.js +15 -0
- package/cjs/utils/components/Listbox/input-slot/ListboxInputSlot.js.map +1 -0
- package/cjs/utils/components/Listbox/item/ListboxItem.d.ts +24 -0
- package/cjs/utils/components/Listbox/item/ListboxItem.js +33 -0
- package/cjs/utils/components/Listbox/item/ListboxItem.js.map +1 -0
- package/cjs/utils/components/Listbox/list/ListboxList.d.ts +8 -0
- package/cjs/utils/components/Listbox/list/ListboxList.js +32 -0
- package/cjs/utils/components/Listbox/list/ListboxList.js.map +1 -0
- package/cjs/utils/components/Listbox/root/ListboxRoot.d.ts +20 -0
- package/cjs/utils/components/Listbox/root/ListboxRoot.js +84 -0
- package/cjs/utils/components/Listbox/root/ListboxRoot.js.map +1 -0
- package/cjs/utils/components/Listbox/root/domHelpers.d.ts +3 -0
- package/cjs/utils/components/Listbox/root/domHelpers.js +53 -0
- package/cjs/utils/components/Listbox/root/domHelpers.js.map +1 -0
- package/cjs/utils/components/focus-boundary/FocusBoundary.js +9 -64
- package/cjs/utils/components/focus-boundary/FocusBoundary.js.map +1 -1
- package/cjs/utils/helpers/focus.d.ts +14 -0
- package/cjs/utils/helpers/focus.js +63 -0
- package/cjs/utils/helpers/focus.js.map +1 -0
- package/cjs/utils/hooks/useDeferredValue.d.ts +1 -0
- package/cjs/utils/hooks/useDeferredValue.js +14 -0
- package/cjs/utils/hooks/useDeferredValue.js.map +1 -0
- package/esm/data/drag-and-drop/item/DataDragAndDropItem.d.ts +27 -0
- package/esm/data/drag-and-drop/item/DataDragAndDropItem.js +55 -0
- package/esm/data/drag-and-drop/item/DataDragAndDropItem.js.map +1 -0
- package/esm/data/drag-and-drop/root/DataDragAndDrop.context.d.ts +5 -0
- package/esm/data/drag-and-drop/root/DataDragAndDrop.context.js +3 -0
- package/esm/data/drag-and-drop/root/DataDragAndDrop.context.js.map +1 -0
- package/esm/data/drag-and-drop/root/DataDragAndDropRoot.d.ts +24 -0
- package/esm/data/drag-and-drop/root/DataDragAndDropRoot.js +71 -0
- package/esm/data/drag-and-drop/root/DataDragAndDropRoot.js.map +1 -0
- package/esm/data/table/helpers/table-keyboard.d.ts +1 -0
- package/esm/data/table/helpers/table-keyboard.js +5 -3
- package/esm/data/table/helpers/table-keyboard.js.map +1 -1
- package/esm/data/table/root/DataTableRoot.context.d.ts +8 -0
- package/esm/data/table/root/DataTableRoot.context.js +7 -0
- package/esm/data/table/root/DataTableRoot.context.js.map +1 -0
- package/esm/data/table/root/DataTableRoot.js +5 -3
- package/esm/data/table/root/DataTableRoot.js.map +1 -1
- package/esm/data/table/th/DataTableTh.d.ts +18 -2
- package/esm/data/table/th/DataTableTh.js +46 -21
- package/esm/data/table/th/DataTableTh.js.map +1 -1
- package/esm/data/table/tr/DataTableTr.js +9 -2
- package/esm/data/table/tr/DataTableTr.js.map +1 -1
- package/esm/data/token-filter/AutoSuggest.d.ts +6 -2
- package/esm/data/token-filter/AutoSuggest.js +45 -16
- package/esm/data/token-filter/AutoSuggest.js.map +1 -1
- package/esm/data/token-filter/AutoSuggest.types.d.ts +0 -1
- package/esm/data/token-filter/TokenFilter.d.ts +10 -5
- package/esm/data/token-filter/TokenFilter.js +110 -48
- package/esm/data/token-filter/TokenFilter.js.map +1 -1
- package/esm/data/token-filter/TokenFilter.types.d.ts +51 -35
- package/esm/data/token-filter/helpers/generate-autocomplete-options.d.ts +3 -6
- package/esm/data/token-filter/helpers/generate-autocomplete-options.js +24 -37
- package/esm/data/token-filter/helpers/generate-autocomplete-options.js.map +1 -1
- package/esm/data/token-filter/helpers/operators.d.ts +6 -6
- package/esm/data/token-filter/helpers/operators.js +3 -4
- package/esm/data/token-filter/helpers/operators.js.map +1 -1
- package/esm/data/token-filter/helpers/parse-query-text.d.ts +2 -20
- package/esm/data/token-filter/helpers/parse-query-text.js +1 -1
- package/esm/data/token-filter/helpers/parse-query-text.js.map +1 -1
- package/esm/data/token-filter/helpers/query-builder.d.ts +2 -2
- package/esm/data/token-filter/helpers/query-builder.js.map +1 -1
- package/esm/date/Date.Dialog.d.ts +5 -1
- package/esm/date/Date.Dialog.js +6 -2
- package/esm/date/Date.Dialog.js.map +1 -1
- package/esm/date/datepicker/DatePicker.js +3 -2
- package/esm/date/datepicker/DatePicker.js.map +1 -1
- package/esm/date/datepicker/hooks/useDatepicker.js +5 -2
- package/esm/date/datepicker/hooks/useDatepicker.js.map +1 -1
- package/esm/date/datepicker/hooks/useRangeDatepicker.js +3 -1
- package/esm/date/datepicker/hooks/useRangeDatepicker.js.map +1 -1
- package/esm/date/datepicker/parts/DatePicker.Months.d.ts +2 -1
- package/esm/date/datepicker/parts/DatePicker.Months.js +3 -3
- package/esm/date/datepicker/parts/DatePicker.Months.js.map +1 -1
- package/esm/date/datepicker/parts/DatePicker.RDP.d.ts +5 -1
- package/esm/date/datepicker/parts/DatePicker.RDP.js +2 -2
- package/esm/date/datepicker/parts/DatePicker.RDP.js.map +1 -1
- package/esm/date/monthpicker/MonthPicker.js +3 -2
- package/esm/date/monthpicker/MonthPicker.js.map +1 -1
- package/esm/date/monthpicker/hooks/useMonthPicker.js +3 -1
- package/esm/date/monthpicker/hooks/useMonthPicker.js.map +1 -1
- package/esm/date/monthpicker/parts/MonthPicker.Caption.d.ts +4 -1
- package/esm/date/monthpicker/parts/MonthPicker.Caption.js +3 -2
- package/esm/date/monthpicker/parts/MonthPicker.Caption.js.map +1 -1
- package/esm/dropdown/Toggle.js +5 -12
- package/esm/dropdown/Toggle.js.map +1 -1
- package/esm/form/combobox/Input/Input.js +1 -1
- package/esm/form/combobox/Input/Input.js.map +1 -1
- package/esm/inline-message/root/InlineMessage.js +3 -3
- package/esm/inline-message/root/InlineMessage.js.map +1 -1
- package/esm/provider/Provider.d.ts +2 -2
- package/esm/toggle-group/useToggleGroup.js +6 -4
- package/esm/toggle-group/useToggleGroup.js.map +1 -1
- package/esm/tooltip/Tooltip.js +1 -3
- package/esm/tooltip/Tooltip.js.map +1 -1
- package/esm/utils/components/HighlightText/HighlightText.d.ts +8 -0
- package/esm/utils/components/HighlightText/HighlightText.js +21 -0
- package/esm/utils/components/HighlightText/HighlightText.js.map +1 -0
- package/esm/utils/components/Listbox/group/ListboxGroup.d.ts +7 -0
- package/esm/utils/components/Listbox/group/ListboxGroup.js +10 -0
- package/esm/utils/components/Listbox/group/ListboxGroup.js.map +1 -0
- package/esm/utils/components/Listbox/input-slot/ListboxInputSlot.d.ts +7 -0
- package/esm/utils/components/Listbox/input-slot/ListboxInputSlot.js +9 -0
- package/esm/utils/components/Listbox/input-slot/ListboxInputSlot.js.map +1 -0
- package/esm/utils/components/Listbox/item/ListboxItem.d.ts +24 -0
- package/esm/utils/components/Listbox/item/ListboxItem.js +27 -0
- package/esm/utils/components/Listbox/item/ListboxItem.js.map +1 -0
- package/esm/utils/components/Listbox/list/ListboxList.d.ts +8 -0
- package/esm/utils/components/Listbox/list/ListboxList.js +27 -0
- package/esm/utils/components/Listbox/list/ListboxList.js.map +1 -0
- package/esm/utils/components/Listbox/root/ListboxRoot.d.ts +20 -0
- package/esm/utils/components/Listbox/root/ListboxRoot.js +79 -0
- package/esm/utils/components/Listbox/root/ListboxRoot.js.map +1 -0
- package/esm/utils/components/Listbox/root/domHelpers.d.ts +3 -0
- package/esm/utils/components/Listbox/root/domHelpers.js +50 -0
- package/esm/utils/components/Listbox/root/domHelpers.js.map +1 -0
- package/esm/utils/components/focus-boundary/FocusBoundary.js +8 -63
- package/esm/utils/components/focus-boundary/FocusBoundary.js.map +1 -1
- package/esm/utils/helpers/focus.d.ts +14 -0
- package/esm/utils/helpers/focus.js +60 -0
- package/esm/utils/helpers/focus.js.map +1 -0
- package/esm/utils/hooks/useDeferredValue.d.ts +1 -0
- package/esm/utils/hooks/useDeferredValue.js +7 -0
- package/esm/utils/hooks/useDeferredValue.js.map +1 -0
- package/package.json +7 -7
- package/src/data/drag-and-drop/item/DataDragAndDropItem.tsx +101 -0
- package/src/data/drag-and-drop/root/DataDragAndDrop.context.tsx +9 -0
- package/src/data/drag-and-drop/root/DataDragAndDropRoot.tsx +98 -0
- package/src/data/table/helpers/table-keyboard.ts +7 -3
- package/src/data/table/root/DataTableRoot.context.ts +13 -0
- package/src/data/table/root/DataTableRoot.tsx +16 -13
- package/src/data/table/th/DataTableTh.tsx +110 -54
- package/src/data/table/tr/DataTableTr.tsx +13 -2
- package/src/data/token-filter/AutoSuggest.tsx +142 -35
- package/src/data/token-filter/AutoSuggest.types.ts +0 -1
- package/src/data/token-filter/TokenFilter.tsx +179 -81
- package/src/data/token-filter/TokenFilter.types.ts +70 -44
- package/src/data/token-filter/helpers/generate-autocomplete-options.test.ts +97 -157
- package/src/data/token-filter/helpers/generate-autocomplete-options.ts +56 -53
- package/src/data/token-filter/helpers/operators.test.ts +29 -29
- package/src/data/token-filter/helpers/operators.ts +16 -16
- package/src/data/token-filter/helpers/parse-query-text.test.ts +37 -35
- package/src/data/token-filter/helpers/parse-query-text.ts +7 -26
- package/src/data/token-filter/helpers/query-builder.ts +2 -2
- package/src/date/Date.Dialog.tsx +15 -0
- package/src/date/datepicker/DatePicker.tsx +3 -0
- package/src/date/datepicker/hooks/useDatepicker.tsx +7 -2
- package/src/date/datepicker/hooks/useRangeDatepicker.tsx +5 -1
- package/src/date/datepicker/parts/DatePicker.Months.tsx +9 -1
- package/src/date/datepicker/parts/DatePicker.RDP.tsx +7 -1
- package/src/date/monthpicker/MonthPicker.tsx +3 -1
- package/src/date/monthpicker/hooks/useMonthPicker.tsx +5 -1
- package/src/date/monthpicker/parts/MonthPicker.Caption.tsx +20 -2
- package/src/dropdown/Toggle.tsx +6 -12
- package/src/form/combobox/Input/Input.tsx +2 -2
- package/src/inline-message/root/InlineMessage.tsx +5 -5
- package/src/provider/Provider.tsx +2 -2
- package/src/toggle-group/useToggleGroup.ts +6 -5
- package/src/tooltip/Tooltip.tsx +1 -3
- package/src/utils/components/HighlightText/HighlightText.tsx +34 -0
- package/src/utils/components/Listbox/group/ListboxGroup.tsx +26 -0
- package/src/utils/components/Listbox/input-slot/ListboxInputSlot.tsx +22 -0
- package/src/utils/components/Listbox/item/ListboxItem.tsx +57 -0
- package/src/utils/components/Listbox/list/ListboxList.tsx +38 -0
- package/src/utils/components/Listbox/root/ListboxRoot.tsx +104 -0
- package/src/utils/components/Listbox/root/domHelpers.ts +59 -0
- package/src/utils/components/focus-boundary/FocusBoundary.tsx +8 -78
- package/src/utils/helpers/focus.ts +75 -0
- package/src/utils/hooks/useDeferredValue.ts +12 -0
- package/cjs/data/table/th/DataTableThSortHandle.d.ts +0 -6
- package/cjs/data/table/th/DataTableThSortHandle.js +0 -82
- package/cjs/data/table/th/DataTableThSortHandle.js.map +0 -1
- package/esm/data/table/th/DataTableThSortHandle.d.ts +0 -6
- package/esm/data/table/th/DataTableThSortHandle.js +0 -47
- package/esm/data/table/th/DataTableThSortHandle.js.map +0 -1
- package/src/data/table/th/DataTableThSortHandle.tsx +0 -67
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"table-keyboard.js","sourceRoot":"","sources":["../../../../src/data/table/helpers/table-keyboard.ts"],"names":[],"mappings":"AAAA,MAAM,UAAU,GAAG;IACjB,OAAO,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE;IACxB,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IACzB,SAAS,EAAE,EAAE,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;IAC1B,UAAU,EAAE,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE,CAAC,EAAE;CAClB,CAAC;AAWX;;;;GAIG;AACH,SAAS,mBAAmB,CAAC,KAAoB;IAC/C,MAAM,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;IAEtB,0CAA0C;IAC1C,IAAI,GAAG,IAAI,UAAU,EAAE,CAAC;QACtB,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,GAAkB,CAAC,EAAE,CAAC;IAClE,CAAC;IAED,IAAI,GAAG,KAAK,MAAM,EAAE,CAAC;QACnB,OAAO,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO;YACnC,CAAC,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE;YACxB,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;IACvB,CAAC;IAED,IAAI,GAAG,KAAK,KAAK,EAAE,CAAC;QAClB,OAAO,KAAK,CAAC,OAAO,IAAI,KAAK,CAAC,OAAO;YACnC,CAAC,CAAC,EAAE,IAAI,EAAE,UAAU,EAAE;YACtB,CAAC,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;IACtB,CAAC;IAED,OAAO,IAAI,CAAC;AACd,CAAC;AAED
|
|
1
|
+
{"version":3,"file":"table-keyboard.js","sourceRoot":"","sources":["../../../../src/data/table/helpers/table-keyboard.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
interface DataTableContextProps {
|
|
2
|
+
layout: "fixed" | "auto";
|
|
3
|
+
}
|
|
4
|
+
declare const DataTableContextProvider: import("react").FC<DataTableContextProps & {
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
ref?: never;
|
|
7
|
+
}>, useDataTableContext: <S extends boolean = true>(strict?: S | undefined) => S extends true ? DataTableContextProps : DataTableContextProps | undefined;
|
|
8
|
+
export { DataTableContextProvider, useDataTableContext };
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { createStrictContext } from "../../../utils/helpers/index.js";
|
|
2
|
+
const { Provider: DataTableContextProvider, useContext: useDataTableContext } = createStrictContext({
|
|
3
|
+
name: "DataTableContext",
|
|
4
|
+
errorMessage: "useDataTableContext must be used within DataTable",
|
|
5
|
+
});
|
|
6
|
+
export { DataTableContextProvider, useDataTableContext };
|
|
7
|
+
//# sourceMappingURL=DataTableRoot.context.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DataTableRoot.context.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableRoot.context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAM7D,MAAM,EAAE,QAAQ,EAAE,wBAAwB,EAAE,UAAU,EAAE,mBAAmB,EAAE,GAC3E,mBAAmB,CAAwB;IACzC,IAAI,EAAE,kBAAkB;IACxB,YAAY,EAAE,mDAAmD;CAClE,CAAC,CAAC;AAEL,OAAO,EAAE,wBAAwB,EAAE,mBAAmB,EAAE,CAAC"}
|
|
@@ -19,6 +19,7 @@ import { DataTableTfoot, } from "../tfoot/DataTableTfoot.js";
|
|
|
19
19
|
import { DataTableTh } from "../th/DataTableTh.js";
|
|
20
20
|
import { DataTableThead, } from "../thead/DataTableThead.js";
|
|
21
21
|
import { DataTableTr } from "../tr/DataTableTr.js";
|
|
22
|
+
import { DataTableContextProvider } from "./DataTableRoot.context.js";
|
|
22
23
|
import { useTableKeyboardNav } from "./useTableKeyboardNav.js";
|
|
23
24
|
/**
|
|
24
25
|
* TODO Component description etc.
|
|
@@ -34,9 +35,10 @@ const DataTable = forwardRef((_a, forwardedRef) => {
|
|
|
34
35
|
enabled: withKeyboardNav,
|
|
35
36
|
shouldBlockNavigation,
|
|
36
37
|
});
|
|
37
|
-
return (React.createElement(
|
|
38
|
-
React.createElement("div", { className: "aksel-data-
|
|
39
|
-
React.createElement("
|
|
38
|
+
return (React.createElement(DataTableContextProvider, { layout: layout },
|
|
39
|
+
React.createElement("div", { className: "aksel-data-table__border-wrapper" },
|
|
40
|
+
React.createElement("div", { className: "aksel-data-table__scroll-wrapper" },
|
|
41
|
+
React.createElement("table", Object.assign({}, rest, { ref: mergedRef, className: cl("aksel-data-table", className), "data-zebra-stripes": zebraStripes, "data-truncate-content": truncateContent, "data-density": rowDensity, "data-layout": layout, tabIndex: tabIndex }))))));
|
|
40
42
|
});
|
|
41
43
|
DataTable.Caption = DataTableCaption;
|
|
42
44
|
DataTable.Thead = DataTableThead;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableRoot.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EACL,gBAAgB,GAEjB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAgJ5D;;;;;GAKG;AACH,MAAM,SAAS,GAAG,UAAU,CAC1B,CACE,EASC,EACD,YAAY,EACZ,EAAE;QAXF,EACE,SAAS,EACT,UAAU,GAAG,QAAQ,EACrB,eAAe,GAAG,KAAK,EACvB,YAAY,GAAG,KAAK,EACpB,eAAe,GAAG,IAAI,EACtB,qBAAqB,EACrB,MAAM,GAAG,OAAO,OAEjB,EADI,IAAI,cART,oHASC,CADQ;IAIT,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAA0B,IAAI,CAAC,CAAC;IACxE,MAAM,SAAS,GAAG,YAAY,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAE1D,MAAM,EAAE,QAAQ,EAAE,GAAG,mBAAmB,CAAC,QAAQ,EAAE;QACjD,OAAO,EAAE,eAAe;QACxB,qBAAqB;KACtB,CAAC,CAAC;IAEH,OAAO,CACL,6BAAK,SAAS,EAAC,kCAAkC;
|
|
1
|
+
{"version":3,"file":"DataTableRoot.js","sourceRoot":"","sources":["../../../../src/data/table/root/DataTableRoot.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EACL,gBAAgB,GAEjB,MAAM,6BAA6B,CAAC;AACrC,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EACL,cAAc,GAEf,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,WAAW,EAAyB,MAAM,mBAAmB,CAAC;AACvE,OAAO,EAAE,wBAAwB,EAAE,MAAM,yBAAyB,CAAC;AACnE,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAgJ5D;;;;;GAKG;AACH,MAAM,SAAS,GAAG,UAAU,CAC1B,CACE,EASC,EACD,YAAY,EACZ,EAAE;QAXF,EACE,SAAS,EACT,UAAU,GAAG,QAAQ,EACrB,eAAe,GAAG,KAAK,EACvB,YAAY,GAAG,KAAK,EACpB,eAAe,GAAG,IAAI,EACtB,qBAAqB,EACrB,MAAM,GAAG,OAAO,OAEjB,EADI,IAAI,cART,oHASC,CADQ;IAIT,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAA0B,IAAI,CAAC,CAAC;IACxE,MAAM,SAAS,GAAG,YAAY,CAAC,YAAY,EAAE,WAAW,CAAC,CAAC;IAE1D,MAAM,EAAE,QAAQ,EAAE,GAAG,mBAAmB,CAAC,QAAQ,EAAE;QACjD,OAAO,EAAE,eAAe;QACxB,qBAAqB;KACtB,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,wBAAwB,IAAC,MAAM,EAAE,MAAM;QACtC,6BAAK,SAAS,EAAC,kCAAkC;YAC/C,6BAAK,SAAS,EAAC,kCAAkC;gBAC/C,+CACM,IAAI,IACR,GAAG,EAAE,SAAS,EACd,SAAS,EAAE,EAAE,CAAC,kBAAkB,EAAE,SAAS,CAAC,wBACxB,YAAY,2BACT,eAAe,kBACxB,UAAU,iBACX,MAAM,EACnB,QAAQ,EAAE,QAAQ,IAClB,CACE,CACF,CACmB,CAC5B,CAAC;AACJ,CAAC,CACwB,CAAC;AAE5B,SAAS,CAAC,OAAO,GAAG,gBAAgB,CAAC;AACrC,SAAS,CAAC,KAAK,GAAG,cAAc,CAAC;AACjC,SAAS,CAAC,KAAK,GAAG,cAAc,CAAC;AACjC,SAAS,CAAC,EAAE,GAAG,WAAW,CAAC;AAC3B,SAAS,CAAC,EAAE,GAAG,WAAW,CAAC;AAC3B,SAAS,CAAC,EAAE,GAAG,WAAW,CAAC;AAC3B,SAAS,CAAC,KAAK,GAAG,cAAc,CAAC;AAEjC,OAAO,EACL,SAAS,EACT,gBAAgB,EAChB,cAAc,EACd,WAAW,EACX,cAAc,EACd,WAAW,EACX,cAAc,EACd,WAAW,GACZ,CAAC;AACF,eAAe,SAAS,CAAC"}
|
|
@@ -1,9 +1,24 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
+
type SortDirection = "asc" | "desc" | "none";
|
|
2
3
|
interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
|
|
3
4
|
resizeHandler?: (event: React.MouseEvent<HTMLButtonElement> | React.TouchEvent<HTMLButtonElement>) => void;
|
|
4
5
|
size?: number;
|
|
5
|
-
|
|
6
|
-
|
|
6
|
+
/**
|
|
7
|
+
* Makes the column header sortable. The entire header cell content becomes
|
|
8
|
+
* a clickable button when true.
|
|
9
|
+
*/
|
|
10
|
+
sortable?: boolean;
|
|
11
|
+
/**
|
|
12
|
+
* Current sort direction. Only relevant when `sortable` is true.
|
|
13
|
+
* Uses values matching the `aria-sort` attribute directly.
|
|
14
|
+
* @default "none"
|
|
15
|
+
*/
|
|
16
|
+
sortDirection?: SortDirection;
|
|
17
|
+
/**
|
|
18
|
+
* Called when the user clicks the sortable header.
|
|
19
|
+
* The consumer is responsible for determining and setting the next sort state.
|
|
20
|
+
*/
|
|
21
|
+
onSortClick?: (event: React.MouseEvent<HTMLElement>) => void;
|
|
7
22
|
render?: {
|
|
8
23
|
filterMenu?: {
|
|
9
24
|
title: string;
|
|
@@ -15,6 +30,7 @@ interface DataTableThProps extends React.HTMLAttributes<HTMLTableCellElement> {
|
|
|
15
30
|
*/
|
|
16
31
|
colSpan?: number;
|
|
17
32
|
rowSpan?: number;
|
|
33
|
+
keyboardResizingHandler?: (size: number) => void;
|
|
18
34
|
}
|
|
19
35
|
/**
|
|
20
36
|
* TODO:
|
|
@@ -10,35 +10,60 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
10
10
|
return t;
|
|
11
11
|
};
|
|
12
12
|
import React, { forwardRef } from "react";
|
|
13
|
-
import {
|
|
14
|
-
import { ActionMenu } from "../../../action-menu/index.js";
|
|
15
|
-
import { HStack, Spacer } from "../../../primitives/stack/index.js";
|
|
13
|
+
import { ArrowsUpDownIcon, CaretLeftCircleFillIcon, CaretRightCircleFillIcon, SortDownIcon, SortUpIcon, } from "@navikt/aksel-icons";
|
|
16
14
|
import { cl } from "../../../utils/helpers/index.js";
|
|
17
|
-
|
|
18
|
-
|
|
15
|
+
const SORT_ICON = {
|
|
16
|
+
asc: SortUpIcon,
|
|
17
|
+
desc: SortDownIcon,
|
|
18
|
+
none: ArrowsUpDownIcon,
|
|
19
|
+
};
|
|
19
20
|
/**
|
|
20
21
|
* TODO:
|
|
21
22
|
* - Plan for pinning: Move it into "settings" dialog like here: https://cloudscape.design/examples/react/table.html
|
|
22
23
|
*/
|
|
23
24
|
const DataTableTh = forwardRef((_a, forwardedRef) => {
|
|
24
|
-
var { className, children, resizeHandler, size, sortDirection,
|
|
25
|
-
const
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
25
|
+
var { className, children, resizeHandler, size, sortable = false, sortDirection = "none", onSortClick, style, keyboardResizingHandler } = _a, rest = __rest(_a, ["className", "children", "resizeHandler", "size", "sortable", "sortDirection", "onSortClick", "style", "keyboardResizingHandler"]);
|
|
26
|
+
const [resizeHandlerActive, setResizeHandlerActive] = React.useState(false);
|
|
27
|
+
const [isOverflowing, setIsOverflowing] = React.useState(false);
|
|
28
|
+
const contentRef = React.useRef(null);
|
|
29
|
+
const keyDownHandler = (event) => {
|
|
30
|
+
if (keyboardResizingHandler) {
|
|
31
|
+
if (event.key === "Enter" || event.key === " ") {
|
|
32
|
+
event.preventDefault();
|
|
33
|
+
setResizeHandlerActive((active) => !active);
|
|
34
|
+
}
|
|
35
|
+
else if (resizeHandlerActive &&
|
|
36
|
+
(event.key === "ArrowLeft" || event.key === "ArrowRight")) {
|
|
37
|
+
event.preventDefault();
|
|
38
|
+
keyboardResizingHandler(event.key === "ArrowRight" ? 10 : -10);
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
const SortIcon = sortable ? SORT_ICON[sortDirection] : null;
|
|
43
|
+
return (React.createElement("th", Object.assign({}, rest, { ref: forwardedRef, className: cl("aksel-data-table__th", className), "data-sortable": sortable, style: Object.assign({ width: size }, style), "aria-sort": sortable ? getAriaSort(sortDirection) : undefined, onPointerEnter: () => {
|
|
44
|
+
const el = contentRef.current;
|
|
45
|
+
setIsOverflowing(el ? el.scrollWidth > el.offsetWidth : false);
|
|
46
|
+
console.info("is overflowing", isOverflowing);
|
|
47
|
+
}, onPointerLeave: () => setIsOverflowing(false) }),
|
|
48
|
+
sortable ? (React.createElement("button", { className: "aksel-data-table__th-sort-button", onClick: sortable ? onSortClick : undefined },
|
|
49
|
+
SortIcon && (React.createElement(SortIcon, { "aria-hidden": true, "data-sort-direction": sortDirection, className: "aksel-data-table__th-sort-icon" })),
|
|
50
|
+
React.createElement("div", { ref: contentRef, className: "aksel-data-table__th-content" }, children))) : (React.createElement("div", { ref: contentRef, className: "aksel-data-table__th-content" }, children)),
|
|
39
51
|
resizeHandler && (React.createElement("button", {
|
|
40
52
|
// TODO: Should probably not be a button since it doesn't have onClick
|
|
41
|
-
onMouseDown: resizeHandler, onTouchStart: resizeHandler, className: "aksel-data-table__th-resize-handle" }
|
|
53
|
+
onMouseDown: resizeHandler, onTouchStart: resizeHandler, onBlur: () => setResizeHandlerActive(false), className: "aksel-data-table__th-resize-handle", "data-active": resizeHandlerActive, "data-block-keyboard-nav": true, onKeyDown: keyDownHandler }, resizeHandlerActive && (React.createElement(React.Fragment, null,
|
|
54
|
+
React.createElement("span", { className: "aksel-data-table__th-resize-handle-indicator aksel-data-table__th-resize-handle-indicator--start" },
|
|
55
|
+
React.createElement(CaretLeftCircleFillIcon, { "aria-hidden": true, fontSize: "1.5rem" })),
|
|
56
|
+
React.createElement("span", { className: "aksel-data-table__th-resize-handle-indicator aksel-data-table__th-resize-handle-indicator--end" },
|
|
57
|
+
React.createElement(CaretRightCircleFillIcon, { "aria-hidden": true, fontSize: "1.5rem" }))))))));
|
|
42
58
|
});
|
|
59
|
+
function getAriaSort(sortDirection) {
|
|
60
|
+
if (sortDirection === "asc")
|
|
61
|
+
return "ascending";
|
|
62
|
+
if (sortDirection === "desc")
|
|
63
|
+
return "descending";
|
|
64
|
+
if (sortDirection === "none")
|
|
65
|
+
return "none";
|
|
66
|
+
return undefined;
|
|
67
|
+
}
|
|
43
68
|
export { DataTableTh };
|
|
44
69
|
//# sourceMappingURL=DataTableTh.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableTh.js","sourceRoot":"","sources":["../../../../src/data/table/th/DataTableTh.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,
|
|
1
|
+
{"version":3,"file":"DataTableTh.js","sourceRoot":"","sources":["../../../../src/data/table/th/DataTableTh.tsx"],"names":[],"mappings":"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"}
|
|
@@ -11,11 +11,18 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
11
11
|
};
|
|
12
12
|
import React, { forwardRef } from "react";
|
|
13
13
|
import { cl } from "../../../utils/helpers/index.js";
|
|
14
|
+
import { useDataTableContext } from "../root/DataTableRoot.context.js";
|
|
14
15
|
const DataTableTr = forwardRef((_a, forwardedRef) => {
|
|
15
|
-
var { className, selected = false } = _a, rest = __rest(_a, ["className", "selected"]);
|
|
16
|
+
var { className, children, selected = false } = _a, rest = __rest(_a, ["className", "children", "selected"]);
|
|
17
|
+
const rootContext = useDataTableContext();
|
|
18
|
+
const renderFillerCell = rootContext.layout === "fixed" && children;
|
|
16
19
|
return (React.createElement("tr", Object.assign({}, rest, { ref: forwardedRef, className: cl("aksel-data-table__tr", className, {
|
|
17
20
|
"aksel-data-table__tr--selected": selected,
|
|
18
|
-
}) })
|
|
21
|
+
}) }),
|
|
22
|
+
children,
|
|
23
|
+
renderFillerCell && (
|
|
24
|
+
/* TODO: Consider chaning between th and td based on context */
|
|
25
|
+
React.createElement("div", { className: "aksel-data-table__th aksel-data-table__filler-cell" }))));
|
|
19
26
|
});
|
|
20
27
|
export { DataTableTr };
|
|
21
28
|
//# sourceMappingURL=DataTableTr.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DataTableTr.js","sourceRoot":"","sources":["../../../../src/data/table/tr/DataTableTr.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;
|
|
1
|
+
{"version":3,"file":"DataTableTr.js","sourceRoot":"","sources":["../../../../src/data/table/tr/DataTableTr.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAC1C,OAAO,EAAE,EAAE,EAAE,MAAM,wBAAwB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,+BAA+B,CAAC;AAMpE,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,EAAkD,EAAE,YAAY,EAAE,EAAE;QAApE,EAAE,SAAS,EAAE,QAAQ,EAAE,QAAQ,GAAG,KAAK,OAAW,EAAN,IAAI,cAAhD,qCAAkD,CAAF;IAC/C,MAAM,WAAW,GAAG,mBAAmB,EAAE,CAAC;IAE1C,MAAM,gBAAgB,GAAG,WAAW,CAAC,MAAM,KAAK,OAAO,IAAI,QAAQ,CAAC;IAEpE,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,YAAY,EACjB,SAAS,EAAE,EAAE,CAAC,sBAAsB,EAAE,SAAS,EAAE;YAC/C,gCAAgC,EAAE,QAAQ;SAC3C,CAAC;QAED,QAAQ;QACR,gBAAgB,IAAI;QACnB,+DAA+D;QAC/D,6BAAK,SAAS,EAAC,oDAAoD,GAAG,CACvE,CACE,CACN,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,OAAO,EAAE,WAAW,EAAE,CAAC"}
|
|
@@ -2,8 +2,12 @@ import React from "react";
|
|
|
2
2
|
import type { AutoCompleteOption, OptionGroup } from "./AutoSuggest.types.js";
|
|
3
3
|
interface AutoSuggestProps {
|
|
4
4
|
options: OptionGroup<AutoCompleteOption>[];
|
|
5
|
-
onSelect: (
|
|
5
|
+
onSelect: (option: AutoCompleteOption) => boolean;
|
|
6
6
|
className?: string;
|
|
7
|
+
value: string;
|
|
8
|
+
onChange: (newValue: string) => void;
|
|
9
|
+
open: boolean;
|
|
10
|
+
setOpen: (open: boolean) => void;
|
|
7
11
|
}
|
|
8
|
-
declare const AutoSuggest: React.ForwardRefExoticComponent<AutoSuggestProps & React.RefAttributes<
|
|
12
|
+
declare const AutoSuggest: React.ForwardRefExoticComponent<AutoSuggestProps & React.RefAttributes<HTMLInputElement>>;
|
|
9
13
|
export { AutoSuggest };
|
|
@@ -1,20 +1,49 @@
|
|
|
1
|
-
import React, { forwardRef } from "react";
|
|
2
|
-
import {
|
|
1
|
+
import React, { forwardRef, useState } from "react";
|
|
2
|
+
import { Search } from "../../form/search/index.js";
|
|
3
3
|
import { VStack } from "../../primitives/stack/index.js";
|
|
4
|
-
import { Label } from "../../typography/index.js";
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
4
|
+
import { Detail, Label } from "../../typography/index.js";
|
|
5
|
+
import { ListboxGroup } from "../../utils/components/Listbox/group/ListboxGroup.js";
|
|
6
|
+
import { ListboxItem } from "../../utils/components/Listbox/item/ListboxItem.js";
|
|
7
|
+
import Listbox from "../../utils/components/Listbox/root/ListboxRoot.js";
|
|
8
|
+
import { DismissableLayer } from "../../utils/components/dismissablelayer/DismissableLayer.js";
|
|
9
|
+
import { Floating } from "../../utils/components/floating/Floating.js";
|
|
10
|
+
import { useMergeRefsN } from "../../utils/hooks/index.js";
|
|
11
|
+
const AutoSuggest = forwardRef(({ options, onSelect, value, onChange, open, setOpen }, ref) => {
|
|
12
|
+
const [virtuallyFocusedItemId, setVirtuallyFocusedItemId] = useState("");
|
|
13
|
+
const [inputRef, setInputRef] = useState(null);
|
|
14
|
+
/* Unsure why N version works, but not regular here */
|
|
15
|
+
const mergedRef = useMergeRefsN([setInputRef, ref]);
|
|
16
|
+
const handleClose = () => {
|
|
17
|
+
setOpen(false);
|
|
18
|
+
};
|
|
19
|
+
const handleChange = (newValue) => {
|
|
20
|
+
onChange(newValue);
|
|
21
|
+
setOpen(true);
|
|
22
|
+
};
|
|
23
|
+
const handleSelectOption = (option) => {
|
|
24
|
+
const createdNewToken = onSelect(option);
|
|
25
|
+
if (createdNewToken) {
|
|
26
|
+
inputRef === null || inputRef === void 0 ? void 0 : inputRef.focus();
|
|
27
|
+
setOpen(false);
|
|
28
|
+
}
|
|
29
|
+
};
|
|
30
|
+
return (React.createElement(Floating, null,
|
|
31
|
+
React.createElement(Listbox, { setVirtuallyFocusedItemId: setVirtuallyFocusedItemId },
|
|
32
|
+
React.createElement(Floating.Anchor, null,
|
|
33
|
+
React.createElement(Listbox.InputSlot, null,
|
|
34
|
+
React.createElement(Search, { label: "Tabells\u00F8k", variant: "simple", className: "aksel-property-filter__input", placeholder: "Type to filter...", ref: mergedRef, value: value, onChange: handleChange, onClick: () => {
|
|
35
|
+
setOpen(true);
|
|
36
|
+
}, onFocus: () => setOpen(true) }))),
|
|
37
|
+
open && (React.createElement(AutoSuggestPopup, { options: options, onSelect: handleSelectOption, focusedValue: virtuallyFocusedItemId, setFocusedValue: setVirtuallyFocusedItemId, onClose: handleClose, safeZoneAnchor: inputRef })))));
|
|
38
|
+
});
|
|
39
|
+
const AutoSuggestPopup = forwardRef(({ options, onSelect, focusedValue, setFocusedValue, onClose, safeZoneAnchor, }, ref) => {
|
|
40
|
+
return (React.createElement(DismissableLayer, { asChild: true, onDismiss: onClose, safeZone: { anchor: safeZoneAnchor } },
|
|
41
|
+
React.createElement(Floating.Content, { ref: ref, align: "start", side: "bottom", fallbackPlacements: [], sideOffset: 8, className: "aksel-property-filter__popup" },
|
|
42
|
+
React.createElement("div", { className: "aksel-property-filter__popup-inner" },
|
|
43
|
+
React.createElement(Listbox.List, { setVirtuallyFocusedItemId: setFocusedValue }, options.map((group) => (React.createElement(ListboxGroup, { key: group.label, label: group.label }, group.options.map((item) => (React.createElement(ListboxItem, { key: item.value, id: item.value, onClick: () => onSelect(item), hasVirtualFocus: focusedValue === item.value },
|
|
44
|
+
React.createElement(VStack, { gap: "space-0" },
|
|
45
|
+
React.createElement(Label, { as: "div" }, item.label),
|
|
46
|
+
item.description && (React.createElement(Detail, { as: "div" }, item.description))))))))))))));
|
|
18
47
|
});
|
|
19
48
|
export { AutoSuggest };
|
|
20
49
|
//# sourceMappingURL=AutoSuggest.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutoSuggest.js","sourceRoot":"","sources":["../../../src/data/token-filter/AutoSuggest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"AutoSuggest.js","sourceRoot":"","sources":["../../../src/data/token-filter/AutoSuggest.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,16 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
import type {
|
|
2
|
+
import type { ExternalOptions, ExternalPropertyDefinitions, ExternalQuery } from "./TokenFilter.types.js";
|
|
3
3
|
type TokenFilterProps = {
|
|
4
|
-
query:
|
|
5
|
-
onChange: (newQuery:
|
|
4
|
+
query: ExternalQuery;
|
|
5
|
+
onChange: (newQuery: ExternalQuery) => void;
|
|
6
6
|
className?: string;
|
|
7
|
-
|
|
8
|
-
|
|
7
|
+
propertyDefinitions: ExternalPropertyDefinitions;
|
|
8
|
+
options: ExternalOptions;
|
|
9
9
|
};
|
|
10
|
+
/**
|
|
11
|
+
* TODO:
|
|
12
|
+
* - Implement onChange handler to update query state when user selects an autocomplete option.
|
|
13
|
+
* - Handle token rendering and editing (e.g., show tokens for matched properties/operators/values, allow deleting tokens).
|
|
14
|
+
*/
|
|
10
15
|
export declare const TokenFilter: React.ForwardRefExoticComponent<TokenFilterProps & React.RefAttributes<HTMLDivElement>>;
|
|
11
16
|
export {};
|
|
@@ -1,66 +1,128 @@
|
|
|
1
1
|
import React, { forwardRef, useState } from "react";
|
|
2
|
-
import {
|
|
2
|
+
import { Chips } from "../../chips/index.js";
|
|
3
|
+
import { HStack } from "../../primitives/stack/index.js";
|
|
3
4
|
import { cl } from "../../utils/helpers/index.js";
|
|
4
5
|
import { AutoSuggest } from "./AutoSuggest.js";
|
|
5
6
|
import { generateAutoCompleteOptions } from "./helpers/generate-autocomplete-options.js";
|
|
6
7
|
import { parseQueryText } from "./helpers/parse-query-text.js";
|
|
7
|
-
|
|
8
|
-
|
|
8
|
+
/**
|
|
9
|
+
* TODO:
|
|
10
|
+
* - Implement onChange handler to update query state when user selects an autocomplete option.
|
|
11
|
+
* - Handle token rendering and editing (e.g., show tokens for matched properties/operators/values, allow deleting tokens).
|
|
12
|
+
*/
|
|
13
|
+
export const TokenFilter = forwardRef(({ query, className, propertyDefinitions, options, onChange }, ref) => {
|
|
9
14
|
const [filterText, setFilterText] = useState("");
|
|
10
|
-
const
|
|
11
|
-
const
|
|
12
|
-
const
|
|
13
|
-
const
|
|
14
|
-
|
|
15
|
-
|
|
15
|
+
const [open, setOpen] = useState(false);
|
|
16
|
+
const { parsedPropertyDefinitions, parsedPropertyOptions } = derrivedFilterState(propertyDefinitions, options);
|
|
17
|
+
const queryState = parseQueryText(filterText, parsedPropertyDefinitions);
|
|
18
|
+
const autoCompleteOptions = generateAutoCompleteOptions(queryState, parsedPropertyDefinitions, parsedPropertyOptions);
|
|
19
|
+
const { addToken, removeToken } = createActionHandlers({
|
|
20
|
+
query,
|
|
21
|
+
onChange,
|
|
22
|
+
});
|
|
23
|
+
const createToken = (newText) => {
|
|
24
|
+
const newQueryState = parseQueryText(newText, parsedPropertyDefinitions);
|
|
25
|
+
let newToken = null;
|
|
26
|
+
switch (newQueryState.step) {
|
|
27
|
+
case "property": {
|
|
28
|
+
if (newQueryState.value === "") {
|
|
29
|
+
return false;
|
|
30
|
+
}
|
|
31
|
+
newToken = {
|
|
32
|
+
propertyKey: newQueryState.property.key,
|
|
33
|
+
operator: newQueryState.operator,
|
|
34
|
+
value: newQueryState.value,
|
|
35
|
+
};
|
|
36
|
+
break;
|
|
37
|
+
}
|
|
38
|
+
case "free-text": {
|
|
39
|
+
break;
|
|
40
|
+
}
|
|
41
|
+
case "operator": {
|
|
42
|
+
break;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
if (newToken) {
|
|
46
|
+
addToken(newToken);
|
|
47
|
+
setFilterText("");
|
|
48
|
+
return true;
|
|
49
|
+
}
|
|
50
|
+
return false;
|
|
51
|
+
};
|
|
52
|
+
const handleSelectOption = (option) => {
|
|
53
|
+
const newQueryState = parseQueryText(option.value, parsedPropertyDefinitions);
|
|
54
|
+
if ((newQueryState.step === "property" && newQueryState.value === "") ||
|
|
55
|
+
newQueryState.step === "operator") {
|
|
56
|
+
/* Add space after for better formatting */
|
|
57
|
+
/* TODO: Handle this scenario better */
|
|
58
|
+
setFilterText(`${option.value} `);
|
|
59
|
+
return false;
|
|
60
|
+
}
|
|
61
|
+
setFilterText(option.value);
|
|
62
|
+
return createToken(option.value);
|
|
16
63
|
};
|
|
17
|
-
const [customOpen, setCustomOpen] = useState(false);
|
|
18
64
|
return (React.createElement("div", { ref: ref, className: cl("aksel-property-filter", className), role: "search" },
|
|
19
|
-
React.createElement(
|
|
20
|
-
React.createElement(
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
/* @ts-expect-error TODO: handle conversion better */
|
|
28
|
-
options: autoCompleteOptions.options, onSelect: handleSelectOption })),
|
|
29
|
-
query.tokens.map((token, index) => {
|
|
30
|
-
return (React.createElement("div", { key: index, className: "aksel-property-filter__token" },
|
|
31
|
-
React.createElement("strong", null, token.propertyKey),
|
|
32
|
-
" ",
|
|
33
|
-
token.operator,
|
|
34
|
-
" "));
|
|
35
|
-
}),
|
|
36
|
-
React.createElement("ul", null, filteringProperties.map((prop) => (React.createElement("li", { key: prop.key }, prop.propertyLabel)))),
|
|
37
|
-
React.createElement("pre", null, JSON.stringify(queryState, null, 2)),
|
|
38
|
-
React.createElement("pre", null, JSON.stringify(autoCompleteOptions, null, 2))));
|
|
65
|
+
React.createElement(AutoSuggest, { onSelect: handleSelectOption, options: autoCompleteOptions.options, value: filterText, onChange: setFilterText, open: open, setOpen: setOpen }),
|
|
66
|
+
React.createElement(HStack, { marginBlock: "space-8", gap: "space-8" }, query.tokens.map((token, index) => {
|
|
67
|
+
return (React.createElement(React.Fragment, { key: `${token.propertyKey}-${token.operator}-${token.value}-${index}` },
|
|
68
|
+
React.createElement(Chips.Removable, { key: index, onClick: () => {
|
|
69
|
+
removeToken(index);
|
|
70
|
+
} }, `${token.propertyKey} ${token.operator} ${token.value}`),
|
|
71
|
+
index < query.tokens.length - 1 && (React.createElement("span", null, query.operation))));
|
|
72
|
+
}))));
|
|
39
73
|
});
|
|
40
|
-
function derrivedFilterState(
|
|
41
|
-
var _a, _b, _c;
|
|
74
|
+
function derrivedFilterState(propertyDefinitions, propteryOptions) {
|
|
75
|
+
var _a, _b, _c, _d, _e, _f, _g, _h;
|
|
42
76
|
const propertyMap = new Map();
|
|
43
|
-
for (const property of
|
|
77
|
+
for (const property of propertyDefinitions) {
|
|
44
78
|
propertyMap.set(property.key, {
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
operators: (
|
|
50
|
-
/* defaultOperator: property?.defaultOperator ?? '=', */
|
|
79
|
+
key: property.key,
|
|
80
|
+
label: (_a = property === null || property === void 0 ? void 0 : property.label) !== null && _a !== void 0 ? _a : "",
|
|
81
|
+
groupLabel: (_b = property === null || property === void 0 ? void 0 : property.groupLabel) !== null && _b !== void 0 ? _b : "",
|
|
82
|
+
group: (_c = property === null || property === void 0 ? void 0 : property.group) !== null && _c !== void 0 ? _c : "",
|
|
83
|
+
operators: (_d = property === null || property === void 0 ? void 0 : property.operators) !== null && _d !== void 0 ? _d : [],
|
|
51
84
|
externalProperty: property,
|
|
52
85
|
});
|
|
53
86
|
}
|
|
54
|
-
const internalOptions =
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
property: (
|
|
87
|
+
const internalOptions = [];
|
|
88
|
+
for (const option of propteryOptions) {
|
|
89
|
+
internalOptions.push({
|
|
90
|
+
property: (_e = propertyMap.get(option.propertyKey)) !== null && _e !== void 0 ? _e : null,
|
|
58
91
|
value: option.value,
|
|
59
|
-
label: (
|
|
60
|
-
tags: (
|
|
61
|
-
filteringTags: (_e = option.filteringTags) !== null && _e !== void 0 ? _e : [],
|
|
92
|
+
label: (_g = (_f = option.label) !== null && _f !== void 0 ? _f : option.value) !== null && _g !== void 0 ? _g : "",
|
|
93
|
+
tags: (_h = option.tags) !== null && _h !== void 0 ? _h : [],
|
|
62
94
|
});
|
|
63
|
-
}
|
|
64
|
-
return {
|
|
95
|
+
}
|
|
96
|
+
return {
|
|
97
|
+
parsedPropertyDefinitions: [...propertyMap.values()],
|
|
98
|
+
parsedPropertyOptions: internalOptions,
|
|
99
|
+
};
|
|
100
|
+
}
|
|
101
|
+
function createActionHandlers({ query, onChange, }) {
|
|
102
|
+
const handleChange = (newQuery) => {
|
|
103
|
+
onChange(newQuery);
|
|
104
|
+
};
|
|
105
|
+
const addToken = (token) => {
|
|
106
|
+
handleChange(Object.assign(Object.assign({}, query), { tokens: [...query.tokens, token] }));
|
|
107
|
+
};
|
|
108
|
+
const updateToken = (updateIndex, updatedToken) => {
|
|
109
|
+
handleChange(Object.assign(Object.assign({}, query), { tokens: query.tokens.map((token, index) => index === updateIndex ? updatedToken : token) }));
|
|
110
|
+
};
|
|
111
|
+
const updateOperation = (operation) => {
|
|
112
|
+
handleChange(Object.assign(Object.assign({}, query), { operation }));
|
|
113
|
+
};
|
|
114
|
+
const removeToken = (removeIndex) => {
|
|
115
|
+
handleChange(Object.assign(Object.assign({}, query), { tokens: query.tokens.filter((_, index) => index !== removeIndex) }));
|
|
116
|
+
};
|
|
117
|
+
const removeAllTokens = () => {
|
|
118
|
+
handleChange(Object.assign(Object.assign({}, query), { tokens: [] }));
|
|
119
|
+
};
|
|
120
|
+
return {
|
|
121
|
+
addToken,
|
|
122
|
+
updateToken,
|
|
123
|
+
updateOperation,
|
|
124
|
+
removeToken,
|
|
125
|
+
removeAllTokens,
|
|
126
|
+
};
|
|
65
127
|
}
|
|
66
128
|
//# sourceMappingURL=TokenFilter.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TokenFilter.js","sourceRoot":"","sources":["../../../src/data/token-filter/TokenFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACpD,OAAO,EAAE,OAAO,EAAE,MAAM,
|
|
1
|
+
{"version":3,"file":"TokenFilter.js","sourceRoot":"","sources":["../../../src/data/token-filter/TokenFilter.tsx"],"names":[],"mappings":"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"}
|