@k8slens/element-components 3.5.0 → 3.6.1

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.
Files changed (25) hide show
  1. package/dist/index.css +139 -1
  2. package/dist/index.d.ts +2 -1
  3. package/dist/index.d.ts.map +1 -1
  4. package/dist/index.js +212 -45
  5. package/dist/src/elements.d.ts +35 -35
  6. package/dist/src/plugins/background-color/background-color.d.ts +1 -0
  7. package/dist/src/plugins/background-color/background-color.d.ts.map +1 -1
  8. package/dist/src/plugins/color/color.d.ts +1 -0
  9. package/dist/src/plugins/color/color.d.ts.map +1 -1
  10. package/dist/src/plugins/drop-down-menu/drop-down-menu.d.ts +4 -0
  11. package/dist/src/plugins/drop-down-menu/drop-down-menu.d.ts.map +1 -1
  12. package/dist/src/plugins/focusable/_private/use-keyboard-navigation.d.ts +3 -2
  13. package/dist/src/plugins/focusable/_private/use-keyboard-navigation.d.ts.map +1 -1
  14. package/dist/src/plugins/focusable/_shared/keyboard-navigation-state.injectable.d.ts +6 -2
  15. package/dist/src/plugins/focusable/_shared/keyboard-navigation-state.injectable.d.ts.map +1 -1
  16. package/dist/src/plugins/focusable/focusable-item-context.d.ts +32 -0
  17. package/dist/src/plugins/focusable/focusable-item-context.d.ts.map +1 -0
  18. package/dist/src/plugins/focusable/focusable.d.ts.map +1 -1
  19. package/dist/src/plugins/focusable/get-focusable-context.d.ts +15 -2
  20. package/dist/src/plugins/focusable/get-focusable-context.d.ts.map +1 -1
  21. package/dist/src/plugins/height/height.d.ts +8 -5
  22. package/dist/src/plugins/height/height.d.ts.map +1 -1
  23. package/dist/src/plugins/size/size.d.ts +1 -1
  24. package/dist/tsconfig.tsbuildinfo +1 -1
  25. package/package.json +3 -3
package/dist/src/elements.d.ts CHANGED
@@ -59,7 +59,7 @@ export declare const sharedPlugins: (import("@k8slens/element-component").Plugin
59
59
  $style?: React.CSSProperties;
60
60
  style?: React.CSSProperties;
61
61
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
62
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
62
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
63
63
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
64
64
  }, unknown> | import("@k8slens/element-component").Plugin<{
65
65
  $className?: import("@k8slens/public-utilities").IClassName;
@@ -264,7 +264,7 @@ export declare const Div: import("@k8slens/element-component").ElementComponent<
264
264
  };
265
265
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
266
266
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
267
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
267
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
268
268
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
269
269
  $grid?: import("./plugins/grid/grid").GridProps;
270
270
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -357,7 +357,7 @@ export declare const Common: import("@k8slens/element-component").ElementCompone
357
357
  };
358
358
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
359
359
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
360
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
360
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
361
361
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
362
362
  $grid?: import("./plugins/grid/grid").GridProps;
363
363
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -450,7 +450,7 @@ export declare const Svg: import("@k8slens/element-component").ElementComponent<
450
450
  };
451
451
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
452
452
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
453
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
453
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
454
454
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
455
455
  $grid?: import("./plugins/grid/grid").GridProps;
456
456
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -544,7 +544,7 @@ export declare const Input: import("@k8slens/element-component").ElementComponen
544
544
  textOverflow?: "clip" | "ellipsis" | "default";
545
545
  };
546
546
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
547
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
547
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
548
548
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
549
549
  $grid?: import("./plugins/grid/grid").GridProps;
550
550
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -640,7 +640,7 @@ export declare const TextArea: import("@k8slens/element-component").ElementCompo
640
640
  };
641
641
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
642
642
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
643
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
643
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
644
644
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
645
645
  $grid?: import("./plugins/grid/grid").GridProps;
646
646
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -733,7 +733,7 @@ export declare const Form: import("@k8slens/element-component").ElementComponent
733
733
  };
734
734
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
735
735
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
736
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
736
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
737
737
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
738
738
  $grid?: import("./plugins/grid/grid").GridProps;
739
739
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -826,7 +826,7 @@ export declare const Span: import("@k8slens/element-component").ElementComponent
826
826
  };
827
827
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
828
828
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
829
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
829
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
830
830
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
831
831
  $grid?: import("./plugins/grid/grid").GridProps;
832
832
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -928,7 +928,7 @@ export declare const ClickableDiv: import("@k8slens/element-component").ElementC
928
928
  };
929
929
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
930
930
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
931
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
931
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
932
932
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
933
933
  $grid?: import("./plugins/grid/grid").GridProps;
934
934
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -1022,7 +1022,7 @@ export declare const I: import("@k8slens/element-component").ElementComponent<"i
1022
1022
  };
