@itwin/itwinui-react 2.6.0 → 2.7.0

package/esm/core/ToggleSwitch/ToggleSwitch.d.ts

@@ -15,16 +15,20 @@ export declare type ToggleSwitchProps = {
      * @default false
      */
     setFocus?: boolean;
-    /**
-     * Icon inside the toggle switch. Shown only when toggle is checked.
-     */
-    icon?: JSX.Element;
+} & ({
     /**
      * Size of the toggle switch.
      *  @default 'default'
      */
-    size?: 'default' | 'small';
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>;
+    size?: 'default';
+    /**
+     * Icon inside the toggle switch. Shown only when toggle is checked and size is not small.
+     */
+    icon?: JSX.Element;
+} | {
+    size: 'small';
+    icon?: never;
+}) & Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size'>;
 /**
  * A switch for turning on and off.
  * @example
@@ -43,29 +47,5 @@ export declare type ToggleSwitchProps = {
  * <caption>Toggle with icon</caption>
  * <ToggleSwitch label='With icon toggle' icon={<svg viewBox='0 0 16 16'><path d='M1 1v14h14V1H1zm13 1.7v10.6L8.7 8 14 2.7zM8 7.3L2.7 2h10.6L8 7.3zm-.7.7L2 13.3V2.7L7.3 8zm.7.7l5.3 5.3H2.7L8 8.7z' /></svg>} />
  */
-export declare const ToggleSwitch: React.ForwardRefExoticComponent<{
-    /**
-     * Label for the toggle switch.
-     */
-    label?: React.ReactNode;
-    /**
-     * Position of the label.
-     * @default 'right'
-     */
-    labelPosition?: "right" | "left" | undefined;
-    /**
-     * Set focus on toggle.
-     * @default false
-     */
-    setFocus?: boolean | undefined;
-    /**
-     * Icon inside the toggle switch. Shown only when toggle is checked.
-     */
-    icon?: JSX.Element | undefined;
-    /**
-     * Size of the toggle switch.
-     *  @default 'default'
-     */
-    size?: "small" | "default" | undefined;
-} & Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size"> & React.RefAttributes<HTMLInputElement>>;
+export declare const ToggleSwitch: React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<HTMLInputElement>>;
 export default ToggleSwitch;

package/esm/core/ToggleSwitch/ToggleSwitch.js

