@adaptabletools/adaptable 23.0.0-canary.2 → 23.0.0-canary.3
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/index.css +68 -73
- package/package.json +1 -1
- package/src/AdaptableOptions/UserInterfaceOptions.d.ts +1 -3
- package/src/AdaptableState/Common/AdaptableFormat.d.ts +1 -1
- package/src/Api/EventApi.d.ts +1 -1
- package/src/Api/Events/ReportScheduleRan.d.ts +4 -0
- package/src/Api/Internal/EventInternalApi.js +2 -1
- package/src/View/AdaptablePopover/index.js +1 -1
- package/src/View/Components/Buttons/ButtonInfo.d.ts +1 -1
- package/src/View/Components/Buttons/ButtonInfo.js +4 -3
- package/src/View/Components/ColumnFilter/AdaptableColumnFilter.js +1 -1
- package/src/View/Components/ColumnFilter/ColumnFilter.js +15 -5
- package/src/View/Components/ColumnFilter/FloatingFilter.js +58 -60
- package/src/View/Components/FilterForm/ListBoxFilterForm.js +1 -1
- package/src/View/Components/Forms/AdaptableFormControlTextClear.js +2 -1
- package/src/View/Components/Popups/AdaptablePopup/AdaptablePopup.js +1 -1
- package/src/View/Components/Popups/AdaptablePopup/AdaptablePopupModuleView.js +2 -2
- package/src/View/Components/ValueSelector/index.js +1 -1
- package/src/View/FormatColumn/Wizard/FormatColumnScopeWizardSection.js +3 -8
- package/src/View/GridFilter/GridFilterViewPanel.js +1 -1
- package/src/View/Layout/Wizard/sections/ColumnsSection.js +3 -3
- package/src/View/Layout/Wizard/sections/PivotColumnsSection.js +1 -1
- package/src/View/Layout/Wizard/sections/RowSelectionSection.js +1 -1
- package/src/View/Layout/Wizard/sections/SettingsSection.js +1 -1
- package/src/View/License/LicenseWatermark.js +1 -1
- package/src/View/StyledColumn/Wizard/StyledColumnWizardScopeSection.js +1 -1
- package/src/View/Wizard/OnePageWizards.js +1 -1
- package/src/components/Card/index.js +1 -1
- package/src/components/Combobox/index.js +10 -4
- package/src/components/Datepicker/index.js +2 -2
- package/src/components/Dialog/index.js +1 -1
- package/src/components/DragAndDropContext/TabList.js +1 -1
- package/src/components/Dropdown/Arrows.js +0 -1
- package/src/components/ExpressionEditor/BaseEditorInput.js +1 -1
- package/src/components/ExpressionEditor/index.js +1 -1
- package/src/components/Input/index.js +1 -1
- package/src/components/NewDropdownButton/index.d.ts +1 -0
- package/src/components/NewDropdownButton/index.js +2 -2
- package/src/components/NewSelect/index.d.ts +2 -0
- package/src/components/NewSelect/index.js +10 -7
- package/src/components/Panel/index.js +1 -1
- package/src/components/SimpleButton/index.js +1 -1
- package/src/components/Tabs/index.js +1 -1
- package/src/components/Tree/TreeDropdown/index.js +4 -8
- package/src/components/ui/button.d.ts +5 -2
- package/src/components/ui/button.js +5 -4
- package/src/components/ui/combobox.d.ts +16 -16
- package/src/components/ui/combobox.js +37 -37
- package/src/components/ui/input-group.d.ts +10 -9
- package/src/components/ui/input-group.js +13 -12
- package/src/components/ui/input.d.ts +2 -2
- package/src/components/ui/input.js +5 -4
- package/src/components/ui/popover.d.ts +5 -5
- package/src/components/ui/popover.js +7 -7
- package/src/components/ui/select.d.ts +7 -6
- package/src/components/ui/select.js +13 -12
- package/src/components/ui/textarea.d.ts +2 -2
- package/src/components/ui/textarea.js +4 -3
- package/src/components/ui/tooltip.d.ts +6 -5
- package/src/components/ui/tooltip.js +8 -7
- package/src/env.js +2 -2
- package/src/lib/utils.d.ts +20 -0
- package/src/lib/utils.js +45 -0
- package/src/metamodel/adaptable.metamodel.d.ts +7 -2
- package/src/metamodel/adaptable.metamodel.js +1 -1
- package/src/migration/VersionUpgrade23.d.ts +2 -3
- package/src/migration/VersionUpgrade23.js +4 -16
- package/themes/dark.css +7 -17
- package/tsconfig.esm.tsbuildinfo +1 -1
|
@@ -1,17 +1,18 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import * as React from 'react';
|
|
2
3
|
import { Select as SelectPrimitive } from '@base-ui/react/select';
|
|
3
4
|
import { cn, POPUP_Z_INDEX } from '../../lib/utils';
|
|
4
5
|
import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from 'lucide-react';
|
|
5
6
|
const Select = SelectPrimitive.Root;
|
|
6
|
-
function SelectGroup({ className, ...props }) {
|
|
7
|
-
return (_jsx(SelectPrimitive.Group, { "data-slot": "select-group", className: cn('twa:scroll-my-1 twa:p-1', className), ...props }));
|
|
8
|
-
}
|
|
7
|
+
const SelectGroup = React.forwardRef(function SelectGroup({ className, ...props }, ref) {
|
|
8
|
+
return (_jsx(SelectPrimitive.Group, { "data-slot": "select-group", className: cn('twa:scroll-my-1 twa:p-1', className), ref: ref, ...props }));
|
|
9
|
+
});
|
|
9
10
|
function SelectValue({ className, ...props }) {
|
|
10
11
|
return (_jsx(SelectPrimitive.Value, { "data-slot": "select-value", className: cn('twa:text-input-foreground twa:flex twa:flex-1 twa:text-left', className), ...props }));
|
|
11
12
|
}
|
|
12
|
-
function SelectTrigger({ className, size = 'default', children, ...props }) {
|
|
13
|
-
return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn('twa:flex twa:w-fit twa:items-center twa:justify-between twa:gap-1.5 twa:rounded-input twa:border twa:border-input twa:py-1.5 twa:pr-2 twa:pl-2.5 twa:text-sm twa:whitespace-nowrap twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50 twa:disabled:cursor-not-allowed twa:disabled:opacity-50 twa:aria-invalid:border-destructive twa:aria-invalid:ring-3 twa:aria-invalid:ring-destructive/20 twa:data-placeholder:text-muted-foreground twa:data-[size=default]:min-h-input twa:data-[size=sm]:h-7 twa:data-[size=sm]:min-h-auto twa:*:data-[slot=select-value]:line-clamp-1 twa:*:data-[slot=select-value]:flex twa:*:data-[slot=select-value]:items-center twa:*:data-[slot=select-value]:gap-1.5 twa:bg-input-background twa:hover:bg-input-background/80 twa:dark:aria-invalid:border-destructive/50 twa:dark:aria-invalid:ring-destructive/40 twa:[&_svg]:pointer-events-none twa:[&_svg]:shrink-0 twa:[&_svg:not([class*=size-])]:size-4', className), ...props, "data-name": props['data-name'], children: [children, _jsx(SelectPrimitive.Icon, { render: _jsx(ChevronDownIcon, { className: "twa:pointer-events-none twa:size-4 twa:text-muted-foreground" }) })] }));
|
|
14
|
-
}
|
|
13
|
+
const SelectTrigger = React.forwardRef(function SelectTrigger({ className, size = 'default', children, icon, ...props }, ref) {
|
|
14
|
+
return (_jsxs(SelectPrimitive.Trigger, { ref: ref, "data-slot": "select-trigger", "data-size": size, className: cn('twa:flex twa:w-fit twa:items-center twa:justify-between twa:gap-1.5 twa:rounded-input twa:border twa:border-input twa:py-1.5 twa:pr-2 twa:pl-2.5 twa:text-sm twa:whitespace-nowrap twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50 twa:disabled:cursor-not-allowed twa:disabled:opacity-50 twa:aria-invalid:border-destructive twa:aria-invalid:ring-3 twa:aria-invalid:ring-destructive/20 twa:data-placeholder:text-muted-foreground twa:data-[size=default]:min-h-input twa:data-[size=sm]:h-7 twa:data-[size=sm]:min-h-auto twa:*:data-[slot=select-value]:line-clamp-1 twa:*:data-[slot=select-value]:flex twa:*:data-[slot=select-value]:items-center twa:*:data-[slot=select-value]:gap-1.5 twa:bg-input-background twa:hover:bg-input-background/80 twa:dark:aria-invalid:border-destructive/50 twa:dark:aria-invalid:ring-destructive/40 twa:[&_svg]:pointer-events-none twa:[&_svg]:shrink-0 twa:[&_svg:not([class*=size-])]:size-4', className), ...props, "data-name": props['data-name'], children: [children, icon !== undefined ? (icon) : (_jsx(SelectPrimitive.Icon, { render: _jsx(ChevronDownIcon, { className: "twa:pointer-events-none twa:size-4 twa:text-muted-foreground" }) }))] }));
|
|
15
|
+
});
|
|
15
16
|
function SelectContent({ className, children, side = 'bottom', sideOffset = 4, align = 'center', alignOffset = 0, alignItemWithTrigger = true, container, stopMouseDownPropagation = false, ...props }) {
|
|
16
17
|
const onMouseDown = stopMouseDownPropagation
|
|
17
18
|
? (e) => {
|
|
@@ -20,12 +21,12 @@ function SelectContent({ className, children, side = 'bottom', sideOffset = 4, a
|
|
|
20
21
|
: undefined;
|
|
21
22
|
return (_jsx(SelectPrimitive.Portal, { container: container, children: _jsx(SelectPrimitive.Positioner, { side: side, sideOffset: sideOffset, align: align, alignOffset: alignOffset, alignItemWithTrigger: alignItemWithTrigger, className: `twa:isolate ${POPUP_Z_INDEX}`, children: _jsxs(SelectPrimitive.Popup, { "data-slot": "select-content", "data-align-trigger": alignItemWithTrigger, onMouseDown: onMouseDown, className: cn('twa:relative twa:isolate twa:z-50 twa:max-h-(--available-height) twa:min-w-36 twa:origin-(--transform-origin) twa:overflow-x-hidden twa:overflow-y-auto twa:rounded-input twa:bg-popover twa:text-popover-foreground twa:shadow-md twa:ring-1 twa:ring-foreground/10 twa:duration-100 twa:data-[align-trigger=true]:animate-none twa:data-[side=bottom]:slide-in-from-top-2 twa:data-[side=inline-end]:slide-in-from-left-2 twa:data-[side=inline-start]:slide-in-from-right-2 twa:data-[side=left]:slide-in-from-right-2 twa:data-[side=right]:slide-in-from-left-2 twa:data-[side=top]:slide-in-from-bottom-2 twa:data-open:animate-in twa:data-open:fade-in-0 twa:data-open:zoom-in-95 twa:data-closed:animate-out twa:data-closed:fade-out-0 twa:data-closed:zoom-out-95', 'twa:w-(--anchor-width)', 'twa:max-w-[min(var(--available-width),80vw)]', className), ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.List, { children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));
|
|
22
23
|
}
|
|
23
|
-
function SelectLabel({ className, ...props }) {
|
|
24
|
-
return (_jsx(SelectPrimitive.GroupLabel, { "data-slot": "select-label", className: cn('twa:px-2 twa:py-1.5 twa:text-xs twa:text-muted-foreground', className), ...props }));
|
|
25
|
-
}
|
|
26
|
-
function SelectItem({ className, children, ...props }) {
|
|
27
|
-
return (_jsxs(SelectPrimitive.Item, { className: cn('twa:relative twa:flex twa:w-full twa:cursor-default twa:items-center twa:gap-2 twa:rounded-input twa:py-1.5 twa:pr-8 twa:pl-2 twa:text-sm twa:outline-hidden twa:select-none twa:focus:bg-accent twa:focus:text-accent-foreground twa:not-data-[variant=destructive]:focus:**:text-accent-foreground twa:data-disabled:pointer-events-none twa:data-disabled:opacity-50 twa:[&_svg]:pointer-events-none twa:[&_svg]:shrink-0 twa:[&_svg:not([class*=size-])]:size-4 twa:*:[span]:last:flex twa:*:[span]:last:items-center twa:*:[span]:last:gap-2', className), ...props, "data-slot": "select-item", children: [_jsx(SelectPrimitive.ItemText, { className: "twa:block twa:min-w-0 twa:flex-1 twa:truncate", children: children }), _jsx(SelectPrimitive.ItemIndicator, { render: _jsx("span", { className: "twa:pointer-events-none twa:absolute twa:right-2 twa:flex twa:size-4 twa:items-center twa:justify-center" }), children: _jsx(CheckIcon, { className: "twa:pointer-events-none" }) })] }));
|
|
28
|
-
}
|
|
24
|
+
const SelectLabel = React.forwardRef(function SelectLabel({ className, ...props }, ref) {
|
|
25
|
+
return (_jsx(SelectPrimitive.GroupLabel, { "data-slot": "select-label", className: cn('twa:px-2 twa:py-1.5 twa:text-xs twa:text-muted-foreground', className), ref: ref, ...props }));
|
|
26
|
+
});
|
|
27
|
+
const SelectItem = React.forwardRef(function SelectItem({ className, children, ...props }, ref) {
|
|
28
|
+
return (_jsxs(SelectPrimitive.Item, { ref: ref, className: cn('twa:relative twa:flex twa:w-full twa:cursor-default twa:items-center twa:gap-2 twa:rounded-input twa:py-1.5 twa:pr-8 twa:pl-2 twa:text-sm twa:outline-hidden twa:select-none twa:focus:bg-accent twa:focus:text-accent-foreground twa:not-data-[variant=destructive]:focus:**:text-accent-foreground twa:data-disabled:pointer-events-none twa:data-disabled:opacity-50 twa:[&_svg]:pointer-events-none twa:[&_svg]:shrink-0 twa:[&_svg:not([class*=size-])]:size-4 twa:*:[span]:last:flex twa:*:[span]:last:items-center twa:*:[span]:last:gap-2', className), ...props, "data-slot": "select-item", children: [_jsx(SelectPrimitive.ItemText, { className: "twa:block twa:min-w-0 twa:flex-1 twa:truncate", children: children }), _jsx(SelectPrimitive.ItemIndicator, { render: _jsx("span", { className: "twa:pointer-events-none twa:absolute twa:right-2 twa:flex twa:size-4 twa:items-center twa:justify-center" }), children: _jsx(CheckIcon, { className: "twa:pointer-events-none" }) })] }));
|
|
29
|
+
});
|
|
29
30
|
function SelectSeparator({ className, ...props }) {
|
|
30
31
|
return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn('twa:pointer-events-none twa:-mx-1 twa:my-1 twa:h-px twa:bg-border', className), ...props }));
|
|
31
32
|
}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
import * as React from
|
|
2
|
-
declare
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
declare const Textarea: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "ref"> & React.RefAttributes<HTMLTextAreaElement>>;
|
|
3
3
|
export { Textarea };
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import * as React from 'react';
|
|
2
3
|
import { cn } from '../../lib/utils';
|
|
3
|
-
function Textarea({ className, ...props }) {
|
|
4
|
-
return (_jsx("textarea", { "data-slot": "textarea", className: cn(
|
|
5
|
-
}
|
|
4
|
+
const Textarea = React.forwardRef(function Textarea({ className, ...props }, ref) {
|
|
5
|
+
return (_jsx("textarea", { "data-slot": "textarea", className: cn('twa:flex twa:field-sizing-content twa:min-h-16 twa:w-full twa:rounded-md twa:border twa:border-input twa:bg-transparent twa:px-2.5 twa:py-2 twa:text-base twa:shadow-xs twa:transition-[color,box-shadow] twa:outline-none twa:placeholder:text-muted-foreground twa:focus-visible:border-ring twa:focus-visible:ring-3 twa:focus-visible:ring-ring/50 twa:disabled:cursor-not-allowed twa:disabled:opacity-50 twa:aria-invalid:border-destructive twa:aria-invalid:ring-3 twa:aria-invalid:ring-destructive/20 twa:md:text-sm twa:dark:aria-invalid:border-destructive/50 twa:dark:aria-invalid:ring-destructive/40', className), ref: ref, ...props }));
|
|
6
|
+
});
|
|
6
7
|
export { Textarea };
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
3
|
-
declare function
|
|
4
|
-
declare function
|
|
5
|
-
declare
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
|
|
3
|
+
declare function TooltipProvider({ delay, ...props }: TooltipPrimitive.Provider.Props): React.JSX.Element;
|
|
4
|
+
declare function Tooltip({ ...props }: TooltipPrimitive.Root.Props): React.JSX.Element;
|
|
5
|
+
declare const TooltipTrigger: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.Trigger.Props<unknown>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
|
|
6
|
+
declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: TooltipPrimitive.Popup.Props & Pick<TooltipPrimitive.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>): React.JSX.Element;
|
|
6
7
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
|
@@ -1,16 +1,17 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip';
|
|
3
4
|
import { cn, POPUP_Z_INDEX } from '../../lib/utils';
|
|
4
5
|
function TooltipProvider({ delay = 0, ...props }) {
|
|
5
|
-
return
|
|
6
|
+
return _jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delay: delay, ...props });
|
|
6
7
|
}
|
|
7
8
|
function Tooltip({ ...props }) {
|
|
8
9
|
return _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props });
|
|
9
10
|
}
|
|
10
|
-
function TooltipTrigger({ ...props }) {
|
|
11
|
-
return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
|
|
12
|
-
}
|
|
13
|
-
function TooltipContent({ className, side =
|
|
14
|
-
return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: `twa:isolate ${POPUP_Z_INDEX}`, children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", className: cn(
|
|
11
|
+
const TooltipTrigger = React.forwardRef(function TooltipTrigger({ ...props }, ref) {
|
|
12
|
+
return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ref: ref, ...props });
|
|
13
|
+
});
|
|
14
|
+
function TooltipContent({ className, side = 'top', sideOffset = 4, align = 'center', alignOffset = 0, children, ...props }) {
|
|
15
|
+
return (_jsx(TooltipPrimitive.Portal, { children: _jsx(TooltipPrimitive.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: `twa:isolate ${POPUP_Z_INDEX}`, children: _jsxs(TooltipPrimitive.Popup, { "data-slot": "tooltip-content", className: cn('twa:z-50 twa:inline-flex twa:w-fit twa:max-w-xs twa:origin-(--transform-origin) twa:items-center twa:gap-1.5 twa:rounded-md twa:bg-foreground twa:px-3 twa:py-1.5 twa:text-xs twa:text-background twa:has-data-[slot=kbd]:pr-1.5 twa:data-[side=bottom]:slide-in-from-top-2 twa:data-[side=inline-end]:slide-in-from-left-2 twa:data-[side=inline-start]:slide-in-from-right-2 twa:data-[side=left]:slide-in-from-right-2 twa:data-[side=right]:slide-in-from-left-2 twa:data-[side=top]:slide-in-from-bottom-2 twa:**:data-[slot=kbd]:relative twa:**:data-[slot=kbd]:isolate twa:**:data-[slot=kbd]:z-50 twa:**:data-[slot=kbd]:rounded-sm twa:data-[state=delayed-open]:animate-in twa:data-[state=delayed-open]:fade-in-0 twa:data-[state=delayed-open]:zoom-in-95 twa:data-open:animate-in twa:data-open:fade-in-0 twa:data-open:zoom-in-95 twa:data-closed:animate-out twa:data-closed:fade-out-0 twa:data-closed:zoom-out-95', className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "twa:z-50 twa:size-2.5 twa:translate-y-[calc(-50%-2px)] twa:rotate-45 twa:rounded-[2px] twa:bg-foreground twa:fill-foreground twa:data-[side=bottom]:top-1 twa:data-[side=inline-end]:top-1/2! twa:data-[side=inline-end]:-left-1 twa:data-[side=inline-end]:-translate-y-1/2 twa:data-[side=inline-start]:top-1/2! twa:data-[side=inline-start]:-right-1 twa:data-[side=inline-start]:-translate-y-1/2 twa:data-[side=left]:top-1/2! twa:data-[side=left]:-right-1 twa:data-[side=left]:-translate-y-1/2 twa:data-[side=right]:top-1/2! twa:data-[side=right]:-left-1 twa:data-[side=right]:-translate-y-1/2 twa:data-[side=top]:-bottom-2.5" })] }) }) }));
|
|
15
16
|
}
|
|
16
17
|
export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
|
package/src/env.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export default {
|
|
2
2
|
NEXT_PUBLIC_INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
|
|
3
|
-
PUBLISH_TIMESTAMP:
|
|
4
|
-
VERSION: "23.0.0-canary.
|
|
3
|
+
PUBLISH_TIMESTAMP: 1780656122892 || Date.now(),
|
|
4
|
+
VERSION: "23.0.0-canary.3" || '--current-version--',
|
|
5
5
|
};
|
package/src/lib/utils.d.ts
CHANGED
|
@@ -1,3 +1,23 @@
|
|
|
1
1
|
import { type ClassValue } from 'clsx';
|
|
2
2
|
export declare function cn(...inputs: ClassValue[]): string;
|
|
3
3
|
export declare const POPUP_Z_INDEX = "twa:z-[9999999]";
|
|
4
|
+
export declare const getFocusableElements: (root: HTMLElement) => HTMLElement[];
|
|
5
|
+
type CaptureTabEvent = Pick<KeyboardEvent, 'key' | 'shiftKey' | 'preventDefault'>;
|
|
6
|
+
type CaptureTabTarget = HTMLElement | null | {
|
|
7
|
+
current: HTMLElement | null;
|
|
8
|
+
};
|
|
9
|
+
/**
|
|
10
|
+
* Traps Tab / Shift+Tab navigation within `node` so focus cycles between the
|
|
11
|
+
* first and last focusable elements instead of escaping the container.
|
|
12
|
+
*
|
|
13
|
+
* Only acts when the currently focused element is within `node` — popups that
|
|
14
|
+
* portal elsewhere (selects, datepickers) keep managing their own navigation.
|
|
15
|
+
*
|
|
16
|
+
* `node` may be an element directly or a React ref to one.
|
|
17
|
+
*
|
|
18
|
+
* Can be called directly (`captureTab(node, event)`) or curried by omitting the
|
|
19
|
+
* event (`captureTab(node)`) to get a handler that only expects the event.
|
|
20
|
+
*/
|
|
21
|
+
export declare function captureTab(node: CaptureTabTarget): (event: CaptureTabEvent) => void;
|
|
22
|
+
export declare function captureTab(node: CaptureTabTarget, event: CaptureTabEvent): void;
|
|
23
|
+
export {};
|
package/src/lib/utils.js
CHANGED
|
@@ -4,3 +4,48 @@ export function cn(...inputs) {
|
|
|
4
4
|
return twMerge(clsx(inputs));
|
|
5
5
|
}
|
|
6
6
|
export const POPUP_Z_INDEX = 'twa:z-[9999999]';
|
|
7
|
+
const FOCUSABLE_SELECTOR = [
|
|
8
|
+
'a[href]',
|
|
9
|
+
'button:not([disabled])',
|
|
10
|
+
'input:not([disabled])',
|
|
11
|
+
'select:not([disabled])',
|
|
12
|
+
'textarea:not([disabled])',
|
|
13
|
+
'[tabindex]:not([tabindex="-1"])',
|
|
14
|
+
].join(',');
|
|
15
|
+
export const getFocusableElements = (root) => {
|
|
16
|
+
return Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter((el) => {
|
|
17
|
+
if (el.hasAttribute('disabled') || el.getAttribute('aria-hidden') === 'true') {
|
|
18
|
+
return false;
|
|
19
|
+
}
|
|
20
|
+
// ignore elements that aren't actually rendered (e.g. display:none)
|
|
21
|
+
return !!(el.offsetWidth || el.offsetHeight || el.getClientRects().length);
|
|
22
|
+
});
|
|
23
|
+
};
|
|
24
|
+
export function captureTab(node, event) {
|
|
25
|
+
if (event === undefined) {
|
|
26
|
+
return (deferredEvent) => captureTab(node, deferredEvent);
|
|
27
|
+
}
|
|
28
|
+
if (event.key !== 'Tab')
|
|
29
|
+
return;
|
|
30
|
+
const root = node instanceof HTMLElement ? node : (node?.current ?? null);
|
|
31
|
+
if (!root)
|
|
32
|
+
return;
|
|
33
|
+
const active = document.activeElement;
|
|
34
|
+
if (!active || !root.contains(active))
|
|
35
|
+
return;
|
|
36
|
+
const focusable = getFocusableElements(root);
|
|
37
|
+
if (focusable.length === 0)
|
|
38
|
+
return;
|
|
39
|
+
const first = focusable[0];
|
|
40
|
+
const last = focusable[focusable.length - 1];
|
|
41
|
+
if (event.shiftKey) {
|
|
42
|
+
if (active === first) {
|
|
43
|
+
event.preventDefault();
|
|
44
|
+
last.focus();
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
else if (active === last) {
|
|
48
|
+
event.preventDefault();
|
|
49
|
+
first.focus();
|
|
50
|
+
}
|
|
51
|
+
}
|
|
@@ -4319,12 +4319,17 @@ export declare const ADAPTABLE_METAMODEL: {
|
|
|
4319
4319
|
};
|
|
4320
4320
|
ReportScheduleRanInfo: {
|
|
4321
4321
|
k: string;
|
|
4322
|
-
p: {
|
|
4322
|
+
p: ({
|
|
4323
|
+
n: string;
|
|
4324
|
+
k: string;
|
|
4325
|
+
o?: undefined;
|
|
4326
|
+
r?: undefined;
|
|
4327
|
+
} | {
|
|
4323
4328
|
n: string;
|
|
4324
4329
|
k: string;
|
|
4325
4330
|
o: boolean;
|
|
4326
4331
|
r: string;
|
|
4327
|
-
}[];
|
|
4332
|
+
})[];
|
|
4328
4333
|
};
|
|
4329
4334
|
ResolveContextDataContext: {
|
|
4330
4335
|
k: string;
|