@itwin/itwinui-react 3.16.1 → 5.0.0-alpha.1

package/cjs/core/SideNavigation/SideNavigation.d.ts

@@ -1,84 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-export declare const SidenavExpandedContext: React.Context<boolean | undefined>;
-type SideNavigationProps = {
-    /**
-     * Buttons shown in the top portion of sidenav.
-     * Recommended to use `SidenavButton` components.
-     */
-    items: React.ReactNode[];
-    /**
-     * Buttons shown at the bottom of sidenav.
-     */
-    secondaryItems?: React.ReactNode[];
-    /**
-     * Control the placement of "expander" icon button (or hide it).
-     * @default 'top'
-     */
-    expanderPlacement?: 'top' | 'bottom' | 'hidden';
-    /**
-     * Controlled flag to expand/collapse the sidenav.
-     */
-    isExpanded?: boolean;
-    /**
-     * Callback fired when the "expander" icon is clicked.
-     */
-    onExpanderClick?: () => void;
-    /**
-     * Submenu to show supplemental info assicated to the main item.
-     *
-     * Should be used with the `isSubmenuOpen` props from both `SideNavigation` and `SidenavButton`.
-     * @example
-     * <SideNavigation
-     *   // ...
-     *   submenu={(
-     *     <SidenavSubmenu>
-     *       <SidenavSubmenuHeader>Documents</SidenavSubmenuHeader>
-     *       <span>List of documents</span>
-     *     </SidenavSubmenu>
-     *   )}
-     *   isSubmenuOpen={true}
-     * />
-     */
-    submenu?: JSX.Element;
-    /**
-     * Set to true to display the provided `submenu`.
-     *
-     * Note that there is an identical prop in `SidenavButton` which should also
-     * be set to true for proper styling when submenu is open but page is not active yet.
-     * @default false
-     */
-    isSubmenuOpen?: boolean;
-    /**
-     * Passes props for SideNav wrapper.
-     */
-    wrapperProps?: React.ComponentProps<'div'>;
-    /**
-     * Passes props for SideNav content.
-     */
-    contentProps?: React.ComponentProps<'div'>;
-    /**
-     * Passes props for SideNav top.
-     */
-    topProps?: React.ComponentProps<'div'>;
-    /**
-     * Passes props for SideNav bottom.
-     */
-    bottomProps?: React.ComponentProps<'div'>;
-};
-/**
- * Left side navigation menu component.
- * @example
- * <SideNavigation
- *   items={[
- *     <SidenavButton startIcon={<SvgPlaceholder />}>App 1</SidenavButton>,
- *     <SidenavButton startIcon={<SvgPlaceholder />}>App 2</SidenavButton>,
- *     <SidenavButton startIcon={<SvgPlaceholder />}>App 3</SidenavButton>,
- *   ]}
- *   secondaryItems={[
- *     <SidenavButton startIcon={<SvgSettings />}>Settings</SidenavButton>,
- *   ]}
- * />
- */
-export declare const SideNavigation: PolymorphicForwardRefComponent<"div", SideNavigationProps>;
-export {};

package/cjs/core/SideNavigation/SideNavigation.js

