@dnb/eufemia 10.7.0 → 10.9.0

package/components/step-indicator/StepIndicatorItem.d.ts

@@ -1,61 +1,59 @@
-import * as React from 'react';
-import type { FormStatusText } from '../FormStatus';
-export type StepIndicatorItemTitle = string | React.ReactNode;
-export type StepIndicatorItemStatusState = 'warn' | 'info' | 'error';
-export interface StepIndicatorItemProps
-  extends React.HTMLProps<HTMLElement> {
-  /**
-   * <em>(required)</em> defines how the StepIndicator should work. Use `static` for non-interactive steps. Use `strict` for a chronological step order, also, the user can navigate between visited steps. Use `loose` if the user should be able to navigate freely.
-   */
-  mode?: string;
-  title: StepIndicatorItemTitle;
-  step_title?: string;
-  /**
-   * Define whether to show automatically counted numbers or not. Defaults to `false`.
-   */
-  hide_numbers?: boolean;
-  /**
-   * Callback function to manipulate or wrap every item. Has to return a React Node. You receive an object you can use in your custom HOC `{ StepItem, element, attributes, props, context }`.
-   */
-  on_item_render?: (...args: any[]) => any;
-  /**
-   * Will be called once the user visits actively a new step. Will be emitted only once. Returns an object `{ event, item, current_step }`.
-   */
-  on_change?: (...args: any[]) => any;
-  on_render?: (...args: any[]) => any;
-  /**
-   * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
-   */
-  on_click?: (...args: any[]) => any;
-  is_current?: boolean;
-  inactive?: boolean;
-  disabled?: boolean;
-  status?: FormStatusText;
-  status_state?: StepIndicatorItemStatusState;
-  currentItemNum: number;
-}
-export default class StepIndicatorItem extends React.Component<
-  StepIndicatorItemProps,
-  any
-> {
-  static defaultProps: object;
-  render(): JSX.Element;
-}
-export interface StepItemButtonProps {
-  children?: React.ReactNode;
-  inner_ref?: React.RefObject<HTMLElement>;
-  className?: string;
-  status?: FormStatusText;
-  status_state?: StepIndicatorStatusState;
-}
-export declare const StepItemButton: React.FC<StepItemButtonProps>;
-export interface StepItemWrapperProps {
-  children?: React.ReactNode;
-  number?: number;
-  /**
-   * Define whether to show automatically counted numbers or not. Defaults to `false`.
-   */
-  hide_numbers?: boolean;
-  status?: string;
-}
-export declare const StepItemWrapper: React.FC<StepItemWrapperProps>;
+/**
+ * Web StepIndicator Component
+ *
+ */
+import React from 'react';
+import { ButtonProps } from '../button/Button';
+import { StepIndicatorMouseEvent, StepIndicatorRenderCallback } from './StepIndicator';
+export type StepIndicatorStatusState = 'warn' | 'info' | 'error';
+export type StepIndicatorItemProps = Omit<React.HTMLProps<HTMLElement>, 'title' | 'data'> & {
+    title: string | React.ReactNode;
+    /**
+     * If set to true, this item step will be set as the current current selected step. This can be used instead of `current_step` on the component itself.
+     */
+    is_current?: boolean;
+    /**
+     * If set to true, this item step will be handled as an inactive step and will not be clickable.
+     * Defaults to `false`
+     */
+    inactive?: boolean;
+    /**
+     * If set to true, this item step will be visible as an disabled button and will not be clickable.
+     * Defaults to false.
+     */
+    disabled?: boolean;
+    /**
+     * Is used to set the status text.
+     */
+    status?: string | React.ReactNode;
+    /**
+     * Used to set the status state to be either `info`, `error` or `warn`.
+     * Defaults to `warn`.
+     */
+    status_state?: StepIndicatorStatusState;
+    /**
+     * Callback function to manipulate or wrap the step item. Has to return a React Node. You receive an object `{ StepItem, element, attributes, props, context }`.
+     */
+    on_render?: ({ StepItem, element, attributes, props, context, }: StepIndicatorRenderCallback) => React.ReactNode;
+    /**
+     * Will be called once the user clicks on the current or another step. Will be emitted on every click. Returns an object `{ event, item, current_step }`.
+     */
+    on_click?: ({ event, item, current_step, currentStep, }: StepIndicatorMouseEvent) => void;
+    currentItemNum: number;
+};
+declare function StepIndicatorItem({ status_state: status_state_default, inactive: inactive_default, disabled: disabled_default, ...restOfProps }: StepIndicatorItemProps): import("react/jsx-runtime").JSX.Element;
+export type StepItemButtonProps = Omit<ButtonProps, 'status_state'> & {
+    status_state?: StepIndicatorStatusState;
+};
+export declare function StepItemButton({ children, className, status, status_state, inner_ref, ...props }: StepItemButtonProps): import("react/jsx-runtime").JSX.Element;
+export type StepItemWrapperProps = React.HTMLProps<HTMLElement> & {
+    children?: React.ReactNode;
+    number?: number;
+    /**
+     * Define whether to show automatically counted numbers or not. Defaults to `false`.
+     */
+    hide_numbers?: boolean;
+    status?: string | React.ReactNode;
+};
+export declare function StepItemWrapper({ children, number, hide_numbers, status, }: StepItemWrapperProps): import("react/jsx-runtime").JSX.Element;
+export default StepIndicatorItem;

