@itwin/components-react 4.0.0-dev.18 → 4.0.0-dev.19
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/lib/cjs/components-react/selectable-content/SelectableContent.d.ts +2 -0
- package/lib/cjs/components-react/selectable-content/SelectableContent.d.ts.map +1 -1
- package/lib/cjs/components-react/selectable-content/SelectableContent.js +3 -3
- package/lib/cjs/components-react/selectable-content/SelectableContent.js.map +1 -1
- package/lib/esm/components-react/selectable-content/SelectableContent.d.ts +2 -0
- package/lib/esm/components-react/selectable-content/SelectableContent.d.ts.map +1 -1
- package/lib/esm/components-react/selectable-content/SelectableContent.js +3 -3
- package/lib/esm/components-react/selectable-content/SelectableContent.js.map +1 -1
- package/package.json +3 -3
|
@@ -22,6 +22,7 @@ export interface ControlledSelectableContentProps {
|
|
|
22
22
|
onSelectedContentIdChanged?: (contentId: string) => void;
|
|
23
23
|
children: SelectableContentDefinition[];
|
|
24
24
|
selectAriaLabel?: string;
|
|
25
|
+
disabled?: boolean;
|
|
25
26
|
}
|
|
26
27
|
/**
|
|
27
28
|
* A fully-controlled component that accepts a list of child components with ids and labels and
|
|
@@ -38,6 +39,7 @@ export interface SelectableContentProps {
|
|
|
38
39
|
defaultSelectedContentId: string;
|
|
39
40
|
children: SelectableContentDefinition[];
|
|
40
41
|
selectAriaLabel?: string;
|
|
42
|
+
disabled?: boolean;
|
|
41
43
|
}
|
|
42
44
|
/**
|
|
43
45
|
* An uncontrolled component that accepts a list of child components with ids and labels and
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectableContent.d.ts","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;GAIG;AACH,MAAM,WAAW,2BAA2B;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED;;;GAGG;AACH,MAAM,WAAW,gCAAgC;IAC/C,iBAAiB,EAAE,MAAM,CAAC;IAC1B,0BAA0B,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,QAAQ,EAAE,2BAA2B,EAAE,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectableContent.d.ts","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;GAIG;AACH,MAAM,WAAW,2BAA2B;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED;;;GAGG;AACH,MAAM,WAAW,gCAAgC;IAC/C,iBAAiB,EAAE,MAAM,CAAC;IAC1B,0BAA0B,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,QAAQ,EAAE,2BAA2B,EAAE,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,eAiClF;AAED;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,wBAAwB,EAAE,MAAM,CAAC;IACjC,QAAQ,EAAE,2BAA2B,EAAE,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAU9D"}
|
|
@@ -42,7 +42,7 @@ const itwinui_react_1 = require("@itwin/itwinui-react");
|
|
|
42
42
|
* @public
|
|
43
43
|
*/
|
|
44
44
|
function ControlledSelectableContent(props) {
|
|
45
|
-
const { onSelectedContentIdChanged } = props;
|
|
45
|
+
const { onSelectedContentIdChanged, disabled } = props;
|
|
46
46
|
const onContentIdSelected = React.useCallback((newValue) => {
|
|
47
47
|
onSelectedContentIdChanged && onSelectedContentIdChanged(newValue);
|
|
48
48
|
}, [onSelectedContentIdChanged]);
|
|
@@ -55,7 +55,7 @@ function ControlledSelectableContent(props) {
|
|
|
55
55
|
}, [props.children]);
|
|
56
56
|
return (React.createElement("div", { className: "components-selectable-content" },
|
|
57
57
|
React.createElement("div", { className: "components-selectable-content-header" }, options.length > 0 &&
|
|
58
|
-
React.createElement(itwinui_react_1.Select, { onChange: onContentIdSelected, size: "small", className: "components-selectable-content-selector", "aria-label": props.selectAriaLabel, value: selectedContent.id, options: options })),
|
|
58
|
+
React.createElement(itwinui_react_1.Select, { onChange: onContentIdSelected, size: "small", className: "components-selectable-content-selector", "aria-label": props.selectAriaLabel, value: selectedContent.id, options: options, disabled: disabled })),
|
|
59
59
|
React.createElement("div", { className: "components-selectable-content-wrapper" }, selectedContent?.render())));
|
|
60
60
|
}
|
|
61
61
|
exports.ControlledSelectableContent = ControlledSelectableContent;
|
|
@@ -70,7 +70,7 @@ function SelectableContent(props) {
|
|
|
70
70
|
const onSelectedContentIdChanged = React.useCallback((id) => {
|
|
71
71
|
setSelectedContentId(id);
|
|
72
72
|
}, []);
|
|
73
|
-
return (React.createElement(ControlledSelectableContent, { selectedContentId: selectedContentId, onSelectedContentIdChanged: onSelectedContentIdChanged, selectAriaLabel: props.selectAriaLabel }, props.children));
|
|
73
|
+
return (React.createElement(ControlledSelectableContent, { selectedContentId: selectedContentId, onSelectedContentIdChanged: onSelectedContentIdChanged, selectAriaLabel: props.selectAriaLabel, disabled: props.disabled }, props.children));
|
|
74
74
|
}
|
|
75
75
|
exports.SelectableContent = SelectableContent;
|
|
76
76
|
//# sourceMappingURL=SelectableContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectableContent.js","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,oCAAkC;AAClC,6CAA+B;AAC/B,wDAA4D;
|
|
1
|
+
{"version":3,"file":"SelectableContent.js","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":";AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;;;;;;;;;;;;;;;;;;;;;;;;;;AAEH,oCAAkC;AAClC,6CAA+B;AAC/B,wDAA4D;AAyB5D;;;;;GAKG;AACH,SAAgB,2BAA2B,CAAC,KAAuC;IACjF,MAAM,EAAE,0BAA0B,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEvD,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAQ,EAAE;QACvE,0BAA0B,IAAI,0BAA0B,CAAC,QAAQ,CAAC,CAAC;IACrE,CAAC,EAAE,CAAC,0BAA0B,CAAC,CAAC,CAAC;IAEjC,MAAM,eAAe,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,CAAC,iBAAiB,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC5H,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YAC3C,KAAK,EAAE,YAAY,CAAC,KAAK;YACzB,KAAK,EAAE,YAAY,CAAC,EAAE;SACvB,CAAC,CAA2B,CAAC;IAChC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,6BAAK,SAAS,EAAC,+BAA+B;QAC5C,6BAAK,SAAS,EAAC,sCAAsC,IAClD,OAAO,CAAC,MAAM,GAAG,CAAC;YACjB,oBAAC,sBAAM,IAAC,QAAQ,EAAE,mBAAmB,EAAE,IAAI,EAAC,OAAO,EACjD,SAAS,EAAC,wCAAwC,gBACtC,KAAK,CAAC,eAAe,EACjC,KAAK,EAAE,eAAe,CAAC,EAAE,EACzB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,GAClB,CAEA;QACN,6BAAK,SAAS,EAAC,uCAAuC,IACnD,eAAe,EAAE,MAAM,EAAE,CACtB,CACF,CACP,CAAC;AACJ,CAAC;AAjCD,kEAiCC;AAaD;;;;;GAKG;AACH,SAAgB,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC;IACjG,MAAM,0BAA0B,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,EAAU,EAAE,EAAE;QAClE,oBAAoB,CAAC,EAAE,CAAC,CAAC;IAC3B,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL,oBAAC,2BAA2B,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,0BAA0B,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IACxL,KAAK,CAAC,QAAQ,CACa,CAC/B,CAAC;AACJ,CAAC;AAVD,8CAUC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module SelectableContent\r\n */\r\n\r\nimport \"./SelectableContent.scss\";\r\nimport * as React from \"react\";\r\nimport { Select, SelectOption } from \"@itwin/itwinui-react\";\r\n\r\n/**\r\n * A definition for content displayed in [[ControlledSelectableContent]] and\r\n * [[SelectableContent]] components.\r\n * @public\r\n */\r\nexport interface SelectableContentDefinition {\r\n id: string;\r\n label: string;\r\n render: () => React.ReactNode;\r\n}\r\n\r\n/**\r\n * [[ControlledSelectableContent]] component properties\r\n * @public\r\n */\r\nexport interface ControlledSelectableContentProps {\r\n selectedContentId: string;\r\n onSelectedContentIdChanged?: (contentId: string) => void;\r\n children: SelectableContentDefinition[];\r\n selectAriaLabel?: string;\r\n disabled?: boolean;\r\n}\r\n\r\n/**\r\n * A fully-controlled component that accepts a list of child components with ids and labels and\r\n * renders a select box at the top, allowing to choose which of the provided child components\r\n * should be rendered at the bottom.\r\n * @public\r\n */\r\nexport function ControlledSelectableContent(props: ControlledSelectableContentProps) {\r\n const { onSelectedContentIdChanged, disabled } = props;\r\n\r\n const onContentIdSelected = React.useCallback((newValue: string): void => {\r\n onSelectedContentIdChanged && onSelectedContentIdChanged(newValue);\r\n }, [onSelectedContentIdChanged]);\r\n\r\n const selectedContent = props.children.find((contentDef) => contentDef.id === props.selectedContentId) ?? props.children[0];\r\n const options = React.useMemo(() => {\r\n return props.children.map((componentDef) => ({\r\n label: componentDef.label,\r\n value: componentDef.id,\r\n })) as SelectOption<string>[];\r\n }, [props.children]);\r\n\r\n return (\r\n <div className=\"components-selectable-content\">\r\n <div className=\"components-selectable-content-header\">\r\n {options.length > 0 &&\r\n <Select onChange={onContentIdSelected} size=\"small\"\r\n className=\"components-selectable-content-selector\"\r\n aria-label={props.selectAriaLabel}\r\n value={selectedContent.id}\r\n options={options}\r\n disabled={disabled}\r\n />\r\n }\r\n </div>\r\n <div className=\"components-selectable-content-wrapper\">\r\n {selectedContent?.render()}\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\n/**\r\n * [[SelectableContent]] component properties\r\n * @public\r\n */\r\nexport interface SelectableContentProps {\r\n defaultSelectedContentId: string;\r\n children: SelectableContentDefinition[];\r\n selectAriaLabel?: string;\r\n disabled?: boolean;\r\n}\r\n\r\n/**\r\n * An uncontrolled component that accepts a list of child components with ids and labels and\r\n * renders a select box at the top, allowing to choose which of the provided child components\r\n * should be rendered at the bottom.\r\n * @public\r\n */\r\nexport function SelectableContent(props: SelectableContentProps) {\r\n const [selectedContentId, setSelectedContentId] = React.useState(props.defaultSelectedContentId);\r\n const onSelectedContentIdChanged = React.useCallback((id: string) => {\r\n setSelectedContentId(id);\r\n }, []);\r\n return (\r\n <ControlledSelectableContent selectedContentId={selectedContentId} onSelectedContentIdChanged={onSelectedContentIdChanged} selectAriaLabel={props.selectAriaLabel} disabled={props.disabled}>\r\n {props.children}\r\n </ControlledSelectableContent>\r\n );\r\n}\r\n"]}
|
|
@@ -22,6 +22,7 @@ export interface ControlledSelectableContentProps {
|
|
|
22
22
|
onSelectedContentIdChanged?: (contentId: string) => void;
|
|
23
23
|
children: SelectableContentDefinition[];
|
|
24
24
|
selectAriaLabel?: string;
|
|
25
|
+
disabled?: boolean;
|
|
25
26
|
}
|
|
26
27
|
/**
|
|
27
28
|
* A fully-controlled component that accepts a list of child components with ids and labels and
|
|
@@ -38,6 +39,7 @@ export interface SelectableContentProps {
|
|
|
38
39
|
defaultSelectedContentId: string;
|
|
39
40
|
children: SelectableContentDefinition[];
|
|
40
41
|
selectAriaLabel?: string;
|
|
42
|
+
disabled?: boolean;
|
|
41
43
|
}
|
|
42
44
|
/**
|
|
43
45
|
* An uncontrolled component that accepts a list of child components with ids and labels and
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectableContent.d.ts","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;GAIG;AACH,MAAM,WAAW,2BAA2B;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED;;;GAGG;AACH,MAAM,WAAW,gCAAgC;IAC/C,iBAAiB,EAAE,MAAM,CAAC;IAC1B,0BAA0B,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,QAAQ,EAAE,2BAA2B,EAAE,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectableContent.d.ts","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":"AAKA;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B;;;;GAIG;AACH,MAAM,WAAW,2BAA2B;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,KAAK,CAAC,SAAS,CAAC;CAC/B;AAED;;;GAGG;AACH,MAAM,WAAW,gCAAgC;IAC/C,iBAAiB,EAAE,MAAM,CAAC;IAC1B,0BAA0B,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,QAAQ,EAAE,2BAA2B,EAAE,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,gCAAgC,eAiClF;AAED;;;GAGG;AACH,MAAM,WAAW,sBAAsB;IACrC,wBAAwB,EAAE,MAAM,CAAC;IACjC,QAAQ,EAAE,2BAA2B,EAAE,CAAC;IACxC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,eAU9D"}
|
|
@@ -16,7 +16,7 @@ import { Select } from "@itwin/itwinui-react";
|
|
|
16
16
|
* @public
|
|
17
17
|
*/
|
|
18
18
|
export function ControlledSelectableContent(props) {
|
|
19
|
-
const { onSelectedContentIdChanged } = props;
|
|
19
|
+
const { onSelectedContentIdChanged, disabled } = props;
|
|
20
20
|
const onContentIdSelected = React.useCallback((newValue) => {
|
|
21
21
|
onSelectedContentIdChanged && onSelectedContentIdChanged(newValue);
|
|
22
22
|
}, [onSelectedContentIdChanged]);
|
|
@@ -29,7 +29,7 @@ export function ControlledSelectableContent(props) {
|
|
|
29
29
|
}, [props.children]);
|
|
30
30
|
return (React.createElement("div", { className: "components-selectable-content" },
|
|
31
31
|
React.createElement("div", { className: "components-selectable-content-header" }, options.length > 0 &&
|
|
32
|
-
React.createElement(Select, { onChange: onContentIdSelected, size: "small", className: "components-selectable-content-selector", "aria-label": props.selectAriaLabel, value: selectedContent.id, options: options })),
|
|
32
|
+
React.createElement(Select, { onChange: onContentIdSelected, size: "small", className: "components-selectable-content-selector", "aria-label": props.selectAriaLabel, value: selectedContent.id, options: options, disabled: disabled })),
|
|
33
33
|
React.createElement("div", { className: "components-selectable-content-wrapper" }, selectedContent?.render())));
|
|
34
34
|
}
|
|
35
35
|
/**
|
|
@@ -43,6 +43,6 @@ export function SelectableContent(props) {
|
|
|
43
43
|
const onSelectedContentIdChanged = React.useCallback((id) => {
|
|
44
44
|
setSelectedContentId(id);
|
|
45
45
|
}, []);
|
|
46
|
-
return (React.createElement(ControlledSelectableContent, { selectedContentId: selectedContentId, onSelectedContentIdChanged: onSelectedContentIdChanged, selectAriaLabel: props.selectAriaLabel }, props.children));
|
|
46
|
+
return (React.createElement(ControlledSelectableContent, { selectedContentId: selectedContentId, onSelectedContentIdChanged: onSelectedContentIdChanged, selectAriaLabel: props.selectAriaLabel, disabled: props.disabled }, props.children));
|
|
47
47
|
}
|
|
48
48
|
//# sourceMappingURL=SelectableContent.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SelectableContent.js","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAgB,MAAM,sBAAsB,CAAC;
|
|
1
|
+
{"version":3,"file":"SelectableContent.js","sourceRoot":"","sources":["../../../../src/components-react/selectable-content/SelectableContent.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F,4CAA4C;AAC5C;;GAEG;AAEH,OAAO,0BAA0B,CAAC;AAClC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,MAAM,EAAgB,MAAM,sBAAsB,CAAC;AAyB5D;;;;;GAKG;AACH,MAAM,UAAU,2BAA2B,CAAC,KAAuC;IACjF,MAAM,EAAE,0BAA0B,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAC;IAEvD,MAAM,mBAAmB,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,QAAgB,EAAQ,EAAE;QACvE,0BAA0B,IAAI,0BAA0B,CAAC,QAAQ,CAAC,CAAC;IACrE,CAAC,EAAE,CAAC,0BAA0B,CAAC,CAAC,CAAC;IAEjC,MAAM,eAAe,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC,UAAU,EAAE,EAAE,CAAC,UAAU,CAAC,EAAE,KAAK,KAAK,CAAC,iBAAiB,CAAC,IAAI,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC5H,MAAM,OAAO,GAAG,KAAK,CAAC,OAAO,CAAC,GAAG,EAAE;QACjC,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,YAAY,EAAE,EAAE,CAAC,CAAC;YAC3C,KAAK,EAAE,YAAY,CAAC,KAAK;YACzB,KAAK,EAAE,YAAY,CAAC,EAAE;SACvB,CAAC,CAA2B,CAAC;IAChC,CAAC,EAAE,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC;IAErB,OAAO,CACL,6BAAK,SAAS,EAAC,+BAA+B;QAC5C,6BAAK,SAAS,EAAC,sCAAsC,IAClD,OAAO,CAAC,MAAM,GAAG,CAAC;YACjB,oBAAC,MAAM,IAAC,QAAQ,EAAE,mBAAmB,EAAE,IAAI,EAAC,OAAO,EACjD,SAAS,EAAC,wCAAwC,gBACtC,KAAK,CAAC,eAAe,EACjC,KAAK,EAAE,eAAe,CAAC,EAAE,EACzB,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,QAAQ,GAClB,CAEA;QACN,6BAAK,SAAS,EAAC,uCAAuC,IACnD,eAAe,EAAE,MAAM,EAAE,CACtB,CACF,CACP,CAAC;AACJ,CAAC;AAaD;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,wBAAwB,CAAC,CAAC;IACjG,MAAM,0BAA0B,GAAG,KAAK,CAAC,WAAW,CAAC,CAAC,EAAU,EAAE,EAAE;QAClE,oBAAoB,CAAC,EAAE,CAAC,CAAC;IAC3B,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,OAAO,CACL,oBAAC,2BAA2B,IAAC,iBAAiB,EAAE,iBAAiB,EAAE,0BAA0B,EAAE,0BAA0B,EAAE,eAAe,EAAE,KAAK,CAAC,eAAe,EAAE,QAAQ,EAAE,KAAK,CAAC,QAAQ,IACxL,KAAK,CAAC,QAAQ,CACa,CAC/B,CAAC;AACJ,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\r\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\r\n* See LICENSE.md in the project root for license terms and full copyright notice.\r\n*--------------------------------------------------------------------------------------------*/\r\n/* eslint-disable deprecation/deprecation */\r\n/** @packageDocumentation\r\n * @module SelectableContent\r\n */\r\n\r\nimport \"./SelectableContent.scss\";\r\nimport * as React from \"react\";\r\nimport { Select, SelectOption } from \"@itwin/itwinui-react\";\r\n\r\n/**\r\n * A definition for content displayed in [[ControlledSelectableContent]] and\r\n * [[SelectableContent]] components.\r\n * @public\r\n */\r\nexport interface SelectableContentDefinition {\r\n id: string;\r\n label: string;\r\n render: () => React.ReactNode;\r\n}\r\n\r\n/**\r\n * [[ControlledSelectableContent]] component properties\r\n * @public\r\n */\r\nexport interface ControlledSelectableContentProps {\r\n selectedContentId: string;\r\n onSelectedContentIdChanged?: (contentId: string) => void;\r\n children: SelectableContentDefinition[];\r\n selectAriaLabel?: string;\r\n disabled?: boolean;\r\n}\r\n\r\n/**\r\n * A fully-controlled component that accepts a list of child components with ids and labels and\r\n * renders a select box at the top, allowing to choose which of the provided child components\r\n * should be rendered at the bottom.\r\n * @public\r\n */\r\nexport function ControlledSelectableContent(props: ControlledSelectableContentProps) {\r\n const { onSelectedContentIdChanged, disabled } = props;\r\n\r\n const onContentIdSelected = React.useCallback((newValue: string): void => {\r\n onSelectedContentIdChanged && onSelectedContentIdChanged(newValue);\r\n }, [onSelectedContentIdChanged]);\r\n\r\n const selectedContent = props.children.find((contentDef) => contentDef.id === props.selectedContentId) ?? props.children[0];\r\n const options = React.useMemo(() => {\r\n return props.children.map((componentDef) => ({\r\n label: componentDef.label,\r\n value: componentDef.id,\r\n })) as SelectOption<string>[];\r\n }, [props.children]);\r\n\r\n return (\r\n <div className=\"components-selectable-content\">\r\n <div className=\"components-selectable-content-header\">\r\n {options.length > 0 &&\r\n <Select onChange={onContentIdSelected} size=\"small\"\r\n className=\"components-selectable-content-selector\"\r\n aria-label={props.selectAriaLabel}\r\n value={selectedContent.id}\r\n options={options}\r\n disabled={disabled}\r\n />\r\n }\r\n </div>\r\n <div className=\"components-selectable-content-wrapper\">\r\n {selectedContent?.render()}\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\n/**\r\n * [[SelectableContent]] component properties\r\n * @public\r\n */\r\nexport interface SelectableContentProps {\r\n defaultSelectedContentId: string;\r\n children: SelectableContentDefinition[];\r\n selectAriaLabel?: string;\r\n disabled?: boolean;\r\n}\r\n\r\n/**\r\n * An uncontrolled component that accepts a list of child components with ids and labels and\r\n * renders a select box at the top, allowing to choose which of the provided child components\r\n * should be rendered at the bottom.\r\n * @public\r\n */\r\nexport function SelectableContent(props: SelectableContentProps) {\r\n const [selectedContentId, setSelectedContentId] = React.useState(props.defaultSelectedContentId);\r\n const onSelectedContentIdChanged = React.useCallback((id: string) => {\r\n setSelectedContentId(id);\r\n }, []);\r\n return (\r\n <ControlledSelectableContent selectedContentId={selectedContentId} onSelectedContentIdChanged={onSelectedContentIdChanged} selectAriaLabel={props.selectAriaLabel} disabled={props.disabled}>\r\n {props.children}\r\n </ControlledSelectableContent>\r\n );\r\n}\r\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@itwin/components-react",
|
|
3
|
-
"version": "4.0.0-dev.
|
|
3
|
+
"version": "4.0.0-dev.19",
|
|
4
4
|
"description": "iTwin.js UI complex components",
|
|
5
5
|
"main": "lib/cjs/components-react.js",
|
|
6
6
|
"module": "lib/esm/components-react.js",
|
|
@@ -24,7 +24,7 @@
|
|
|
24
24
|
"peerDependencies": {
|
|
25
25
|
"@itwin/appui-abstract": ">=3.7.0",
|
|
26
26
|
"@itwin/core-bentley": ">=3.7.0",
|
|
27
|
-
"@itwin/core-react": "^4.0.0-dev.
|
|
27
|
+
"@itwin/core-react": "^4.0.0-dev.19",
|
|
28
28
|
"react": "^17.0.0 || ^18.0.0",
|
|
29
29
|
"react-dom": "^17.0.0 || ^18.0.0"
|
|
30
30
|
},
|
|
@@ -39,7 +39,7 @@
|
|
|
39
39
|
"@itwin/core-common": "^3.7.0",
|
|
40
40
|
"@itwin/core-geometry": "^3.7.0",
|
|
41
41
|
"@itwin/core-i18n": "^3.7.0",
|
|
42
|
-
"@itwin/core-react": "4.0.0-dev.
|
|
42
|
+
"@itwin/core-react": "4.0.0-dev.19",
|
|
43
43
|
"@itwin/eslint-plugin": "^3.7.0",
|
|
44
44
|
"@testing-library/dom": "^8.11.2",
|
|
45
45
|
"@testing-library/react": "^12.0.0",
|