@@ -1,141 +0,0 @@
-'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, {
-  SideNavigation: function () {
-    return SideNavigation;
-  },
-  SidenavExpandedContext: function () {
-    return SidenavExpandedContext;
-  },
-});
-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 _classnames = _interop_require_default._(require('classnames'));
-const _index = require('../../utils/index.js');
-const _IconButton = require('../Buttons/IconButton.js');
-const SidenavExpandedContext = _react.createContext(void 0);
-const SideNavigation = _react.forwardRef((props, forwardedRef) => {
-  let {
-    items,
-    secondaryItems,
-    expanderPlacement = 'top',
-    className,
-    isExpanded: isExpandedProp,
-    onExpanderClick,
-    submenu,
-    isSubmenuOpen = false,
-    wrapperProps,
-    contentProps,
-    topProps,
-    bottomProps,
-    ...rest
-  } = props;
-  let [isExpanded, setIsExpanded] = (0, _index.useControlledState)(
-    false,
-    isExpandedProp,
-  );
-  let ExpandButton = _react.createElement(
-    _IconButton.IconButton,
-    {
-      label: 'Toggle icon labels',
-      'aria-expanded': isExpanded,
-      className: 'iui-sidenav-button iui-expand',
-      size: 'small',
-      onClick: _react.useCallback(() => {
-        setIsExpanded((expanded) => !expanded);
-        onExpanderClick?.();
-      }, [onExpanderClick, setIsExpanded]),
-    },
-    _react.createElement(_index.SvgChevronRight, null),
-  );
-  return _react.createElement(
-    SidenavExpandedContext.Provider,
-    {
-      value: isExpanded,
-    },
-    _react.createElement(
-      _index.Box,
-      {
-        ...wrapperProps,
-        className: (0, _classnames.default)(
-          'iui-side-navigation-wrapper',
-          wrapperProps?.className,
-        ),
-        ref: forwardedRef,
-      },
-      _react.createElement(
-        _index.Box,
-        {
-          as: 'div',
-          className: (0, _classnames.default)(
-            'iui-side-navigation',
-            {
-              'iui-expanded': isExpanded,
-              'iui-collapsed': !isExpanded,
-            },
-            className,
-          ),
-          ...rest,
-        },
-        'top' === expanderPlacement && ExpandButton,
-        _react.createElement(
-          _index.Box,
-          {
-            as: 'div',
-            ...contentProps,
-            className: (0, _classnames.default)(
-              'iui-sidenav-content',
-              contentProps?.className,
-            ),
-          },
-          _react.createElement(
-            _index.Box,
-            {
-              as: 'div',
-              ...topProps,
-              className: (0, _classnames.default)(
-                'iui-top',
-                topProps?.className,
-              ),
-            },
-            items,
-          ),
-          _react.createElement(
-            _index.Box,
-            {
-              as: 'div',
-              ...bottomProps,
-              className: (0, _classnames.default)(
-                'iui-bottom',
-                bottomProps?.className,
-              ),
-            },
-            secondaryItems,
-          ),
-        ),
-        'bottom' === expanderPlacement && ExpandButton,
-      ),
-      submenu &&
-        _react.createElement(
-          _index.WithCSSTransition,
-          {
-            in: isSubmenuOpen,
-            dimension: 'width',
-            timeout: 200,
-            classNames: 'iui',
-          },
-          submenu,
-        ),
-    ),
-  );
-});

package/cjs/core/SideNavigation/SidenavButton.d.ts

@@ -1,20 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import type { ButtonProps } from '../Buttons/Button.js';
-type SidenavButtonProps = {
-    /**
-     * Whether the sidenav button is active,
-     * i.e. the current page corresponds to this button.
-     */
-    isActive?: boolean;
-    /**
-     * Whether the sidenav button only has submenu open,
-     * i.e. submenu is open but the current page does not correspond to this button.
-     */
-    isSubmenuOpen?: boolean;
-} & Omit<ButtonProps, 'styleType' | 'size'>;
-/**
- * Wrapper around Button to be used as SideNavigation items.
- * Label is hidden when sidenav is collapsed.
- */
-export declare const SidenavButton: PolymorphicForwardRefComponent<"button", SidenavButtonProps>;
-export {};

package/cjs/core/SideNavigation/SidenavButton.js

@@ -1,58 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'SidenavButton', {
-  enumerable: true,
-  get: function () {
-    return SidenavButton;
-  },
-});
-const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _classnames = _interop_require_default._(require('classnames'));
-const _react = _interop_require_wildcard._(require('react'));
-const _Button = require('../Buttons/Button.js');
-const _Tooltip = require('../Tooltip/Tooltip.js');
-const _SideNavigation = require('./SideNavigation.js');
-const SidenavButton = _react.forwardRef((props, ref) => {
-  let {
-    className,
-    children,
-    isActive = false,
-    disabled = false,
-    isSubmenuOpen = false,
-    ...rest
-  } = props;
-  let isExpanded =
-    true === _react.useContext(_SideNavigation.SidenavExpandedContext);
-  let sidenavButton = _react.createElement(
-    _Button.Button,
-    {
-      className: (0, _classnames.default)(
-        'iui-sidenav-button',
-        {
-          'iui-submenu-open': isSubmenuOpen,
-        },
-        className,
-      ),
-      'data-iui-active': isActive,
-      size: 'large',
-      disabled: disabled,
-      ref: ref,
-      ...rest,
-    },
-    children,
-  );
-  return isExpanded
-    ? sidenavButton
-    : _react.createElement(
-        _Tooltip.Tooltip,
-        {
-          content: children,
-          placement: 'right',
-          ariaStrategy: 'none',
-        },
-        sidenavButton,
-      );
-});

package/cjs/core/SideNavigation/SidenavSubmenu.d.ts

@@ -1,10 +0,0 @@
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-/**
- * Subcomponent to be used in the `submenu` prop of `SideNavigation`.
- * @example
- * <SidenavSubmenu>
- *   <SidenavSubmenuHeader>Documents</SidenavSubmenuHeader>
- *   <div> ... </div>
- * </SidenavSubmenu>
- */
-export declare const SidenavSubmenu: PolymorphicForwardRefComponent<"div">;

package/cjs/core/SideNavigation/SidenavSubmenu.js

