@carbon/react 1.24.0-rc.0 → 1.24.0

package/es/components/ListBox/ListBoxMenuItem.d.ts

@@ -16,9 +16,9 @@ export interface ListBoxMenuItemProps extends ReactAttr<HTMLDivElement> {
      */
     isHighlighted?: boolean;
 }
-export type ListBoxMenuItemForwardedRef = ForwardedRef<HTMLDivElement> & {
+export type ListBoxMenuItemForwardedRef = (ForwardedRef<HTMLDivElement> & {
     menuItemOptionRef?: React.Ref<HTMLDivElement>;
-} | null;
+}) | null;
 export type ListBoxMenuItemComponent = ForwardRefReturn<ListBoxMenuItemForwardedRef, ListBoxMenuItemProps>;
 declare const _default: ListBoxMenuItemComponent;
 export default _default;

package/es/components/Menu/Menu.js

@@ -97,10 +97,6 @@ var Menu = /*#__PURE__*/React__default.forwardRef(function Menu(_ref, forwardRef
       returnFocus();
     }
 
-    childDispatch({
-      type: 'clearRegisteredItems'
-    });
-
     if (onClose) {
       onClose();
     }

package/es/components/Menu/MenuContext.js

@@ -25,12 +25,9 @@ function menuReducer(state, action) {
 
     case 'registerItem':
       return _objectSpread2(_objectSpread2({}, state), {}, {
-        items: [].concat(_toConsumableArray(state.items), [action.payload])
-      });
-
-    case 'clearRegisteredItems':
-      return _objectSpread2(_objectSpread2({}, state), {}, {
-        items: []
+        items: [].concat(_toConsumableArray(state.items), [action.payload]).filter(function (item) {
+          return item.ref.current !== null;
+        })
       });
   }
 }

package/es/components/Popover/index.d.ts

@@ -0,0 +1,51 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React from 'react';
+import { PolymorphicProps } from '../../types/common';
+export type PopoverAlignment = 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right' | 'left' | 'left-bottom' | 'left-top' | 'right' | 'right-bottom' | 'right-top';
+interface PopoverBaseProps {
+    /**
+     * Specify how the popover should align with the trigger element
+     */
+    align?: PopoverAlignment;
+    /**
+     * Will auto-align the popover on first render if it is not visible. This prop is currently experimental and is subject to futurue changes.
+     */
+    autoAlign?: boolean;
+    /**
+     * Specify whether a caret should be rendered
+     */
+    caret?: boolean;
+    /**
+     * Provide elements to be rendered inside of the component
+     */
+    children?: React.ReactNode;
+    /**
+     * Provide a custom class name to be added to the outermost node in the
+     * component
+     */
+    className?: string;
+    /**
+     * Specify whether a drop shadow should be rendered on the popover
+     */
+    dropShadow?: boolean;
+    /**
+     * Render the component using the high-contrast variant
+     */
+    highContrast?: boolean;
+    /**
+     * Specify whether the component is currently open or closed
+     */
+    open: boolean;
+}
+export type PopoverProps<T extends React.ElementType> = PolymorphicProps<T, PopoverBaseProps>;
+declare const Popover: React.ForwardRefExoticComponent<Pick<PopoverBaseProps & Omit<any, "as"> & {
+    as?: React.ElementType<any> | undefined;
+}, string | number | symbol> & React.RefAttributes<Element>>;
+export type PopoverContentProps = React.HTMLAttributes<HTMLSpanElement>;
+declare const PopoverContent: React.ForwardRefExoticComponent<PopoverContentProps & React.RefAttributes<HTMLSpanElement>>;
+export { Popover, PopoverContent };

package/es/components/Popover/index.js

@@ -20,29 +20,28 @@ var PopoverContext = /*#__PURE__*/React__default.createContext({
     current: null
   }
 });