@@ -25,7 +25,13 @@ import '@itwin/itwinui-css/css/toggle-switch.css';
  * <ToggleSwitch label='With icon toggle' icon={<svg viewBox='0 0 16 16'><path d='M1 1v14h14V1H1zm13 1.7v10.6L8.7 8 14 2.7zM8 7.3L2.7 2h10.6L8 7.3zm-.7.7L2 13.3V2.7L7.3 8zm.7.7l5.3 5.3H2.7L8 8.7z' /></svg>} />
  */
 export const ToggleSwitch = React.forwardRef((props, ref) => {
-    const { disabled = false, labelPosition = 'right', icon, label, setFocus = false, className, style, size = 'default', ...rest } = props;
+    let icon;
+    if (props.size !== 'small') {
+        icon = props.icon;
+        props = { ...props };
+        delete props.icon;
+    }
+    const { disabled = false, labelPosition = 'right', label, setFocus = false, className, style, size = 'default', ...rest } = props;
     useTheme();
     const inputElementRef = React.useRef(null);
     const refs = useMergedRefs(inputElementRef, ref);
@@ -42,6 +48,7 @@ export const ToggleSwitch = React.forwardRef((props, ref) => {
         }, className), "data-iui-size": size, style: style },
         React.createElement("input", { className: 'iui-toggle-switch', type: 'checkbox', role: 'switch', disabled: disabled, ref: refs, ...rest }),
         icon &&
+            size !== 'small' &&
             React.cloneElement(icon, {
                 className: cx('iui-toggle-switch-icon', icon.props.className),
                 'aria-hidden': true,

package/esm/core/index.d.ts

@@ -104,5 +104,5 @@ export { Anchor, Body, Headline, Leading, Small, Subheading, Title, Blockquote,
 export type { AnchorProps, BodyProps, HeadlineProps, LeadingProps, SmallProps, SubheadingProps, TitleProps, BlockquoteProps, CodeProps, KbdProps, TextProps, } from './Typography';
 export { Wizard, Stepper, WorkflowDiagram } from './Stepper';
 export type { WizardProps, StepProperties, WizardType, WizardLocalization, StepperProps, StepperLocalization, WorkflowDiagramProps, } from './Stepper';
-export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, Icon, Flex, } from './utils';
-export type { ThemeType, MiddleTextTruncationProps, IconProps, FlexProps, FlexItemProps, FlexSpacerProps, } from './utils';
+export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, LinkBox, LinkAction, Icon, Flex, } from './utils';
+export type { ThemeType, MiddleTextTruncationProps, IconProps, FlexProps, FlexItemProps, FlexSpacerProps, LinkBoxProps, LinkActionProps, } from './utils';

package/esm/core/index.js

@@ -55,4 +55,4 @@ export { Tooltip } from './Tooltip';
 export { Tree, TreeNode, TreeNodeExpander } from './Tree';
 export { Anchor, Body, Headline, Leading, Small, Subheading, Title, Blockquote, Code, Kbd, KbdKeys, Text, } from './Typography';
 export { Wizard, Stepper, WorkflowDiagram } from './Stepper';
-export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, Icon, Flex, } from './utils';
+export { getUserColor, useTheme, ColorValue, MiddleTextTruncation, LinkBox, LinkAction, Icon, Flex, } from './utils';

package/esm/core/utils/components/LinkAction.d.ts

@@ -0,0 +1,30 @@
+import { PolymorphicComponentProps, PolymorphicForwardRefComponent } from '../props';
+import '@itwin/itwinui-css/css/utils.css';
+declare type LinkActionOwnProps = {};
+declare type LinkBoxOwnProps = {};
+export declare type LinkActionProps = PolymorphicComponentProps<'a', LinkActionOwnProps>;
+export declare type LinkBoxProps = PolymorphicComponentProps<'div', LinkBoxOwnProps>;
+/**
+ * Polymorphic link action component.
+ * It is rendered as `a` by default.
+ * @example
+ * <LinkBox>
+ *   <Surface>
+ *     <LinkAction href='/new-page'>Whole card is clickable</LinkAction>
+ *   </Surface>
+ * </LinkBox>
+ */
+export declare const LinkAction: PolymorphicForwardRefComponent<"a", LinkActionOwnProps>;
+/**
+ * Polymorphic link box component.
+ * Used to wrap around your component to use LinkAction.
+ * Rendered as `div` by default
+ * @example
+ * <LinkBox>
+ *   <Surface>
+ *     <LinkAction href='/new-page'>Whole card is clickable</LinkAction>
+ *   </Surface>
+ * </LinkBox>
+ */
+export declare const LinkBox: PolymorphicForwardRefComponent<"div", LinkBoxOwnProps>;
+export {};

package/esm/core/utils/components/LinkAction.js

@@ -0,0 +1,38 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+import cx from 'classnames';
+import '@itwin/itwinui-css/css/utils.css';
+/**
+ * Polymorphic link action component.
+ * It is rendered as `a` by default.
+ * @example
+ * <LinkBox>
+ *   <Surface>
+ *     <LinkAction href='/new-page'>Whole card is clickable</LinkAction>
+ *   </Surface>
+ * </LinkBox>
+ */
+export const LinkAction = React.forwardRef((props, ref) => {
+    const { as: Element = 'a', className, ...rest } = props;
+    return (React.createElement(Element, { ref: ref, className: cx('iui-link-action', className), ...rest }));
+});
+LinkAction.displayName = 'LinkAction';
+/**
+ * Polymorphic link box component.
+ * Used to wrap around your component to use LinkAction.
+ * Rendered as `div` by default
+ * @example
+ * <LinkBox>
+ *   <Surface>
+ *     <LinkAction href='/new-page'>Whole card is clickable</LinkAction>
+ *   </Surface>
+ * </LinkBox>
+ */
+export const LinkBox = React.forwardRef((props, ref) => {
+    const { as: Element = 'div', className, ...rest } = props;
+    return (React.createElement(Element, { ref: ref, className: cx('iui-link-box', className), ...rest }));
+});
+LinkBox.displayName = 'LinkBox';

package/esm/core/utils/components/index.d.ts

@@ -8,3 +8,4 @@ export * from './VirtualScroll';
 export * from './VisuallyHidden';
 export * from './Icon';
 export * from './Flex';
+export * from './LinkAction';

package/esm/core/utils/components/index.js

@@ -12,3 +12,4 @@ export * from './VirtualScroll';
 export * from './VisuallyHidden';
 export * from './Icon';
 export * from './Flex';
+export * from './LinkAction';

package/esm/core/utils/hooks/index.d.ts

@@ -10,4 +10,5 @@ export * from './useSafeContext';
 export * from './useLatestRef';
 export * from './useIsomorphicLayoutEffect';
 export * from './useIsThemeAlreadySet';
+export * from './useIsClient';
 export * from './useId';

package/esm/core/utils/hooks/index.js

@@ -14,4 +14,5 @@ export * from './useSafeContext';
 export * from './useLatestRef';
 export * from './useIsomorphicLayoutEffect';
 export * from './useIsThemeAlreadySet';
+export * from './useIsClient';
 export * from './useId';

package/esm/core/utils/hooks/useIsClient.d.ts

@@ -0,0 +1 @@
+export declare const useIsClient: () => boolean;

package/esm/core/utils/hooks/useIsClient.js

@@ -0,0 +1,12 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import React from 'react';
+export const useIsClient = () => {
+    const [isClient, setIsClient] = React.useState(false);
+    React.useEffect(() => {
+        setIsClient(true);
+    }, []);
+    return isClient;
+};

package/esm/core/utils/hooks/useTheme.js

@@ -24,6 +24,11 @@ export const useTheme = (theme, themeOptions) => {
         if (!ownerDocument || isThemeAlreadySet.current) {
             return;
         }
+        // do nothing if using v1 for the main page (incremental migration)
+        if (ownerDocument.documentElement.className.includes('iui-theme-') ||
+            ownerDocument.body.classList.contains('iui-body')) {
+            return;
+        }
         ownerDocument.body.classList.toggle('iui-root', true);
         switch (theme) {
             case 'light':

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@itwin/itwinui-react",
-  "version": "2.6.0",
+  "version": "2.7.0",
   "author": "Bentley Systems",
   "license": "MIT",
   "main": "cjs/index.js",
@@ -62,7 +62,7 @@
     "dev:types": "concurrently \"tsc -p tsconfig.cjs.json --emitDeclarationOnly --watch --preserveWatchOutput\" \"tsc -p tsconfig.esm.json --emitDeclarationOnly --watch --preserveWatchOutput\""
   },
   "dependencies": {
-    "@itwin/itwinui-css": "^1.7.0",
+    "@itwin/itwinui-css": "^1.8.0",
     "@itwin/itwinui-illustrations-react": "^2.0.0",
     "@itwin/itwinui-variables": "^2.0.0",
     "@tippyjs/react": "^4.2.6",