@progress/kendo-react-buttons 14.4.1 → 14.5.0-develop.10
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 +2 -2
- package/Button.js +1 -1
- package/Button.mjs +31 -33
- package/Chip/Chip.js +1 -1
- package/Chip/Chip.mjs +36 -36
- package/FloatingActionButton/FloatingActionButton.js +1 -1
- package/FloatingActionButton/FloatingActionButton.mjs +72 -82
- package/FloatingActionButton/interfaces/FloatingActionButtonProps.d.ts +1 -7
- package/FloatingActionButton/models/size.d.ts +2 -1
- package/FloatingActionButton/models/theme-color.d.ts +2 -8
- package/ListButton/DropDownButton.js +1 -1
- package/ListButton/DropDownButton.mjs +0 -2
- package/ListButton/SplitButton.js +1 -1
- package/ListButton/SplitButton.mjs +2 -4
- package/ListButton/models/ListButtonProps.d.ts +2 -2
- package/SegmentedControl/SegmentedControl.js +1 -1
- package/SegmentedControl/SegmentedControl.mjs +28 -27
- package/SpeechToTextButton/SpeechToTextButton.js +1 -1
- package/SpeechToTextButton/SpeechToTextButton.mjs +10 -10
- package/dist/cdn/js/kendo-react-buttons.js +1 -1
- package/package-metadata.js +1 -1
- package/package-metadata.mjs +2 -2
- package/package.json +11 -6
- package/toolbar/tools/ToolbarScrollButton.js +1 -1
- package/toolbar/tools/ToolbarScrollButton.mjs +9 -9
package/Button.d.ts
CHANGED
|
@@ -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?: 'small' | 'medium' | 'large';
|
|
30
|
+
size?: 'xsmall' | '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
|
*
|
|
@@ -71,7 +71,7 @@ export interface ButtonProps extends ButtonInterface, React.ButtonHTMLAttributes
|
|
|
71
71
|
* <Button themeColor="primary">Primary Button</Button>
|
|
72
72
|
* ```
|
|
73
73
|
*/
|
|
74
|
-
themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | '
|
|
74
|
+
themeColor?: 'base' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'inverse';
|
|
75
75
|
/**
|
|
76
76
|
* Sets an SVG icon or custom element before the content of the Button. For the custom component, consider using
|
|
77
77
|
* [Phrasing content](https://developer.mozilla.org/en-US/docs/Web/HTML/Content_categories#phrasing_content).
|
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 W=require("react"),r=require("prop-types"),e=require("@progress/kendo-react-common");function F(o){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const s in o)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(o,s);Object.defineProperty(l,s,n.get?n:{enumerable:!0,get:()=>o[s]})}}return l.default=o,Object.freeze(l)}const t=F(W);function G({imageUrl:o,name:l,iconClass:s,svgIcon:n,imageAlt:u,buttonClasses:a,iconSize:c}){return o?t.createElement("img",{role:"presentation",className:e.classNames(e.uButton.icon({c:a})),alt:u,src:o}):l||n?t.createElement(e.IconWrap,{className:e.classNames(e.uButton.icon({c:a})),name:l,icon:n,size:c}):s?t.createElement("span",{role:"presentation",className:e.classNames(e.uButton.icon({c:a}),s)}):null}const g=t.forwardRef((o,l)=>{const{children:s,togglable:n,dir:u,disabled:a,selected:c,icon:v,iconClass:b,svgIcon:y,imageUrl:N,imageAlt:P,className:S,startIcon:h,endIcon:B,onClick:C,size:
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const W=require("react"),r=require("prop-types"),e=require("@progress/kendo-react-common");function F(o){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const s in o)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(o,s);Object.defineProperty(l,s,n.get?n:{enumerable:!0,get:()=>o[s]})}}return l.default=o,Object.freeze(l)}const t=F(W);function G({imageUrl:o,name:l,iconClass:s,svgIcon:n,imageAlt:u,buttonClasses:a,iconSize:c}){return o?t.createElement("img",{role:"presentation",className:e.classNames(e.uButton.icon({c:a})),alt:u,src:o}):l||n?t.createElement(e.IconWrap,{className:e.classNames(e.uButton.icon({c:a})),name:l,icon:n,size:c}):s?t.createElement("span",{role:"presentation",className:e.classNames(e.uButton.icon({c:a}),s)}):null}const g=t.forwardRef((o,l)=>{const{children:s,togglable:n,dir:u,disabled:a,selected:c,icon:v,iconClass:b,svgIcon:y,imageUrl:N,imageAlt:P,className:S,startIcon:h,endIcon:B,onClick:C,size:z=p.size,rounded:k=p.rounded,fillMode:T=p.fillMode,themeColor:j=p.themeColor,ariaPressed:E,iconSize:A,...w}=o,x=()=>{n&&c===void 0&&(d.current=!i,R(!i))},q=f=>{x(),C&&C.call(void 0,f)},d=t.useRef(void 0),O=t.useRef(null),[i,R]=t.useState(n===!0&&c===!0),U=y!==void 0||v!==void 0||b!==void 0||N!==void 0,_=s!==void 0,D=e.useUnstyled(),I=o.unstyled||D,m=I&&I.uButton;t.useImperativeHandle(l,()=>({element:O.current,selected:d.current!==void 0?d.current:i})),t.useMemo(()=>{n&&c!==void 0&&c!==i&&R(c)},[n,c]),t.useEffect(()=>{d.current=void 0},[i]);const H=G({name:v,svgIcon:y,iconClass:b,imageUrl:N,imageAlt:P,buttonClasses:m,iconSize:A}),M=f=>t.cloneElement(f,{className:e.classNames(e.uButton.icon({c:m}),f.props.className)}),K=t.useMemo(()=>n?i:E||void 0,[n,i,E]);return t.createElement("button",{ref:O,"aria-pressed":K,...w,dir:u,disabled:a,onClick:q,className:e.classNames(e.uButton.wrapper({c:m,isRtl:u==="rtl",selected:i,disabled:a,size:z,fillMode:T,rounded:k,themeColor:j,iconButton:!_&&U}),S)},h&&M(h),H,s&&t.createElement("span",{className:e.classNames(e.uButton.text({c:m}))},s),B&&M(B))}),p={size:void 0,rounded:void 0,fillMode:void 0,themeColor:void 0};g.displayName="KendoReactButton";g.propTypes={children:r.node,selected:r.bool,togglable:r.bool,icon:r.string,svgIcon:e.svgIconPropType,iconClass:r.string,imageUrl:r.string,imageAlt:r.string,size:r.oneOf(["xsmall","xs","small","medium","large"]),rounded:r.oneOf(["small","medium","large","full","none"]),fillMode:r.oneOf(["flat","link","outline","solid","clear"]),themeColor:r.oneOf(["base","primary","secondary","tertiary","info","success","warning","error","inverse"])};exports.Button=g;
|
package/Button.mjs
CHANGED
|
@@ -7,29 +7,29 @@
|
|
|
7
7
|
*/
|
|
8
8
|
import * as e from "react";
|
|
9
9
|
import t from "prop-types";
|
|
10
|
-
import { useUnstyled as G, classNames as
|
|
11
|
-
function Q({ imageUrl: a, name: d, iconClass:
|
|
10
|
+
import { useUnstyled as G, classNames as c, uButton as i, IconWrap as J, svgIconPropType as L } from "@progress/kendo-react-common";
|
|
11
|
+
function Q({ imageUrl: a, name: d, iconClass: r, svgIcon: o, imageAlt: u, buttonClasses: l, iconSize: n }) {
|
|
12
12
|
return a ? /* @__PURE__ */ e.createElement(
|
|
13
13
|
"img",
|
|
14
14
|
{
|
|
15
15
|
role: "presentation",
|
|
16
|
-
className: i
|
|
16
|
+
className: c(i.icon({ c: l })),
|
|
17
17
|
alt: u,
|
|
18
18
|
src: a
|
|
19
19
|
}
|
|
20
20
|
) : d || o ? /* @__PURE__ */ e.createElement(
|
|
21
21
|
J,
|
|
22
22
|
{
|
|
23
|
-
className: i
|
|
23
|
+
className: c(i.icon({ c: l })),
|
|
24
24
|
name: d,
|
|
25
25
|
icon: o,
|
|
26
26
|
size: n
|
|
27
27
|
}
|
|
28
|
-
) :
|
|
28
|
+
) : r ? /* @__PURE__ */ e.createElement("span", { role: "presentation", className: c(i.icon({ c: l }), r) }) : null;
|
|
29
29
|
}
|
|
30
30
|
const A = e.forwardRef((a, d) => {
|
|
31
31
|
const {
|
|
32
|
-
children:
|
|
32
|
+
children: r,
|
|
33
33
|
togglable: o,
|
|
34
34
|
dir: u,
|
|
35
35
|
disabled: l,
|
|
@@ -43,26 +43,26 @@ const A = e.forwardRef((a, d) => {
|
|
|
43
43
|
startIcon: E,
|
|
44
44
|
endIcon: N,
|
|
45
45
|
onClick: b,
|
|
46
|
-
size:
|
|
47
|
-
rounded:
|
|
48
|
-
fillMode:
|
|
49
|
-
themeColor:
|
|
46
|
+
size: k = g.size,
|
|
47
|
+
rounded: O = g.rounded,
|
|
48
|
+
fillMode: S = g.fillMode,
|
|
49
|
+
themeColor: T = g.themeColor,
|
|
50
50
|
ariaPressed: I,
|
|
51
|
-
iconSize:
|
|
51
|
+
iconSize: w,
|
|
52
52
|
...U
|
|
53
53
|
} = a, H = () => {
|
|
54
|
-
o && n === void 0 && (m.current = !
|
|
54
|
+
o && n === void 0 && (m.current = !s, z(!s));
|
|
55
55
|
}, K = (p) => {
|
|
56
56
|
H(), b && b.call(void 0, p);
|
|
57
|
-
}, m = e.useRef(void 0), R = e.useRef(null), [
|
|
57
|
+
}, m = e.useRef(void 0), R = e.useRef(null), [s, z] = e.useState(o === !0 && n === !0), W = y !== void 0 || v !== void 0 || h !== void 0 || C !== void 0, j = r !== void 0, q = G(), M = a.unstyled || q, f = M && M.uButton;
|
|
58
58
|
e.useImperativeHandle(d, () => ({
|
|
59
59
|
element: R.current,
|
|
60
|
-
selected: m.current !== void 0 ? m.current :
|
|
60
|
+
selected: m.current !== void 0 ? m.current : s
|
|
61
61
|
})), e.useMemo(() => {
|
|
62
|
-
o && n !== void 0 && n !==
|
|
62
|
+
o && n !== void 0 && n !== s && z(n);
|
|
63
63
|
}, [o, n]), e.useEffect(() => {
|
|
64
64
|
m.current = void 0;
|
|
65
|
-
}, [
|
|
65
|
+
}, [s]);
|
|
66
66
|
const D = Q({
|
|
67
67
|
name: v,
|
|
68
68
|
svgIcon: y,
|
|
@@ -70,10 +70,10 @@ const A = e.forwardRef((a, d) => {
|
|
|
70
70
|
imageUrl: C,
|
|
71
71
|
imageAlt: B,
|
|
72
72
|
buttonClasses: f,
|
|
73
|
-
iconSize:
|
|
74
|
-
}),
|
|
75
|
-
className: i
|
|
76
|
-
}), F = e.useMemo(() => o ?
|
|
73
|
+
iconSize: w
|
|
74
|
+
}), x = (p) => e.cloneElement(p, {
|
|
75
|
+
className: c(i.icon({ c: f }), p.props.className)
|
|
76
|
+
}), F = e.useMemo(() => o ? s : I || void 0, [o, s, I]);
|
|
77
77
|
return /* @__PURE__ */ e.createElement(
|
|
78
78
|
"button",
|
|
79
79
|
{
|
|
@@ -83,25 +83,25 @@ const A = e.forwardRef((a, d) => {
|
|
|
83
83
|
dir: u,
|
|
84
84
|
disabled: l,
|
|
85
85
|
onClick: K,
|
|
86
|
-
className:
|
|
87
|
-
|
|
86
|
+
className: c(
|
|
87
|
+
i.wrapper({
|
|
88
88
|
c: f,
|
|
89
89
|
isRtl: u === "rtl",
|
|
90
|
-
selected:
|
|
90
|
+
selected: s,
|
|
91
91
|
disabled: l,
|
|
92
|
-
size:
|
|
93
|
-
fillMode:
|
|
94
|
-
rounded:
|
|
95
|
-
themeColor:
|
|
92
|
+
size: k,
|
|
93
|
+
fillMode: S,
|
|
94
|
+
rounded: O,
|
|
95
|
+
themeColor: T,
|
|
96
96
|
iconButton: !j && W
|
|
97
97
|
}),
|
|
98
98
|
P
|
|
99
99
|
)
|
|
100
100
|
},
|
|
101
|
-
E &&
|
|
101
|
+
E && x(E),
|
|
102
102
|
D,
|
|
103
|
-
|
|
104
|
-
N &&
|
|
103
|
+
r && /* @__PURE__ */ e.createElement("span", { className: c(i.text({ c: f })) }, r),
|
|
104
|
+
N && x(N)
|
|
105
105
|
);
|
|
106
106
|
}), g = {
|
|
107
107
|
size: void 0,
|
|
@@ -119,7 +119,7 @@ A.propTypes = {
|
|
|
119
119
|
iconClass: t.string,
|
|
120
120
|
imageUrl: t.string,
|
|
121
121
|
imageAlt: t.string,
|
|
122
|
-
size: t.oneOf(["small", "medium", "large"]),
|
|
122
|
+
size: t.oneOf(["xsmall", "xs", "small", "medium", "large"]),
|
|
123
123
|
rounded: t.oneOf(["small", "medium", "large", "full", "none"]),
|
|
124
124
|
fillMode: t.oneOf(["flat", "link", "outline", "solid", "clear"]),
|
|
125
125
|
themeColor: t.oneOf([
|
|
@@ -131,8 +131,6 @@ A.propTypes = {
|
|
|
131
131
|
"success",
|
|
132
132
|
"warning",
|
|
133
133
|
"error",
|
|
134
|
-
"dark",
|
|
135
|
-
"light",
|
|
136
134
|
"inverse"
|
|
137
135
|
])
|
|
138
136
|
};
|
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 z=require("react"),c=require("prop-types"),b=require("./chip-list-contexts.js"),
|
|
8
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const z=require("react"),c=require("prop-types"),b=require("./chip-list-contexts.js"),n=require("@progress/kendo-react-common"),A=require("@progress/kendo-svg-icons"),u=require("./focus-reducer.js"),q=require("./data-reducer.js"),k=require("./selection-reducer.js");function B(e){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const s=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(d,l,s.get?s:{enumerable:!0,get:()=>e[l]})}}return d.default=e,Object.freeze(d)}const a=B(z),N=a.forwardRef((e,d)=>{const l=a.useRef(null),s=a.useRef(null),{disabled:y=i.disabled,fillMode:O=i.fillMode,themeColor:T=i.themeColor,size:I=i.size,rounded:C=i.rounded,dir:D=i.dir,removeIcon:E=i.removeIcon,removeSvgIcon:M=i.removeSvgIcon,removable:m=i.removable}=e,S=n.useDir(s,D);a.useImperativeHandle(l,()=>({element:s.current,props:e})),a.useImperativeHandle(d,()=>l.current);const[v,r]=a.useContext(b.ChipListSelectionContext),[x,o]=a.useContext(b.ChipListFocusContext),[,R]=a.useContext(b.ChipListDataContext),f=a.useMemo(()=>e.selected||(Array.isArray(v)?v.some(t=>t===e.value):v===e.value),[e.selected,e.value,v]),g=a.useMemo(()=>x===e.value,[e.value,x]);a.useEffect(()=>{g&&s.current&&s.current.focus()},[g]);const _=a.useCallback(t=>{r({type:k.SELECTION_ACTION.toggle,payload:e.value,event:t})},[r,e.value]),h=a.useCallback(t=>{m&&(R({type:q.CHIP_DATA_ACTION.remove,payload:e.value,event:t}),o({type:u.FOCUS_ACTION.reset,payload:e.value,event:t}),r({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,r]),F=a.useCallback(t=>{switch(t.keyCode){case n.Keys.left:o({type:u.FOCUS_ACTION.prev,payload:e.value,event:t});break;case n.Keys.right:o({type:u.FOCUS_ACTION.next,payload:e.value,event:t});break;case n.Keys.enter:r({type:k.SELECTION_ACTION.toggle,payload:e.value,event:t});break;case n.Keys.delete:h(t);break}e.onKeyDown&&e.onKeyDown.call(void 0,{target:l.current,syntheticEvent:t})},[e.onKeyDown,e.value,o,r,h]),K=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]),P=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]),w=n.useMouse(e,l,{onClick:_});return a.createElement("div",{...w,role:e.role||"button",id:e.value,style:e.style,ref:s,dir:S,tabIndex:n.getTabIndex(e.tabIndex,y,void 0),className:n.classNames("k-chip",{"k-rtl":S==="rtl","k-disabled":y,"k-selected":f,"k-focus":g,[`k-chip-${n.kendoThemeMaps.sizeMap[I]||I}`]:I,[`k-rounded-${n.kendoThemeMaps.roundedMap[C]||C}`]:C,[`k-chip-${O}`]:O,[`k-chip-${T}`]:!!T},e.className),"aria-pressed":e.role?void 0:f,"aria-disabled":y,"aria-describedby":e.ariaDescribedBy,"aria-keyshortcuts":m?"Enter Delete":void 0,onFocus:K,onBlur:P,onKeyDown:F},f&&(e.selectedIcon||e.selectedSvgIcon)&&a.createElement(n.IconWrap,{className:"k-chip-icon",name:e.selectedIcon?n.toIconName(e.selectedIcon):void 0,icon:e.selectedSvgIcon,size:"small"}),(e.icon||e.svgIcon)&&a.createElement(n.IconWrap,{className:"k-chip-icon",name:e.icon?n.toIconName(e.icon):void 0,icon:e.svgIcon,size:"small"}),e.avatar&&a.createElement("div",{className:n.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||e.text,className:"k-chip-label"},e.text)),m&&a.createElement("span",{className:"k-chip-actions"},a.createElement("span",{className:n.classNames("k-chip-action","k-chip-remove-action"),onClick:h},a.createElement(n.IconWrap,{name:E?n.toIconName(E):void 0,icon:M||A.xCircleIcon,size:"small"}))))}),L={id:c.string,text:c.string,value:c.any,dir:c.oneOf(["ltr","rtl"]),removable:c.bool,removeIcon:c.string,removeIconSvg:n.svgIconPropType,disabled:c.bool,icon:c.string,svgIcon:n.svgIconPropType,selectedIcon:c.string,selectedIconSvg:n.svgIconPropType,onRemove:c.func,dataItem:c.any,selected:c.bool,ariaDescribedBy:c.string,size:c.oneOf(["small","medium","large"]),rounded:c.oneOf(["small","medium","large","full","none"]),fillMode:c.oneOf(["outline","solid"]),themeColor:c.oneOf(["base","info","success","warning","error"])},i={disabled:!1,removable:!1,removeIcon:"k-i-x-circle",removeSvgIcon:A.xCircleIcon,dir:"ltr",size:void 0,rounded:void 0,fillMode:void 0,themeColor:void 0};N.displayName="KendoReactChip";N.propTypes=L;exports.Chip=N;
|
package/Chip/Chip.mjs
CHANGED
|
@@ -8,28 +8,28 @@
|
|
|
8
8
|
import * as a from "react";
|
|
9
9
|
import l from "prop-types";
|
|
10
10
|
import { ChipListSelectionContext as H, ChipListFocusContext as U, ChipListDataContext as W } from "./chip-list-contexts.mjs";
|
|
11
|
-
import { useDir as j, Keys as
|
|
11
|
+
import { useDir as j, Keys as u, useMouse as q, classNames as b, kendoThemeMaps as O, getTabIndex as G, IconWrap as I, toIconName as C, svgIconPropType as E } from "@progress/kendo-react-common";
|
|
12
12
|
import { xCircleIcon as w } from "@progress/kendo-svg-icons";
|
|
13
|
-
import { FOCUS_ACTION as
|
|
13
|
+
import { FOCUS_ACTION as r } from "./focus-reducer.mjs";
|
|
14
14
|
import { CHIP_DATA_ACTION as J } from "./data-reducer.mjs";
|
|
15
15
|
import { SELECTION_ACTION as x } from "./selection-reducer.mjs";
|
|
16
16
|
const z = a.forwardRef((e, A) => {
|
|
17
|
-
const
|
|
18
|
-
disabled: v =
|
|
19
|
-
fillMode: N =
|
|
20
|
-
themeColor: D =
|
|
21
|
-
size: y =
|
|
22
|
-
rounded: f =
|
|
23
|
-
dir: B =
|
|
24
|
-
removeIcon: R =
|
|
25
|
-
removeSvgIcon: F =
|
|
26
|
-
removable:
|
|
17
|
+
const o = a.useRef(null), d = a.useRef(null), {
|
|
18
|
+
disabled: v = c.disabled,
|
|
19
|
+
fillMode: N = c.fillMode,
|
|
20
|
+
themeColor: D = c.themeColor,
|
|
21
|
+
size: y = c.size,
|
|
22
|
+
rounded: f = c.rounded,
|
|
23
|
+
dir: B = c.dir,
|
|
24
|
+
removeIcon: R = c.removeIcon,
|
|
25
|
+
removeSvgIcon: F = c.removeSvgIcon,
|
|
26
|
+
removable: s = c.removable
|
|
27
27
|
} = e, S = j(d, B);
|
|
28
|
-
a.useImperativeHandle(
|
|
28
|
+
a.useImperativeHandle(o, () => ({
|
|
29
29
|
element: d.current,
|
|
30
30
|
props: e
|
|
31
|
-
})), a.useImperativeHandle(A, () =>
|
|
32
|
-
const [
|
|
31
|
+
})), a.useImperativeHandle(A, () => o.current);
|
|
32
|
+
const [m, i] = a.useContext(H), [T, n] = a.useContext(U), [, M] = a.useContext(W), h = a.useMemo(() => e.selected || (Array.isArray(m) ? m.some((t) => t === e.value) : m === e.value), [e.selected, e.value, m]), k = a.useMemo(() => T === e.value, [e.value, T]);
|
|
33
33
|
a.useEffect(() => {
|
|
34
34
|
k && d.current && d.current.focus();
|
|
35
35
|
}, [k]);
|
|
@@ -40,51 +40,51 @@ const z = a.forwardRef((e, A) => {
|
|
|
40
40
|
[i, e.value]
|
|
41
41
|
), g = a.useCallback(
|
|
42
42
|
(t) => {
|
|
43
|
-
|
|
44
|
-
target:
|
|
43
|
+
s && (M({ type: J.remove, payload: e.value, event: t }), n({ type: r.reset, payload: e.value, event: t }), i({ type: x.remove, payload: e.value, event: t }), e.onRemove && e.onRemove.call(void 0, {
|
|
44
|
+
target: o.current,
|
|
45
45
|
syntheticEvent: t
|
|
46
46
|
}));
|
|
47
47
|
},
|
|
48
|
-
[e.onRemove, e.value,
|
|
48
|
+
[e.onRemove, e.value, s, M, n, i]
|
|
49
49
|
), L = a.useCallback(
|
|
50
50
|
(t) => {
|
|
51
51
|
switch (t.keyCode) {
|
|
52
|
-
case
|
|
53
|
-
|
|
52
|
+
case u.left:
|
|
53
|
+
n({ type: r.prev, payload: e.value, event: t });
|
|
54
54
|
break;
|
|
55
|
-
case
|
|
56
|
-
|
|
55
|
+
case u.right:
|
|
56
|
+
n({ type: r.next, payload: e.value, event: t });
|
|
57
57
|
break;
|
|
58
|
-
case
|
|
58
|
+
case u.enter:
|
|
59
59
|
i({ type: x.toggle, payload: e.value, event: t });
|
|
60
60
|
break;
|
|
61
|
-
case
|
|
61
|
+
case u.delete:
|
|
62
62
|
g(t);
|
|
63
63
|
break;
|
|
64
64
|
}
|
|
65
65
|
e.onKeyDown && e.onKeyDown.call(void 0, {
|
|
66
|
-
target:
|
|
66
|
+
target: o.current,
|
|
67
67
|
syntheticEvent: t
|
|
68
68
|
});
|
|
69
69
|
},
|
|
70
|
-
[e.onKeyDown, e.value,
|
|
70
|
+
[e.onKeyDown, e.value, n, i, g]
|
|
71
71
|
), P = a.useCallback(
|
|
72
72
|
(t) => {
|
|
73
|
-
|
|
74
|
-
target:
|
|
73
|
+
n({ payload: e.value, type: r.current, event: t }), e.onFocus && e.onFocus.call(void 0, {
|
|
74
|
+
target: o.current,
|
|
75
75
|
syntheticEvent: t
|
|
76
76
|
});
|
|
77
77
|
},
|
|
78
|
-
[e.onFocus, e.value,
|
|
78
|
+
[e.onFocus, e.value, n]
|
|
79
79
|
), $ = a.useCallback(
|
|
80
80
|
(t) => {
|
|
81
|
-
e.onBlur && e.onBlur.call(void 0, {
|
|
82
|
-
target:
|
|
81
|
+
n({ type: r.reset, payload: e.value, event: t }), e.onBlur && e.onBlur.call(void 0, {
|
|
82
|
+
target: o.current,
|
|
83
83
|
syntheticEvent: t
|
|
84
84
|
});
|
|
85
85
|
},
|
|
86
|
-
[e.onBlur]
|
|
87
|
-
), _ = q(e,
|
|
86
|
+
[e.onBlur, e.value, n]
|
|
87
|
+
), _ = q(e, o, { onClick: K });
|
|
88
88
|
return /* @__PURE__ */ a.createElement(
|
|
89
89
|
"div",
|
|
90
90
|
{
|
|
@@ -112,7 +112,7 @@ const z = a.forwardRef((e, A) => {
|
|
|
112
112
|
"aria-pressed": e.role ? void 0 : h,
|
|
113
113
|
"aria-disabled": v,
|
|
114
114
|
"aria-describedby": e.ariaDescribedBy,
|
|
115
|
-
"aria-keyshortcuts":
|
|
115
|
+
"aria-keyshortcuts": s ? "Enter Delete" : void 0,
|
|
116
116
|
onFocus: P,
|
|
117
117
|
onBlur: $,
|
|
118
118
|
onKeyDown: L
|
|
@@ -148,7 +148,7 @@ const z = a.forwardRef((e, A) => {
|
|
|
148
148
|
/* @__PURE__ */ a.createElement("span", { className: "k-avatar-image" }, /* @__PURE__ */ a.createElement("img", { src: e.avatar.image, alt: e.avatar.imageAlt }))
|
|
149
149
|
),
|
|
150
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 || e.text, className: "k-chip-label" }, e.text)),
|
|
151
|
-
|
|
151
|
+
s && /* @__PURE__ */ a.createElement("span", { className: "k-chip-actions" }, /* @__PURE__ */ a.createElement("span", { className: b("k-chip-action", "k-chip-remove-action"), onClick: g }, /* @__PURE__ */ a.createElement(
|
|
152
152
|
I,
|
|
153
153
|
{
|
|
154
154
|
name: R ? C(R) : void 0,
|
|
@@ -178,7 +178,7 @@ const z = a.forwardRef((e, A) => {
|
|
|
178
178
|
rounded: l.oneOf(["small", "medium", "large", "full", "none"]),
|
|
179
179
|
fillMode: l.oneOf(["outline", "solid"]),
|
|
180
180
|
themeColor: l.oneOf(["base", "info", "success", "warning", "error"])
|
|
181
|
-
},
|
|
181
|
+
}, c = {
|
|
182
182
|
disabled: !1,
|
|
183
183
|
removable: !1,
|
|
184
184
|
removeIcon: "k-i-x-circle",
|
|
@@ -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"),
|
|
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"),O=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,M=t.forwardRef((d,g)=>{const{align:r=C.align,alignOffset:k,className:q,disabled:f,icon:R,svgIcon:A,iconClass:$,id:j,items:n,item:ee,text:I,positionMode:w=C.positionMode,size:y=C.size,style:te,rounded:E=C.rounded,themeColor:F=C.themeColor,overlayStyle:oe,tabIndex:se,accessKey:ae,popupSettings:x={},modal:ne,onClick:P,onItemClick:_,onFocus:S,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),[D,m]=t.useState(!1),[h,l]=t.useState(-1),ce=o.useId()+"-button-id",T=o.useDir(i,d.dir),v=T==="rtl",N=o.useId()+"-list-id";t.useEffect(()=>{O.position(i,r,k,v)},[i,r,k,v]),t.useEffect(()=>{D&&i&&i.current&&i.current.focus()},[D,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&&P?o.dispatchEvent(P,e,p(),void 0):(u(!c),m(!0),l(c?-1:0),b(e,!c)))},[u,m,l,P,b,c,n,f]),ue=t.useCallback(e=>{m(!0),l(c?0:-1),S&&o.dispatchEvent(S,e,p(),void 0)},[S,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()},[]),z=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),z(e,a),b(e,!1))},[l,u,z,b]),me=t.useCallback(e=>{o.getActiveElement(document)===i.current&&e.preventDefault()},[i]),be=t.useCallback(e=>{const a=h,B=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&&z(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(B-1);break;case o.Keys.down:case o.Keys.right:e.preventDefault(),l(a+1>=B?0:a+1);break;case o.Keys.up:case o.Keys.left:e.preventDefault(),l(a-1<0?B-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":w==="absolute","k-pos-fixed":w==="fixed","k-focus":D,[`k-rounded-${o.kendoThemeMaps.roundedMap[E]||E}`]:E,[`k-fab-${F}`]:F},`k-${r.vertical}-${r.horizontal}`,q),[F,y,E,f,w,r,D,q]),ke=n&&n.map((e,a)=>t.createElement(he.FloatingActionButtonItem,{...e,key:a,index:a,id:`${N}-${a}`,disabled:f||e.disabled,focused:h===a,dataItem:e,item:ee,className:o.classNames(e.className,O.getTextDirectionClass(T||"ltr",r.horizontal)),onClick:pe,onDown:me})),V=!!((R||A)&&!I),Y=(i.current?i.current.offsetWidth:0)/2-32/2;let K;return R||A?K=t.createElement(o.IconWrap,{className:"k-fab-icon",name:R,icon:A}):$?K=t.createElement("span",{role:"presentation",className:$}):K=null,t.createElement(o.ZIndexContext.Provider,{value:U},t.createElement(t.Fragment,null,t.createElement("button",{ref:i,id:j||ce,role:"button",type:"button","aria-disabled":f,"aria-expanded":n?c:void 0,"aria-haspopup":!!n,"aria-label":`${I||""} floatingactionbutton`,"aria-owns":n?N:void 0,"aria-activedescendant":h>=0&&n?`${N}-${h}`:void 0,tabIndex:o.getTabIndex(se,f),accessKey:ae,dir:T,disabled:f,className:ge,style:te,onClick:Q,onMouseDown:fe,onFocus:ue,onBlur:de,onKeyDown:be,...le},K,I&&t.createElement("span",{className:"k-fab-text"},I)),ne&&c&&t.createElement("div",{className:"k-overlay",style:{zIndex:U,...oe}}),t.createElement(ve.Popup,{ref:re,anchor:i.current,show:c,animate:x.animate,popupClass:o.classNames("k-popup-transparent k-fab-popup",x.popupClass),anchorAlign:x.anchorAlign||O.getAnchorAlign(r,v),popupAlign:x.popupAlign||O.getPopupAlign(r,v),style:{boxShadow:"none"}},t.createElement("ul",{ref:ie,role:"menu","aria-labelledby":j,id:N,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))))});M.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"};M.displayName="KendoFloatingActionButton";exports.FloatingActionButton=M;
|