-var Popover = /*#__PURE__*/React__default.forwardRef(function Popover(props, forwardRef) {
+var Popover = /*#__PURE__*/React__default.forwardRef(function (_ref, forwardRef) {
   var _cx;
 
-  var _props$align = props.align,
-      align = _props$align === void 0 ? 'bottom' : _props$align,
-      _props$as = props.as,
-      BaseComponent = _props$as === void 0 ? 'span' : _props$as,
-      _props$autoAlign = props.autoAlign,
-      autoAlign = _props$autoAlign === void 0 ? false : _props$autoAlign,
-      _props$caret = props.caret,
-      caret = _props$caret === void 0 ? true : _props$caret,
-      customClassName = props.className,
-      children = props.children,
-      _props$dropShadow = props.dropShadow,
-      dropShadow = _props$dropShadow === void 0 ? true : _props$dropShadow,
-      _props$highContrast = props.highContrast,
-      highContrast = _props$highContrast === void 0 ? false : _props$highContrast,
-      open = props.open,
-      rest = _objectWithoutProperties(props, _excluded);
+  var _ref$align = _ref.align,
+      align = _ref$align === void 0 ? 'bottom' : _ref$align,
+      as = _ref.as,
+      _ref$autoAlign = _ref.autoAlign,
+      autoAlign = _ref$autoAlign === void 0 ? false : _ref$autoAlign,
+      _ref$caret = _ref.caret,
+      caret = _ref$caret === void 0 ? true : _ref$caret,
+      customClassName = _ref.className,
+      children = _ref.children,
+      _ref$dropShadow = _ref.dropShadow,
+      dropShadow = _ref$dropShadow === void 0 ? true : _ref$dropShadow,
+      _ref$highContrast = _ref.highContrast,
+      highContrast = _ref$highContrast === void 0 ? false : _ref$highContrast,
+      open = _ref.open,
+      rest = _objectWithoutProperties(_ref, _excluded);
 
   var prefix = usePrefix();
-  var floating = useRef();
-  var popover = useRef();
+  var floating = useRef(null);
+  var popover = useRef(null);
   var value = useMemo(function () {
     return {
       floating: floating
@@ -60,7 +59,7 @@ var Popover = /*#__PURE__*/React__default.forwardRef(function Popover(props, for
       autoAlignment = _useState4[0],
       setAutoAlignment = _useState4[1];
 
-  var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--popover-container"), true), _defineProperty(_cx, "".concat(prefix, "--popover--caret"), caret), _defineProperty(_cx, "".concat(prefix, "--popover--drop-shadow"), dropShadow), _defineProperty(_cx, "".concat(prefix, "--popover--high-contrast"), highContrast), _defineProperty(_cx, "".concat(prefix, "--popover--open"), open), _defineProperty(_cx, "".concat(prefix, "--popover--").concat(autoAlignment), autoAligned), _defineProperty(_cx, "".concat(prefix, "--popover--").concat(align), !autoAligned), _defineProperty(_cx, customClassName, !!customClassName), _cx));
+  var className = cx((_cx = {}, _defineProperty(_cx, "".concat(prefix, "--popover-container"), true), _defineProperty(_cx, "".concat(prefix, "--popover--caret"), caret), _defineProperty(_cx, "".concat(prefix, "--popover--drop-shadow"), dropShadow), _defineProperty(_cx, "".concat(prefix, "--popover--high-contrast"), highContrast), _defineProperty(_cx, "".concat(prefix, "--popover--open"), open), _defineProperty(_cx, "".concat(prefix, "--popover--").concat(autoAlignment), autoAligned), _defineProperty(_cx, "".concat(prefix, "--popover--").concat(align), !autoAligned), _cx), customClassName);
   useIsomorphicEffect(function () {
     if (!open) {
       return;
@@ -108,6 +107,10 @@ var Popover = /*#__PURE__*/React__default.forwardRef(function Popover(props, for
     }
 
     function isVisible(alignment) {
+      if (!popover.current || !floating.current) {
+        return false;
+      }
+
       popover.current.classList.add("".concat(prefix, "--popover--").concat(alignment));
       var rect = floating.current.getBoundingClientRect(); // Check if popover is not visible to the left of the screen
 
@@ -154,6 +157,7 @@ var Popover = /*#__PURE__*/React__default.forwardRef(function Popover(props, for
       setAutoAlignment(alignment);
     }
   }, [autoAligned, align, autoAlign, prefix, open]);
+  var BaseComponent = as !== null && as !== void 0 ? as : 'span';
   return /*#__PURE__*/React__default.createElement(PopoverContext.Provider, {
     value: value
   }, /*#__PURE__*/React__default.createElement(BaseComponent, _extends({}, rest, {
@@ -215,10 +219,10 @@ Popover.propTypes = {
    */
   open: PropTypes.bool.isRequired
 };
-var PopoverContent = /*#__PURE__*/React__default.forwardRef(function PopoverContent(_ref, forwardRef) {
-  var className = _ref.className,
-      children = _ref.children,
-      rest = _objectWithoutProperties(_ref, _excluded2);
+var PopoverContent = /*#__PURE__*/React__default.forwardRef(function PopoverContent(_ref2, forwardRef) {
+  var className = _ref2.className,
+      children = _ref2.children,
+      rest = _objectWithoutProperties(_ref2, _excluded2);
 
   var prefix = usePrefix();
 

package/es/components/Slider/Slider.Skeleton.d.ts

@@ -8,8 +8,8 @@ import PropTypes from 'prop-types';
 import { HTMLAttributes } from 'react';
 export interface SliderSkeletonProps extends HTMLAttributes<HTMLDivElement> {
     /**
-      * Specify an optional className to add to the form item wrapper.
-      */
+     * Specify an optional className to add to the form item wrapper.
+     */
     className?: string;
     /**
      * Specify whether the label should be hidden, or not

package/es/components/Slider/Slider.d.ts

@@ -0,0 +1,355 @@
+/**
+ * Copyright IBM Corp. 2016, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import React, { KeyboardEventHandler, PureComponent } from 'react';
+import PropTypes, { ReactNodeLike } from 'prop-types';
+type ExcludedAttributes = 'onChange' | 'onBlur';
+export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+    /**
+     * The `ariaLabel` for the `<input>`.
+     */
+    ariaLabelInput?: string;
+    /**
+     * The child nodes.
+     */
+    children?: ReactNodeLike;
+    /**
+     * The CSS class name for the slider.
+     */
+    className?: string;
+    /**
+     * `true` to disable this slider.
+     */
+    disabled?: boolean;
+    /**
+     * The callback to format the label associated with the minimum/maximum value.
+     */
+    formatLabel?: (value: number, label: string | undefined) => string;
+    /**
+     * `true` to hide the number input box.
+     */
+    hideTextInput?: boolean;
+    /**
+     * The ID of the `<input>`.
+     */
+    id?: string;
+    /**
+     * The `type` attribute of the `<input>`.
+     */
+    inputType?: string;
+    /**
+     * `true` to specify if the control is invalid.
+     */
+    invalid?: boolean;
+    /**
+     * The label for the slider.
+     */
+    labelText?: ReactNodeLike;
+    /**
+     * @deprecated
+     * `true` to use the light version.
+     */
+    light?: boolean;
+    /**
+     * The maximum value.
+     */
+    max: number;
+    /**
+     * The label associated with the maximum value.
+     */
+    maxLabel?: string;
+    /**
+     * The minimum value.
+     */
+    min: number;
+    /**
+     * The label associated with the minimum value.
+     */
+    minLabel?: string;
+    /**
+     * The `name` attribute of the `<input>`.
+     */
+    name?: string;
+    /**
+     * Provide an optional function to be called when the input element
+     * loses focus
+     */
+    onBlur?: (data: {
+        value: string;
+    }) => void;
+    /**
+     * The callback to get notified of change in value.
+     * `({ value}) => void`
+    //  * @param {{ value }}
+     */
+    onChange?: (data: {
+        value: SliderProps['value'];
+    }) => void;
+    /**
+     * Provide an optional function to be called when a key is pressed in the number input
+     */
+    onInputKeyUp?: KeyboardEventHandler<HTMLInputElement>;
+    /**
+     * The callback to get notified of value on handle release.
+     */
+    onRelease?: (data: {
+        value: SliderProps['value'];
+    }) => void;
+    /**
+     * Whether the slider should be read-only
+     */
+    readOnly?: boolean;
+    /**
+     * `true` to specify if the control is required.
+     */
+    required?: boolean;
+    /**
+     * A value determining how much the value should increase/decrease by moving the thumb by mouse. If a value other than 1 is provided and the input is *not* hidden, the new step requirement should be added to a visible label. Values outside of the `step` increment will be considered invalid.
+     */
+    step?: number;
+    /**
+     * A value determining how much the value should increase/decrease by Shift+arrow keys,
+     * which will be `(max - min) / stepMultiplier`.
+     */
+    stepMultiplier?: number;
+    /**
+     * The value.
+     */
+    value: number;
+}
+interface CalcValueProps {
+    clientX?: number;
+    value?: number;
+    useRawValue?: boolean;
+}
+export default class Slider extends PureComponent<SliderProps> {
+    static propTypes: {
+        /**
+         * The `ariaLabel` for the `<input>`.
+         */
+        ariaLabelInput: PropTypes.Requireable<string>;
+        /**
+         * The child nodes.
+         */
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * The CSS class name for the slider.
+         */
+        className: PropTypes.Requireable<string>;
+        /**
+         * `true` to disable this slider.
+         */
+        disabled: PropTypes.Requireable<boolean>;
+        /**
+         * The callback to format the label associated with the minimum/maximum value.
+         */
+        formatLabel: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * `true` to hide the number input box.
+         */
+        hideTextInput: PropTypes.Requireable<boolean>;
+        /**
+         * The ID of the `<input>`.
+         */
+        id: PropTypes.Requireable<string>;
+        /**
+         * The `type` attribute of the `<input>`.
+         */
+        inputType: PropTypes.Requireable<string>;
+        /**
+         * `true` to specify if the control is invalid.
+         */
+        invalid: PropTypes.Requireable<boolean>;
+        /**
+         * The label for the slider.
+         */
+        labelText: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        /**
+         * `true` to use the light version.
+         */
+        light: (props: any, propName: any, componentName: any, ...rest: any[]) => any;
+        /**
+         * The maximum value.
+         */
+        max: PropTypes.Validator<number>;
+        /**
+         * The label associated with the maximum value.
+         */
+        maxLabel: PropTypes.Requireable<string>;
+        /**
+         * The minimum value.
+         */
+        min: PropTypes.Validator<number>;
+        /**
+         * The label associated with the minimum value.
+         */
+        minLabel: PropTypes.Requireable<string>;
+        /**
+         * The `name` attribute of the `<input>`.
+         */
+        name: PropTypes.Requireable<string>;
+        /**
+         * Provide an optional function to be called when the input element
+         * loses focus
+         */
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * The callback to get notified of change in value.
+         */
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Provide an optional function to be called when a key is pressed in the number input
+         */
+        onInputKeyUp: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * The callback to get notified of value on handle release.
+         */
+        onRelease: PropTypes.Requireable<(...args: any[]) => any>;
+        /**
+         * Whether the slider should be read-only
+         */
+        readOnly: PropTypes.Requireable<boolean>;
+        /**
+         * `true` to specify if the control is required.
+         */
+        required: PropTypes.Requireable<boolean>;
+        /**
+         * A value determining how much the value should increase/decrease by moving the thumb by mouse. If a value other than 1 is provided and the input is *not* hidden, the new step requirement should be added to a visible label. Values outside of the `step` increment will be considered invalid.
+         */
+        step: PropTypes.Requireable<number>;
+        /**
+         * A value determining how much the value should increase/decrease by Shift+arrow keys,
+         * which will be `(max - min) / stepMultiplier`.
+         */
+        stepMultiplier: PropTypes.Requireable<number>;
+        /**
+         * The value.
+         */
+        value: PropTypes.Validator<number>;
+    };
+    static defaultProps: {
+        hideTextInput: boolean;
+        step: number;
+        stepMultiplier: number;
+        disabled: boolean;
+        minLabel: string;
+        maxLabel: string;
+        inputType: string;
+        ariaLabelInput: string | undefined;
+        readOnly: boolean;
+    };
+    static contextType: React.Context<any>;
+    state: {
+        value: number;
+        left: number;
+        needsOnRelease: boolean;
+        isValid: boolean;
+    };
+    thumbRef: React.RefObject<HTMLDivElement>;
+    filledTrackRef: React.RefObject<HTMLDivElement>;
+    element: HTMLDivElement | null;
+    inputId: string;
+    track: HTMLDivElement | null | undefined;
+    constructor(props: any);
+    /**
+     * Sets up initial slider position and value in response to component mount.
+     */
+    componentDidMount(): void;
+    /**
+     * Handles firing of `onChange` and `onRelease` callbacks to parent in
+     * response to state changes.
+     *
+     * @param {*} prevProps prevProps
+     * @param {*} prevState The previous Slider state, used to see if callbacks
+     * should be called.
+     */
+    componentDidUpdate(prevProps: any, prevState: any): void;
+    /**
+     * Synonymous to ECMA2017+ `Math.clamp`.
+     *
+     * @param {number} val
+     * @param {number} min
+     * @param {number} max
+     *
+     * @returns `val` if `max>=val>=min`; `min` if `val<min`; `max` if `val>max`.
+     */
+    clamp(val: any, min: any, max: any): number;
+    /**
+     * Sets up "drag" event handlers and calls `this.onDrag` in case dragging
+     * started on somewhere other than the thumb without a corresponding "move"
+     * event.
+     *
+     * @param {Event} evt The event.
+     */
+    onDragStart: (evt: any) => void;
+    /**
+     * Unregisters "drag" and "drag stop" event handlers and calls sets the flag
+     * indicating that the `onRelease` callback should be called.
+     */
+    onDragStop: () => void;
+    /**
+     * Handles a "drag" event by recalculating the value/thumb and setting state
+     * accordingly.
+     *
+     * @param {Event} evt The event.
+     */
+    _onDrag: (evt: any) => void;
+    /**
+     * Throttles calls to `this._onDrag` by limiting events to being processed at
+     * most once every `EVENT_THROTTLE` milliseconds.
+     */
+    onDrag: any;
+    /**
+     * Handles a `keydown` event by recalculating the value/thumb and setting
+     * state accordingly.
+     *
+     * @param {Event} evt The event.
+     */
+    onKeyDown: (evt: any) => void;
+    /**
+     * Provides the two-way binding for the input field of the Slider. It also
+     * Handles a change to the input field by recalculating the value/thumb and
+     * setting state accordingly.
+     *
+     * @param {Event} evt The event.
+     */
+    onChange: (evt: any) => void;
+    /**
+     * Checks for validity of input value after clicking out of the input. It also
+     * Handles state change to isValid state.
+     *
+     * @param {Event} evt The event.
+     */
+    onBlur: (evt: React.FocusEvent<HTMLInputElement>) => void;
+    /**
+     * Calculates a new Slider `value` and `left` (thumb offset) given a `clientX`,
+     * `value`, or neither of those.
+     * - If `clientX` is specified, it will be used in
+     *   conjunction with the Slider's bounding rectangle to calculate the new
+     *   values.
+     * - If `clientX` is not specified and `value` is, it will be used to
+     *   calculate new values as though it were the current value of the Slider.
+     * - If neither `clientX` nor `value` are specified, `this.props.value` will
+     *   be used to calculate the new values as though it were the current value
+     *   of the Slider.
+     *
+     * @param {object} params
+     * @param {number} [params.clientX] Optional clientX value expected to be from
+     *   an event fired by one of the Slider's `DRAG_EVENT_TYPES` events.
+     * @param {number} [params.value] Optional value use during calculations if
+     *   clientX is not provided.
+     * @param {boolean} [params.useRawValue=false] `true` to use the given value as-is.
+     */
+    calcValue: ({ clientX, value, useRawValue }: CalcValueProps) => {
+        value: number | undefined;
+        left: number;
+    };
+    static getDerivedStateFromProps(props: any, state: any): {
+        isValid: boolean;
+    } | null;
+    render(): JSX.Element;
+}
+export {};