1023
1023
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
1024
1024
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
1025
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
1025
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
1026
1026
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
1027
1027
  $grid?: import("./plugins/grid/grid").GridProps;
1028
1028
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -1115,7 +1115,7 @@ export declare const A: import("@k8slens/element-component").ElementComponent<"a
1115
1115
  };
1116
1116
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
1117
1117
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
1118
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
1118
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
1119
1119
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
1120
1120
  $grid?: import("./plugins/grid/grid").GridProps;
1121
1121
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -1217,7 +1217,7 @@ export declare const Button: import("@k8slens/element-component").ElementCompone
1217
1217
  };
1218
1218
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
1219
1219
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
1220
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
1220
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
1221
1221
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
1222
1222
  $grid?: import("./plugins/grid/grid").GridProps;
1223
1223
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -1311,7 +1311,7 @@ export declare const Code: import("@k8slens/element-component").ElementComponent
1311
1311
  };
1312
1312
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
1313
1313
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
1314
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
1314
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
1315
1315
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
1316
1316
  $grid?: import("./plugins/grid/grid").GridProps;
1317
1317
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -1404,7 +1404,7 @@ export declare const Label: import("@k8slens/element-component").ElementComponen
1404
1404
  };
1405
1405
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
1406
1406
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
1407
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
1407
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
1408
1408
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
1409
1409
  $grid?: import("./plugins/grid/grid").GridProps;
1410
1410
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -1497,7 +1497,7 @@ export declare const Pre: import("@k8slens/element-component").ElementComponent<
1497
1497
  };
1498
1498
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
1499
1499
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
1500
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
1500
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
1501
1501
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
1502
1502
  $grid?: import("./plugins/grid/grid").GridProps;
1503
1503
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -1590,7 +1590,7 @@ export declare const Nav: import("@k8slens/element-component").ElementComponent<
1590
1590
  };
1591
1591
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
1592
1592
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
1593
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
1593
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
1594
1594
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
1595
1595
  $grid?: import("./plugins/grid/grid").GridProps;
1596
1596
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -1683,7 +1683,7 @@ export declare const H1: import("@k8slens/element-component").ElementComponent<"
1683
1683
  };
1684
1684
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
1685
1685
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
1686
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
1686
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
1687
1687
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
1688
1688
  $grid?: import("./plugins/grid/grid").GridProps;
1689
1689
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -1776,7 +1776,7 @@ export declare const H2: import("@k8slens/element-component").ElementComponent<"
1776
1776
  };
1777
1777
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
1778
1778
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
1779
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
1779
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
1780
1780
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
1781
1781
  $grid?: import("./plugins/grid/grid").GridProps;
1782
1782
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -1869,7 +1869,7 @@ export declare const H3: import("@k8slens/element-component").ElementComponent<"
1869
1869
  };
1870
1870
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
1871
1871
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
1872
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
1872
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
1873
1873
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
1874
1874
  $grid?: import("./plugins/grid/grid").GridProps;
1875
1875
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -1962,7 +1962,7 @@ export declare const H4: import("@k8slens/element-component").ElementComponent<"
1962
1962
  };
1963
1963
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
1964
1964
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
1965
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
1965
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
1966
1966
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
1967
1967
  $grid?: import("./plugins/grid/grid").GridProps;
1968
1968
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -2055,7 +2055,7 @@ export declare const H5: import("@k8slens/element-component").ElementComponent<"
2055
2055
  };
2056
2056
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
2057
2057
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
2058
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
2058
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
2059
2059
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
2060
2060
  $grid?: import("./plugins/grid/grid").GridProps;
2061
2061
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -2148,7 +2148,7 @@ export declare const H6: import("@k8slens/element-component").ElementComponent<"
2148
2148
  };
2149
2149
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
2150
2150
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
2151
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
2151
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
2152
2152
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
2153
2153
  $grid?: import("./plugins/grid/grid").GridProps;
2154
2154
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -2241,7 +2241,7 @@ export declare const Ol: import("@k8slens/element-component").ElementComponent<"
2241
2241
  };
2242
2242
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
2243
2243
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
2244
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
2244
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
2245
2245
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
2246
2246
  $grid?: import("./plugins/grid/grid").GridProps;
2247
2247
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -2334,7 +2334,7 @@ export declare const Ul: import("@k8slens/element-component").ElementComponent<"
2334
2334
  };
2335
2335
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
2336
2336
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
2337
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
2337
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
2338
2338
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
2339
2339
  $grid?: import("./plugins/grid/grid").GridProps;
2340
2340
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -2427,7 +2427,7 @@ export declare const Li: import("@k8slens/element-component").ElementComponent<"
2427
2427
  };
2428
2428
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
2429
2429
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
2430
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
2430
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
2431
2431
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
2432
2432
  $grid?: import("./plugins/grid/grid").GridProps;
2433
2433
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -2528,7 +2528,7 @@ export declare const ClickableLi: import("@k8slens/element-component").ElementCo
2528
2528
  };