package/components/step-indicator/StepIndicatorItem.js

@@ -1,223 +1,198 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-const _excluded = ["currentItemNum", "title", "is_current", "inactive", "disabled", "status", "status_state", "on_render", "on_click", "on_change"],
-  _excluded2 = ["children", "className", "status", "status_state", "inner_ref"];
-import React from 'react';
-import PropTypes from 'prop-types';
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+const _excluded = ["status_state", "inactive", "disabled"],
+  _excluded2 = ["currentItemNum", "title", "is_current", "inactive", "disabled", "status", "status_state", "on_render", "on_click"],
+  _excluded3 = ["children", "className", "status", "status_state", "inner_ref"];
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+import React, { useContext, useEffect, useLayoutEffect, useRef, useState } from 'react';
 import classnames from 'classnames';
-import { isTrue, makeUniqueId, dispatchCustomElementEvent } from '../../shared/component-helper';
+import { makeUniqueId, dispatchCustomElementEvent } from '../../shared/component-helper';
 import HeightAnimationInstance from '../height-animation/HeightAnimationInstance';
 import Button from '../button/Button';
 import Icon from '../icon/Icon';
-import { WarnIcon, InfoIcon, ErrorIcon } from '../../components/form-status/FormStatus';
+import { WarnIcon, InfoIcon, ErrorIcon } from '../form-status/FormStatus';
 import StepIndicatorContext from './StepIndicatorContext';