@@ -1,36 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'SidenavSubmenu', {
-  enumerable: true,
-  get: function () {
-    return SidenavSubmenu;
-  },
-});
-const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _classnames = _interop_require_default._(require('classnames'));
-const _react = _interop_require_wildcard._(require('react'));
-const _index = require('../../utils/index.js');
-const SidenavSubmenu = _react.forwardRef((props, ref) => {
-  let { children, className, ...rest } = props;
-  return _react.createElement(
-    _index.Box,
-    {
-      className: (0, _classnames.default)(
-        'iui-side-navigation-submenu',
-        className,
-      ),
-      ref: ref,
-      ...rest,
-    },
-    _react.createElement(
-      _index.Box,
-      {
-        className: 'iui-side-navigation-submenu-content',
-      },
-      children,
-    ),
-  );
-});

package/cjs/core/SideNavigation/SidenavSubmenuHeader.d.ts

@@ -1,24 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type SidenavSubmenuHeaderProps = {
-    /**
-     * Actions shown at the end of the submenu label.
-     */
-    actions?: React.ReactNode;
-};
-/**
- * Header content for `SidenavSubmenu`. Supports truncated label and actions buttons.
- * @example
- * <SidenavSubmenuHeader actions={
- *   <IconButton styleType='borderless' onClick={() => {}} aria-label='Settings'>
- *     <SvgSettings />
- *   </IconButton>
- * }>
- *   <IconButton styleType='borderless' onClick={() => {}} aria-label='Back'>
- *     <SvgCaretLeft />
- *   </IconButton>
- *   <span>Documents</span>
- * </SidenavSubmenuHeader>
- */
-export declare const SidenavSubmenuHeader: PolymorphicForwardRefComponent<"div", SidenavSubmenuHeaderProps>;
-export {};

package/cjs/core/SideNavigation/SidenavSubmenuHeader.js

@@ -1,44 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'SidenavSubmenuHeader', {
-  enumerable: true,
-  get: function () {
-    return SidenavSubmenuHeader;
-  },
-});
-const _interop_require_default = require('@swc/helpers/_/_interop_require_default');
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _classnames = _interop_require_default._(require('classnames'));
-const _react = _interop_require_wildcard._(require('react'));
-const _index = require('../../utils/index.js');
-const SidenavSubmenuHeader = _react.forwardRef((props, forwardedRef) => {
-  let { children, actions, className, ...rest } = props;
-  return _react.createElement(
-    _index.Box,
-    {
-      className: (0, _classnames.default)(
-        'iui-side-navigation-submenu-header',
-        className,
-      ),
-      ref: forwardedRef,
-      ...rest,
-    },
-    _react.createElement(
-      _index.Box,
-      {
-        className: 'iui-side-navigation-submenu-header-label',
-      },
-      children,
-    ),
-    actions &&
-      _react.createElement(
-        _index.Box,
-        {
-          className: 'iui-side-navigation-submenu-header-actions',
-        },
-        actions,
-      ),
-  );
-});

package/cjs/core/SkipToContentLink/SkipToContentLink.d.ts

@@ -1,23 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-type SkipToContentLinkProps = {
-    /**
-     * The id of the main content that the link directs to. Don't forget the #!
-     */
-    href: string;
-    /**
-     * Localize 'Skip to main content' label.
-     * @default 'Skip to main content'
-     */
-    children?: React.ReactNode;
-};
-/**
- * `SkipToContentLink` is for screen reader and keyboard users and will not be visible unless tabbed to.
- * Provides a shortcut to the main content of the page without navigating through the header, etc.
- * Should be placed just inside the body. Set `href` to the id of your main content component. Don't forget the `#`!
- * @example
- * <body><SkipToContentLink href='#main-content-id' /> ... </body>
- * <body><SkipToContentLink href='#main-content-id'>{localizedLabel}</SkipToContentLink> ... </body>
- */
-export declare const SkipToContentLink: PolymorphicForwardRefComponent<"a", SkipToContentLinkProps>;
-export {};

package/cjs/core/SkipToContentLink/SkipToContentLink.js

@@ -1,31 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'SkipToContentLink', {
-  enumerable: true,
-  get: function () {
-    return SkipToContentLink;
-  },
-});
-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 _classnames = _interop_require_default._(require('classnames'));
-const _index = require('../../utils/index.js');
-const SkipToContentLink = _react.forwardRef((props, ref) => {
-  let { children = 'Skip to main content', className, ...rest } = props;
-  return _react.createElement(
-    _index.Box,
-    {
-      as: 'a',
-      ref: ref,
-      className: (0, _classnames.default)(
-        'iui-skip-to-content-link',
-        className,
-      ),
-      ...rest,
-    },
-    children,
-  );
-});

package/cjs/core/Slider/Slider.d.ts