2529
2529
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
2530
2530
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
2531
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
2531
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
2532
2532
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
2533
2533
  $grid?: import("./plugins/grid/grid").GridProps;
2534
2534
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -2623,7 +2623,7 @@ export declare const P: import("@k8slens/element-component").ElementComponent<"p
2623
2623
  };
2624
2624
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
2625
2625
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
2626
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
2626
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
2627
2627
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
2628
2628
  $grid?: import("./plugins/grid/grid").GridProps;
2629
2629
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -2716,7 +2716,7 @@ export declare const Th: import("@k8slens/element-component").ElementComponent<"
2716
2716
  };
2717
2717
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
2718
2718
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
2719
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
2719
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
2720
2720
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
2721
2721
  $grid?: import("./plugins/grid/grid").GridProps;
2722
2722
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -2809,7 +2809,7 @@ export declare const Td: import("@k8slens/element-component").ElementComponent<"
2809
2809
  };
2810
2810
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
2811
2811
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
2812
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
2812
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
2813
2813
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
2814
2814
  $grid?: import("./plugins/grid/grid").GridProps;
2815
2815
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -2902,7 +2902,7 @@ export declare const Tr: import("@k8slens/element-component").ElementComponent<"
2902
2902
  };
2903
2903
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
2904
2904
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
2905
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
2905
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
2906
2906
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
2907
2907
  $grid?: import("./plugins/grid/grid").GridProps;
2908
2908
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -2995,7 +2995,7 @@ export declare const Table: import("@k8slens/element-component").ElementComponen
2995
2995
  };
2996
2996
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
2997
2997
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
2998
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
2998
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
2999
2999
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
3000
3000
  $grid?: import("./plugins/grid/grid").GridProps;
3001
3001
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -3088,7 +3088,7 @@ export declare const TBody: import("@k8slens/element-component").ElementComponen
3088
3088
  };
3089
3089
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
3090
3090
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
3091
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
3091
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
3092
3092
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
3093
3093
  $grid?: import("./plugins/grid/grid").GridProps;
3094
3094
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -3181,7 +3181,7 @@ export declare const Dialog: import("@k8slens/element-component").ElementCompone
3181
3181
  };
3182
3182
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
3183
3183
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
3184
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
3184
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
3185
3185
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
3186
3186
  $grid?: import("./plugins/grid/grid").GridProps;
3187
3187
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -3274,7 +3274,7 @@ export declare const Canvas: import("@k8slens/element-component").ElementCompone
3274
3274
  };
3275
3275
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
3276
3276
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
3277
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
3277
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
3278
3278
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
3279
3279
  $grid?: import("./plugins/grid/grid").GridProps;
3280
3280
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
@@ -3367,7 +3367,7 @@ export declare const Img: import("@k8slens/element-component").ElementComponent<
3367
3367
  };
3368
3368
  $tooltip?: string | import("./plugins/tooltip/tooltip").$TooltipProps<any> | null;
3369
3369
  $width?: import("..").TShirtSize | "full" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/width/width").$WidthProps;
3370
- $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/height/height").$HeightProps;
3370
+ $height?: import("..").TShirtSize | "full" | "auto" | "stretch" | import("./plugins/width/width").Percentage | import("./plugins/height/height").$HeightProps;
3371
3371
  $size?: import("..").TShirtSize | "full" | import("./plugins/size/size").$SizeProps;
3372
3372
  $grid?: import("./plugins/grid/grid").GridProps;
3373
3373
  $flex?: import("./plugins/flex/flex").SimpleFlexProp | import("./plugins/flex/flex").MaximalFlexProps;
package/dist/src/plugins/background-color/background-color.d.ts CHANGED
@@ -4,6 +4,7 @@ export type BackgroundColor = Color | BackgroundColorAlias;
4
4
  export type $BackgroundColorProps = {
5
5
  normal?: BackgroundColor;
6
6
  hover?: BackgroundColor;
7
+ focus?: BackgroundColor;
7
8
  };
