@itwin/core-react 4.0.0-dev.2 → 4.0.0-dev.4

package/lib/esm/core-react/expandable/ExpandableBlock.js

@@ -0,0 +1,32 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Expandable
+ */
+import "./ExpandableBlock.scss";
+import classnames from "classnames";
+import * as React from "react";
+/** ExpandableBlock React component is a container that shows and hides child content.
+ * @public
+ * @deprecated in 3.0. Use ExpandableBlock from itwinui-react instead
+ */
+export class ExpandableBlock extends React.PureComponent {
+    render() {
+        var _a;
+        const cName = classnames("uicore-expandable-blocks-block", this.props.caption && "with-caption", this.props.isExpanded ? "is-expanded" : "is-collapsed", this.props.className);
+        const ariaExpanded = this.props.isExpanded ? "true" : "false";
+        const tabIndex = (this.props.onKeyPress || this.props.onKeyDown) ? 0 : undefined;
+        const title = (_a = this.props.tooltip) !== null && _a !== void 0 ? _a : (typeof this.props.title == "string" ? this.props.title : undefined);
+        return (React.createElement("div", { className: cName, style: this.props.style },
+            React.createElement("div", { role: "button", "aria-expanded": ariaExpanded, className: "header", onClick: this.props.onClick, onKeyPress: this.props.onKeyPress, onKeyDown: this.props.onKeyDown, tabIndex: tabIndex },
+                React.createElement("div", { className: "icon-container" },
+                    React.createElement("i", { className: "icon icon-chevron-right" })),
+                this.props.caption &&
+                    React.createElement("div", { className: "caption", title: this.props.caption }, this.props.caption),
+                React.createElement("div", { className: "title", title: title }, this.props.title)),
+            React.createElement("div", { className: "content" }, this.props.isExpanded && this.props.children)));
+    }
+}
+//# sourceMappingURL=ExpandableBlock.js.map

package/lib/esm/core-react/expandable/ExpandableBlock.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExpandableBlock.js","sourceRoot":"","sources":["../../../../src/core-react/expandable/ExpandableBlock.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,wBAAwB,CAAC;AAChC,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAwB/B;;;GAGG;AACH,MAAM,OAAO,eAAgB,SAAQ,KAAK,CAAC,aAAmC;IAE5D,MAAM;;QACpB,MAAM,KAAK,GAAG,UAAU,CACtB,gCAAgC,EAChC,IAAI,CAAC,KAAK,CAAC,OAAO,IAAI,cAAc,EACpC,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,cAAc,EACtD,IAAI,CAAC,KAAK,CAAC,SAAS,CACrB,CAAC;QACF,MAAM,YAAY,GAAG,IAAI,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;QAC9D,MAAM,QAAQ,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC;QAEjF,MAAM,KAAK,GAAG,MAAA,IAAI,CAAC,KAAK,CAAC,OAAO,mCAAI,CAAC,OAAO,IAAI,CAAC,KAAK,CAAC,KAAK,IAAI,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;QAEzG,OAAO,CACL,6BAAK,SAAS,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK;YAC5C,6BAAK,IAAI,EAAC,QAAQ,mBAAgB,YAAY,EAAE,SAAS,EAAC,QAAQ,EAAC,OAAO,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,EAC5F,UAAU,EAAE,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,SAAS,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ;gBACtF,6BAAK,SAAS,EAAC,gBAAgB;oBAC7B,2BAAG,SAAS,EAAC,yBAAyB,GAAG,CACrC;gBACL,IAAI,CAAC,KAAK,CAAC,OAAO;oBACjB,6BAAK,SAAS,EAAC,SAAS,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,OAAO,IAC/C,IAAI,CAAC,KAAK,CAAC,OAAO,CACf;gBAER,6BAAK,SAAS,EAAC,OAAO,EAAC,KAAK,EAAE,KAAK,IAChC,IAAI,CAAC,KAAK,CAAC,KAAK,CACb,CACF;YACN,6BAAK,SAAS,EAAC,SAAS,IACrB,IAAI,CAAC,KAAK,CAAC,UAAU,IAAI,IAAI,CAAC,KAAK,CAAC,QAAQ,CACzC,CACF,CACP,CAAC;IACJ,CAAC;CACF","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/** @packageDocumentation\r\n * @module Expandable\r\n */\r\n\r\nimport \"./ExpandableBlock.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for the [[ExpandableBlock]] React component\r\n * @public\r\n * @deprecated in 3.0. Use ExpandableBlockProps from itwinui-react instead\r\n */\r\nexport interface ExpandableBlockProps extends CommonProps {\r\n  /** Label */\r\n  title: string | JSX.Element;\r\n  /** Indicates whether the ExpandableBlock is expanded */\r\n  isExpanded: boolean;\r\n  /** Callback function for click event */\r\n  onClick: React.MouseEventHandler<HTMLDivElement>;\r\n  /** Callback function for key press event */\r\n  onKeyPress?: React.KeyboardEventHandler<HTMLDivElement>;\r\n  /** Callback function for key down event */\r\n  onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;\r\n  /** Additional text displayed in the block below the label and in a smaller font size */\r\n  caption?: string;\r\n  /** Custom tooltip for the component. */\r\n  tooltip?: string;\r\n}\r\n\r\n/** ExpandableBlock React component is a container that shows and hides child content.\r\n * @public\r\n * @deprecated in 3.0. Use ExpandableBlock from itwinui-react instead\r\n */\r\nexport class ExpandableBlock extends React.PureComponent<ExpandableBlockProps> {  // eslint-disable-line deprecation/deprecation\r\n\r\n  public override render() {\r\n    const cName = classnames(\r\n      \"uicore-expandable-blocks-block\",\r\n      this.props.caption && \"with-caption\",\r\n      this.props.isExpanded ? \"is-expanded\" : \"is-collapsed\",\r\n      this.props.className,\r\n    );\r\n    const ariaExpanded = this.props.isExpanded ? \"true\" : \"false\";\r\n    const tabIndex = (this.props.onKeyPress || this.props.onKeyDown) ? 0 : undefined;\r\n\r\n    const title = this.props.tooltip ?? (typeof this.props.title == \"string\" ? this.props.title : undefined);\r\n\r\n    return (\r\n      <div className={cName} style={this.props.style}>\r\n        <div role=\"button\" aria-expanded={ariaExpanded} className=\"header\" onClick={this.props.onClick}\r\n          onKeyPress={this.props.onKeyPress} onKeyDown={this.props.onKeyDown} tabIndex={tabIndex}>\r\n          <div className=\"icon-container\">\r\n            <i className=\"icon icon-chevron-right\" />\r\n          </div>\r\n          {this.props.caption &&\r\n            <div className=\"caption\" title={this.props.caption}>\r\n              {this.props.caption}\r\n            </div>\r\n          }\r\n          <div className=\"title\" title={title}>\r\n            {this.props.title}\r\n          </div>\r\n        </div>\r\n        <div className=\"content\">\r\n          {this.props.isExpanded && this.props.children}\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/esm/core-react/expandable/ExpandableBlock.scss

