@workday/canvas-kit-react 8.0.0-alpha.241-next.12 → 8.0.0-alpha.245-next.15

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.
@@ -2,9 +2,8 @@ import * as React from 'react';
2
2
  import {composeHooks, createSubcomponent} from '@workday/canvas-kit-react/common';
3
3
  import {SecondaryButton} from '@workday/canvas-kit-react/button';
4
4
  import {
5
- useListItemRegister,
6
- useListItemRovingFocus,
7
5
  useOverflowListItemMeasure,
6
+ useListItemRegister,
8
7
  } from '@workday/canvas-kit-react/collection';
9
8
 
10
9
  import {useActionBarModel} from './useActionBarModel';
@@ -26,11 +25,7 @@ export interface ActionBarItemProps {
26
25
  'data-id'?: string;
27
26
  }
28
27
 
29
- export const useActionBarItem = composeHooks(
30
- useOverflowListItemMeasure,
31
- useListItemRovingFocus,
32
- useListItemRegister
33
- );
28
+ export const useActionBarItem = composeHooks(useOverflowListItemMeasure, useListItemRegister);
34
29
 
35
30
  export const ActionBarItem = createSubcomponent(SecondaryButton)({
36
31
  displayName: 'ActionBar.Item',
@@ -11,7 +11,6 @@ import {HStack} from '@workday/canvas-kit-react/layout';
11
11
  import {useOverflowListMeasure, useListRenderItems} from '@workday/canvas-kit-react/collection';
12
12
 
13
13
  import {useActionBarModel} from './useActionBarModel';
14
- import {ActionBar} from './ActionBar';
15
14
 
16
15
  // Use `Partial` here to make `spacing` optional
17
16
  export interface ActionBarListProps<T = any>
@@ -26,6 +25,15 @@ export interface ActionBarListProps<T = any>
26
25
  * </ActionBar.List>
27
26
  */
28
27
  children: ((item: T, index: number) => React.ReactNode) | React.ReactNode;
28
+ /**
29
+ * `ActionBar.List` will render overflow button component if it's passed in `overflowButton`.
30
+ *
31
+ * @example
32
+ * <ActionBar.List overflowButton={<ActionBar.OverflowButton aria-label="More actions" />}>
33
+ * {(item) => <ActionBar.Item>{item.text}</ActionBar.Item>}
34
+ * </ActionBar.List>
35
+ */
36
+ overflowButton?: React.ReactNode;
29
37
  }
30
38
 
31
39
  const ResponsiveHStack = styled(HStack)<ActionBarListProps & StyledType>(({theme}) => ({
@@ -37,11 +45,13 @@ const ResponsiveHStack = styled(HStack)<ActionBarListProps & StyledType>(({theme
37
45
  },
38
46
  }));
39
47
 
48
+ export const useActionBarList = useOverflowListMeasure;
49
+
40
50
  export const ActionBarList = createSubcomponent('div')({
41
51
  displayName: 'ActionBar.List',
42
52
  modelHook: useActionBarModel,
43
- elemPropsHook: useOverflowListMeasure,
44
- })<ActionBarListProps>(({children, ...elemProps}, Element, model) => {
53
+ elemPropsHook: useActionBarList,
54
+ })<ActionBarListProps>(({children, overflowButton, ...elemProps}, Element, model) => {
45
55
  return (
46
56
  <ResponsiveHStack
47
57
  as={Element}
@@ -57,7 +67,7 @@ export const ActionBarList = createSubcomponent('div')({
57
67
  {...elemProps}
58
68
  >
59
69
  {useListRenderItems(model, children)}
60
- <ActionBar.OverflowButton />
70
+ {overflowButton}
61
71
  </ResponsiveHStack>
62
72
  );
63
73
  });
@@ -13,7 +13,15 @@ import {useOverflowListTarget} from '@workday/canvas-kit-react/collection';
13
13
 
14
14
  import {useMenuTarget} from '@workday/canvas-kit-react/menu';
15
15
  import {useActionBarModel} from './useActionBarModel';
16
- import {SecondaryButton} from '@workday/canvas-kit-react/button';
16
+ import {SecondaryButton, SecondaryButtonProps} from '@workday/canvas-kit-react/button';
17
+
18
+ export interface ActionBarOverflowButtonProps extends SecondaryButtonProps {
19
+ 'aria-label': string;
20
+ }
21
+
22
+ const StyledSecondaryButton = styled(SecondaryButton)<StyledType>({
23
+ flex: 0,
24
+ });
17
25
 
18
26
  export const useActionBarOverflowButton = composeHooks(
19
27
  createElemPropsHook(useActionBarModel)(() => ({
@@ -23,14 +31,10 @@ export const useActionBarOverflowButton = composeHooks(
23
31
  subModelHook((m: ReturnType<typeof useActionBarModel>) => m.menu, useMenuTarget)
24
32
  );
25
33
 
26
- const StyledSecondaryButton = styled(SecondaryButton)<StyledType>({
27
- flex: 0,
28
- });
29
-
30
34
  export const ActionBarOverflowButton = createSubcomponent('button')({
31
35
  displayName: 'ActionBar.OverflowButton',
32
36
  modelHook: useActionBarModel,
33
37
  elemPropsHook: useActionBarOverflowButton,
34
- })((elemProps, Element) => {
38
+ })<ActionBarOverflowButtonProps>((elemProps, Element) => {
35
39
  return <StyledSecondaryButton as={Element} icon={relatedActionsIcon} {...elemProps} />;
36
40
  });
@@ -1684,7 +1684,7 @@ export declare const ActionBar: import("../../common").ComponentM<ActionBarProps
1684
1684
  navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
1685
1685
  getId: (item: any) => string;
1686
1686
  }>;
1687
- OverflowButton: import("../../common").ElementComponentM<"button", {}, {
1687
+ OverflowButton: import("../../common").ElementComponentM<"button", import("./ActionBarOverflowButton").ActionBarOverflowButtonProps, {
1688
1688
  state: {
1689
1689
  hiddenIds: string[];
1690
1690
  nonInteractiveIds: string[];
@@ -17,6 +17,8 @@ export interface ActionBarItemProps {
17
17
  }
18
18
  export declare const useActionBarItem: <P extends {}, R>(model: {
19
19
  state: {
20
+ selectedIds: import("../../collection/lib/useSelectionListModel").SelectedIds;
21
+ unselectedIds: string[];
20
22
  cursorId: string;
21
23
  columnCount: number;
22
24
  UNSTABLE_virtual: {
@@ -36,6 +38,11 @@ export declare const useActionBarItem: <P extends {}, R>(model: {
36
38
  items: import("../../collection").Item<any>[];
37
39
  };
38
40
  events: {
41
+ select(data: {
42
+ id: string;
43
+ }): void;
44
+ selectAll(): void;
45
+ unselectAll(): void;
39
46
  registerItem(data: {
40
47
  item: any;
41
48
  textValue: string;
@@ -60,6 +67,7 @@ export declare const useActionBarItem: <P extends {}, R>(model: {
60
67
  value: number;
61
68
  }): void;
62
69
  };
70
+ selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
63
71
  navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
64
72
  getId: (item: any) => string;
65
73
  }, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
@@ -1 +1 @@
1
- {"version":3,"file":"ActionBarItem.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,MAAM,WAAW,kBAAkB;IACjC;;;;;;OAMG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAI5B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMxB,CAAC"}
1
+ {"version":3,"file":"ActionBarItem.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,kBAAkB;IACjC;;;;;;OAMG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAAgE,CAAC;AAE9F,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMxB,CAAC"}
@@ -36,7 +36,7 @@ var common_1 = require("@workday/canvas-kit-react/common");
36
36
  var button_1 = require("@workday/canvas-kit-react/button");
37
37
  var collection_1 = require("@workday/canvas-kit-react/collection");
38
38
  var useActionBarModel_1 = require("./useActionBarModel");
39
- exports.useActionBarItem = common_1.composeHooks(collection_1.useOverflowListItemMeasure, collection_1.useListItemRovingFocus, collection_1.useListItemRegister);
39
+ exports.useActionBarItem = common_1.composeHooks(collection_1.useOverflowListItemMeasure, collection_1.useListItemRegister);
40
40
  exports.ActionBarItem = common_1.createSubcomponent(button_1.SecondaryButton)({
41
41
  displayName: 'ActionBar.Item',
42
42
  modelHook: useActionBarModel_1.useActionBarModel,
@@ -12,7 +12,99 @@ export interface ActionBarListProps<T = any> extends Omit<Partial<ExtractProps<t
12
12
  * </ActionBar.List>
13
13
  */
14
14
  children: ((item: T, index: number) => React.ReactNode) | React.ReactNode;
15
+ /**
16
+ * `ActionBar.List` will render overflow button component if it's passed in `overflowButton`.
17
+ *
18
+ * @example
19
+ * <ActionBar.List overflowButton={<ActionBar.OverflowButton aria-label="More actions" />}>
20
+ * {(item) => <ActionBar.Item>{item.text}</ActionBar.Item>}
21
+ * </ActionBar.List>
22
+ */
23
+ overflowButton?: React.ReactNode;
15
24
  }
25
+ export declare const useActionBarList: <P extends {}, R>(model: {
26
+ state: {
27
+ hiddenIds: string[];
28
+ itemWidthCache: Record<string, number>;
29
+ containerWidth: number;
30
+ overflowTargetWidth: number;
31
+ selectedIds: import("../../collection/lib/useSelectionListModel").SelectedIds;
32
+ unselectedIds: string[];
33
+ cursorId: string;
34
+ columnCount: number;
35
+ UNSTABLE_virtual: {
36
+ virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
37
+ totalSize: number;
38
+ scrollToOffset: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
39
+ scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
40
+ measure: () => void;
41
+ };
42
+ UNSTABLE_defaultItemHeight: number;
43
+ containerRef: React.RefObject<HTMLDivElement>;
44
+ id: string;
45
+ orientation: import("../../collection/lib/useBaseListModel").Orientation;
46
+ indexRef: React.MutableRefObject<number>;
47
+ nonInteractiveIds: string[];
48
+ isVirtualized: boolean;
49
+ items: import("../../collection").Item<any>[];
50
+ };
51
+ events: {
52
+ select(data: {
53
+ id: string;
54
+ }): void;
55
+ setContainerWidth(data: {
56
+ width?: number | undefined;
57
+ }): void;
58
+ setOverflowTargetWidth(data: {
59
+ width: number;
60
+ }): void;
61
+ addItemWidth(data: {
62
+ id: string;
63
+ width: number;
64
+ }): void;
65
+ removeItemWidth(data: {
66
+ id: string;
67
+ }): void;
68
+ addHiddenKey(data: {
69
+ id: string;
70
+ }): void;
71
+ removeHiddenKey(data: {
72
+ id: string;
73
+ }): void;
74
+ selectAll(): void;
75
+ unselectAll(): void;
76
+ registerItem(data: {
77
+ item: any;
78
+ textValue: string;
79
+ }): void;
80
+ goTo(data: {
81
+ id: string;
82
+ }): void;
83
+ goToNext(): void;
84
+ goToPrevious(): void;
85
+ goToPreviousRow(): void;
86
+ goToNextRow(): void;
87
+ goToFirst(): void;
88
+ goToLast(): void;
89
+ goToFirstOfRow(): void;
90
+ goToLastOfRow(): void;
91
+ goToNextPage(): void;
92
+ goToPreviousPage(): void;
93
+ unregisterItem(data: {
94
+ id: string;
95
+ }): void;
96
+ updateItemHeight(data: {
97
+ value: number;
98
+ }): void;
99
+ };
100
+ selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
101
+ navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
102
+ getId: (item: any) => string;
103
+ }, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
104
+ ref: (instance: HTMLElement | null) => void;
105
+ } & P & (R extends HTMLOrSVGElement ? {
106
+ ref: React.Ref<R>;
107
+ } : {});
16
108
  export declare const ActionBarList: import("../../common").ElementComponentM<"div", ActionBarListProps<any>, {
17
109
  state: {
18
110
  hiddenIds: string[];
@@ -1 +1 @@
1
- {"version":3,"file":"ActionBarList.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AAOxD,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG,CACzC,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACrE;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CAC3E;AAWD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBxB,CAAC"}
1
+ {"version":3,"file":"ActionBarList.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AAMxD,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG,CACzC,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACrE;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC1E;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAWD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAAyB,CAAC;AAEvD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBxB,CAAC"}
@@ -41,14 +41,13 @@ var __rest = (this && this.__rest) || function (s, e) {
41
41
  return t;
42
42
  };
43
43
  Object.defineProperty(exports, "__esModule", { value: true });
44
- exports.ActionBarList = void 0;
44
+ exports.ActionBarList = exports.useActionBarList = void 0;
45
45
  var React = __importStar(require("react"));
46
46
  var tokens_1 = require("@workday/canvas-kit-react/tokens");
47
47
  var common_1 = require("@workday/canvas-kit-react/common");
48
48
  var layout_1 = require("@workday/canvas-kit-react/layout");
49
49
  var collection_1 = require("@workday/canvas-kit-react/collection");
50
50
  var useActionBarModel_1 = require("./useActionBarModel");
51
- var ActionBar_1 = require("./ActionBar");
52
51
  var ResponsiveHStack = common_1.styled(layout_1.HStack)(function (_a) {
53
52
  var _b;
54
53
  var theme = _a.theme;
@@ -61,13 +60,14 @@ var ResponsiveHStack = common_1.styled(layout_1.HStack)(function (_a) {
61
60
  },
62
61
  _b);
63
62
  });
63
+ exports.useActionBarList = collection_1.useOverflowListMeasure;
64
64
  exports.ActionBarList = common_1.createSubcomponent('div')({
65
65
  displayName: 'ActionBar.List',
66
66
  modelHook: useActionBarModel_1.useActionBarModel,
67
- elemPropsHook: collection_1.useOverflowListMeasure,
67
+ elemPropsHook: exports.useActionBarList,
68
68
  })(function (_a, Element, model) {
69
- var children = _a.children, elemProps = __rest(_a, ["children"]);
69
+ var children = _a.children, overflowButton = _a.overflowButton, elemProps = __rest(_a, ["children", "overflowButton"]);
70
70
  return (React.createElement(ResponsiveHStack, __assign({ as: Element, spacing: "s", depth: 1, background: tokens_1.commonColors.background, borderTop: "solid 1px " + tokens_1.colors.soap400, padding: tokens_1.space.s + " " + tokens_1.space.xl + " ", position: "fixed", bottom: 0, left: 0, right: 0 }, elemProps),
71
71
  collection_1.useListRenderItems(model, children),
72
- React.createElement(ActionBar_1.ActionBar.OverflowButton, null)));
72
+ overflowButton));
73
73
  });
@@ -1,4 +1,8 @@
1
1
  import * as React from 'react';
2
+ import { SecondaryButtonProps } from '@workday/canvas-kit-react/button';
3
+ export interface ActionBarOverflowButtonProps extends SecondaryButtonProps {
4
+ 'aria-label': string;
5
+ }
2
6
  export declare const useActionBarOverflowButton: <P extends {}, R>(model: {
3
7
  state: {
4
8
  hiddenIds: string[];
@@ -80,7 +84,7 @@ export declare const useActionBarOverflowButton: <P extends {}, R>(model: {
80
84
  }, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
81
85
  ref: React.Ref<R>;
82
86
  } : {});
83
- export declare const ActionBarOverflowButton: import("../../common").ElementComponentM<"button", {}, {
87
+ export declare const ActionBarOverflowButton: import("../../common").ElementComponentM<"button", ActionBarOverflowButtonProps, {
84
88
  state: {
85
89
  hiddenIds: string[];
86
90
  nonInteractiveIds: string[];
@@ -1 +1 @@
1
- {"version":3,"file":"ActionBarOverflowButton.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarOverflowButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAMtC,CAAC;AAMF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMlC,CAAC"}
1
+ {"version":3,"file":"ActionBarOverflowButton.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarOverflowButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,EAAkB,oBAAoB,EAAC,MAAM,kCAAkC,CAAC;AAEvF,MAAM,WAAW,4BAA6B,SAAQ,oBAAoB;IACxE,YAAY,EAAE,MAAM,CAAC;CACtB;AAMD,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAMtC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMlC,CAAC"}
@@ -42,12 +42,12 @@ var collection_1 = require("@workday/canvas-kit-react/collection");
42
42
  var menu_1 = require("@workday/canvas-kit-react/menu");
43
43
  var useActionBarModel_1 = require("./useActionBarModel");
44
44
  var button_1 = require("@workday/canvas-kit-react/button");
45
- exports.useActionBarOverflowButton = common_1.composeHooks(common_1.createElemPropsHook(useActionBarModel_1.useActionBarModel)(function () { return ({
46
- 'aria-haspopup': true,
47
- }); }), collection_1.useOverflowListTarget, common_1.subModelHook(function (m) { return m.menu; }, menu_1.useMenuTarget));
48
45
  var StyledSecondaryButton = styled_1.default(button_1.SecondaryButton)({
49
46
  flex: 0,
50
47
  });
48
+ exports.useActionBarOverflowButton = common_1.composeHooks(common_1.createElemPropsHook(useActionBarModel_1.useActionBarModel)(function () { return ({
49
+ 'aria-haspopup': true,
50
+ }); }), collection_1.useOverflowListTarget, common_1.subModelHook(function (m) { return m.menu; }, menu_1.useMenuTarget));
51
51
  exports.ActionBarOverflowButton = common_1.createSubcomponent('button')({
52
52
  displayName: 'ActionBar.OverflowButton',
53
53
  modelHook: useActionBarModel_1.useActionBarModel,
@@ -1684,7 +1684,7 @@ export declare const ActionBar: import("../../common").ComponentM<ActionBarProps
1684
1684
  navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
1685
1685
  getId: (item: any) => string;
1686
1686
  }>;
1687
- OverflowButton: import("../../common").ElementComponentM<"button", {}, {
1687
+ OverflowButton: import("../../common").ElementComponentM<"button", import("./ActionBarOverflowButton").ActionBarOverflowButtonProps, {
1688
1688
  state: {
1689
1689
  hiddenIds: string[];
1690
1690
  nonInteractiveIds: string[];
@@ -17,6 +17,8 @@ export interface ActionBarItemProps {
17
17
  }
18
18
  export declare const useActionBarItem: <P extends {}, R>(model: {
19
19
  state: {
20
+ selectedIds: import("../../collection/lib/useSelectionListModel").SelectedIds;
21
+ unselectedIds: string[];
20
22
  cursorId: string;
21
23
  columnCount: number;
22
24
  UNSTABLE_virtual: {
@@ -36,6 +38,11 @@ export declare const useActionBarItem: <P extends {}, R>(model: {
36
38
  items: import("../../collection").Item<any>[];
37
39
  };
38
40
  events: {
41
+ select(data: {
42
+ id: string;
43
+ }): void;
44
+ selectAll(): void;
45
+ unselectAll(): void;
39
46
  registerItem(data: {
40
47
  item: any;
41
48
  textValue: string;
@@ -60,6 +67,7 @@ export declare const useActionBarItem: <P extends {}, R>(model: {
60
67
  value: number;
61
68
  }): void;
62
69
  };
70
+ selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
63
71
  navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
64
72
  getId: (item: any) => string;
65
73
  }, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
@@ -1 +1 @@
1
- {"version":3,"file":"ActionBarItem.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAW/B,MAAM,WAAW,kBAAkB;IACjC;;;;;;OAMG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAI5B,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMxB,CAAC"}
1
+ {"version":3,"file":"ActionBarItem.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarItem.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAU/B,MAAM,WAAW,kBAAkB;IACjC;;;;;;OAMG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B;;;;OAIG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAAgE,CAAC;AAE9F,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMxB,CAAC"}
@@ -12,9 +12,9 @@ var __assign = (this && this.__assign) || function () {
12
12
  import * as React from 'react';
13
13
  import { composeHooks, createSubcomponent } from '@workday/canvas-kit-react/common';
14
14
  import { SecondaryButton } from '@workday/canvas-kit-react/button';
15
- import { useListItemRegister, useListItemRovingFocus, useOverflowListItemMeasure, } from '@workday/canvas-kit-react/collection';
15
+ import { useOverflowListItemMeasure, useListItemRegister, } from '@workday/canvas-kit-react/collection';
16
16
  import { useActionBarModel } from './useActionBarModel';
17
- export var useActionBarItem = composeHooks(useOverflowListItemMeasure, useListItemRovingFocus, useListItemRegister);
17
+ export var useActionBarItem = composeHooks(useOverflowListItemMeasure, useListItemRegister);
18
18
  export var ActionBarItem = createSubcomponent(SecondaryButton)({
19
19
  displayName: 'ActionBar.Item',
20
20
  modelHook: useActionBarModel,
@@ -12,7 +12,99 @@ export interface ActionBarListProps<T = any> extends Omit<Partial<ExtractProps<t
12
12
  * </ActionBar.List>
13
13
  */
14
14
  children: ((item: T, index: number) => React.ReactNode) | React.ReactNode;
15
+ /**
16
+ * `ActionBar.List` will render overflow button component if it's passed in `overflowButton`.
17
+ *
18
+ * @example
19
+ * <ActionBar.List overflowButton={<ActionBar.OverflowButton aria-label="More actions" />}>
20
+ * {(item) => <ActionBar.Item>{item.text}</ActionBar.Item>}
21
+ * </ActionBar.List>
22
+ */
23
+ overflowButton?: React.ReactNode;
15
24
  }
25
+ export declare const useActionBarList: <P extends {}, R>(model: {
26
+ state: {
27
+ hiddenIds: string[];
28
+ itemWidthCache: Record<string, number>;
29
+ containerWidth: number;
30
+ overflowTargetWidth: number;
31
+ selectedIds: import("../../collection/lib/useSelectionListModel").SelectedIds;
32
+ unselectedIds: string[];
33
+ cursorId: string;
34
+ columnCount: number;
35
+ UNSTABLE_virtual: {
36
+ virtualItems: import("../../collection/lib/react-virtual").VirtualItem[];
37
+ totalSize: number;
38
+ scrollToOffset: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToOffsetOptions | undefined) => void;
39
+ scrollToIndex: (index: number, options?: import("../../collection/lib/react-virtual").ScrollToIndexOptions | undefined) => void;
40
+ measure: () => void;
41
+ };
42
+ UNSTABLE_defaultItemHeight: number;
43
+ containerRef: React.RefObject<HTMLDivElement>;
44
+ id: string;
45
+ orientation: import("../../collection/lib/useBaseListModel").Orientation;
46
+ indexRef: React.MutableRefObject<number>;
47
+ nonInteractiveIds: string[];
48
+ isVirtualized: boolean;
49
+ items: import("../../collection").Item<any>[];
50
+ };
51
+ events: {
52
+ select(data: {
53
+ id: string;
54
+ }): void;
55
+ setContainerWidth(data: {
56
+ width?: number | undefined;
57
+ }): void;
58
+ setOverflowTargetWidth(data: {
59
+ width: number;
60
+ }): void;
61
+ addItemWidth(data: {
62
+ id: string;
63
+ width: number;
64
+ }): void;
65
+ removeItemWidth(data: {
66
+ id: string;
67
+ }): void;
68
+ addHiddenKey(data: {
69
+ id: string;
70
+ }): void;
71
+ removeHiddenKey(data: {
72
+ id: string;
73
+ }): void;
74
+ selectAll(): void;
75
+ unselectAll(): void;
76
+ registerItem(data: {
77
+ item: any;
78
+ textValue: string;
79
+ }): void;
80
+ goTo(data: {
81
+ id: string;
82
+ }): void;
83
+ goToNext(): void;
84
+ goToPrevious(): void;
85
+ goToPreviousRow(): void;
86
+ goToNextRow(): void;
87
+ goToFirst(): void;
88
+ goToLast(): void;
89
+ goToFirstOfRow(): void;
90
+ goToLastOfRow(): void;
91
+ goToNextPage(): void;
92
+ goToPreviousPage(): void;
93
+ unregisterItem(data: {
94
+ id: string;
95
+ }): void;
96
+ updateItemHeight(data: {
97
+ value: number;
98
+ }): void;
99
+ };
100
+ selection: import("../../collection/lib/useSelectionListModel").SelectionManager;
101
+ navigation: import("../../collection/lib/useCursorListModel").NavigationManager;
102
+ getId: (item: any) => string;
103
+ }, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {
104
+ ref: (instance: HTMLElement | null) => void;
105
+ } & P & (R extends HTMLOrSVGElement ? {
106
+ ref: React.Ref<R>;
107
+ } : {});
16
108
  export declare const ActionBarList: import("../../common").ElementComponentM<"div", ActionBarListProps<any>, {
17
109
  state: {
18
110
  hiddenIds: string[];
@@ -1 +1 @@
1
- {"version":3,"file":"ActionBarList.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AAOxD,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG,CACzC,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACrE;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;CAC3E;AAWD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBxB,CAAC"}
1
+ {"version":3,"file":"ActionBarList.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarList.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAGb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,MAAM,EAAC,MAAM,kCAAkC,CAAC;AAMxD,MAAM,WAAW,kBAAkB,CAAC,CAAC,GAAG,GAAG,CACzC,SAAQ,IAAI,CAAC,OAAO,CAAC,YAAY,CAAC,OAAO,MAAM,EAAE,KAAK,CAAC,CAAC,EAAE,UAAU,CAAC;IACrE;;;;;;;;OAQG;IACH,QAAQ,EAAE,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,KAAK,CAAC,SAAS,CAAC,GAAG,KAAK,CAAC,SAAS,CAAC;IAC1E;;;;;;;OAOG;IACH,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAClC;AAWD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAAyB,CAAC;AAEvD,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAuBxB,CAAC"}
@@ -26,7 +26,6 @@ import { createSubcomponent, styled, } from '@workday/canvas-kit-react/common';
26
26
  import { HStack } from '@workday/canvas-kit-react/layout';
27
27
  import { useOverflowListMeasure, useListRenderItems } from '@workday/canvas-kit-react/collection';
28
28
  import { useActionBarModel } from './useActionBarModel';
29
- import { ActionBar } from './ActionBar';
30
29
  var ResponsiveHStack = styled(HStack)(function (_a) {
31
30
  var _b;
32
31
  var theme = _a.theme;
@@ -39,13 +38,14 @@ var ResponsiveHStack = styled(HStack)(function (_a) {
39
38
  },
40
39
  _b);
41
40
  });
41
+ export var useActionBarList = useOverflowListMeasure;
42
42
  export var ActionBarList = createSubcomponent('div')({
43
43
  displayName: 'ActionBar.List',
44
44
  modelHook: useActionBarModel,
45
- elemPropsHook: useOverflowListMeasure,
45
+ elemPropsHook: useActionBarList,
46
46
  })(function (_a, Element, model) {
47
- var children = _a.children, elemProps = __rest(_a, ["children"]);
47
+ var children = _a.children, overflowButton = _a.overflowButton, elemProps = __rest(_a, ["children", "overflowButton"]);
48
48
  return (React.createElement(ResponsiveHStack, __assign({ as: Element, spacing: "s", depth: 1, background: commonColors.background, borderTop: "solid 1px " + colors.soap400, padding: space.s + " " + space.xl + " ", position: "fixed", bottom: 0, left: 0, right: 0 }, elemProps),
49
49
  useListRenderItems(model, children),
50
- React.createElement(ActionBar.OverflowButton, null)));
50
+ overflowButton));
51
51
  });
@@ -1,4 +1,8 @@
1
1
  import * as React from 'react';
2
+ import { SecondaryButtonProps } from '@workday/canvas-kit-react/button';
3
+ export interface ActionBarOverflowButtonProps extends SecondaryButtonProps {
4
+ 'aria-label': string;
5
+ }
2
6
  export declare const useActionBarOverflowButton: <P extends {}, R>(model: {
3
7
  state: {
4
8
  hiddenIds: string[];
@@ -80,7 +84,7 @@ export declare const useActionBarOverflowButton: <P extends {}, R>(model: {
80
84
  }, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | React.RefObject<R> | null | undefined) => {} & P & (R extends HTMLOrSVGElement ? {
81
85
  ref: React.Ref<R>;
82
86
  } : {});
83
- export declare const ActionBarOverflowButton: import("../../common").ElementComponentM<"button", {}, {
87
+ export declare const ActionBarOverflowButton: import("../../common").ElementComponentM<"button", ActionBarOverflowButtonProps, {
84
88
  state: {
85
89
  hiddenIds: string[];
86
90
  nonInteractiveIds: string[];
@@ -1 +1 @@
1
- {"version":3,"file":"ActionBarOverflowButton.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarOverflowButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiB/B,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAMtC,CAAC;AAMF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMlC,CAAC"}
1
+ {"version":3,"file":"ActionBarOverflowButton.d.ts","sourceRoot":"","sources":["../../../../action-bar/lib/ActionBarOverflowButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAe/B,OAAO,EAAkB,oBAAoB,EAAC,MAAM,kCAAkC,CAAC;AAEvF,MAAM,WAAW,4BAA6B,SAAQ,oBAAoB;IACxE,YAAY,EAAE,MAAM,CAAC;CACtB;AAMD,eAAO,MAAM,0BAA0B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAMtC,CAAC;AAEF,eAAO,MAAM,uBAAuB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAMlC,CAAC"}
@@ -17,12 +17,12 @@ import { useOverflowListTarget } from '@workday/canvas-kit-react/collection';
17
17
  import { useMenuTarget } from '@workday/canvas-kit-react/menu';
18
18
  import { useActionBarModel } from './useActionBarModel';
19
19
  import { SecondaryButton } from '@workday/canvas-kit-react/button';
20
- export var useActionBarOverflowButton = composeHooks(createElemPropsHook(useActionBarModel)(function () { return ({
21
- 'aria-haspopup': true,
22
- }); }), useOverflowListTarget, subModelHook(function (m) { return m.menu; }, useMenuTarget));
23
20
  var StyledSecondaryButton = styled(SecondaryButton)({
24
21
  flex: 0,
25
22
  });
23
+ export var useActionBarOverflowButton = composeHooks(createElemPropsHook(useActionBarModel)(function () { return ({
24
+ 'aria-haspopup': true,
25
+ }); }), useOverflowListTarget, subModelHook(function (m) { return m.menu; }, useMenuTarget));
26
26
  export var ActionBarOverflowButton = createSubcomponent('button')({
27
27
  displayName: 'ActionBar.OverflowButton',
28
28
  modelHook: useActionBarModel,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "8.0.0-alpha.241-next.12+c1b970cd",
3
+ "version": "8.0.0-alpha.245-next.15+3cf0e815",
4
4
  "description": "The parent module that contains all Workday Canvas Kit React components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -49,7 +49,7 @@
49
49
  "@emotion/styled": "^11.6.0",
50
50
  "@popperjs/core": "^2.5.4",
51
51
  "@workday/canvas-colors-web": "^2.0.0",
52
- "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.241-next.12+c1b970cd",
52
+ "@workday/canvas-kit-popup-stack": "^8.0.0-alpha.245-next.15+3cf0e815",
53
53
  "@workday/canvas-system-icons-web": "^3.0.0",
54
54
  "@workday/design-assets-types": "^0.2.8",
55
55
  "chroma-js": "^2.1.0",
@@ -67,5 +67,5 @@
67
67
  "@workday/canvas-accent-icons-web": "^3.0.0",
68
68
  "@workday/canvas-applet-icons-web": "^2.0.0"
69
69
  },
70
- "gitHead": "c1b970cd840e4394197f7af5ec82c22d4d8bb0f6"
70
+ "gitHead": "3cf0e815d0b1e5092d277a5951576dd5c2b5deba"
71
71
  }