@itwin/itwinui-react 3.15.5 → 5.0.0-alpha.0

package/cjs/core/ColorPicker/ColorPicker.js

@@ -1,97 +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, {
-  ColorPicker: function () {
-    return ColorPicker;
-  },
-  getColorValue: function () {
-    return getColorValue;
-  },
-});
-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 _index = require('../../utils/index.js');
-const _classnames = _interop_require_default._(require('classnames'));
-const _ColorPickerContext = require('./ColorPickerContext.js');
-const getColorValue = (color) => {
-  if (color instanceof _index.ColorValue) return color;
-  return _index.ColorValue.create(color);
-};
-const ColorPicker = _react.forwardRef((props, forwardedRef) => {
-  let {
-    children,
-    className,
-    selectedColor,
-    onChange,
-    onChangeComplete,
-    showAlpha = false,
-    applyBackground = true,
-    ...rest
-  } = props;
-  let ref = _react.useRef(null);
-  let inColor = _react.useMemo(
-    () => getColorValue(selectedColor),
-    [selectedColor],
-  );
-  let activeColorTbgr = _react.useRef(inColor.toTbgr());
-  let [activeColor, setActiveColor] = _react.useState(inColor);
-  _react.useEffect(() => {
-    setActiveColor(inColor);
-  }, [inColor]);
-  let [hsvColor, setHsvColor] = _react.useState(() => activeColor.toHsvColor());
-  _react.useEffect(() => {
-    if (inColor.toTbgr() !== activeColorTbgr.current) {
-      activeColorTbgr.current = inColor.toTbgr();
-      setHsvColor(inColor.toHsvColor());
-    }
-  }, [inColor]);
-  let applyHsvColorChange = _react.useCallback(
-    (newColor, selectionChanged, newColorValue) => {
-      setHsvColor(newColor);
-      let newActiveColor = newColorValue ?? _index.ColorValue.create(newColor);
-      if (selectionChanged) onChangeComplete?.(newActiveColor);
-      else onChange?.(newActiveColor);
-      activeColorTbgr.current = newActiveColor.toTbgr();
-      setActiveColor(newActiveColor);
-    },
-    [onChange, onChangeComplete],
-  );
-  return _react.createElement(
-    _index.Box,
-    {
-      className: (0, _classnames.default)(
-        'iui-color-picker',
-        {
-          'iui-popover-surface': applyBackground,
-        },
-        className,
-      ),
-      ref: (0, _index.useMergedRefs)(ref, forwardedRef),
-      ...rest,
-    },
-    _react.createElement(
-      _ColorPickerContext.ColorPickerContext.Provider,
-      {
-        value: {
-          activeColor,
-          setActiveColor,
-          hsvColor,
-          applyHsvColorChange,
-          onChangeComplete,
-          showAlpha,
-        },
-      },
-      children,
-    ),
-  );
-});

package/cjs/core/ColorPicker/ColorPickerContext.d.ts

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import type { ColorValue, HsvColor } from '../../utils/index.js';
-export declare const ColorPickerContext: React.Context<{
-    activeColor: ColorValue;
-    setActiveColor: (color: ColorValue | ((prevColor: ColorValue) => ColorValue)) => void;
-    hsvColor: HsvColor;
-    onChangeComplete?: (color: ColorValue) => void;
-    applyHsvColorChange: (newColor: HsvColor, selectionChanged: boolean, newColorValue?: ColorValue) => void;
-    showAlpha: boolean;
-} | undefined>;
-export declare const useColorPickerContext: () => {
-    activeColor: ColorValue;
-    setActiveColor: (color: ColorValue | ((prevColor: ColorValue) => ColorValue)) => void;
-    hsvColor: HsvColor;
-    onChangeComplete?: (color: ColorValue) => void;
-    applyHsvColorChange: (newColor: HsvColor, selectionChanged: boolean, newColorValue?: ColorValue) => void;
-    showAlpha: boolean;
-};

package/cjs/core/ColorPicker/ColorPickerContext.js

@@ -1,30 +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, {
-  ColorPickerContext: function () {
-    return ColorPickerContext;
-  },
-  useColorPickerContext: function () {
-    return useColorPickerContext;
-  },
-});
-const _interop_require_wildcard = require('@swc/helpers/_/_interop_require_wildcard');
-const _react = _interop_require_wildcard._(require('react'));
-const ColorPickerContext = _react.createContext(void 0);
-const useColorPickerContext = () => {
-  let context = _react.useContext(ColorPickerContext);
-  if (void 0 == context)
-    throw new Error(
-      'useColorPickerContext must be used within a ColorPickerContext.Provider',
-    );
-  return context;
-};

package/cjs/core/ColorPicker/ColorSwatch.d.ts

@@ -1,20 +0,0 @@
-import { ColorValue } from '../../utils/index.js';
-import type { ColorType, PolymorphicForwardRefComponent } from '../../utils/index.js';
-type ColorSwatchProps = {
-    /**
-     * Color code.
-     */
-    color: ColorValue | ColorType;
-    /**
-     * Is color selected.
-     */
-    isActive?: boolean;
-};
-/**
- * ColorSwatch component to display within a color palette.
- * @example
- * <ColorSwatch color='#23450b' onClick={onClick}/>
- * <ColorSwatch color={{ r: 255, g: 255, b: 0 }} onClick={onClick}/>
- */
-export declare const ColorSwatch: PolymorphicForwardRefComponent<"button", ColorSwatchProps>;
-export {};

package/cjs/core/ColorPicker/ColorSwatch.js