8
9
  export type BackgroundColorPluginProps = {
9
10
  $backgroundColor?: BackgroundColor | $BackgroundColorProps;
package/dist/src/plugins/background-color/background-color.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"background-color.d.ts","sourceRoot":"","sources":["../../../../src/plugins/background-color/background-color.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE/C,MAAM,MAAM,oBAAoB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC/D,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,oBAAoB,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IAAE,gBAAgB,CAAC,EAAE,eAAe,GAAG,qBAAqB,CAAA;CAAE,CAAC;AAExG,QAAA,MAAM,cAAc;aAClB,iBAAiB,EAAE,QAAQ;aAC3B,mBAAmB,EAAE,SAAS;aAC9B,uBAAuB,EAAE,eAAe;CAChC,CAAC;AAIX,eAAO,MAAM,qBAAqB;;;uBAV4B,eAAe,GAAG,qBAAqB;WAyBnG,CAAC"}
1
+ {"version":3,"file":"background-color.d.ts","sourceRoot":"","sources":["../../../../src/plugins/background-color/background-color.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE/C,MAAM,MAAM,oBAAoB,GAAG,MAAM,OAAO,cAAc,CAAC;AAC/D,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,oBAAoB,CAAC;AAE3D,MAAM,MAAM,qBAAqB,GAAG;IAClC,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB,KAAK,CAAC,EAAE,eAAe,CAAC;IACxB,KAAK,CAAC,EAAE,eAAe,CAAC;CACzB,CAAC;AAEF,MAAM,MAAM,0BAA0B,GAAG;IAAE,gBAAgB,CAAC,EAAE,eAAe,GAAG,qBAAqB,CAAA;CAAE,CAAC;AAExG,QAAA,MAAM,cAAc;aAClB,iBAAiB,EAAE,QAAQ;aAC3B,mBAAmB,EAAE,SAAS;aAC9B,uBAAuB,EAAE,eAAe;CAChC,CAAC;AAIX,eAAO,MAAM,qBAAqB;;;uBAV4B,eAAe,GAAG,qBAAqB;WA2BnG,CAAC"}
package/dist/src/plugins/color/color.d.ts CHANGED
@@ -3,6 +3,7 @@ export type TextColor = Color | TextColorAlias;
3
3
  export type $ColorProps = {
4
4
  readonly normal?: TextColor;
5
5
  readonly hover?: TextColor;
6
+ readonly focus?: TextColor;
6
7
  readonly disabled?: TextColor;
7
8
  };
8
9
  export type ColorPluginProps = {
package/dist/src/plugins/color/color.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../src/plugins/color/color.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE/C,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,cAAc,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;CAAE,CAAC;AAC7E,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,cAAc,CAAC;AAEzD,QAAA,MAAM,cAAc;aAClB,SAAS,EAAE,QAAQ;aACnB,WAAW,EAAE,QAAQ;aACrB,aAAa,EAAE,QAAQ;CACf,CAAC;AAIX,eAAO,MAAM,WAAW;;;sBAX2B,SAAS,GAAG,WAAW;WA4BxE,CAAC"}
1
+ {"version":3,"file":"color.d.ts","sourceRoot":"","sources":["../../../../src/plugins/color/color.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAE/C,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,cAAc,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG;IACxB,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,CAAC;IAC5B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,KAAK,CAAC,EAAE,SAAS,CAAC;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,SAAS,CAAC;CAC/B,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAAE,QAAQ,CAAC,MAAM,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;CAAE,CAAC;AAC7E,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,cAAc,CAAC;AAEzD,QAAA,MAAM,cAAc;aAClB,SAAS,EAAE,QAAQ;aACnB,WAAW,EAAE,QAAQ;aACrB,aAAa,EAAE,QAAQ;CACf,CAAC;AAIX,eAAO,MAAM,WAAW;;;sBAX2B,SAAS,GAAG,WAAW;WA8BxE,CAAC"}
package/dist/src/plugins/drop-down-menu/drop-down-menu.d.ts CHANGED
@@ -11,6 +11,10 @@ export type DropDownMenuPluginProps = {
11
11
  * The menu positions itself against the nearest anchor around it, so the element — or something
12
12
  * enclosing it — declares `$anchor`.
13
13
  *
14
+ * Focus returns to the element once the menu is gone. A menu that opens on hovering opens with
15
+ * ArrowRight as well, and closes with ArrowLeft from anywhere within it, so a menu held by a menu
16
+ * row is reachable without a pointer.
17
+ *
14
18
  * Requires `dropDownMenuFeature` of `@lensapp/drop-down-menu` to be registered: the menu
15
19
  * component is resolved through an injection token this package does not implement.
16
20
  */
package/dist/src/plugins/drop-down-menu/drop-down-menu.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"drop-down-menu.d.ts","sourceRoot":"","sources":["../../../../src/plugins/drop-down-menu/drop-down-menu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAGxF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B;;;;;;;;;;OAUG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,gBAAgB,CAAC;CAC3C,CAAC;AA8HF,eAAO,MAAM,kBAAkB;;;;;;;wBA7IT,KAAK,CAAC,SAAS;wBACf,MAAM;6BAaD,gBAAgB;WAgK1C,CAAC"}
1
+ {"version":3,"file":"drop-down-menu.d.ts","sourceRoot":"","sources":["../../../../src/plugins/drop-down-menu/drop-down-menu.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgB,KAAK,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAGxF,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAQ/B,MAAM,MAAM,uBAAuB,GAAG;IACpC,QAAQ,CAAC,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACpC,QAAQ,CAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAE3B;;;;;;;;;;;;;;OAcG;IACH,QAAQ,CAAC,aAAa,CAAC,EAAE,gBAAgB,CAAC;CAC3C,CAAC;AAsNF,eAAO,MAAM,kBAAkB;;;;;;;wBAzOT,KAAK,CAAC,SAAS;wBACf,MAAM;6BAiBD,gBAAgB;WAwP1C,CAAC"}
package/dist/src/plugins/focusable/_private/use-keyboard-navigation.d.ts CHANGED
@@ -1,8 +1,9 @@
1
- import type { IObservableValue } from "mobx";
2
1
  import type { KeyboardNavigableFocusableContext } from "../get-focusable-context";
3
2
  type KeyboardNavigation = {
4
3
  readonly onKeyDown: (event: React.KeyboardEvent) => void;
4
+ readonly onFocus: () => void;
5
+ readonly focusWhatThePointerIsOn: (event: React.MouseEvent) => void;
5
6
  };
6
- export declare const useKeyboardNavigation: (context: KeyboardNavigableFocusableContext<any> | undefined, item: unknown, orderNumber: number | undefined, element: HTMLElement | null, state: IObservableValue<unknown>) => KeyboardNavigation;
7
+ export declare const useKeyboardNavigation: (context: KeyboardNavigableFocusableContext<any> | undefined, item: unknown, orderNumber: number | undefined, element: HTMLElement | null) => KeyboardNavigation;
7
8
  export {};
8
9
  //# sourceMappingURL=use-keyboard-navigation.d.ts.map
package/dist/src/plugins/focusable/_private/use-keyboard-navigation.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"use-keyboard-navigation.d.ts","sourceRoot":"","sources":["../../../../../src/plugins/focusable/_private/use-keyboard-navigation.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,MAAM,CAAC;AAK7C,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,0BAA0B,CAAC;AAElF,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;CAC1D,CAAC;AAIF,eAAO,MAAM,qBAAqB,YACvB,iCAAiC,CAAC,GAAG,CAAC,GAAG,SAAS,QACrD,OAAO,eACA,MAAM,GAAG,SAAS,WACtB,WAAW,GAAG,IAAI,SACpB,gBAAgB,CAAC,OAAO,CAAC,KAC/B,kBA0EF,CAAC"}
1
+ {"version":3,"file":"use-keyboard-navigation.d.ts","sourceRoot":"","sources":["../../../../../src/plugins/focusable/_private/use-keyboard-navigation.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,iCAAiC,EAAiC,MAAM,0BAA0B,CAAC;AAEjH,KAAK,kBAAkB,GAAG;IACxB,QAAQ,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,aAAa,KAAK,IAAI,CAAC;IACzD,QAAQ,CAAC,OAAO,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,CAAC,uBAAuB,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;CACrE,CAAC;AAQF,eAAO,MAAM,qBAAqB,YACvB,iCAAiC,CAAC,GAAG,CAAC,GAAG,SAAS,QACrD,OAAO,eACA,MAAM,GAAG,SAAS,WACtB,WAAW,GAAG,IAAI,KAC1B,kBAmGF,CAAC"}
package/dist/src/plugins/focusable/_shared/keyboard-navigation-state.injectable.d.ts CHANGED
@@ -6,12 +6,16 @@ export type NavigableEntry = {
6
6
  };
7
7
  type NavigableContext = KeyboardNavigableFocusableContext<any>;
8
8
  /**
9
- * The members of every keyboard-navigable context, and the order the contexts appeared in. Focus
10
- * belongs to the context that appeared last; when it goes away, the previous one takes it back.
9
+ * The members of every keyboard-navigable context, the order the contexts appeared in, and which
10
+ * member of each had focus. Focus belongs to the context that appeared last; when it goes away, the
11
+ * previous one takes it back — at the member it was left on, which is what makes stepping into
12
+ * something and back out of it land where it started rather than at the beginning.
11
13
  */
12
14
  export declare const keyboardNavigationStateInjectable: import("@k8slens/injectable").Injectable2<() => {
13
15
  sortedEntriesOf: (context: NavigableContext) => NavigableEntry[];
14
16
  contextInFocus: () => NavigableContext | undefined;
17
+ itemInFocusOf: (context: NavigableContext) => unknown;
18
+ noteItemInFocus: (context: NavigableContext, item: unknown) => void;
15
19
  register: (context: NavigableContext, entry: NavigableEntry) => void;
16
20
  deregister: (context: NavigableContext, entry: NavigableEntry) => void;
17
21
  }>;
package/dist/src/plugins/focusable/_shared/keyboard-navigation-state.injectable.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"keyboard-navigation-state.injectable.d.ts","sourceRoot":"","sources":["../../../../../src/plugins/focusable/_shared/keyboard-navigation-state.injectable.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,0BAA0B,CAAC;AAElF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;CAC/B,CAAC;AAEF,KAAK,gBAAgB,GAAG,iCAAiC,CAAC,GAAG,CAAC,CAAC;AAE/D;;;GAGG;AACH,eAAO,MAAM,iCAAiC;+BAsBb,gBAAgB;;wBAKvB,gBAAgB,SAAS,cAAc;0BAUrC,gBAAgB,SAAS,cAAc;EAejE,CAAC"}
1
+ {"version":3,"file":"keyboard-navigation-state.injectable.d.ts","sourceRoot":"","sources":["../../../../../src/plugins/focusable/_shared/keyboard-navigation-state.injectable.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,iCAAiC,EAAE,MAAM,0BAA0B,CAAC;AAElF,MAAM,MAAM,cAAc,GAAG;IAC3B,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,WAAW,EAAE,MAAM,CAAC;IAC7B,QAAQ,CAAC,OAAO,EAAE,WAAW,CAAC;CAC/B,CAAC;AAEF,KAAK,gBAAgB,GAAG,iCAAiC,CAAC,GAAG,CAAC,CAAC;AAE/D;;;;;GAKG;AACH,eAAO,MAAM,iCAAiC;+BAuBb,gBAAgB;;6BAKlB,gBAAgB;+BAEd,gBAAgB,QAAQ,OAAO;wBAItC,gBAAgB,SAAS,cAAc;0BAUrC,gBAAgB,SAAS,cAAc;EAmBjE,CAAC"}
package/dist/src/plugins/focusable/focusable-item-context.d.ts ADDED
@@ -0,0 +1,32 @@
1
+ /**
2
+ * Carries the focusable an element is, as decided by the surface it renders in rather than by the
3
+ * element itself: which context it competes in, which item it stands for, and where it sits among
4
+ * the others.
5
+ *
6
+ * A surface that knows its items — a menu, a toolbar — provides one of these per item; whatever
7
+ * draws the item adopts it through {@link useFocusableItem} while knowing nothing about the
8
+ * surface, which is what lets a dumb component be keyboard-navigable in one surface and ordinary
9
+ * in another.
10
+ */
11
+ export declare const contextForFocusableItem: import("react").Context<{
12
+ context: import("./get-focusable-context").AnyFocusableContext<any>;
13
+ item: any;
14
+ orderNumber?: number;
15
+ } | undefined>;
16
+ /**
17
+ * The `$focusable` of the item a component draws, when the surface around it decided one.
18
+ * `undefined` outside such a surface, which is what makes adopting it a matter of passing it on.
19
+ *
20
+ * @example
21
+ * ```tsx
22
+ * const Row = ({ children }: { children: React.ReactNode }) => (
23
+ * <ClickableLi $focusable={useFocusableItem()}>{children}</ClickableLi>
24
+ * );
25
+ * ```
26
+ */
27
+ export declare const useFocusableItem: () => {
28
+ context: import("./get-focusable-context").AnyFocusableContext<any>;
29
+ item: any;
30
+ orderNumber?: number;
31
+ } | undefined;
32
+ //# sourceMappingURL=focusable-item-context.d.ts.map
package/dist/src/plugins/focusable/focusable-item-context.d.ts.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"focusable-item-context.d.ts","sourceRoot":"","sources":["../../../../src/plugins/focusable/focusable-item-context.ts"],"names":[],"mappings":"AAGA;;;;;;;;;GASG;AACH,eAAO,MAAM,uBAAuB;;;;cAA6D,CAAC;AAElG;;;;;;;;;;GAUG;AACH,eAAO,MAAM,gBAAgB;;;;aAA4C,CAAC"}
package/dist/src/plugins/focusable/focusable.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"focusable.d.ts","sourceRoot":"","sources":["../../../../src/plugins/focusable/focusable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAOnE,MAAM,MAAM,oBAAoB,CAAC,CAAC,EAAE,WAAW,GAAG,GAAG,IAAI;IACvD,UAAU,CAAC,EAAE;QACX,OAAO,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;QAC1C,IAAI,EAAE,WAAW,CAAC;QAClB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IAEF,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;CACpC,CAAC;AA+EF,wBAAgB,eAAe,CAAC,CAAC;;;;;;sBAtFf,MAAM;;;;;eAMX,WAAW,CAAC,UAAU,CAAC;YAsGnC"}
1
+ {"version":3,"file":"focusable.d.ts","sourceRoot":"","sources":["../../../../src/plugins/focusable/focusable.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAO/B,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC;AAOnE,MAAM,MAAM,oBAAoB,CAAC,CAAC,EAAE,WAAW,GAAG,GAAG,IAAI;IACvD,UAAU,CAAC,EAAE;QACX,OAAO,EAAE,mBAAmB,CAAC,WAAW,CAAC,CAAC;QAC1C,IAAI,EAAE,WAAW,CAAC;QAClB,WAAW,CAAC,EAAE,MAAM,CAAC;KACtB,CAAC;IAEF,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;IACrC,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;IACpC,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAC1C,QAAQ,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,CAAC;CACpC,CAAC;AAkFF,wBAAgB,eAAe,CAAC,CAAC;;;;;;sBAzFf,MAAM;;;;;eAMX,WAAW,CAAC,UAAU,CAAC;YAyGnC"}
package/dist/src/plugins/focusable/get-focusable-context.d.ts CHANGED
@@ -9,6 +9,8 @@ export type FocusableContext<FocusedItem> = {
9
9
  readonly isKeyboardNavigable: false;
10
10
  focusable: (item: FocusedItem) => $FocusableProps<FocusedItem>;
11
11
  };
12
+ /** Which arrow keys move focus within a keyboard-navigable context. */
13
+ export type KeyboardNavigationOrientation = "vertical" | "horizontal" | "both";
12
14
  /**
13
15
  * A focusable context whose members are also navigated with arrow keys, in the order they state.
14
16
  * The lowest order number is focused when the members appear, and focus returns to the enclosing
@@ -17,6 +19,7 @@ export type FocusableContext<FocusedItem> = {
17
19
  export type KeyboardNavigableFocusableContext<FocusedItem> = {
18
20
  readonly id: string;
19
21
  readonly isKeyboardNavigable: true;
22
+ readonly orientation: KeyboardNavigationOrientation;
20
23
  focusable: (item: FocusedItem, orderNumber: number) => $FocusableProps<FocusedItem>;
21
24
  };
22
25
  export type AnyFocusableContext<FocusedItem = any> = FocusableContext<FocusedItem> | KeyboardNavigableFocusableContext<FocusedItem>;
@@ -26,8 +29,18 @@ export type AnyFocusableContext<FocusedItem = any> = FocusableContext<FocusedIte
26
29
  * instance.
27
30
  */
28
31
  export declare const getFocusableContext: <FocusedItem>(id: string) => FocusableContext<FocusedItem>;
32
+ export type KeyboardNavigableFocusableContextOptions = {
33
+ /**
34
+ * Which arrow keys move focus. Downwards by default, as most sets of things are laid out: the
35
+ * keys of the other axis are then left to whatever the members want them for, such as a menu row
36
+ * opening the menu it holds with ArrowRight.
37
+ */
38
+ readonly orientation?: KeyboardNavigationOrientation;
39
+ };
29
40
  /**
30
- * Declares a focusable context whose members are navigated with arrow keys.
41
+ * Declares a focusable context whose members are navigated with arrow keys. As with
42
+ * {@link getFocusableContext}, the same id always yields the same context — so the options are the
43
+ * ones the first call for an id stated.
31
44
  */
32
- export declare const getKeyboardNavigableFocusableContext: <FocusedItem>(id: string) => KeyboardNavigableFocusableContext<FocusedItem>;
45
+ export declare const getKeyboardNavigableFocusableContext: <FocusedItem>(id: string, options?: KeyboardNavigableFocusableContextOptions) => KeyboardNavigableFocusableContext<FocusedItem>;
33
46
  //# sourceMappingURL=get-focusable-context.d.ts.map
package/dist/src/plugins/focusable/get-focusable-context.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"get-focusable-context.d.ts","sourceRoot":"","sources":["../../../../src/plugins/focusable/get-focusable-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,MAAM,eAAe,CAAC,WAAW,IAAI,QAAQ,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;AAErG;;;GAGG;AACH,MAAM,MAAM,gBAAgB,CAAC,WAAW,IAAI;IAC1C,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,mBAAmB,EAAE,KAAK,CAAC;IACpC,SAAS,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,eAAe,CAAC,WAAW,CAAC,CAAC;CAChE,CAAC;AAEF;;;;GAIG;AACH,MAAM,MAAM,iCAAiC,CAAC,WAAW,IAAI;IAC3D,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,mBAAmB,EAAE,IAAI,CAAC;IACnC,SAAS,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,KAAK,eAAe,CAAC,WAAW,CAAC,CAAC;CACrF,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,WAAW,GAAG,GAAG,IAC7C,gBAAgB,CAAC,WAAW,CAAC,GAC7B,iCAAiC,CAAC,WAAW,CAAC,CAAC;AAInD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,GAAI,WAAW,MAAO,MAAM,KAAG,gBAAgB,CAAC,WAAW,CASvF,CAAC;AAEL;;GAEG;AACH,eAAO,MAAM,oCAAoC,GAAI,WAAW,MAC1D,MAAM,KACT,iCAAiC,CAAC,WAAW,CAS5C,CAAC"}
1
+ {"version":3,"file":"get-focusable-context.d.ts","sourceRoot":"","sources":["../../../../src/plugins/focusable/get-focusable-context.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AAExD,MAAM,MAAM,eAAe,CAAC,WAAW,IAAI,QAAQ,CAAC,oBAAoB,CAAC,WAAW,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC;AAErG;;;GAGG;AACH,MAAM,MAAM,gBAAgB,CAAC,WAAW,IAAI;IAC1C,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,mBAAmB,EAAE,KAAK,CAAC;IACpC,SAAS,EAAE,CAAC,IAAI,EAAE,WAAW,KAAK,eAAe,CAAC,WAAW,CAAC,CAAC;CAChE,CAAC;AAEF,uEAAuE;AACvE,MAAM,MAAM,6BAA6B,GAAG,UAAU,GAAG,YAAY,GAAG,MAAM,CAAC;AAE/E;;;;GAIG;AACH,MAAM,MAAM,iCAAiC,CAAC,WAAW,IAAI;IAC3D,QAAQ,CAAC,EAAE,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,mBAAmB,EAAE,IAAI,CAAC;IACnC,QAAQ,CAAC,WAAW,EAAE,6BAA6B,CAAC;IACpD,SAAS,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,WAAW,EAAE,MAAM,KAAK,eAAe,CAAC,WAAW,CAAC,CAAC;CACrF,CAAC;AAEF,MAAM,MAAM,mBAAmB,CAAC,WAAW,GAAG,GAAG,IAC7C,gBAAgB,CAAC,WAAW,CAAC,GAC7B,iCAAiC,CAAC,WAAW,CAAC,CAAC;AAInD;;;;GAIG;AACH,eAAO,MAAM,mBAAmB,GAAI,WAAW,MAAO,MAAM,KAAG,gBAAgB,CAAC,WAAW,CASvF,CAAC;AAEL,MAAM,MAAM,wCAAwC,GAAG;IACrD;;;;OAIG;IACH,QAAQ,CAAC,WAAW,CAAC,EAAE,6BAA6B,CAAC;CACtD,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oCAAoC,GAAI,WAAW,MAC1D,MAAM,YACD,wCAAwC,KAChD,iCAAiC,CAAC,WAAW,CAU5C,CAAC"}
package/dist/src/plugins/height/height.d.ts CHANGED
@@ -1,15 +1,18 @@
1
1
  import type { TShirtSize } from "../_shared/sizes";
2
+ import type { Percentage } from "../width/width";
2
3
  export type $HeightProps = {
3
- height?: TShirtSize | "full" | "stretch" | "auto";
4
- min?: TShirtSize;
5
- max?: TShirtSize | "full";
4
+ height?: TShirtSize | "full" | "stretch" | "auto" | Percentage;
5
+ min?: TShirtSize | Percentage;
6
+ max?: TShirtSize | "full" | Percentage;
6
7
  };
7
8
  export type HeightPluginProps = {
8
- $height?: TShirtSize | "full" | "auto" | "stretch" | $HeightProps;
9
+ $height?: TShirtSize | "full" | "auto" | "stretch" | Percentage | $HeightProps;
9
10
  };
10
11
  export declare const heightPlugin: import("@k8slens/element-component").Plugin<{
11
12
  $className?: import("@k8slens/public-utilities").IClassName;
12
13
  className?: string;
13
- $height?: TShirtSize | "full" | "auto" | "stretch" | $HeightProps;
14
+ $style?: React.CSSProperties;
15
+ style?: React.CSSProperties;
16
+ $height?: TShirtSize | "full" | "auto" | "stretch" | Percentage | $HeightProps;
14
17
  }, unknown>;
15
18
  //# sourceMappingURL=height.d.ts.map
package/dist/src/plugins/height/height.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"height.d.ts","sourceRoot":"","sources":["../../../../src/plugins/height/height.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AAEnD,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,CAAC;IAClD,GAAG,CAAC,EAAE,UAAU,CAAC;IACjB,GAAG,CAAC,EAAE,UAAU,GAAG,MAAM,CAAC;CAC3B,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAAE,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY,CAAA;CAAE,CAAC;AAEtG,eAAO,MAAM,YAAY;;;cAFmB,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,YAAY;WAejG,CAAC"}
1
+ {"version":3,"file":"height.d.ts","sourceRoot":"","sources":["../../../../src/plugins/height/height.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAEjD,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,SAAS,GAAG,MAAM,GAAG,UAAU,CAAC;IAC/D,GAAG,CAAC,EAAE,UAAU,GAAG,UAAU,CAAC;IAC9B,GAAG,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,UAAU,CAAC;CACxC,CAAC;AAEF,MAAM,MAAM,iBAAiB,GAAG;IAAE,OAAO,CAAC,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY,CAAA;CAAE,CAAC;AAInH,eAAO,MAAM,YAAY;;;;;cAJmB,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,SAAS,GAAG,UAAU,GAAG,YAAY;WAuB9G,CAAC"}
package/dist/src/plugins/size/size.d.ts CHANGED
@@ -13,7 +13,7 @@ export declare const sizePlugin: import("@k8slens/element-component").Plugin<{
13
13
  $style?: React.CSSProperties;
14
14
  style?: React.CSSProperties;
15
15
  $width?: TShirtSize | "full" | "stretch" | import("../width/width").Percentage | import("../width/width").$WidthProps;
16
- $height?: TShirtSize | "full" | "auto" | "stretch" | import("../height/height").$HeightProps;
16
+ $height?: TShirtSize | "full" | "auto" | "stretch" | import("../width/width").Percentage | import("../height/height").$HeightProps;
17
17
  $size?: TShirtSize | "full" | $SizeProps;
18
18
  }, unknown>;
19
19
  //# sourceMappingURL=size.d.ts.map