-export default class StepIndicatorItem extends React.PureComponent {
-  constructor(props, context) {
-    super(props);
-    _defineProperty(this, "onClickHandler", _ref => {
-      let {
-        event,
-        item,
-        currentItemNum
-      } = _ref;
-      const params = {
-        event,
-        item,
-        current_step: currentItemNum,
-        currentStep: currentItemNum
-      };
-      const onClickItem = dispatchCustomElementEvent(this, 'on_click', params);
-      const onClickGlobal = dispatchCustomElementEvent(this.context, 'on_click', params);
-      if (onClickItem === false || onClickGlobal === false) {
-        return;
-      }
-      if (this.context.activeStep !== currentItemNum) {
-        this.context.setActiveStep(currentItemNum);
-        if (typeof this.context.onChangeState === 'function') {
-          this.context.onChangeState(currentItemNum);
-        }
-        dispatchCustomElementEvent(this.context, 'on_change', params);
-      }
-    });
-    this._heightAnim = new HeightAnimationInstance({
-      animate: !isTrue(context.no_animation)
-    });
-    this._ref = React.createRef();
-  }
-  componentDidMount() {
-    this._heightAnim.setElement(this._ref.current);
-    this._prevStep = this.context.activeStep;
-  }
-  componentWillUnmount() {
-    this._heightAnim.remove();
-  }
-  getSnapshotBeforeUpdate() {
-    return this._heightAnim.getHeight();
-  }
-  componentDidUpdate(a, b, height) {
-    if (this._prevStep !== this.context.activeStep && (this.props.currentItemNum === this._prevStep || this.props.currentItemNum === this.context.activeStep)) {
-      const toHeight = this._heightAnim.getUnknownHeight();
+import { stepIndicatorDefaultProps } from './StepIndicatorProps';
+function StepIndicatorItem(_ref) {
+  let {
+      status_state: status_state_default = 'warn',
+      inactive: inactive_default = false,
+      disabled: disabled_default = false
+    } = _ref,
+    restOfProps = _objectWithoutProperties(_ref, _excluded);
+  const props = _objectSpread({
+    status_state: status_state_default,
+    inactive: inactive_default,
+    disabled: disabled_default
+  }, restOfProps);
+  const context = useContext(StepIndicatorContext);
+  const [previousStep, setPreviousStep] = useState(context.activeStep);
+  const heightAnim = useRef(new HeightAnimationInstance({
+    animate: (context === null || context === void 0 ? void 0 : context.no_animation) !== undefined ? context.no_animation : false
+  })).current;
+  const ref = useRef(null);
+  const thisReference = {
+    context,
+    props,
+    onClickHandler
+  };
+  useEffect(() => {
+    heightAnim.setElement(ref.current);
+    return () => {
+      heightAnim.remove();
+    };
+  }, []);
+  useEffect(() => {
+    if (previousStep !== context.activeStep) {
+      setPreviousStep(context.activeStep);
+    }
+  }, [context.activeStep]);
+  useLayoutEffect(() => {
+    const height = heightAnim.getHeight();
+    if (previousStep !== context.activeStep && (props.currentItemNum === previousStep || props.currentItemNum === context.activeStep)) {
+      const toHeight = heightAnim.getUnknownHeight();
       if (height !== toHeight) {
-        this._heightAnim.adjustTo(height, toHeight);
+        heightAnim.adjustTo(height, toHeight);
       }
     }
-    this._prevStep = this.context.activeStep;
-  }
-  render() {
-    const {
-      mode,
-      filterAttributes,
-      activeStep,
-      countSteps,
-      listOfReachedSteps,
-      hide_numbers,
-      on_item_render,
-      sidebar_id,
-      step_title
-    } = this.context;
-    const _this$props = this.props,
-      {
-        currentItemNum,
-        title,
-        is_current,
-        inactive,
-        disabled,
-        status,
-        status_state,
-        on_render,
-        on_click,
-        on_change
-      } = _this$props,
-      attributes = _objectWithoutProperties(_this$props, _excluded);
-    Object.keys(attributes).forEach(key => {
-      if (filterAttributes.includes(key)) {
-        delete attributes[key];
-      }
-    });
-    const hasPassedAndIsCurrent = mode === 'loose' || currentItemNum <= activeStep || listOfReachedSteps.includes(currentItemNum);
-    const isNavigateable = mode === 'strict' || mode === 'loose';
-    let isInactive = isTrue(inactive) || mode === 'strict' && !hasPassedAndIsCurrent;
-    let isVisited = currentItemNum < activeStep;
-    const id = `${sidebar_id || makeUniqueId()}-${currentItemNum}`;
-    const ariaLabel = step_title === null || step_title === void 0 ? void 0 : step_title.replace('%step', currentItemNum + 1).replace('%count', countSteps);
-    const isCurrent = currentItemNum === activeStep || isTrue(is_current) && isNaN(parseFloat(activeStep));
-    let element = React.createElement(StepItemWrapper, {
-      number: currentItemNum + 1,
-      hide_numbers: hide_numbers,
-      status: status,
-      status_state: status_state
-    }, title);
-    const callbackProps = {
-      StepItem: StepItemWrapper,
-      element,
-      attributes,
-      props: this.props,
-      context: this.context
+  }, [previousStep, context.activeStep, heightAnim, props.currentItemNum]);
+  function onClickHandler(_ref2) {
+    let {
+      event,
+      item,
+      currentItemNum
+    } = _ref2;
+    const params = {
+      event,
+      item,
+      current_step: currentItemNum,
+      currentStep: currentItemNum
     };
-    if (typeof on_render === 'function') {
-      element = on_render(callbackProps);
-    } else if (typeof on_item_render === 'function') {
-      element = on_item_render(callbackProps);
+    const onClickItem = dispatchCustomElementEvent(thisReference, 'on_click', params);
+    const onClickGlobal = dispatchCustomElementEvent(context, 'on_click', params);
+    if (onClickItem === false || onClickGlobal === false) {
+      return;
     }
-    const itemParams = {};
-    const buttonParams = {
-      icon: 'check',
+    if (context.activeStep !== currentItemNum) {
+      context.setActiveStep(currentItemNum);
+      if (typeof context.onChangeState === 'function') {
+        context.onChangeState();
+      }
+      dispatchCustomElementEvent(context, 'on_change', params);
+    }
+  }
+  const {
+    mode,
+    filterAttributes,
+    activeStep,
+    countSteps,
+    listOfReachedSteps,
+    hide_numbers,
+    on_item_render,
+    sidebar_id,
+    step_title
+  } = context;
+  const {
+      currentItemNum,
+      title,
+      is_current,
+      inactive,
+      disabled,
       status,
       status_state,
-      'aria-describedby': id
-    };
-    if (isCurrent) {
-      itemParams['aria-current'] = 'step';
-    }
-    if (isTrue(disabled)) {
-      buttonParams['disabled'] = true;
+      on_render,
+      on_click
+    } = props,
+    attributes = _objectWithoutProperties(props, _excluded2);
+  Object.keys(attributes).forEach(key => {
+    if (filterAttributes.includes(key)) {
+      delete attributes[key];
     }
-    if (isNavigateable && !isInactive) {
-      buttonParams.onClick = _ref2 => {
-        let {
-          event
-        } = _ref2;
-        return this.onClickHandler({
-          event,
-          item: this.props,
-          currentItemNum
-        });
-      };
-    }
-    if (!buttonParams.onClick) {
-      buttonParams.element = 'span';
-      buttonParams.type = '';
-      buttonParams.on_click = undefined;
-      isInactive = true;
-    }
-    return React.createElement("li", _extends({}, itemParams, {
-      className: classnames('dnb-step-indicator__item', itemParams.className, isCurrent && 'dnb-step-indicator__item--current', isInactive && 'dnb-step-indicator__item--inactive', isVisited && 'dnb-step-indicator__item--visited')
-    }), React.createElement(StepItemButton, _extends({}, buttonParams, {
-      inner_ref: this._ref
-    }), element), React.createElement("span", {
-      id: id,
-      "aria-hidden": true,
-      className: "dnb-sr-only"
-    }, ariaLabel));
+  });
+  const hasPassedAndIsCurrent = mode === 'loose' || currentItemNum <= activeStep || listOfReachedSteps.includes(currentItemNum);
+  const isNavigateable = mode === 'strict' || mode === 'loose';
+  let isInactive = inactive || mode === 'strict' && !hasPassedAndIsCurrent;
+  const isVisited = currentItemNum < activeStep;
+  const id = `${sidebar_id || makeUniqueId()}-${currentItemNum}`;
+  const ariaLabel = step_title === null || step_title === void 0 ? void 0 : step_title.replace('%step', String(currentItemNum + 1)).replace('%count', String(countSteps));
+  const isCurrent = currentItemNum === activeStep;
+  let element = React.createElement(StepItemWrapper, {
+    number: currentItemNum + 1,
+    hide_numbers: hide_numbers,
+    status: status
+  }, title);
+  const callbackProps = {
+    StepItem: StepItemWrapper,
+    element,
+    attributes,
+    props,
+    context
+  };
+  if (typeof on_render === 'function') {
+    element = on_render(callbackProps);
+  } else if (typeof on_item_render === 'function') {
+    element = on_item_render(callbackProps);
+  }
+  const itemParams = {};
+  const buttonParams = {
+    icon: 'check',
+    status,
+    status_state,
+    'aria-describedby': id
+  };
+  if (isCurrent) {
+    itemParams['aria-current'] = 'step';
+  }
+  if (disabled) {
+    buttonParams.disabled = true;
+  }
+  if (isNavigateable && !isInactive) {
+    buttonParams.onClick = _ref3 => {
+      let {
+        event
+      } = _ref3;
+      return onClickHandler({
+        event,
+        item: props,
+        currentItemNum
+      });
+    };
+  }
+  if (!buttonParams.onClick) {
+    buttonParams.element = 'span';
+    buttonParams.type = '';
+    buttonParams.on_click = undefined;
+    isInactive = true;
   }
+  return React.createElement("li", _extends({}, itemParams, {
+    className: classnames('dnb-step-indicator__item', itemParams.className, isCurrent && 'dnb-step-indicator__item--current', isInactive && 'dnb-step-indicator__item--inactive', isVisited && 'dnb-step-indicator__item--visited')
+  }), React.createElement(StepItemButton, _extends({}, buttonParams, {
+    inner_ref: ref
+  }), element), React.createElement("span", {
+    id: id,
+    "aria-hidden": true,
+    className: "dnb-sr-only"
+  }, ariaLabel));
 }
-_defineProperty(StepIndicatorItem, "contextType", StepIndicatorContext);
-_defineProperty(StepIndicatorItem, "defaultProps", {
-  mode: null,
-  step_title: '%step',
-  hide_numbers: false,
-  on_item_render: null,
-  on_change: null,
-  on_render: null,
-  on_click: null,
-  is_current: null,
-  inactive: null,
-  disabled: null,
-  status: null,
-  status_state: 'warn'
-});
-process.env.NODE_ENV !== "production" ? StepIndicatorItem.propTypes = {
-  mode: PropTypes.string,
-  title: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
-  step_title: PropTypes.string,
-  hide_numbers: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  on_item_render: PropTypes.func,
-  on_change: PropTypes.func,
-  on_render: PropTypes.func,
-  on_click: PropTypes.func,
-  is_current: PropTypes.bool,
-  inactive: PropTypes.bool,
-  disabled: PropTypes.bool,
-  status: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
-  status_state: PropTypes.oneOf(['warn', 'info', 'error']),
-  currentItemNum: PropTypes.number.isRequired
-} : void 0;
-export const StepItemButton = _ref3 => {
+export function StepItemButton(_ref4) {
   let {
       children,
       className,
       status,
       status_state,
       inner_ref
-    } = _ref3,
-    props = _objectWithoutProperties(_ref3, _excluded2);
+    } = _ref4,
+    props = _objectWithoutProperties(_ref4, _excluded3);
+  const icons = {
+    info: InfoIcon,
+    error: ErrorIcon,
+    warn: WarnIcon
+  };
   if (status) {
-    let icon = null;
-    switch (status_state) {
-      case 'info':
-        icon = InfoIcon;
-        break;
-      case 'error':
-        icon = ErrorIcon;
-        break;
-      case 'warn':
-      default:
-        icon = WarnIcon;
-        break;
-    }
     props.icon = React.createElement(Icon, {
-      icon: icon,
+      icon: icons[status_state] || icons.warn,
       className: "dnb-button__icon",
       size: "medium",
       inherit_color: false
@@ -232,31 +207,17 @@ export const StepItemButton = _ref3 => {
     icon_position: "right",
     inner_ref: inner_ref
   }, props), children);
-};
-process.env.NODE_ENV !== "production" ? StepItemButton.propTypes = {
-  children: PropTypes.node,
-  inner_ref: PropTypes.object,
-  className: PropTypes.string,
-  status: PropTypes.string,
-  status_state: PropTypes.string
-} : void 0;
-StepItemButton.defaultProps = {
-  children: null,
-  inner_ref: null,
-  className: null,
-  status: null,
-  status_state: null
-};
-export const StepItemWrapper = _ref4 => {
+}
+export function StepItemWrapper(_ref5) {
   let {
     children,
     number,
-    hide_numbers,
+    hide_numbers = stepIndicatorDefaultProps.hide_numbers,
     status
-  } = _ref4;
+  } = _ref5;
   return React.createElement("span", {
     className: "dnb-step-indicator__item-content"
-  }, !isTrue(hide_numbers) && React.createElement("span", {
+  }, !hide_numbers && React.createElement("span", {
     "aria-hidden": true,
     className: "dnb-step-indicator__item-content__number"
   }, number, "."), React.createElement("span", {
@@ -266,17 +227,6 @@ export const StepItemWrapper = _ref4 => {
   }, children), status && React.createElement("span", {
     className: "dnb-step-indicator__item-content__status"
   }, status)));
-};
-process.env.NODE_ENV !== "production" ? StepItemWrapper.propTypes = {
-  children: PropTypes.node,
-  number: PropTypes.number,
-  hide_numbers: PropTypes.bool,
-  status: PropTypes.string
-} : void 0;
-StepItemWrapper.defaultProps = {
-  children: null,
-  number: null,
-  hide_numbers: null,
-  status: null
-};
+}
+export default StepIndicatorItem;
 //# sourceMappingURL=StepIndicatorItem.js.map