@@ -1,129 +0,0 @@
-import * as React from 'react';
-import type { PolymorphicForwardRefComponent } from '../../utils/index.js';
-import type { Tooltip } from '../Tooltip/Tooltip.js';
-/**
- * Determines which segments are shown with color.
- */
-export type TrackDisplayMode = 'auto' | 'none' | 'odd-segments' | 'even-segments';
-type TooltipProps = React.ComponentProps<typeof Tooltip>;
-export type SliderProps = {
-    /**
-     * Minimum slider value.
-     * @default 0
-     */
-    min?: number;
-    /**
-     * Maximum slider value.
-     * @default 100
-     */
-    max?: number;
-    /**
-     * Array of one or more values to show.
-     */
-    values: number[];
-    /**
-     *  Determines which segments are shown with color.
-     * 'none' - no colored tracks are displayed.
-     * 'auto' - segment display is based on number of values.
-     * 'odd-segments'- colored tracks shown in segments 1,3,5, etc.
-     *                 Default if number of thumbs values are even.
-     * 'even-segments'- colored tracks shown in segments 0,2,4, etc.
-     *                 Default if number of thumbs values are odd.
-     * @default 'auto'
-     */
-    trackDisplayMode?: TrackDisplayMode;
-    /**
-     * Step increment controls what values are allowed and the amount the value will
-     * change when left and right arrows are pressed when a Thumb has focus.
-     * @default 1
-     */
-    step?: number;
-    /**
-     * Forces control to be displayed in a disabled state where no interactive value
-     * changes are allowed.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * Function that can return tooltip props including content.
-     */
-    tooltipProps?: (index: number, val: number, step: number) => Partial<Omit<TooltipProps, 'children'>>;
-    /**
-     * Either an array of labels that will be placed under auto generated tick marks
-     * that are spaced evenly across width of Slider or a custom component that allows
-     * custom content to be placed in tick mark area below slider.
-     */
-    tickLabels?: React.ReactNode;
-    /**
-     * Label for the minimum value. If undefined then the min
-     * value is shown. Use empty string for no label.
-     */
-    minLabel?: React.ReactNode;
-    /**
-     * Label for the maximum value. If undefined then the max
-     * value is shown. Use empty string for no label.
-     */
-    maxLabel?: React.ReactNode;
-    /**
-     * Additional props for container `<div>` that hold the slider thumbs, and tracks.
-     */
-    trackContainerProps?: React.HTMLAttributes<HTMLDivElement>;
-    /**
-     * Allows props to be passed for slider-min
-     */
-    minProps?: React.ComponentProps<'span'>;
-    /**
-     * Allows props to be passed for slider-max
-     */
-    maxProps?: React.ComponentProps<'span'>;
-    /**
-     * Allows props to be passed for slider-track
-     */
-    trackProps?: React.ComponentProps<'div'>;
-    /**
-     * Allows props to be passed for slider-tick
-     */
-    tickProps?: React.ComponentProps<'span'>;
-    /**
-     * Allows props to be passed for slider-ticks
-     */
-    ticksProps?: React.ComponentProps<'div'>;
-    /**
-     * Defines the allowed behavior when moving Thumbs when multiple Thumbs are
-     * shown. It controls if a Thumb movement should be limited to only move in
-     * the segments adjacent to the Thumb. Possible values:
-     * 'allow-crossing' - allows thumb to cross other thumbs. Default.
-     * 'inhibit-crossing'- keeps the thumb from crossing and separated by a step.
-     * @default 'inhibit-crossing'
-     */
-    thumbMode?: 'allow-crossing' | 'inhibit-crossing';
-    /**
-     * Callback that can provide additional props for `<div>` representing a thumb.
-     */
-    thumbProps?: (index: number) => React.ComponentPropsWithRef<'div'>;
-    /**
-     * Callback fired at the end of a thumb move (i.e. on pointerUp) and when user clicks on rail.
-     */
-    onChange?: (values: ReadonlyArray<number>) => void;
-    /**
-     * Callback fired when the value(s) of the slider are internally updated during
-     * operations like dragging a Thumb. Use this callback with caution as a
-     * high-volume of updates will occur when dragging.
-     */
-    onUpdate?: (values: ReadonlyArray<number>) => void;
-    /**
-     * The orientation of slider
-     * @default 'horizontal'
-     */
-    orientation?: 'horizontal' | 'vertical';
-};
-/**
- * Slider component that display Thumbs for each value specified along a Rail.
- * @example
- * <Slider values={[10]} min={0} max={60} disabled />
- * <Slider values={[10, 20]} min={0} max={50} step={2} />
- * <Slider values={[10, 20, 30, 40]} min={0} max={60}
- *   thumbMode='allow-crossing' />
- */
-export declare const Slider: PolymorphicForwardRefComponent<"div", SliderProps>;
-export {};