@itwin/itwinui-react 3.15.4 → 3.16.0

package/cjs/core/DatePicker/DatePicker.d.ts

@@ -29,8 +29,8 @@ export type DateRangePickerProps = {
     onChange?: (date: Date) => void;
 } | {
     enableRangeSelect: true;
-    startDate: Date;
-    endDate: Date;
+    startDate?: Date;
+    endDate?: Date;
     onChange?: (startDate: Date, endDate: Date) => void;
 };
 type DatePickerProps = {

package/cjs/core/DatePicker/DatePicker.js

@@ -148,6 +148,7 @@ const DatePicker = _react.forwardRef((props, forwardedRef) => {
     showDatesOutsideMonth = true,
     ...rest
   } = props;
+  let logWarning = (0, _index.useWarningLogger)();
   let monthNames = localizedNames?.months ?? defaultMonths;
   let shortDays = localizedNames?.shortDays ?? defaultShortDays;
   let longDays = localizedNames?.days ?? defaultLongDays;
@@ -192,7 +193,7 @@ const DatePicker = _react.forwardRef((props, forwardedRef) => {
   let popoverInitialFocusContext = _react.useContext(
     _Popover.PopoverInitialFocusContext,
   );
-  _react.useLayoutEffect(() => {
+  (0, _index.useLayoutEffect)(() => {
     if (setFocus && popoverInitialFocusContext)
       popoverInitialFocusContext.setInitialFocus(-1);
   }, [popoverInitialFocusContext, setFocus]);

package/cjs/core/Dialog/Dialog.js

@@ -23,7 +23,7 @@ const _reacttransitiongroup = require('react-transition-group');
 const DialogComponent = _react.forwardRef((props, ref) => {
   let {
     trapFocus = false,
-    setFocus = false,
+    setFocus = trapFocus,
     preventDocumentScroll = false,
     isOpen = false,
     isDismissible = true,

package/cjs/core/Dialog/DialogContext.d.ts

@@ -30,13 +30,17 @@ export type DialogContextProps = {
      */
     closeOnEsc?: boolean;
     /**
-     * Traps the focus inside the dialog. This is useful when the dialog is modal.
+     * Prevents focus from leaving the dialog. This is useful when the dialog is modal.
+     *
+     * Setting this prop to `true` will also set `setFocus` to `true`.
+     *
      * @default false
      */
     trapFocus?: boolean;
     /**
      * If true, focuses the dialog.
-     * @default false
+     *
+     * Defaults to `true` if `trapFocus` is set to `true`, otherwise defaults to `false`.
      */
     setFocus?: boolean;
     /**

package/cjs/core/NonIdealState/NonIdealState.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
 type NonIdealStateProps = {
     /**
-     * An svg component, preferably from @itwin/itwinui-illustrations-react.
+     * An svg component, preferably from `@itwin/itwinui-illustrations-react`.
      *
      * @example
      * import { Svg404 } from '@itwin/itwinui-illustrations-react';
@@ -10,13 +10,17 @@ type NonIdealStateProps = {
      */
     svg: React.ReactNode;
     /**
-     * Primary heading for the error page
+     * Primary heading for the `NonIdealState`
      */
     heading?: React.ReactNode;
     /**
      * Secondary text to explain the error
      * Can include html in order to provide a hyperlink
-     * E.g. `Please visit <a href="https://www.bentley.com/help">our support page</a> for help.`
+     *
+     * @example
+     * <>
+     *   Please visit <Anchor href="https://www.bentley.com/help">our support page</Anchor> for help.
+     * </>
      */
     description?: React.ReactNode;
     /**
@@ -24,13 +28,13 @@ type NonIdealStateProps = {
      * Typically should be a primary and secondary button.
      *
      * @example
-     * <ErrorPage
-     *  actions={
-     *   <>
-     *    <Button styleType={'high-visibility'}>Retry</Button>
-     *    <Button>Contact us</Button>
-     *   </>
-     *  }
+     * <NonIdealState
+     *   actions={
+     *     <>
+     *       <Button styleType={'high-visibility'}>Retry</Button>
+     *       <Button>Contact us</Button>
+     *     </>
+     *   }
      * />
      */
     actions?: React.ReactNode;
@@ -53,7 +57,7 @@ type NonIdealStateProps = {
 };
 /**
  * A stylized display to communicate common http errors and other non-ideal states.
- * Works well with svgs from @itwin/itwinui-illustrations-react.
+ * Works well with svgs from `@itwin/itwinui-illustrations-react`.
  *
  * @example
  * <NonIdealState svg={<Svg404 />} heading='Not found' />

package/cjs/core/Panels/Panels.d.ts

@@ -0,0 +1,174 @@
+import * as React from 'react';
+import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
+import { Text } from '../Typography/Text.js';
+import type { FocusEntry, PanelsInstance, TriggerMapEntry } from './helpers.js';
+type PanelsWrapperProps = {
+    /**
+     * Function that gets called when the active panel is changed.
+     */
+    onActiveIdChange?: (newActiveId: string) => void;
+    children: React.ReactNode;
+    /**
+     * Pass an instance created by `useInstance` to control the panels imperatively.
+     *
+     * @example
+     * const panels = Panels.useInstance();
+     * <Panels instance={panels} />
+     */
+    instance?: PanelsInstance;
+};
+export declare const PanelsWrapper: PolymorphicForwardRefComponent<"div", PanelsWrapperProps>;
+export declare const PanelsWrapperContext: React.Context<{
+    activePanelId: string | undefined;
+    setActivePanelId: React.Dispatch<React.SetStateAction<string>>;
+    /**
+     * Simpler alternative to a full history stack.
+     *
+     * ```
+     * Record<
+     *   string, // Id of a panel
+     *   {
+     *     triggerId: string, // Id of the trigger element that points to this panel
+     *     panelId: string, // Id of the panel element in which the trigger is present
+     *   }
+     * >
+     * ```
+     */
+    triggers: Record<string, TriggerMapEntry>;
+    setTriggers: React.Dispatch<React.SetStateAction<Record<string, TriggerMapEntry>>>;
+    changeActivePanel: (newActiveId: string) => void;
+    shouldFocus: FocusEntry;
+    setShouldFocus: React.Dispatch<React.SetStateAction<FocusEntry>>;
+    panels: React.MutableRefObject<Set<string>>;
+} | undefined>;
+type PanelProps = {
+    id: string;
+};
+type PanelTriggerProps = {
+    for: string;
+    children: React.ReactElement;
+};
+type PanelHeaderProps = {
+    titleProps?: React.ComponentProps<typeof Text>;
+};
+export declare const Panels: {
+    /**
+     * Component that manages the logic for layered panels.
+     * It can be used anywhere to create layers. E.g. `Menu`, `InformationPanel`, `Popover`, etc.
+     *
+     * Requirements:
+     * - The initial displayed Panel should be the first `Panel` in the `Panels.Wrapper`.
+     * - A panel can have only one trigger pointing to it. i.e. out of all the triggers across all panels,
+     *   only one can point to a particular panel.
+     * - The `Panels.Panel`s within the wrapper should be in the order of the navigation. E.g.:
+     *   ```jsx
+     *   <Panels.Wrapper>
+     *     <Panels.Panel id={root} /> // Must come before moreDetails since it contains the trigger to moreDetails
+     *     <Panels.Panel id={moreDetails}> // Must come after root since it is navigated to from root
+     *   </Panels.Wrapper>
+     *   ```
+     *
+     * @example
+     * <Panels.Wrapper as={Surface}>
+     *   <Panels.Panel
+     *     id={panelIdRoot}
+     *     as={Surface}
+     *     border={false}
+     *     elevation={0}
+     *   >
+     *     <Surface.Header as={Panels.Header}>Root</Surface.Header>
+     *     <Surface.Body as={List}>
+     *       <ListItem>
+     *         <Panels.Trigger for={panelIdMoreInfo}>
+     *           <ListItem.Action>More details</ListItem.Action>
+     *         </Panels.Trigger>
+     *       </ListItem>
+     *     </Surface.Body>
+     *   </Panels.Panel>
+     *
+     *   <Panels.Panel
+     *     id={panelIdMoreInfo}
+     *     as={Surface}
+     *     border={false}
+     *     elevation={0}
+     *   >
+     *     <Surface.Header as={Panels.Header}>More details</Surface.Header>
+     *     <Surface.Body isPadded>
+     *       <Text>Content</Text>
+     *     </Surface.Body>
+     *   </Panels.Panel>
+     * </Panels.Wrapper>
+     */
+    Wrapper: PolymorphicForwardRefComponent<"div", PanelsWrapperProps>;
+    /**
+     * Takes an `id` and the panel content.
+     * Match this `id` with a `Panels.Triggers`'s `for` prop to create a link between them.
+     *
+     * @example
+     * <Panels.Panel id={panelIdRoot} as={Surface} border={false} elevation={0}>
+     *   <Surface.Header as={Panels.Header}>Root</Surface.Header>
+     *   <Surface.Body as={List}>
+     *     <ListItem>
+     *       <Panels.Trigger for={panelIdMoreInfo}>
+     *         <ListItem.Action>More details</ListItem.Action>
+     *       </Panels.Trigger>
+     *     </ListItem>
+     *   </Surface.Body>
+     * </Panels.Panel>
+     */
+    Panel: PolymorphicForwardRefComponent<"div", PanelProps>;
+    /**
+     * Wraps the clickable element and appends an `onClick` to change the active panel to the one specified in the `for`
+     * prop. Also appends some attributes for accessibility.
+     *
+     * @example
+     * <Panels.Trigger for={nextPanelId}>
+     *   <Button>go to next panel</Button>
+     * </Panels.Trigger>
+     *
+     * @example
+     * <ListItem>
+     *   <Panels.Trigger for={panelIdMoreInfo}>
+     *     <ListItem.Action>More details</ListItem.Action>
+     *   </Panels.Trigger>
+     * </ListItem>
+     */
+    Trigger: {
+        (props: PanelTriggerProps): string | number | true | React.ReactElement<any, string | React.JSXElementConstructor<any>> | Iterable<React.ReactNode> | null;
+        displayName: string;
+    };
+    /**
+     * Required component to add an accessible name and also a back button (if previous panel exists) to the panel.
+     *
+     * @example
+     * <Panels.Panel id={panelIdRoot}>
+     *   <Panels.Header>Root</Panels.Header>
+     *   …
+     * </Panels.Panel>
+     *
+     * @example
+     * <Panels.Panel
+     *   id={panelIdMoreInfo}
+     *   as={Surface}
+     *   border={false}
+     *   elevation={0}
+     * >
+     *   <Surface.Header as={Panels.Header}>More details</Surface.Header>
+     *   <Surface.Body isPadded>
+     *     <Text>Content</Text>
+     *   </Surface.Body>
+     * </Panels.Panel>
+     */
+    Header: PolymorphicForwardRefComponent<"div", PanelHeaderProps>;
+    /**
+     * You can use methods from `Panels.useInstance()` to control the state programmatically.
+     *
+     * @example
+     * const panels = Panels.useInstance();
+     *
+     * <Button onClick={() => panels.goBack()}>Go back</Button>
+     * <Panels.Wrapper instance={panels}>{…}</Panels.Wrapper>;
+     */
+    useInstance: () => PanelsInstance;
+};
+export {};

package/cjs/core/Panels/Panels.js

@@ -0,0 +1,312 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  Panels: function () {
+    return Panels;
+  },
+  PanelsWrapper: function () {
+    return PanelsWrapper;
+  },
+  PanelsWrapperContext: function () {
+    return PanelsWrapperContext;
+  },
+});
+const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _reactdom = _interop_require_wildcard._(require('react-dom'));
+const _index = require('../../utils/index.js');
+const _IconButton = require('../Buttons/IconButton.js');
+const _Flex = require('../Flex/Flex.js');
+const _Text = require('../Typography/Text.js');
+const _classnames = _interop_require_default._(require('classnames'));
+const _helpers = require('./helpers.js');
+const PanelsWrapper = _react.forwardRef((props, forwardedRef) => {
+  let {
+    children,
+    className,
+    onActiveIdChange: onActiveIdChangeProp,
+    instance,
+    ...rest
+  } = props;
+  let onActiveIdChange = (0, _index.useLatestRef)(onActiveIdChangeProp);
+  let ref = _react.useRef(null);
+  let [activePanelId, setActivePanelId] = _react.useState(void 0);
+  let [triggers, setTriggers] = _react.useState({});
+  let panels = _react.useRef(new Set());
+  let [shouldFocus, setShouldFocus] = _react.useState(void 0);
+  let motionOk = (0, _index.useMediaQuery)(
+    '(prefers-reduced-motion: no-preference)',
+  );
+  let changeActivePanel = _react.useCallback(
+    (newActiveId) => {
+      if (!panels.current.has(newActiveId) || newActiveId === activePanelId)
+        return;
+      _reactdom.flushSync(() => setActivePanelId(newActiveId));
+      onActiveIdChange.current?.(newActiveId);
+      ref.current?.ownerDocument.getElementById(newActiveId)?.scrollIntoView({
+        block: 'nearest',
+        inline: 'center',
+        behavior: motionOk ? 'smooth' : 'instant',
+      });
+    },
+    [activePanelId, motionOk, onActiveIdChange],
+  );
+  return _react.createElement(
+    PanelsWrapperContext.Provider,
+    {
+      value: _react.useMemo(
+        () => ({
+          activePanelId,
+          setActivePanelId,
+          changeActivePanel,
+          triggers,
+          setTriggers,
+          shouldFocus,
+          setShouldFocus,
+          panels,
+        }),
+        [
+          activePanelId,
+          changeActivePanel,
+          setActivePanelId,
+          setTriggers,
+          shouldFocus,
+          triggers,
+        ],
+      ),
+    },
+    _react.createElement(
+      _helpers.PanelsInstanceProvider,
+      {
+        instance: instance,
+      },
+      _react.createElement(
+        _index.Box,
+        {
+          ref: (0, _index.useMergedRefs)(ref, forwardedRef),
+          ...rest,
+          className: (0, _classnames.default)('iui-panel-wrapper', className),
+        },
+        children,
+      ),
+    ),
+  );
+});
+const PanelsWrapperContext = _react.createContext(void 0);
+const Panel = _react.forwardRef((props, forwardedRef) => {
+  let { id, children, className, ...rest } = props;
+  let { activePanelId, triggers, panels, setActivePanelId } = (0,
+  _index.useSafeContext)(PanelsWrapperContext);
+  let associatedTrigger = _react.useMemo(() => triggers[id], [id, triggers]);
+  let previousActivePanelId = useDelayed(activePanelId) || activePanelId;
+  let isMounted = [activePanelId, previousActivePanelId].includes(id);
+  let isTransitioning =
+    activePanelId === id && activePanelId !== previousActivePanelId;
+  let isInert = previousActivePanelId === id && activePanelId !== id;
+  (0, _index.useLayoutEffect)(() => {
+    let isFirstPanel = null == activePanelId && 0 === panels.current.size;
+    if (isFirstPanel) setActivePanelId(id);
+    let panelsCurrent = panels.current;
+    if (!panelsCurrent.has(id)) panelsCurrent.add(id);
+    return () => {
+      panelsCurrent.delete(id);
+    };
+  }, [activePanelId, id, panels, setActivePanelId]);
+  return _react.createElement(
+    PanelContext.Provider,
+    {
+      value: _react.useMemo(
+        () => ({
+          id,
+          associatedTrigger,
+        }),
+        [associatedTrigger, id],
+      ),
+    },
+    isMounted &&
+      _react.createElement(
+        _index.Box,
+        {
+          ref: forwardedRef,
+          id: id,
+          className: (0, _classnames.default)('iui-panel', className),
+          'aria-labelledby': `${id}-header-title`,
+          role: 'group',
+          inert: isInert ? '' : void 0,
+          'data-iui-transitioning': isTransitioning ? 'true' : void 0,
+          ...rest,
+        },
+        children,
+      ),
+  );
+});
+const PanelContext = _react.createContext(void 0);
+const PanelTrigger = (props) => {
+  let { children, for: forProp } = props;
+  let {
+    changeActivePanel,
+    triggers,
+    setTriggers,
+    activePanelId: activePanel,
+    shouldFocus,
+    setShouldFocus,
+    panels,
+  } = (0, _index.useSafeContext)(PanelsWrapperContext);
+  let { id: panelId } = (0, _index.useSafeContext)(PanelContext);
+  let fallbackId = _react.useId();
+  let triggerId = children.props.id || fallbackId;
+  let onClick = _react.useCallback(() => {
+    if (null == activePanel) return;
+    setShouldFocus({
+      fromPanelId: activePanel,
+      toPanelId: forProp,
+      direction: 'forward',
+    });
+    changeActivePanel?.(forProp);
+  }, [activePanel, changeActivePanel, forProp, setShouldFocus]);
+  let focusRef = _react.useCallback(
+    (el) => {
+      if (
+        shouldFocus?.direction === 'backward' &&
+        shouldFocus?.toPanelId === panelId &&
+        shouldFocus?.fromPanelId === forProp
+      ) {
+        el?.focus({
+          preventScroll: true,
+        });
+        setShouldFocus(void 0);
+      }
+    },
+    [forProp, panelId, setShouldFocus, shouldFocus],
+  );
+  let logWarning = (0, _index.useWarningLogger)();
+  _react.useEffect(() => {
+    if (!panels.current.has(forProp))
+      logWarning(
+        `Panels.Trigger's \`for\` prop ("${forProp}") corresponds to no Panel.`,
+      );
+  }, [forProp, logWarning, panels, triggers]);
+  _react.useEffect(() => {
+    setTriggers((oldTriggers) => {
+      let triggersMatch = oldTriggers[forProp];
+      if (
+        null == triggersMatch ||
+        panelId !== triggersMatch.panelId ||
+        triggerId !== triggersMatch.triggerId
+      )
+        return {
+          ...oldTriggers,
+          [forProp]: {
+            panelId,
+            triggerId,
+          },
+        };
+      return oldTriggers;
+    });
+  }, [forProp, panelId, setTriggers, triggerId]);
+  return (0, _index.cloneElementWithRef)(children, (children) => ({
+    ...children.props,
+    id: triggerId,
+    ref: focusRef,
+    onClick: (0, _index.mergeEventHandlers)(children.props.onClick, onClick),
+    'aria-expanded': activePanel === forProp,
+    'aria-controls': forProp,
+  }));
+};
+const PanelHeader = _react.forwardRef((props, forwardedRef) => {
+  let { titleProps, children, ...rest } = props;
+  let { shouldFocus, setShouldFocus } = (0, _index.useSafeContext)(
+    PanelsWrapperContext,
+  );
+  let { id: panelId, associatedTrigger: panelAssociatedTrigger } = (0,
+  _index.useSafeContext)(PanelContext);
+  let focusRef = _react.useCallback(
+    (el) => {
+      if (
+        shouldFocus?.direction === 'forward' &&
+        shouldFocus.toPanelId === panelId
+      ) {
+        el?.focus({
+          preventScroll: true,
+        });
+        setShouldFocus(void 0);
+      }
+    },
+    [panelId, setShouldFocus, shouldFocus?.direction, shouldFocus?.toPanelId],
+  );
+  return _react.createElement(
+    _Flex.Flex,
+    {
+      ref: forwardedRef,
+      ...rest,
+    },
+    panelAssociatedTrigger && _react.createElement(PanelBackButton, null),
+    _react.createElement(
+      _Text.Text,
+      {
+        id: `${panelId}-header-title`,
+        as: 'h2',
+        tabIndex: -1,
+        ref: focusRef,
+        ...titleProps,
+      },
+      children,
+    ),
+  );
+});
+const PanelBackButton = _react.forwardRef((props, forwardedRef) => {
+  let { children, onClick, ...rest } = props;
+  let { instance: panelInstance } = (0, _index.useSafeContext)(
+    _helpers.PanelsInstanceContext,
+  );
+  return _react.createElement(
+    _IconButton.IconButton,
+    {
+      ref: forwardedRef,
+      'aria-label': 'Previous panel',
+      styleType: 'borderless',
+      size: 'small',
+      'data-iui-shift': 'left',
+      ...rest,
+      onClick: (0, _index.mergeEventHandlers)(
+        _react.useCallback(() => panelInstance?.goBack(), [panelInstance]),
+        onClick,
+      ),
+    },
+    children || _react.createElement(_index.SvgChevronLeft, null),
+  );
+});
+const Panels = {
+  Wrapper: PanelsWrapper,
+  Panel,
+  Trigger: PanelTrigger,
+  Header: PanelHeader,
+  useInstance: _index.useInstance,
+};
+function useDelayed(
+  value,
+  { delay } = {
+    delay: 500,
+  },
+) {
+  let [delayed, setDelayed] = _react.useState(void 0);
+  let timeout = _react.useRef(void 0);
+  _react.useEffect(() => {
+    if (0 === delay) setDelayed(value);
+    else timeout.current = setTimeout(() => setDelayed(value), delay);
+    return () => {
+      clearTimeout(timeout.current);
+    };
+  }, [value, delay]);
+  return delayed;
+}

package/cjs/core/Panels/helpers.d.ts

@@ -0,0 +1,23 @@
+import * as React from 'react';
+export type PanelsInstance = {
+    /** Go back to the panel that has a trigger that points to the current panel. */
+    goBack: () => void;
+};
+export type TriggerMapEntry = {
+    triggerId: string;
+    panelId: string;
+};
+export type FocusEntry = {
+    fromPanelId: string;
+    toPanelId: string;
+    direction: 'forward' | 'backward';
+} | undefined;
+export declare const PanelsInstanceContext: React.Context<{
+    instance: PanelsInstance;
+} | undefined>;
+type PanelInstanceProviderProps = {
+    children: React.ReactNode;
+    instance: PanelsInstance | undefined;
+};
+export declare const PanelsInstanceProvider: (props: PanelInstanceProviderProps) => React.JSX.Element;
+export {};

package/cjs/core/Panels/helpers.js

@@ -0,0 +1,61 @@
+'use strict';
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+function _export(target, all) {
+  for (var name in all)
+    Object.defineProperty(target, name, {
+      enumerable: true,
+      get: all[name],
+    });
+}
+_export(exports, {
+  PanelsInstanceContext: function () {
+    return PanelsInstanceContext;
+  },
+  PanelsInstanceProvider: function () {
+    return PanelsInstanceProvider;
+  },
+});
+const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
+const _react = _interop_require_wildcard._(require('react'));
+const _index = require('../../utils/index.js');
+const _Panels = require('./Panels.js');
+const PanelsInstanceContext = _react.createContext(void 0);
+const PanelsInstanceProvider = (props) => {
+  let { children, instance: instanceProp } = props;
+  let instanceBackup = _Panels.Panels.useInstance();
+  let instance = instanceProp || instanceBackup;
+  let { activePanelId, changeActivePanel, triggers, setShouldFocus } = (0,
+  _index.useSafeContext)(_Panels.PanelsWrapperContext);
+  let goBack = _react.useCallback(async () => {
+    if (null == activePanelId) return;
+    let trigger = triggers[activePanelId];
+    if (null != trigger.triggerId) {
+      setShouldFocus({
+        fromPanelId: activePanelId,
+        toPanelId: trigger.panelId,
+        direction: 'backward',
+      });
+      changeActivePanel(trigger.panelId);
+    }
+  }, [activePanelId, changeActivePanel, setShouldFocus, triggers]);
+  (0, _index.useSynchronizeInstance)(
+    instance,
+    _react.useMemo(
+      () => ({
+        goBack,
+      }),
+      [goBack],
+    ),
+  );
+  return _react.createElement(
+    PanelsInstanceContext.Provider,
+    {
+      value: {
+        instance,
+      },
+    },
+    children,
+  );
+};