@@ -0,0 +1,145 @@
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/themecolors";
+@import "~@itwin/itwinui-css/scss/style/space";
+@import "~@itwin/itwinui-css/scss/style/speed";
+@import "~@itwin/itwinui-css/scss/style/typography";
+@import "../style/mixins";
+@import "../text/mixins";
+
+.uicore-expandable-blocks-block {
+  background-color: $buic-background-control;
+  border: solid 1px $buic-background-control-stroke;
+  border-radius: 3px;
+  position: relative;
+
+  > .header {
+    padding: $iui-xs $iui-xxs;
+    background: $buic-background-control;
+    transition: background-color $iui-speed-fast ease-in-out, border-color $iui-speed-fast ease-in-out;
+    cursor: pointer;
+
+    > .icon-container {
+      line-height: 22px;
+      width: 22px;
+      height: 22px;
+      font-size: 10px;
+      float: left;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-right: $iui-xxs;
+      color: $buic-foreground-body;
+      transition: $iui-speed-fast ease-in-out;
+    }
+
+    > .caption {
+      @include no-link;
+      @include uicore-text(small);
+      display: block;
+      color: $buic-foreground-muted;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    > .title {
+      @include no-link;
+      @include uicore-text(subheading);
+      font-size: $iui-font-size;
+      line-height: 23px;
+      display: block;
+      margin: 0;
+      color: $buic-foreground-body;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      transition: $iui-speed-fast ease-in-out;
+    }
+
+    &:focus {
+      background-color: $buic-background-focus-overlay;
+      outline: none;
+    }
+
+  }
+
+  > .content {
+    padding: 0;
+    margin: 0;
+    border: 0 none transparent;
+    transition:
+    padding-top $iui-speed-fast ease-in-out,
+    padding-bottom $iui-speed-fast ease-in-out;
+  }
+
+  &.with-caption > .header > .icon-container {
+    margin-top: $iui-baseline;
+  }
+
+  &.is-collapsed {
+    > .content > * {
+      display: none;
+    }
+  }
+
+  &:hover {
+    > .header {
+      > .icon-container {
+        color: $buic-foreground-activehover;
+      }
+
+      > .caption,
+      > .title {
+        color: $buic-foreground-activehover;
+      }
+    }
+  }
+
+  &.is-expanded {
+    border-top: 1px solid $buic-foreground-primary;
+
+    > .header {
+      transition: $iui-speed-fast ease-in-out;
+
+      > .icon-container,
+      > .caption,
+      > .title {
+        color: $buic-foreground-primary;
+      }
+
+      > .icon-container {
+        transform: rotate( 90deg );
+        transform-origin: center;
+      }
+
+      > .title {
+        transition: $iui-speed-fast ease-in-out;
+      }
+    }
+
+    &:hover > .header {
+      > .icon-container,
+      > .title {
+        color: $buic-foreground-primary;
+      }
+    }
+
+    > .content {
+      padding: 0;
+      background-color: $buic-background-control;
+      border-style: none;
+    }
+
+    &:before {
+      content: '';
+      position: absolute;
+      top: 0;
+      height: 1px;
+      width: 100%;
+      background: $buic-foreground-primary;
+    }
+  }
+}

package/lib/esm/core-react/expandable/ExpandableList.d.ts

@@ -1,38 +1,36 @@
-/** @packageDocumentation
- * @module Expandable
- */
-import "./ExpandableList.scss";
-import * as React from "react";
-import { CommonProps } from "../utils/Props";
-/** Properties for [[ExpandableList]] component
- * @public
- */
-export interface ExpandableListProps extends CommonProps {
-    /** Index of the default active block */
-    defaultActiveBlock?: number;
-    /** Indicates whether to allow only one expanded block */
-    singleExpandOnly?: boolean;
-    /** Indicates whether the single expanded block is collapsible */
-    singleIsCollapsible?: boolean;
-    /** Content */
-    children?: React.ReactNode;
-}
-/** @internal */
-interface ExpandableListState {
-    activeBlock: number;
-}
-/**
- * ExpandableList React component is a container for ExpandableBlock components.
- * @public
- */
-export declare class ExpandableList extends React.PureComponent<ExpandableListProps, ExpandableListState> {
-    constructor(props: ExpandableListProps);
-    static defaultProps: Partial<ExpandableListProps>;
-    private _handleBlockToggle;
-    private renderBlocks;
-    /** @internal */
-    componentDidUpdate(prevProps: ExpandableListProps): void;
-    render(): JSX.Element;
-}
-export {};
+/** @packageDocumentation
+ * @module Expandable
+ */
+import "./ExpandableList.scss";
+import * as React from "react";
+import { CommonProps } from "../utils/Props";
+/** Properties for [[ExpandableList]] component
+ * @public
+ */
+export interface ExpandableListProps extends CommonProps {
+    /** Index of the default active block */
+    defaultActiveBlock?: number;
+    /** Indicates whether to allow only one expanded block */
+    singleExpandOnly?: boolean;
+    /** Indicates whether the single expanded block is collapsible */
+    singleIsCollapsible?: boolean;
+}
+/** @internal */
+interface ExpandableListState {
+    activeBlock: number;
+}
+/**
+ * ExpandableList React component is a container for ExpandableBlock components.
+ * @public
+ */
+export declare class ExpandableList extends React.PureComponent<ExpandableListProps, ExpandableListState> {
+    constructor(props: ExpandableListProps);
+    static defaultProps: Partial<ExpandableListProps>;
+    private _handleBlockToggle;
+    private renderBlocks;
+    /** @internal */
+    componentDidUpdate(prevProps: ExpandableListProps): void;
+    render(): JSX.Element;
+}
+export {};
 //# sourceMappingURL=ExpandableList.d.ts.map

package/lib/esm/core-react/expandable/ExpandableList.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableList.d.ts","sourceRoot":"","sources":["../../../../src/core-react/expandable/ExpandableList.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,wCAAwC;IACxC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iEAAiE;IACjE,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,cAAc;IACd,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED,gBAAgB;AAChB,UAAU,mBAAmB;IAC3B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;gBAEnF,KAAK,EAAE,mBAAmB;IAMtC,OAAc,YAAY,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAGtD;IAGF,OAAO,CAAC,kBAAkB,CAYxB;IAEF,OAAO,CAAC,YAAY;IAUpB,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAMjD,MAAM,IAAI,GAAG,CAAC,OAAO;CAOtC"}
+{"version":3,"file":"ExpandableList.d.ts","sourceRoot":"","sources":["../../../../src/core-react/expandable/ExpandableList.tsx"],"names":[],"mappings":"AAIA;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAE/B,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C;;GAEG;AACH,MAAM,WAAW,mBAAoB,SAAQ,WAAW;IACtD,wCAAwC;IACxC,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,yDAAyD;IACzD,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,iEAAiE;IACjE,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED,gBAAgB;AAChB,UAAU,mBAAmB;IAC3B,WAAW,EAAE,MAAM,CAAC;CACrB;AAED;;;GAGG;AACH,qBAAa,cAAe,SAAQ,KAAK,CAAC,aAAa,CAAC,mBAAmB,EAAE,mBAAmB,CAAC;gBAEnF,KAAK,EAAE,mBAAmB;IAMtC,OAAc,YAAY,EAAE,OAAO,CAAC,mBAAmB,CAAC,CAGtD;IAGF,OAAO,CAAC,kBAAkB,CAYxB;IAEF,OAAO,CAAC,YAAY;IAUpB,gBAAgB;IACA,kBAAkB,CAAC,SAAS,EAAE,mBAAmB;IAMjD,MAAM,IAAI,GAAG,CAAC,OAAO;CAOtC"}

package/lib/esm/core-react/expandable/ExpandableList.js

@@ -1,54 +1,54 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-/** @packageDocumentation
- * @module Expandable
- */
-import "./ExpandableList.scss";
-import classnames from "classnames";
-import * as React from "react";
-/**
- * ExpandableList React component is a container for ExpandableBlock components.
- * @public
- */
-export class ExpandableList extends React.PureComponent {
-    constructor(props) {
-        super(props);
-        // set active block
-        this._handleBlockToggle = (index, onToggle) => {
-            let activeBlock = index;
-            if (this.props.singleIsCollapsible && index === this.state.activeBlock)
-                activeBlock = -1;
-            this.setState({ activeBlock });
-            // istanbul ignore else
-            if (onToggle) {
-                onToggle(activeBlock === index); // fire the ExpandableBlock onToggle
-            }
-        };
-        this.state = { activeBlock: this.props.defaultActiveBlock };
-    }
-    renderBlocks() {
-        return React.Children.map(this.props.children, (child, i) => {
-            return React.cloneElement(child, {
-                key: i,
-                isExpanded: (this.props.singleExpandOnly) ? i === this.state.activeBlock : child.props.isExpanded,
-                onToggle: this._handleBlockToggle.bind(this, i, child.props.onToggle),
-            });
-        });
-    }
-    /** @internal */
-    componentDidUpdate(prevProps) {
-        if (this.props.defaultActiveBlock !== prevProps.defaultActiveBlock && this.props.defaultActiveBlock !== this.state.activeBlock) {
-            this.setState((_, props) => ({ activeBlock: props.defaultActiveBlock }));
-        }
-    }
-    render() {
-        return (React.createElement("div", { className: classnames("uicore-expandable-blocks-list", this.props.className), style: this.props.style }, this.renderBlocks()));
-    }
-}
-ExpandableList.defaultProps = {
-    singleExpandOnly: false,
-    defaultActiveBlock: 0,
-};
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+/** @packageDocumentation
+ * @module Expandable
+ */
+import "./ExpandableList.scss";
+import classnames from "classnames";
+import * as React from "react";
+/**
+ * ExpandableList React component is a container for ExpandableBlock components.
+ * @public
+ */
+export class ExpandableList extends React.PureComponent {
+    constructor(props) {
+        super(props);
+        // set active block
+        this._handleBlockToggle = (index, onToggle) => {
+            let activeBlock = index;
+            if (this.props.singleIsCollapsible && index === this.state.activeBlock)
+                activeBlock = -1;
+            this.setState({ activeBlock });
+            // istanbul ignore else
+            if (onToggle) {
+                onToggle(activeBlock === index); // fire the ExpandableBlock onToggle
+            }
+        };
+        this.state = { activeBlock: this.props.defaultActiveBlock };
+    }
+    renderBlocks() {
+        return React.Children.map(this.props.children, (child, i) => {
+            return React.cloneElement(child, {
+                key: i,
+                isExpanded: (this.props.singleExpandOnly) ? i === this.state.activeBlock : child.props.isExpanded,
+                onToggle: this._handleBlockToggle.bind(this, i, child.props.onToggle),
+            });
+        });
+    }
+    /** @internal */
+    componentDidUpdate(prevProps) {
+        if (this.props.defaultActiveBlock !== prevProps.defaultActiveBlock && this.props.defaultActiveBlock !== this.state.activeBlock) {
+            this.setState((_, props) => ({ activeBlock: props.defaultActiveBlock }));
+        }
+    }
+    render() {
+        return (React.createElement("div", { className: classnames("uicore-expandable-blocks-list", this.props.className), style: this.props.style }, this.renderBlocks()));
+    }
+}
+ExpandableList.defaultProps = {
+    singleExpandOnly: false,
+    defaultActiveBlock: 0,
+};
 //# sourceMappingURL=ExpandableList.js.map

package/lib/esm/core-react/expandable/ExpandableList.js.map

@@ -1 +1 @@
-{"version":3,"file":"ExpandableList.js","sourceRoot":"","sources":["../../../../src/core-react/expandable/ExpandableList.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAsB/B;;;GAGG;AACH,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,aAAuD;IAE/F,YAAY,KAA0B;QACpC,KAAK,CAAC,KAAK,CAAC,CAAC;QAUf,mBAAmB;QACX,uBAAkB,GAAG,CAAC,KAAa,EAAE,QAAuC,EAAE,EAAE;YACtF,IAAI,WAAW,GAAG,KAAK,CAAC;YAExB,IAAI,IAAI,CAAC,KAAK,CAAC,mBAAmB,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW;gBACpE,WAAW,GAAG,CAAC,CAAC,CAAC;YAEnB,IAAI,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC;YAE/B,uBAAuB;YACvB,IAAI,QAAQ,EAAE;gBACZ,QAAQ,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,oCAAoC;aACtE;QACH,CAAC,CAAC;QArBA,IAAI,CAAC,KAAK,GAAG,EAAE,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,kBAAmB,EAAE,CAAC;IAC/D,CAAC;IAsBO,YAAY;QAClB,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAU,EAAE,CAAC,EAAE,EAAE;YAC/D,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;gBAC/B,GAAG,EAAE,CAAC;gBACN,UAAU,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU;gBACjG,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;aACtE,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;IACA,kBAAkB,CAAC,SAA8B;QAC/D,IAAI,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAAK,SAAS,CAAC,kBAAkB,IAAI,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;YAC9H,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,kBAAmB,EAAE,CAAC,CAAC,CAAC;SAC3E;IACH,CAAC;IAEe,MAAM;QACpB,OAAO,CACL,6BAAK,SAAS,EAAE,UAAU,CAAC,+BAA+B,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IACvG,IAAI,CAAC,YAAY,EAAE,CAChB,CACP,CAAC;IACJ,CAAC;;AA3Ca,2BAAY,GAAiC;IACzD,gBAAgB,EAAE,KAAK;IACvB,kBAAkB,EAAE,CAAC;CACtB,CAAC","sourcesContent":["/*---------------------------------------------------------------------------------------------\n* Copyright (c) Bentley Systems, Incorporated. All rights reserved.\n* See LICENSE.md in the project root for license terms and full copyright notice.\n*--------------------------------------------------------------------------------------------*/\n/** @packageDocumentation\n * @module Expandable\n */\n\nimport \"./ExpandableList.scss\";\nimport classnames from \"classnames\";\nimport * as React from \"react\";\nimport { CommonProps } from \"../utils/Props\";\n\n/** Properties for [[ExpandableList]] component\n * @public\n */\nexport interface ExpandableListProps extends CommonProps {\n  /** Index of the default active block */\n  defaultActiveBlock?: number;\n  /** Indicates whether to allow only one expanded block */\n  singleExpandOnly?: boolean;\n  /** Indicates whether the single expanded block is collapsible */\n  singleIsCollapsible?: boolean;\n  /** Content */\n  children?: React.ReactNode;\n}\n\n/** @internal */\ninterface ExpandableListState {\n  activeBlock: number;\n}\n\n/**\n * ExpandableList React component is a container for ExpandableBlock components.\n * @public\n */\nexport class ExpandableList extends React.PureComponent<ExpandableListProps, ExpandableListState> {\n\n  constructor(props: ExpandableListProps) {\n    super(props);\n\n    this.state = { activeBlock: this.props.defaultActiveBlock! };\n  }\n\n  public static defaultProps: Partial<ExpandableListProps> = {\n    singleExpandOnly: false,\n    defaultActiveBlock: 0,\n  };\n\n  // set active block\n  private _handleBlockToggle = (index: number, onToggle: (isExpanding: boolean) => any) => {\n    let activeBlock = index;\n\n    if (this.props.singleIsCollapsible && index === this.state.activeBlock)\n      activeBlock = -1;\n\n    this.setState({ activeBlock });\n\n    // istanbul ignore else\n    if (onToggle) {\n      onToggle(activeBlock === index); // fire the ExpandableBlock onToggle\n    }\n  };\n\n  private renderBlocks() {\n    return React.Children.map(this.props.children, (child: any, i) => {\n      return React.cloneElement(child, {\n        key: i,\n        isExpanded: (this.props.singleExpandOnly) ? i === this.state.activeBlock : child.props.isExpanded,\n        onToggle: this._handleBlockToggle.bind(this, i, child.props.onToggle),\n      });\n    });\n  }\n\n  /** @internal */\n  public override componentDidUpdate(prevProps: ExpandableListProps) {\n    if (this.props.defaultActiveBlock !== prevProps.defaultActiveBlock && this.props.defaultActiveBlock !== this.state.activeBlock) {\n      this.setState((_, props) => ({ activeBlock: props.defaultActiveBlock! }));\n    }\n  }\n\n  public override render(): JSX.Element {\n    return (\n      <div className={classnames(\"uicore-expandable-blocks-list\", this.props.className)} style={this.props.style}>\n        {this.renderBlocks()}\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"ExpandableList.js","sourceRoot":"","sources":["../../../../src/core-react/expandable/ExpandableList.tsx"],"names":[],"mappings":"AAAA;;;+FAG+F;AAC/F;;GAEG;AAEH,OAAO,uBAAuB,CAAC;AAC/B,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAoB/B;;;GAGG;AACH,MAAM,OAAO,cAAe,SAAQ,KAAK,CAAC,aAAuD;IAE/F,YAAY,KAA0B;QACpC,KAAK,CAAC,KAAK,CAAC,CAAC;QAUf,mBAAmB;QACX,uBAAkB,GAAG,CAAC,KAAa,EAAE,QAAuC,EAAE,EAAE;YACtF,IAAI,WAAW,GAAG,KAAK,CAAC;YAExB,IAAI,IAAI,CAAC,KAAK,CAAC,mBAAmB,IAAI,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW;gBACpE,WAAW,GAAG,CAAC,CAAC,CAAC;YAEnB,IAAI,CAAC,QAAQ,CAAC,EAAE,WAAW,EAAE,CAAC,CAAC;YAE/B,uBAAuB;YACvB,IAAI,QAAQ,EAAE;gBACZ,QAAQ,CAAC,WAAW,KAAK,KAAK,CAAC,CAAC,CAAC,oCAAoC;aACtE;QACH,CAAC,CAAC;QArBA,IAAI,CAAC,KAAK,GAAG,EAAE,WAAW,EAAE,IAAI,CAAC,KAAK,CAAC,kBAAmB,EAAE,CAAC;IAC/D,CAAC;IAsBO,YAAY;QAClB,OAAO,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,EAAE,CAAC,KAAU,EAAE,CAAC,EAAE,EAAE;YAC/D,OAAO,KAAK,CAAC,YAAY,CAAC,KAAK,EAAE;gBAC/B,GAAG,EAAE,CAAC;gBACN,UAAU,EAAE,CAAC,IAAI,CAAC,KAAK,CAAC,gBAAgB,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU;gBACjG,QAAQ,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC;aACtE,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC;IAED,gBAAgB;IACA,kBAAkB,CAAC,SAA8B;QAC/D,IAAI,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAAK,SAAS,CAAC,kBAAkB,IAAI,IAAI,CAAC,KAAK,CAAC,kBAAkB,KAAK,IAAI,CAAC,KAAK,CAAC,WAAW,EAAE;YAC9H,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,CAAC,CAAC,EAAE,WAAW,EAAE,KAAK,CAAC,kBAAmB,EAAE,CAAC,CAAC,CAAC;SAC3E;IACH,CAAC;IAEe,MAAM;QACpB,OAAO,CACL,6BAAK,SAAS,EAAE,UAAU,CAAC,+BAA+B,EAAE,IAAI,CAAC,KAAK,CAAC,SAAS,CAAC,EAAE,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,IACvG,IAAI,CAAC,YAAY,EAAE,CAChB,CACP,CAAC;IACJ,CAAC;;AA3Ca,2BAAY,GAAiC;IACzD,gBAAgB,EAAE,KAAK;IACvB,kBAAkB,EAAE,CAAC;CACtB,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/** @packageDocumentation\r\n * @module Expandable\r\n */\r\n\r\nimport \"./ExpandableList.scss\";\r\nimport classnames from \"classnames\";\r\nimport * as React from \"react\";\r\nimport { CommonProps } from \"../utils/Props\";\r\n\r\n/** Properties for [[ExpandableList]] component\r\n * @public\r\n */\r\nexport interface ExpandableListProps extends CommonProps {\r\n  /** Index of the default active block */\r\n  defaultActiveBlock?: number;\r\n  /** Indicates whether to allow only one expanded block */\r\n  singleExpandOnly?: boolean;\r\n  /** Indicates whether the single expanded block is collapsible */\r\n  singleIsCollapsible?: boolean;\r\n}\r\n\r\n/** @internal */\r\ninterface ExpandableListState {\r\n  activeBlock: number;\r\n}\r\n\r\n/**\r\n * ExpandableList React component is a container for ExpandableBlock components.\r\n * @public\r\n */\r\nexport class ExpandableList extends React.PureComponent<ExpandableListProps, ExpandableListState> {\r\n\r\n  constructor(props: ExpandableListProps) {\r\n    super(props);\r\n\r\n    this.state = { activeBlock: this.props.defaultActiveBlock! };\r\n  }\r\n\r\n  public static defaultProps: Partial<ExpandableListProps> = {\r\n    singleExpandOnly: false,\r\n    defaultActiveBlock: 0,\r\n  };\r\n\r\n  // set active block\r\n  private _handleBlockToggle = (index: number, onToggle: (isExpanding: boolean) => any) => {\r\n    let activeBlock = index;\r\n\r\n    if (this.props.singleIsCollapsible && index === this.state.activeBlock)\r\n      activeBlock = -1;\r\n\r\n    this.setState({ activeBlock });\r\n\r\n    // istanbul ignore else\r\n    if (onToggle) {\r\n      onToggle(activeBlock === index); // fire the ExpandableBlock onToggle\r\n    }\r\n  };\r\n\r\n  private renderBlocks() {\r\n    return React.Children.map(this.props.children, (child: any, i) => {\r\n      return React.cloneElement(child, {\r\n        key: i,\r\n        isExpanded: (this.props.singleExpandOnly) ? i === this.state.activeBlock : child.props.isExpanded,\r\n        onToggle: this._handleBlockToggle.bind(this, i, child.props.onToggle),\r\n      });\r\n    });\r\n  }\r\n\r\n  /** @internal */\r\n  public override componentDidUpdate(prevProps: ExpandableListProps) {\r\n    if (this.props.defaultActiveBlock !== prevProps.defaultActiveBlock && this.props.defaultActiveBlock !== this.state.activeBlock) {\r\n      this.setState((_, props) => ({ activeBlock: props.defaultActiveBlock! }));\r\n    }\r\n  }\r\n\r\n  public override render(): JSX.Element {\r\n    return (\r\n      <div className={classnames(\"uicore-expandable-blocks-list\", this.props.className)} style={this.props.style}>\r\n        {this.renderBlocks()}\r\n      </div>\r\n    );\r\n  }\r\n}\r\n"]}

package/lib/esm/core-react/expandable/ExpandableList.scss

@@ -1,9 +1,9 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "./list.scss";
-
-.uicore-expandable-blocks-list {
-  @include uicore-expandable-blocks-list;
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./list.scss";
+
+.uicore-expandable-blocks-list {
+  @include uicore-expandable-blocks-list;
 }

package/lib/esm/core-react/expandable/classes.scss

@@ -1,7 +1,7 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "./index";
-
-.uicore-expandable-blocks-list { @include uicore-expandable-blocks-list; }
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./index";
+
+.uicore-expandable-blocks-list { @include uicore-expandable-blocks-list; }

package/lib/esm/core-react/expandable/index.scss

@@ -1,5 +1,5 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "./list";
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "./list";

package/lib/esm/core-react/expandable/list.scss

@@ -1,35 +1,45 @@
-/*---------------------------------------------------------------------------------------------
-* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
-* See LICENSE.md in the project root for license terms and full copyright notice.
-*--------------------------------------------------------------------------------------------*/
-@import "../style/index";
-
-@mixin uicore-expandable-blocks-list {
-  > div {
-    transition: margin var(--iui-duration-1) ease-in-out;
-
-    > .iui-header {
-      border-color: $uicore-gray-a transparent transparent;
-    }
-
-    &:first-child {
-      > .iui-header {
-        border-top-color: transparent;
-      }
-    }
-  }
-
-  > .iui-expanded + div {
-    > .iui-header {
-      border-top-color: transparent;
-    }
-
-    &.iui-expanded > .iui-header {
-      border-top-color: $uicore-blue;
-    }
-  }
-
-  > .iui-expanded + .iui-expanded {
-    margin-top: 0; // $uicore-unbordered-padding;
-  }
-}
+/*---------------------------------------------------------------------------------------------
+* Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+* See LICENSE.md in the project root for license terms and full copyright notice.
+*--------------------------------------------------------------------------------------------*/
+@import "../style/index";
+@import "~@itwin/itwinui-css/scss/style/speed";
+
+@mixin uicore-expandable-blocks-list {
+
+  > div {
+
+    transition:               margin $iui-speed-fast ease-in-out;
+
+    > .iui-header {
+
+      border-color:           $uicore-gray-a transparent transparent;
+    }
+
+    &:first-child {
+
+      > .iui-header {
+
+        border-top-color:   transparent;
+      }
+    }
+  }
+
+  > .iui-expanded + div {
+
+    > .iui-header {
+
+      border-top-color:       transparent;
+    }
+
+    &.iui-expanded  > .iui-header {
+
+        border-top-color:       $uicore-blue;
+    }
+  }
+
+  > .iui-expanded + .iui-expanded {
+
+    margin-top:                 0; // $uicore-unbordered-padding;
+  }
+}

package/lib/esm/core-react/focus/ItemKeyboardNavigator.d.ts

@@ -1,54 +1,54 @@
-/** @packageDocumentation
- * @module Focus
- */
-/// <reference types="react" />
-import { Orientation } from "../enums/Orientation";
-/** Cross-Axis Arrow Key Callback
- * @internal
- */
-export declare type CrossAxisArrowKeyFunc = (forward: boolean) => void;
-/** Keyboard Navigator for parent components
- * @internal
- */
-export declare class ItemKeyboardNavigator {
-    onFocusItem: (index: number) => void;
-    onActivateItem: (index: number) => void;
-    private _direction;
-    private _itemCount;
-    private _orientation;
-    private _allowWrap;
-    private _crossAxisArrowKeyHandler?;
-    constructor(onFocusItem: (index: number) => void, onActivateItem: (index: number) => void);
-    /** The item count */
-    get itemCount(): number;
-    set itemCount(count: number);
-    /** The primary orientation */
-    get orientation(): Orientation;
-    set orientation(orientation: Orientation);
-    /** The allow wrap property controls whether the movement will stop at the first and last items or wrap  */
-    get allowWrap(): boolean;
-    set allowWrap(v: boolean);
-    /** Called when the arrow keys that run perpendicular to the primary orientation are pressed */
-    get crossAxisArrowKeyHandler(): CrossAxisArrowKeyFunc | undefined;
-    set crossAxisArrowKeyHandler(v: CrossAxisArrowKeyFunc | undefined);
-    /** Handle KeyDown on items */
-    handleKeyDownEvent(event: React.KeyboardEvent, index: number): void;
-    /** Handle KeyUp on items */
-    handleKeyUpEvent(event: React.KeyboardEvent, index: number): void;
-    private focusFirstItem;
-    private focusLastItem;
-    /** When an item list's orientation is set to vertical,
-     * only up and down arrow should function.
-     * In all other cases only left and right arrow function.
-     */
-    private determineOrientation;
-    /** Either focus the next, previous, first, or last item depending on key pressed
-     */
-    private switchItemOnArrowPress;
-    private activateItem;
-}
-/** Determines if a KeyboardEvent.key is an Item Navigation key
- * @internal
- */
-export declare function isNavigationKey(key: string): boolean;
+/** @packageDocumentation
+ * @module Focus
+ */
+/// <reference types="react" />
+import { Orientation } from "../enums/Orientation";
+/** Cross-Axis Arrow Key Callback
+ * @internal
+ */
+export declare type CrossAxisArrowKeyFunc = (forward: boolean) => void;
+/** Keyboard Navigator for parent components
+ * @internal
+ */
+export declare class ItemKeyboardNavigator {
+    onFocusItem: (index: number) => void;
+    onActivateItem: (index: number) => void;
+    private _direction;
+    private _itemCount;
+    private _orientation;
+    private _allowWrap;
+    private _crossAxisArrowKeyHandler?;
+    constructor(onFocusItem: (index: number) => void, onActivateItem: (index: number) => void);
+    /** The item count */
+    get itemCount(): number;
+    set itemCount(count: number);
+    /** The primary orientation */
+    get orientation(): Orientation;
+    set orientation(orientation: Orientation);
+    /** The allow wrap property controls whether the movement will stop at the first and last items or wrap  */
+    get allowWrap(): boolean;
+    set allowWrap(v: boolean);
+    /** Called when the arrow keys that run perpendicular to the primary orientation are pressed */
+    get crossAxisArrowKeyHandler(): CrossAxisArrowKeyFunc | undefined;
+    set crossAxisArrowKeyHandler(v: CrossAxisArrowKeyFunc | undefined);
+    /** Handle KeyDown on items */
+    handleKeyDownEvent(event: React.KeyboardEvent, index: number): void;
+    /** Handle KeyUp on items */
+    handleKeyUpEvent(event: React.KeyboardEvent, index: number): void;
+    private focusFirstItem;
+    private focusLastItem;
+    /** When an item list's orientation is set to vertical,
+     * only up and down arrow should function.
+     * In all other cases only left and right arrow function.
+     */
+    private determineOrientation;
+    /** Either focus the next, previous, first, or last item depending on key pressed
+     */
+    private switchItemOnArrowPress;
+    private activateItem;
+}
+/** Determines if a KeyboardEvent.key is an Item Navigation key
+ * @internal
+ */
+export declare function isNavigationKey(key: string): boolean;
 //# sourceMappingURL=ItemKeyboardNavigator.d.ts.map