@progress/kendo-react-buttons 14.5.0-develop.9 → 15.0.0-develop.2
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/Button.d.ts +6 -2
- package/Button.js +1 -1
- package/Button.mjs +85 -81
- package/Chip/Chip.d.ts +6 -0
- package/Chip/Chip.js +1 -1
- package/Chip/Chip.mjs +67 -63
- package/Chip/ChipList.js +1 -1
- package/Chip/ChipList.mjs +1 -1
- package/FloatingActionButton/FloatingActionButton.js +1 -1
- package/FloatingActionButton/FloatingActionButton.mjs +77 -78
- package/ListButton/DropDownButton.js +1 -1
- package/ListButton/DropDownButton.mjs +44 -44
- package/ListButton/SplitButton.js +1 -1
- package/ListButton/SplitButton.mjs +57 -53
- package/README.md +4 -4
- package/SpeechToTextButton/SpeechToTextButton.js +1 -1
- package/SpeechToTextButton/SpeechToTextButton.mjs +18 -18
- package/dist/cdn/js/kendo-react-buttons.js +1 -1
- package/messages/index.d.ts +5 -0
- package/messages/index.js +1 -1
- package/messages/index.mjs +8 -6
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +5 -5
- package/toolbar/Toolbar.js +1 -1
- package/toolbar/Toolbar.mjs +68 -62
- package/toolbar/tools/ToolbarOverflowSection.js +1 -1
- package/toolbar/tools/ToolbarOverflowSection.mjs +66 -40
- package/toolbar/tools/ToolbarScrollButton.js +1 -1
- package/toolbar/tools/ToolbarScrollButton.mjs +14 -16
package/Button.d.ts
CHANGED
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
import { ButtonsClassStructure } from '@progress/kendo-react-common';
|
|
8
|
+
import { ButtonsClassStructure, WebMcpProps } from '@progress/kendo-react-common';
|
|
9
9
|
import { ButtonInterface } from './ButtonInterface';
|
|
10
10
|
import * as React from 'react';
|
|
11
11
|
/**
|
|
@@ -27,7 +27,7 @@ export interface ButtonProps extends ButtonInterface, React.ButtonHTMLAttributes
|
|
|
27
27
|
* <Button size="large">Large Button</Button>
|
|
28
28
|
* ```
|
|
29
29
|
*/
|
|
30
|
-
size?: '
|
|
30
|
+
size?: 'xs' | 'small' | 'medium' | 'large';
|
|
31
31
|
/**
|
|
32
32
|
* Configures the `roundness` of the Button. See [Button Appearance](https://www.telerik.com/kendo-react-ui/components/buttons/button/appearance).
|
|
33
33
|
*
|
|
@@ -106,6 +106,10 @@ export interface ButtonProps extends ButtonInterface, React.ButtonHTMLAttributes
|
|
|
106
106
|
* ```
|
|
107
107
|
*/
|
|
108
108
|
iconSize?: 'small' | 'medium' | 'large';
|
|
109
|
+
/**
|
|
110
|
+
* Enables Web MCP tool registration for this Button.
|
|
111
|
+
*/
|
|
112
|
+
webMcp?: boolean | WebMcpProps;
|
|
109
113
|
}
|
|
110
114
|
/**
|
|
111
115
|
* @hidden
|
package/Button.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const F=require("react"),l=require("prop-types"),e=require("@progress/kendo-react-common");function G(n){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(n){for(const s in n)if(s!=="default"){const o=Object.getOwnPropertyDescriptor(n,s);Object.defineProperty(r,s,o.get?o:{enumerable:!0,get:()=>n[s]})}}return r.default=n,Object.freeze(r)}const t=G(F);function J({imageUrl:n,name:r,iconClass:s,svgIcon:o,imageAlt:d,buttonClasses:u,iconSize:i}){return n?t.createElement("img",{role:"presentation",className:e.classNames(e.uButton.icon({c:u})),alt:d,src:n}):r||o?t.createElement(e.IconWrap,{className:e.classNames(e.uButton.icon({c:u})),name:r,icon:o,size:i}):s?t.createElement("span",{role:"presentation",className:e.classNames(e.uButton.icon({c:u}),s)}):null}const v=t.forwardRef((n,r)=>{const{children:s,togglable:o,dir:d,disabled:u,selected:i,icon:b,iconClass:y,svgIcon:N,imageUrl:R,imageAlt:z,className:k,startIcon:h,endIcon:B,onClick:C,size:T=g.size,rounded:j=g.rounded,fillMode:w=g.fillMode,themeColor:A=g.themeColor,ariaPressed:M,iconSize:x,...q}=n,U=()=>{o&&i===void 0&&(m.current=!c,I(!c))},_=a=>{U(),C&&C.call(void 0,a)},m=t.useRef(void 0),E=t.useRef(null),O=t.useRef(null),[c,I]=t.useState(o===!0&&i===!0),D=N!==void 0||b!==void 0||y!==void 0||R!==void 0,H=s!==void 0,W=e.useUnstyled(),P=n.unstyled||W,f=P&&P.uButton;let p=c;m.current===void 0?p=c:p=m.current,t.useImperativeHandle(r,()=>{const a={element:E.current,selected:p};return O.current=a,a}),e.useWebMcpRegister("button",O,n,n.webMcp),t.useMemo(()=>{o&&i!==void 0&&i!==c&&I(i)},[o,i]),t.useEffect(()=>{m.current=void 0},[c]);const K=J({name:b,svgIcon:N,iconClass:y,imageUrl:R,imageAlt:z,buttonClasses:f,iconSize:x}),S=a=>t.cloneElement(a,{className:e.classNames(e.uButton.icon({c:f}),a.props.className)}),V=t.useMemo(()=>o?c:M||void 0,[o,c,M]);return t.createElement("button",{ref:E,"aria-pressed":V,...q,dir:d,disabled:u,onClick:_,className:e.classNames(e.uButton.wrapper({c:f,isRtl:d==="rtl",selected:c,disabled:u,size:T,fillMode:w,rounded:j,themeColor:A,iconButton:!H&&D}),k)},h&&S(h),K,s&&t.createElement("span",{className:e.classNames(e.uButton.text({c:f}))},s),B&&S(B))}),g={size:void 0,rounded:void 0,fillMode:void 0,themeColor:void 0};v.displayName="KendoReactButton";v.propTypes={children:l.node,selected:l.bool,togglable:l.bool,icon:l.string,svgIcon:e.svgIconPropType,iconClass:l.string,imageUrl:l.string,imageAlt:l.string,size:l.oneOf(["xsmall","xs","small","medium","large"]),rounded:l.oneOf(["small","medium","large","full","none"]),fillMode:l.oneOf(["flat","link","outline","solid","clear"]),themeColor:l.oneOf(["base","primary","secondary","tertiary","info","success","warning","error","inverse"])};exports.Button=v;
|
package/Button.mjs
CHANGED
|
@@ -7,101 +7,105 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as e from "react";
|
|
9
9
|
import t from "prop-types";
|
|
10
|
-
import { useUnstyled as
|
|
11
|
-
function
|
|
12
|
-
return
|
|
10
|
+
import { useUnstyled as J, useWebMcpRegister as L, classNames as a, uButton as d, IconWrap as Q, svgIconPropType as X } from "@progress/kendo-react-common";
|
|
11
|
+
function Y({ imageUrl: l, name: u, iconClass: c, svgIcon: n, imageAlt: m, buttonClasses: i, iconSize: s }) {
|
|
12
|
+
return l ? /* @__PURE__ */ e.createElement(
|
|
13
13
|
"img",
|
|
14
14
|
{
|
|
15
15
|
role: "presentation",
|
|
16
|
-
className:
|
|
17
|
-
alt:
|
|
18
|
-
src:
|
|
16
|
+
className: a(d.icon({ c: i })),
|
|
17
|
+
alt: m,
|
|
18
|
+
src: l
|
|
19
19
|
}
|
|
20
|
-
) :
|
|
21
|
-
|
|
20
|
+
) : u || n ? /* @__PURE__ */ e.createElement(
|
|
21
|
+
Q,
|
|
22
22
|
{
|
|
23
|
-
className:
|
|
24
|
-
name:
|
|
25
|
-
icon:
|
|
26
|
-
size:
|
|
23
|
+
className: a(d.icon({ c: i })),
|
|
24
|
+
name: u,
|
|
25
|
+
icon: n,
|
|
26
|
+
size: s
|
|
27
27
|
}
|
|
28
|
-
) :
|
|
28
|
+
) : c ? /* @__PURE__ */ e.createElement("span", { role: "presentation", className: a(d.icon({ c: i }), c) }) : null;
|
|
29
29
|
}
|
|
30
|
-
const
|
|
30
|
+
const P = e.forwardRef((l, u) => {
|
|
31
31
|
const {
|
|
32
|
-
children:
|
|
33
|
-
togglable:
|
|
34
|
-
dir:
|
|
35
|
-
disabled:
|
|
36
|
-
selected:
|
|
37
|
-
icon:
|
|
32
|
+
children: c,
|
|
33
|
+
togglable: n,
|
|
34
|
+
dir: m,
|
|
35
|
+
disabled: i,
|
|
36
|
+
selected: s,
|
|
37
|
+
icon: b,
|
|
38
38
|
iconClass: h,
|
|
39
39
|
svgIcon: y,
|
|
40
|
-
imageUrl:
|
|
41
|
-
imageAlt:
|
|
42
|
-
className:
|
|
43
|
-
startIcon:
|
|
44
|
-
endIcon:
|
|
45
|
-
onClick:
|
|
46
|
-
size:
|
|
47
|
-
rounded:
|
|
48
|
-
fillMode:
|
|
49
|
-
themeColor:
|
|
50
|
-
ariaPressed:
|
|
51
|
-
iconSize:
|
|
52
|
-
...
|
|
53
|
-
} =
|
|
54
|
-
|
|
55
|
-
},
|
|
56
|
-
|
|
57
|
-
},
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
},
|
|
66
|
-
|
|
67
|
-
|
|
40
|
+
imageUrl: R,
|
|
41
|
+
imageAlt: k,
|
|
42
|
+
className: w,
|
|
43
|
+
startIcon: C,
|
|
44
|
+
endIcon: E,
|
|
45
|
+
onClick: N,
|
|
46
|
+
size: O = g.size,
|
|
47
|
+
rounded: S = g.rounded,
|
|
48
|
+
fillMode: T = g.fillMode,
|
|
49
|
+
themeColor: U = g.themeColor,
|
|
50
|
+
ariaPressed: M,
|
|
51
|
+
iconSize: H,
|
|
52
|
+
...W
|
|
53
|
+
} = l, K = () => {
|
|
54
|
+
n && s === void 0 && (f.current = !o, x(!o));
|
|
55
|
+
}, V = (r) => {
|
|
56
|
+
K(), N && N.call(void 0, r);
|
|
57
|
+
}, f = e.useRef(void 0), I = e.useRef(null), z = e.useRef(null), [o, x] = e.useState(n === !0 && s === !0), j = y !== void 0 || b !== void 0 || h !== void 0 || R !== void 0, q = c !== void 0, D = J(), A = l.unstyled || D, p = A && A.uButton;
|
|
58
|
+
let v = o;
|
|
59
|
+
f.current === void 0 ? v = o : v = f.current, e.useImperativeHandle(u, () => {
|
|
60
|
+
const r = {
|
|
61
|
+
element: I.current,
|
|
62
|
+
selected: v
|
|
63
|
+
};
|
|
64
|
+
return z.current = r, r;
|
|
65
|
+
}), L("button", z, l, l.webMcp), e.useMemo(() => {
|
|
66
|
+
n && s !== void 0 && s !== o && x(s);
|
|
67
|
+
}, [n, s]), e.useEffect(() => {
|
|
68
|
+
f.current = void 0;
|
|
69
|
+
}, [o]);
|
|
70
|
+
const F = Y({
|
|
71
|
+
name: b,
|
|
68
72
|
svgIcon: y,
|
|
69
73
|
iconClass: h,
|
|
70
|
-
imageUrl:
|
|
71
|
-
imageAlt:
|
|
72
|
-
buttonClasses:
|
|
73
|
-
iconSize:
|
|
74
|
-
}),
|
|
75
|
-
className:
|
|
76
|
-
}),
|
|
74
|
+
imageUrl: R,
|
|
75
|
+
imageAlt: k,
|
|
76
|
+
buttonClasses: p,
|
|
77
|
+
iconSize: H
|
|
78
|
+
}), B = (r) => e.cloneElement(r, {
|
|
79
|
+
className: a(d.icon({ c: p }), r.props.className)
|
|
80
|
+
}), G = e.useMemo(() => n ? o : M || void 0, [n, o, M]);
|
|
77
81
|
return /* @__PURE__ */ e.createElement(
|
|
78
82
|
"button",
|
|
79
83
|
{
|
|
80
|
-
ref:
|
|
81
|
-
"aria-pressed":
|
|
82
|
-
...
|
|
83
|
-
dir:
|
|
84
|
-
disabled:
|
|
85
|
-
onClick:
|
|
86
|
-
className:
|
|
87
|
-
|
|
88
|
-
c:
|
|
89
|
-
isRtl:
|
|
90
|
-
selected:
|
|
91
|
-
disabled:
|
|
92
|
-
size:
|
|
93
|
-
fillMode:
|
|
94
|
-
rounded:
|
|
95
|
-
themeColor:
|
|
96
|
-
iconButton: !
|
|
84
|
+
ref: I,
|
|
85
|
+
"aria-pressed": G,
|
|
86
|
+
...W,
|
|
87
|
+
dir: m,
|
|
88
|
+
disabled: i,
|
|
89
|
+
onClick: V,
|
|
90
|
+
className: a(
|
|
91
|
+
d.wrapper({
|
|
92
|
+
c: p,
|
|
93
|
+
isRtl: m === "rtl",
|
|
94
|
+
selected: o,
|
|
95
|
+
disabled: i,
|
|
96
|
+
size: O,
|
|
97
|
+
fillMode: T,
|
|
98
|
+
rounded: S,
|
|
99
|
+
themeColor: U,
|
|
100
|
+
iconButton: !q && j
|
|
97
101
|
}),
|
|
98
|
-
|
|
102
|
+
w
|
|
99
103
|
)
|
|
100
104
|
},
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
+
C && B(C),
|
|
106
|
+
F,
|
|
107
|
+
c && /* @__PURE__ */ e.createElement("span", { className: a(d.text({ c: p })) }, c),
|
|
108
|
+
E && B(E)
|
|
105
109
|
);
|
|
106
110
|
}), g = {
|
|
107
111
|
size: void 0,
|
|
@@ -109,13 +113,13 @@ const A = e.forwardRef((a, d) => {
|
|
|
109
113
|
fillMode: void 0,
|
|
110
114
|
themeColor: void 0
|
|
111
115
|
};
|
|
112
|
-
|
|
113
|
-
|
|
116
|
+
P.displayName = "KendoReactButton";
|
|
117
|
+
P.propTypes = {
|
|
114
118
|
children: t.node,
|
|
115
119
|
selected: t.bool,
|
|
116
120
|
togglable: t.bool,
|
|
117
121
|
icon: t.string,
|
|
118
|
-
svgIcon:
|
|
122
|
+
svgIcon: X,
|
|
119
123
|
iconClass: t.string,
|
|
120
124
|
imageUrl: t.string,
|
|
121
125
|
imageAlt: t.string,
|
|
@@ -135,5 +139,5 @@ A.propTypes = {
|
|
|
135
139
|
])
|
|
136
140
|
};
|
|
137
141
|
export {
|
|
138
|
-
|
|
142
|
+
P as Button
|
|
139
143
|
};
|
package/Chip/Chip.d.ts
CHANGED
|
@@ -397,6 +397,12 @@ export interface ChipProps {
|
|
|
397
397
|
* This property is related to accessibility.
|
|
398
398
|
*/
|
|
399
399
|
ariaLabel?: string;
|
|
400
|
+
/**
|
|
401
|
+
* Sets the `aria-selected` attribute on the Chip.
|
|
402
|
+
* When provided, overrides the internally computed selected state for the ARIA attribute.
|
|
403
|
+
* Only applies when `role` is `"option"`.
|
|
404
|
+
*/
|
|
405
|
+
ariaSelected?: boolean;
|
|
400
406
|
}
|
|
401
407
|
/**
|
|
402
408
|
* Represents the target(element and props) of the ChipRemoveEvent.
|
package/Chip/Chip.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const q=require("react"),n=require("prop-types"),h=require("./chip-list-contexts.js"),c=require("@progress/kendo-react-common"),D=require("@progress/kendo-svg-icons"),u=require("./focus-reducer.js"),B=require("./data-reducer.js"),k=require("./selection-reducer.js");function j(e){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const r=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(d,l,r.get?r:{enumerable:!0,get:()=>e[l]})}}return d.default=e,Object.freeze(d)}const a=j(q),N=a.forwardRef((e,d)=>{var A;const l=a.useRef(null),r=a.useRef(null),{disabled:I=i.disabled,fillMode:O=i.fillMode,themeColor:S=i.themeColor,size:C=i.size,rounded:b=i.rounded,dir:M=i.dir,removeIcon:T=i.removeIcon,removeSvgIcon:_=i.removeSvgIcon,removable:m=i.removable}=e,E=c.useDir(r,M);a.useImperativeHandle(l,()=>({element:r.current,props:e})),a.useImperativeHandle(d,()=>l.current);const[v,s]=a.useContext(h.ChipListSelectionContext),[x,o]=a.useContext(h.ChipListFocusContext),[,R]=a.useContext(h.ChipListDataContext),y=a.useMemo(()=>e.selected||(Array.isArray(v)?v.some(t=>t===e.value):v===e.value),[e.selected,e.value,v]),F=e.role==="option"?(A=e.ariaSelected)!=null?A:y:void 0,f=a.useMemo(()=>x===e.value,[e.value,x]);a.useEffect(()=>{f&&r.current&&r.current.focus()},[f]);const K=a.useCallback(t=>{s({type:k.SELECTION_ACTION.toggle,payload:e.value,event:t})},[s,e.value]),g=a.useCallback(t=>{m&&(R({type:B.CHIP_DATA_ACTION.remove,payload:e.value,event:t}),o({type:u.FOCUS_ACTION.reset,payload:e.value,event:t}),s({type:k.SELECTION_ACTION.remove,payload:e.value,event:t}),e.onRemove&&e.onRemove.call(void 0,{target:l.current,syntheticEvent:t}))},[e.onRemove,e.value,m,R,o,s]),P=a.useCallback(t=>{switch(t.keyCode){case c.Keys.left:o({type:u.FOCUS_ACTION.prev,payload:e.value,event:t});break;case c.Keys.right:o({type:u.FOCUS_ACTION.next,payload:e.value,event:t});break;case c.Keys.enter:s({type:k.SELECTION_ACTION.toggle,payload:e.value,event:t});break;case c.Keys.delete:g(t);break}e.onKeyDown&&e.onKeyDown.call(void 0,{target:l.current,syntheticEvent:t})},[e.onKeyDown,e.value,o,s,g]),w=a.useCallback(t=>{o({payload:e.value,type:u.FOCUS_ACTION.current,event:t}),e.onFocus&&e.onFocus.call(void 0,{target:l.current,syntheticEvent:t})},[e.onFocus,e.value,o]),z=a.useCallback(t=>{o({type:u.FOCUS_ACTION.reset,payload:e.value,event:t}),e.onBlur&&e.onBlur.call(void 0,{target:l.current,syntheticEvent:t})},[e.onBlur,e.value,o]),L=c.useMouse(e,l,{onClick:K});return a.createElement("div",{...L,role:e.role||"button",id:e.value,style:e.style,ref:r,dir:E,tabIndex:c.getTabIndex(e.tabIndex,I,void 0),className:c.classNames("k-chip",{"k-rtl":E==="rtl","k-disabled":I,"k-selected":y,"k-focus":f,[`k-chip-${c.kendoThemeMaps.sizeMap[C]||C}`]:C,[`k-rounded-${c.kendoThemeMaps.roundedMap[b]||b}`]:b,[`k-chip-${O}`]:O,[`k-chip-${S}`]:!!S},e.className),"aria-pressed":e.role?void 0:y,"aria-selected":F,"aria-disabled":I||void 0,"aria-label":e.ariaLabel,"aria-describedby":e.ariaDescribedBy,"aria-keyshortcuts":m&&e.role==="option"?"Enter Delete":void 0,onFocus:w,onBlur:z,onKeyDown:P},y&&(e.selectedIcon||e.selectedSvgIcon)&&a.createElement(c.IconWrap,{className:"k-chip-icon",name:e.selectedIcon?c.toIconName(e.selectedIcon):void 0,icon:e.selectedSvgIcon,size:"small"}),(e.icon||e.svgIcon)&&a.createElement(c.IconWrap,{className:"k-chip-icon",name:e.icon?c.toIconName(e.icon):void 0,icon:e.svgIcon,size:"small"}),e.avatar&&a.createElement("div",{className:c.classNames("k-chip-avatar","k-avatar",e.avatar.rounded&&`k-rounded-${e.avatar.rounded}`),style:e.avatar.style},a.createElement("span",{className:"k-avatar-image"},a.createElement("img",{src:e.avatar.image,alt:e.avatar.imageAlt}))),a.createElement("span",{className:"k-chip-content"},e.children!==void 0?e.children:e.text&&a.createElement("span",{"aria-label":e.ariaLabel||void 0,className:"k-chip-label"},e.text)),m&&a.createElement("span",{className:"k-chip-actions"},a.createElement("span",{className:c.classNames("k-chip-action","k-chip-remove-action"),onClick:g},a.createElement(c.IconWrap,{name:T?c.toIconName(T):void 0,icon:_||D.xCircleIcon,size:"small"}))))}),U={id:n.string,text:n.string,value:n.any,dir:n.oneOf(["ltr","rtl"]),removable:n.bool,removeIcon:n.string,removeIconSvg:c.svgIconPropType,disabled:n.bool,icon:n.string,svgIcon:c.svgIconPropType,selectedIcon:n.string,selectedIconSvg:c.svgIconPropType,onRemove:n.func,dataItem:n.any,selected:n.bool,ariaSelected:n.bool,ariaDescribedBy:n.string,size:n.oneOf(["small","medium","large"]),rounded:n.oneOf(["small","medium","large","full","none"]),fillMode:n.oneOf(["outline","solid"]),themeColor:n.oneOf(["base","info","success","warning","error"])},i={disabled:!1,removable:!1,removeIcon:"k-i-x-circle",removeSvgIcon:D.xCircleIcon,dir:"ltr",size:void 0,rounded:void 0,fillMode:void 0,themeColor:void 0};N.displayName="KendoReactChip";N.propTypes=U;exports.Chip=N;
|
package/Chip/Chip.mjs
CHANGED
|
@@ -7,59 +7,60 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as a from "react";
|
|
9
9
|
import l from "prop-types";
|
|
10
|
-
import { ChipListSelectionContext as
|
|
11
|
-
import { useDir as
|
|
12
|
-
import { xCircleIcon as
|
|
10
|
+
import { ChipListSelectionContext as W, ChipListFocusContext as j, ChipListDataContext as q } from "./chip-list-contexts.mjs";
|
|
11
|
+
import { useDir as G, Keys as v, useMouse as J, classNames as g, kendoThemeMaps as w, getTabIndex as Q, IconWrap as I, toIconName as C, svgIconPropType as E } from "@progress/kendo-react-common";
|
|
12
|
+
import { xCircleIcon as z } from "@progress/kendo-svg-icons";
|
|
13
13
|
import { FOCUS_ACTION as r } from "./focus-reducer.mjs";
|
|
14
|
-
import { CHIP_DATA_ACTION as
|
|
15
|
-
import { SELECTION_ACTION as
|
|
16
|
-
const
|
|
14
|
+
import { CHIP_DATA_ACTION as V } from "./data-reducer.mjs";
|
|
15
|
+
import { SELECTION_ACTION as N } from "./selection-reducer.mjs";
|
|
16
|
+
const A = a.forwardRef((e, B) => {
|
|
17
|
+
var O;
|
|
17
18
|
const o = a.useRef(null), d = a.useRef(null), {
|
|
18
|
-
disabled:
|
|
19
|
-
fillMode:
|
|
20
|
-
themeColor:
|
|
21
|
-
size:
|
|
22
|
-
rounded:
|
|
23
|
-
dir:
|
|
24
|
-
removeIcon:
|
|
25
|
-
removeSvgIcon:
|
|
19
|
+
disabled: y = c.disabled,
|
|
20
|
+
fillMode: x = c.fillMode,
|
|
21
|
+
themeColor: S = c.themeColor,
|
|
22
|
+
size: f = c.size,
|
|
23
|
+
rounded: h = c.rounded,
|
|
24
|
+
dir: F = c.dir,
|
|
25
|
+
removeIcon: D = c.removeIcon,
|
|
26
|
+
removeSvgIcon: K = c.removeSvgIcon,
|
|
26
27
|
removable: s = c.removable
|
|
27
|
-
} = e,
|
|
28
|
+
} = e, R = G(d, F);
|
|
28
29
|
a.useImperativeHandle(o, () => ({
|
|
29
30
|
element: d.current,
|
|
30
31
|
props: e
|
|
31
|
-
})), a.useImperativeHandle(
|
|
32
|
-
const [m, i] = a.useContext(
|
|
32
|
+
})), a.useImperativeHandle(B, () => o.current);
|
|
33
|
+
const [m, i] = a.useContext(W), [T, n] = a.useContext(j), [, M] = a.useContext(q), u = a.useMemo(() => e.selected || (Array.isArray(m) ? m.some((t) => t === e.value) : m === e.value), [e.selected, e.value, m]), L = e.role === "option" ? (O = e.ariaSelected) != null ? O : u : void 0, b = a.useMemo(() => T === e.value, [e.value, T]);
|
|
33
34
|
a.useEffect(() => {
|
|
34
|
-
|
|
35
|
-
}, [
|
|
36
|
-
const
|
|
35
|
+
b && d.current && d.current.focus();
|
|
36
|
+
}, [b]);
|
|
37
|
+
const P = a.useCallback(
|
|
37
38
|
(t) => {
|
|
38
|
-
i({ type:
|
|
39
|
+
i({ type: N.toggle, payload: e.value, event: t });
|
|
39
40
|
},
|
|
40
41
|
[i, e.value]
|
|
41
|
-
),
|
|
42
|
+
), k = a.useCallback(
|
|
42
43
|
(t) => {
|
|
43
|
-
s && (M({ type:
|
|
44
|
+
s && (M({ type: V.remove, payload: e.value, event: t }), n({ type: r.reset, payload: e.value, event: t }), i({ type: N.remove, payload: e.value, event: t }), e.onRemove && e.onRemove.call(void 0, {
|
|
44
45
|
target: o.current,
|
|
45
46
|
syntheticEvent: t
|
|
46
47
|
}));
|
|
47
48
|
},
|
|
48
49
|
[e.onRemove, e.value, s, M, n, i]
|
|
49
|
-
),
|
|
50
|
+
), $ = a.useCallback(
|
|
50
51
|
(t) => {
|
|
51
52
|
switch (t.keyCode) {
|
|
52
|
-
case
|
|
53
|
+
case v.left:
|
|
53
54
|
n({ type: r.prev, payload: e.value, event: t });
|
|
54
55
|
break;
|
|
55
|
-
case
|
|
56
|
+
case v.right:
|
|
56
57
|
n({ type: r.next, payload: e.value, event: t });
|
|
57
58
|
break;
|
|
58
|
-
case
|
|
59
|
-
i({ type:
|
|
59
|
+
case v.enter:
|
|
60
|
+
i({ type: N.toggle, payload: e.value, event: t });
|
|
60
61
|
break;
|
|
61
|
-
case
|
|
62
|
-
|
|
62
|
+
case v.delete:
|
|
63
|
+
k(t);
|
|
63
64
|
break;
|
|
64
65
|
}
|
|
65
66
|
e.onKeyDown && e.onKeyDown.call(void 0, {
|
|
@@ -67,8 +68,8 @@ const z = a.forwardRef((e, A) => {
|
|
|
67
68
|
syntheticEvent: t
|
|
68
69
|
});
|
|
69
70
|
},
|
|
70
|
-
[e.onKeyDown, e.value, n, i,
|
|
71
|
-
),
|
|
71
|
+
[e.onKeyDown, e.value, n, i, k]
|
|
72
|
+
), _ = a.useCallback(
|
|
72
73
|
(t) => {
|
|
73
74
|
n({ payload: e.value, type: r.current, event: t }), e.onFocus && e.onFocus.call(void 0, {
|
|
74
75
|
target: o.current,
|
|
@@ -76,7 +77,7 @@ const z = a.forwardRef((e, A) => {
|
|
|
76
77
|
});
|
|
77
78
|
},
|
|
78
79
|
[e.onFocus, e.value, n]
|
|
79
|
-
),
|
|
80
|
+
), H = a.useCallback(
|
|
80
81
|
(t) => {
|
|
81
82
|
n({ type: r.reset, payload: e.value, event: t }), e.onBlur && e.onBlur.call(void 0, {
|
|
82
83
|
target: o.current,
|
|
@@ -84,40 +85,42 @@ const z = a.forwardRef((e, A) => {
|
|
|
84
85
|
});
|
|
85
86
|
},
|
|
86
87
|
[e.onBlur, e.value, n]
|
|
87
|
-
),
|
|
88
|
+
), U = J(e, o, { onClick: P });
|
|
88
89
|
return /* @__PURE__ */ a.createElement(
|
|
89
90
|
"div",
|
|
90
91
|
{
|
|
91
|
-
...
|
|
92
|
+
...U,
|
|
92
93
|
role: e.role || "button",
|
|
93
94
|
id: e.value,
|
|
94
95
|
style: e.style,
|
|
95
96
|
ref: d,
|
|
96
|
-
dir:
|
|
97
|
-
tabIndex:
|
|
98
|
-
className:
|
|
97
|
+
dir: R,
|
|
98
|
+
tabIndex: Q(e.tabIndex, y, void 0),
|
|
99
|
+
className: g(
|
|
99
100
|
"k-chip",
|
|
100
101
|
{
|
|
101
|
-
"k-rtl":
|
|
102
|
-
"k-disabled":
|
|
103
|
-
"k-selected":
|
|
104
|
-
"k-focus":
|
|
105
|
-
[`k-chip-${
|
|
106
|
-
[`k-rounded-${
|
|
107
|
-
[`k-chip-${
|
|
108
|
-
[`k-chip-${
|
|
102
|
+
"k-rtl": R === "rtl",
|
|
103
|
+
"k-disabled": y,
|
|
104
|
+
"k-selected": u,
|
|
105
|
+
"k-focus": b,
|
|
106
|
+
[`k-chip-${w.sizeMap[f] || f}`]: f,
|
|
107
|
+
[`k-rounded-${w.roundedMap[h] || h}`]: h,
|
|
108
|
+
[`k-chip-${x}`]: x,
|
|
109
|
+
[`k-chip-${S}`]: !!S
|
|
109
110
|
},
|
|
110
111
|
e.className
|
|
111
112
|
),
|
|
112
|
-
"aria-pressed": e.role ? void 0 :
|
|
113
|
-
"aria-
|
|
113
|
+
"aria-pressed": e.role ? void 0 : u,
|
|
114
|
+
"aria-selected": L,
|
|
115
|
+
"aria-disabled": y || void 0,
|
|
116
|
+
"aria-label": e.ariaLabel,
|
|
114
117
|
"aria-describedby": e.ariaDescribedBy,
|
|
115
|
-
"aria-keyshortcuts": s ? "Enter Delete" : void 0,
|
|
116
|
-
onFocus:
|
|
117
|
-
onBlur:
|
|
118
|
-
onKeyDown:
|
|
118
|
+
"aria-keyshortcuts": s && e.role === "option" ? "Enter Delete" : void 0,
|
|
119
|
+
onFocus: _,
|
|
120
|
+
onBlur: H,
|
|
121
|
+
onKeyDown: $
|
|
119
122
|
},
|
|
120
|
-
|
|
123
|
+
u && (e.selectedIcon || e.selectedSvgIcon) && /* @__PURE__ */ a.createElement(
|
|
121
124
|
I,
|
|
122
125
|
{
|
|
123
126
|
className: "k-chip-icon",
|
|
@@ -138,7 +141,7 @@ const z = a.forwardRef((e, A) => {
|
|
|
138
141
|
e.avatar && /* @__PURE__ */ a.createElement(
|
|
139
142
|
"div",
|
|
140
143
|
{
|
|
141
|
-
className:
|
|
144
|
+
className: g(
|
|
142
145
|
"k-chip-avatar",
|
|
143
146
|
"k-avatar",
|
|
144
147
|
e.avatar.rounded && `k-rounded-${e.avatar.rounded}`
|
|
@@ -147,17 +150,17 @@ const z = a.forwardRef((e, A) => {
|
|
|
147
150
|
},
|
|
148
151
|
/* @__PURE__ */ a.createElement("span", { className: "k-avatar-image" }, /* @__PURE__ */ a.createElement("img", { src: e.avatar.image, alt: e.avatar.imageAlt }))
|
|
149
152
|
),
|
|
150
|
-
/* @__PURE__ */ a.createElement("span", { className: "k-chip-content" }, e.children !== void 0 ? e.children : e.text && /* @__PURE__ */ a.createElement("span", { "aria-label": e.ariaLabel ||
|
|
151
|
-
s && /* @__PURE__ */ a.createElement("span", { className: "k-chip-actions" }, /* @__PURE__ */ a.createElement("span", { className:
|
|
153
|
+
/* @__PURE__ */ a.createElement("span", { className: "k-chip-content" }, e.children !== void 0 ? e.children : e.text && /* @__PURE__ */ a.createElement("span", { "aria-label": e.ariaLabel || void 0, className: "k-chip-label" }, e.text)),
|
|
154
|
+
s && /* @__PURE__ */ a.createElement("span", { className: "k-chip-actions" }, /* @__PURE__ */ a.createElement("span", { className: g("k-chip-action", "k-chip-remove-action"), onClick: k }, /* @__PURE__ */ a.createElement(
|
|
152
155
|
I,
|
|
153
156
|
{
|
|
154
|
-
name:
|
|
155
|
-
icon:
|
|
157
|
+
name: D ? C(D) : void 0,
|
|
158
|
+
icon: K || z,
|
|
156
159
|
size: "small"
|
|
157
160
|
}
|
|
158
161
|
)))
|
|
159
162
|
);
|
|
160
|
-
}),
|
|
163
|
+
}), X = {
|
|
161
164
|
id: l.string,
|
|
162
165
|
text: l.string,
|
|
163
166
|
value: l.any,
|
|
@@ -173,6 +176,7 @@ const z = a.forwardRef((e, A) => {
|
|
|
173
176
|
onRemove: l.func,
|
|
174
177
|
dataItem: l.any,
|
|
175
178
|
selected: l.bool,
|
|
179
|
+
ariaSelected: l.bool,
|
|
176
180
|
ariaDescribedBy: l.string,
|
|
177
181
|
size: l.oneOf(["small", "medium", "large"]),
|
|
178
182
|
rounded: l.oneOf(["small", "medium", "large", "full", "none"]),
|
|
@@ -182,15 +186,15 @@ const z = a.forwardRef((e, A) => {
|
|
|
182
186
|
disabled: !1,
|
|
183
187
|
removable: !1,
|
|
184
188
|
removeIcon: "k-i-x-circle",
|
|
185
|
-
removeSvgIcon:
|
|
189
|
+
removeSvgIcon: z,
|
|
186
190
|
dir: "ltr",
|
|
187
191
|
size: void 0,
|
|
188
192
|
rounded: void 0,
|
|
189
193
|
fillMode: void 0,
|
|
190
194
|
themeColor: void 0
|
|
191
195
|
};
|
|
192
|
-
|
|
193
|
-
|
|
196
|
+
A.displayName = "KendoReactChip";
|
|
197
|
+
A.propTypes = X;
|
|
194
198
|
export {
|
|
195
|
-
|
|
199
|
+
A as Chip
|
|
196
200
|
};
|
package/Chip/ChipList.js
CHANGED
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),t=require("prop-types"),p=require("@progress/kendo-react-common"),X=require("./selection-reducer.js"),Y=require("./focus-reducer.js"),Z=require("./data-reducer.js"),S=require("./Chip.js"),D=require("./chip-list-contexts.js");function V(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(i,n,l.get?l:{enumerable:!0,get:()=>e[n]})}}return i.default=e,Object.freeze(i)}const a=V(W),ee=(e,i,n)=>{i.selection==="multiple"?Array.isArray(e)||(e=e?[e]:null):i.selection==="single"&&Array.isArray(e)&&(e=e?e.join(""):null);const[l,o]=a.useState(e);return[l,c=>{const u=X.selectionReducer(i.state||l,{...c,...i});n&&n(u,c.event),i.selection!=="none"&&o(u)}]},te=e=>{const[i,n]=a.useState(null);return[i,o=>{const h=Y.focusReducer(o.payload,{...o,...e});n(h)}]},ae=(e,i,n)=>{const[l,o]=a.useState(e);return[l,c=>{const u=Z.dataReducer(i.state||l,{...c,...i});n&&n(u,c.event),o(u)}]},x=a.forwardRef((e,i)=>{const n=a.useRef(null),l=a.useRef(null),{id:o,style:h,tabIndex:c,className:u,ariaDescribedBy:T,ariaLabelledBy:q,ariaLabel:j,value:b,defaultData:z=r.defaultData,chip:R=r.chip,disabled:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),t=require("prop-types"),p=require("@progress/kendo-react-common"),X=require("./selection-reducer.js"),Y=require("./focus-reducer.js"),Z=require("./data-reducer.js"),S=require("./Chip.js"),D=require("./chip-list-contexts.js");function V(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const l=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(i,n,l.get?l:{enumerable:!0,get:()=>e[n]})}}return i.default=e,Object.freeze(i)}const a=V(W),ee=(e,i,n)=>{i.selection==="multiple"?Array.isArray(e)||(e=e?[e]:null):i.selection==="single"&&Array.isArray(e)&&(e=e?e.join(""):null);const[l,o]=a.useState(e);return[l,c=>{const u=X.selectionReducer(i.state||l,{...c,...i});n&&n(u,c.event),i.selection!=="none"&&o(u)}]},te=e=>{const[i,n]=a.useState(null);return[i,o=>{const h=Y.focusReducer(o.payload,{...o,...e});n(h)}]},ae=(e,i,n)=>{const[l,o]=a.useState(e);return[l,c=>{const u=Z.dataReducer(i.state||l,{...c,...i});n&&n(u,c.event),o(u)}]},x=a.forwardRef((e,i)=>{const n=a.useRef(null),l=a.useRef(null),{id:o,style:h,tabIndex:c,className:u,ariaDescribedBy:T,ariaLabelledBy:q,ariaLabel:j,value:b,defaultData:z=r.defaultData,chip:R=r.chip,disabled:m=r.disabled,size:v=r.size,defaultValue:E=r.defaultValue,selection:O=r.selection,valueField:f=r.valueField,textField:F=r.textField,dir:N=r.dir,onChange:C,onDataChange:g}=e,L=p.useDir(l,N),w=a.useMemo(()=>R||S.Chip,[R,S.Chip]);a.useImperativeHandle(n,()=>({element:l.current,props:e})),a.useImperativeHandle(i,()=>n.current);const A=a.useCallback((s,d)=>{C&&n.current&&C.call(void 0,{value:s,target:n.current,syntheticEvent:d})},[C]),[k,B]=ee(b||E,{selection:O,state:b},A),_=a.useCallback((s,d)=>{g&&n.current&&g.call(void 0,{value:s,target:n.current,syntheticEvent:d})},[g]),[I,G]=ae(e.data||z,{state:e.data,valueField:f},_),M=a.useCallback((s,d)=>(s.push(d[f]),s),[f]),y=a.useMemo(()=>e.data||I,[e.data,I]),H=a.useMemo(()=>b||k,[b,k]),K=a.useMemo(()=>y.reduce(M,[]),[y,M]),P=a.useCallback(s=>p.getter(f)(s),[f]),$=a.useCallback(s=>p.getter(F)(s),[F]),[J,Q]=te({items:K}),U=p.useMouse(e,n);return a.createElement(D.ChipListSelectionContext.Provider,{value:[H,B]},a.createElement(D.ChipListFocusContext.Provider,{value:[J,Q]},a.createElement(D.ChipListDataContext.Provider,{value:[y,G]},a.createElement("div",{ref:l,...U,role:m?void 0:"listbox",id:o,dir:L,style:h,tabIndex:p.getTabIndex(c,m,void 0),className:p.classNames("k-chip-list",{"k-rtl":L==="rtl","k-disabled":m,[`k-chip-list-${p.kendoThemeMaps.sizeMap[v]||v}`]:v},u),"aria-label":j,"aria-labelledby":q,"aria-describedby":T,"aria-orientation":"horizontal","aria-multiselectable":O==="multiple"||void 0},y.map((s,d)=>a.createElement(w,{role:"option",dataItem:s,size:v,key:[P(s),d].join("-"),text:$(s),value:P(s),ariaLabel:s.ariaLabel,svgIcon:s.svgIcon||void 0}))))))}),ne={id:t.string,className:t.string,tabIndex:t.number,data:t.any,defaultData:t.arrayOf(t.any),onDataChange:t.func,value:t.oneOfType([t.any,t.arrayOf(t.any)]),defaultValue:t.oneOfType([t.any,t.arrayOf(t.any)]),onChange:t.func,selection:t.oneOf(["single","none","multiple"]),textField:t.string,valueField:t.string,disabled:t.bool,dir:t.oneOf(["ltr","rtl"]),ariaLabelledBy:t.string,ariaDescribedBy:t.string,size:t.oneOf(["small","medium","large"])},r={chip:S.Chip,size:void 0,disabled:!1,defaultValue:null,defaultData:[],dir:"ltr",selection:"none",textField:"text",valueField:"value"};x.displayName="KendoReactChipList";x.propTypes=ne;exports.ChipList=x;
|
package/Chip/ChipList.mjs
CHANGED
|
@@ -117,7 +117,7 @@ const ie = (a, i, s) => {
|
|
|
117
117
|
"aria-labelledby": T,
|
|
118
118
|
"aria-describedby": M,
|
|
119
119
|
"aria-orientation": "horizontal",
|
|
120
|
-
"aria-multiselectable": x === "multiple"
|
|
120
|
+
"aria-multiselectable": x === "multiple" || void 0
|
|
121
121
|
},
|
|
122
122
|
v.map((n, u) => /* @__PURE__ */ t.createElement(
|
|
123
123
|
A,
|
|
@@ -5,4 +5,4 @@
|
|
|
5
5
|
* Licensed under commercial license. See LICENSE.md in the package root for more information
|
|
6
6
|
*-------------------------------------------------------------------------------------------
|
|
7
7
|
*/
|
|
8
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ye=require("react"),s=require("prop-types"),o=require("@progress/kendo-react-common"),he=require("./FloatingActionButtonItem.js"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const ye=require("react"),s=require("prop-types"),o=require("@progress/kendo-react-common"),he=require("./FloatingActionButtonItem.js"),w=require("./utils.js"),ve=require("@progress/kendo-react-popup");function Ce(d){const g=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const r in d)if(r!=="default"){const k=Object.getOwnPropertyDescriptor(d,r);Object.defineProperty(g,r,k.get?k:{enumerable:!0,get:()=>d[r]})}}return g.default=d,Object.freeze(g)}const t=Ce(ye),Ie=2,Ee=100,q=t.forwardRef((d,g)=>{const{align:r=C.align,alignOffset:k,className:$,disabled:f,icon:I,svgIcon:E,iconClass:F,id:j,items:n,item:ee,text:x,positionMode:D=C.positionMode,size:y=C.size,style:te,rounded:N=C.rounded,themeColor:P=C.themeColor,overlayStyle:oe,tabIndex:se,accessKey:ae,popupSettings:K={},modal:ne,onClick:S,onItemClick:_,onFocus:T,onBlur:W,onKeyDown:Z,onOpen:H,onClose:L,...le}=d,X=o.useZIndexContext(),U=X?X+Ie:Ee,G=t.useRef(null),i=t.useRef(null),ie=t.useRef(null),re=t.useRef(null),J=t.useCallback(()=>{i.current&&i.current.focus()},[]),p=t.useCallback(()=>({element:i.current,focus:J}),[J]);t.useImperativeHandle(G,p),t.useImperativeHandle(g,()=>G.current);const[c,u]=t.useState(!1),[O,m]=t.useState(!1),[h,l]=t.useState(-1),ce=o.useId()+"-button-id",z=o.useDir(i,d.dir),v=z==="rtl",R=o.useId()+"-list-id";t.useEffect(()=>{w.position(i,r,k,v)},[i,r,k,v]),t.useEffect(()=>{O&&i&&i.current&&i.current.focus()},[O,i]);const b=t.useCallback((e,a)=>{n&&o.dispatchEvent(a?H:L,e,p(),void 0)},[H,L,n]),Q=t.useCallback(e=>{!e.target||f||(!n&&S?o.dispatchEvent(S,e,p(),void 0):(u(!c),m(!0),l(c?-1:0),b(e,!c)))},[u,m,l,S,b,c,n,f]),ue=t.useCallback(e=>{m(!0),l(c?0:-1),T&&o.dispatchEvent(T,e,p(),void 0)},[T,m,l]),de=t.useCallback(e=>{m(!1),u(!1),l(-1),o.dispatchEvent(W,e,p(),void 0),c&&b(e,!1)},[W,m,u,l,b]),fe=t.useCallback(e=>{e.preventDefault()},[]),B=t.useCallback((e,a)=>{n&&(n[a].disabled||o.dispatchEvent(_,e,p(),{itemProps:n[a],itemIndex:a}))},[_]),pe=t.useCallback((e,a)=>{!e.target||!n||(l(a),u(!1),B(e,a),b(e,!1))},[l,u,B,b]),me=t.useCallback(e=>{o.getActiveElement(document)===i.current&&e.preventDefault()},[i]),be=t.useCallback(e=>{const a=h,M=n?n.length:-1;if(e.altKey){!c&&e.keyCode===o.Keys.down&&(e.preventDefault(),u(!0),l(0)),c&&e.keyCode===o.Keys.up&&(e.preventDefault(),u(!1),l(-1));return}switch(e.keyCode){case o.Keys.enter:case o.Keys.space:a>=0&&B(e,a),n||Q(e),e.preventDefault(),u(!c),l(c?-1:0);break;case o.Keys.esc:e.preventDefault(),u(!1),l(-1);break;case o.Keys.home:e.preventDefault(),l(0);break;case o.Keys.end:e.preventDefault(),l(M-1);break;case o.Keys.down:case o.Keys.right:e.preventDefault(),l(a+1>=M?0:a+1);break;case o.Keys.up:case o.Keys.left:e.preventDefault(),l(a-1<0?M-1:a-1);break}o.dispatchEvent(Z,e,p(),void 0)},[Z,h,l,v,u]),ge=t.useMemo(()=>o.classNames("k-fab",{"k-fab-xs":y==="xsmall","k-fab-sm":y==="small","k-fab-md":y==="medium","k-fab-lg":y==="large","k-disabled":f,"k-pos-absolute":D==="absolute","k-pos-fixed":D==="fixed","k-focus":O,[`k-rounded-${o.kendoThemeMaps.roundedMap[N]||N}`]:N,[`k-fab-${P}`]:P},D&&`k-${r.vertical}-${r.horizontal}`,$),[P,y,N,f,D,r,O,$]),ke=n&&n.map((e,a)=>t.createElement(he.FloatingActionButtonItem,{...e,key:a,index:a,id:`${R}-${a}`,disabled:f||e.disabled,focused:h===a,dataItem:e,item:ee,className:o.classNames(e.className,w.getTextDirectionClass(z||"ltr",r.horizontal)),onClick:pe,onDown:me})),V=!!((I||E)&&!x),Y=(i.current?i.current.offsetWidth:0)/2-32/2;let A;return I||E?A=t.createElement(o.IconWrap,{className:"k-fab-icon",name:I,icon:E}):F?A=t.createElement("span",{role:"presentation",className:F}):A=null,t.createElement(o.ZIndexContext.Provider,{value:U},t.createElement(t.Fragment,null,t.createElement("button",{ref:i,id:j||ce,type:"button","aria-disabled":f,"aria-expanded":n?c:void 0,"aria-haspopup":n?!0:void 0,"aria-label":!x&&(I||E||F)?"Action":void 0,"aria-owns":n?R:void 0,"aria-activedescendant":h>=0&&n?`${R}-${h}`:void 0,tabIndex:o.getTabIndex(se,f),accessKey:ae,dir:z,disabled:f,className:ge,style:te,onClick:Q,onMouseDown:fe,onFocus:ue,onBlur:de,onKeyDown:be,...le},A,x&&t.createElement("span",{className:"k-fab-text"},x)),ne&&c&&t.createElement("div",{className:"k-overlay",style:{zIndex:U,...oe}}),t.createElement(ve.Popup,{ref:re,anchor:i.current,show:c,animate:K.animate,popupClass:o.classNames("k-popup-transparent k-fab-popup",K.popupClass),anchorAlign:K.anchorAlign||w.getAnchorAlign(r,v),popupAlign:K.popupAlign||w.getPopupAlign(r,v),style:{boxShadow:"none"}},t.createElement("ul",{ref:ie,role:"menu","aria-labelledby":j,id:R,className:o.classNames("k-fab-items",{"k-fab-items-bottom":r.vertical!=="bottom","k-fab-items-top":r.vertical==="bottom"}),style:{paddingLeft:V?Y:void 0,paddingRight:V?Y:void 0}},ke))))});q.propTypes={className:s.string,style:s.object,id:s.string,dir:s.string,tabIndex:s.number,accessKey:s.string,disabled:s.bool,icon:s.string,svgIcon:o.svgIconPropType,iconClass:s.string,text:s.string,alignOffset:s.shape({x:s.oneOfType([s.number,s.string]).isRequired,y:s.oneOfType([s.number,s.string]).isRequired}),align:s.shape({vertical:s.oneOf(["top","middle","bottom"]).isRequired,horizontal:s.oneOf(["start","center","end"]).isRequired}),positionMode:s.oneOf(["absolute","fixed"]),size:s.oneOf(["xsmall","small","medium","large"]),rounded:s.oneOf(["small","medium","large","full","none"]),themeColor:s.oneOf(["base","primary","secondary","tertiary"]),modal:s.bool,overlayStyle:s.object};const C={align:{vertical:"bottom",horizontal:"end"},size:void 0,rounded:void 0,themeColor:void 0,positionMode:"fixed"};q.displayName="KendoFloatingActionButton";exports.FloatingActionButton=q;
|