@@ -1,54 +0,0 @@
-'use strict';
-Object.defineProperty(exports, '__esModule', {
-  value: true,
-});
-Object.defineProperty(exports, 'ColorSwatch', {
-  enumerable: true,
-  get: function () {
-    return ColorSwatch;
-  },
-});
-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 _ColorPicker = require('./ColorPicker.js');
-const _VisuallyHidden = require('../VisuallyHidden/VisuallyHidden.js');
-const ColorSwatch = _react.forwardRef((props, ref) => {
-  let { color, style, onClick, isActive, className, ...rest } = props;
-  let colorString = _react.useMemo(
-    () =>
-      'string' == typeof color
-        ? color
-        : (0, _ColorPicker.getColorValue)(color).toHslString(true),
-    [color],
-  );
-  return _react.createElement(
-    _index.Box,
-    {
-      as: onClick ? _index.ButtonBase : 'span',
-      className: (0, _classnames.default)(
-        'iui-color-swatch',
-        {
-          'iui-active': isActive,
-        },
-        className,
-      ),
-      style: {
-        '--iui-color-swatch-background': colorString,
-        ...style,
-      },
-      onClick: onClick,
-      'aria-pressed': !!onClick && isActive ? 'true' : void 0,
-      ref: ref,
-      ...rest,
-    },
-    props.children ??
-      _react.createElement(
-        _VisuallyHidden.VisuallyHidden,
-        null,
-        colorString.toUpperCase(),
-      ),
-  );
-});

package/cjs/core/ComboBox/ComboBox.d.ts

@@ -1,119 +0,0 @@
-import * as React from 'react';
-import type { SelectOption } from '../Select/Select.js';
-import type { Input } from '../Input/Input.js';
-import { usePopover } from '../Popover/Popover.js';
-import type { InputContainerProps, CommonProps, PortalProps } from '../../utils/index.js';
-import { ComboBoxEndIcon } from './ComboBoxEndIcon.js';
-type ActionType = 'added' | 'removed';
-type MultipleOnChangeProps<T> = {
-    value: T;
-    type: ActionType;
-};
-export type ComboboxMultipleTypeProps<T> = {
-    /**
-     * Enable multiple selection.
-     * @default false
-     */
-    multiple?: false;
-    /**
-     * Controlled value of ComboBox.
-     * If `multiple` is enabled, it is an array of values.
-     *
-     * Pass `null` or `undefined` to reset the value. Apart from resetting the value:
-     * * `value={null}` will switch to/remain in the *controlled* state.
-     * * `value={undefined}` will switch to/remain in the *uncontrolled* state.
-     */
-    value?: T | null | undefined;
-    /**
-     * Default value of `value` that is set on initial render. This is useful when you don't want to
-     * maintain your own state but still want to control the initial `value`.
-     */
-    defaultValue?: T | null;
-    /**
-     * Callback fired when selected value changes.
-     */
-    onChange?: (value: T) => void;
-} | {
-    multiple: true;
-    value?: T[] | null | undefined;
-    defaultValue?: T[] | null;
-    onChange?: (value: T[], event: MultipleOnChangeProps<T>) => void;
-};
-export type ComboBoxProps<T> = {
-    /**
-     * Array of options that populate the dropdown list.
-     */
-    options: SelectOption<T>[];
-    /**
-     * Message shown below the combobox.
-     * Use `StatusMessage` component.
-     */
-    message?: React.ReactNode;
-    /**
-     * Function to customize the default filtering logic.
-     */
-    filterFunction?: (options: SelectOption<T>[], inputValue: string) => SelectOption<T>[];
-    /**
-     * Native input element props.
-     */
-    inputProps?: React.ComponentProps<typeof Input>;
-    /**
-     * Props to customize dropdown menu behavior.
-     */
-    dropdownMenuProps?: React.ComponentProps<'div'> & Pick<Parameters<typeof usePopover>['0'], 'middleware'> & Pick<PortalProps, 'portal'>;
-    /**
-     * End icon props.
-     */
-    endIconProps?: React.ComponentProps<typeof ComboBoxEndIcon>;
-    /**
-     * Message shown when no options are available.
-     * If `JSX.Element` is provided, it will be rendered as is and won't be wrapped with `MenuExtraContent`.
-     * @default 'No options found'
-     */
-    emptyStateMessage?: React.ReactNode;
-    /**
-     * A custom item renderer can be specified to control the rendering.
-     *
-     * For keyboard navigation to work, the returned element should use the `id` provided by this function.
-     * The `isFocused` state is calculated using this `id` and can be used for specifying the focus styling.
-     * If a `MenuItem` is returned, then focus styling is automatically handled.
-     */
-    itemRenderer?: (option: SelectOption<T>, states: {
-        isSelected: boolean;
-        isFocused: boolean;
-        id: string;
-        index: number;
-    }) => JSX.Element;
-    /**
-     * If enabled, virtualization is used for the scrollable dropdown list.
-     * Use it if you expect a very long list of items.
-     * @default false
-     * @beta
-     */
-    enableVirtualization?: boolean;
-    /**
-     * Callback fired when dropdown menu is opened.
-     */
-    onShow?: () => void;
-    /**
-     * Callback fired when dropdown menu is closed.
-     */
-    onHide?: () => void;
-} & ComboboxMultipleTypeProps<T> & Pick<InputContainerProps, 'status'> & CommonProps;
-/**
- * ComboBox component that allows typing a value to filter the options in dropdown list.
- * Values can be selected either using mouse clicks or using the Enter key.
- * @example
- * <ComboBox
- *   options={[
- *     { label: 'Item 1', value: 1 },
- *     { label: 'Item 2', value: 2 },
- *     { label: 'Item 3', value: 3 },
- *   ]}
- *   onChange={() => {}}
- * />
- */
-export declare const ComboBox: <T>(props: ComboBoxProps<T> & {
-    ref?: React.ForwardedRef<HTMLElement>;
-}) => JSX.Element;
-export {};