@bigbinary/neetoui 5.2.26 → 5.2.28

package/index.d.ts

@@ -339,6 +339,12 @@ export type SpinnerProps = {
   className?: string;
 };
 
+export type StepperProps = {
+  steps: { id: string | number; label: string }[];
+  activeIndex: number;
+  setActiveIndex: (index: number) => void;
+};
+
 export type SwitchProps = {
   label?: string;
   required?: boolean;
@@ -765,6 +771,7 @@ export const Label: React.FC<LabelProps>;
 export const Pagination: React.FC<PaginationProps>;
 export const Select: React.ForwardRefExoticComponent<SelectProps>;
 export const Spinner: React.FC<SpinnerProps>;
+export const Stepper: React.FC<StepperProps>;
 export const Switch: React.ForwardRefExoticComponent<SwitchProps>;
 export const Slider: React.ForwardRefExoticComponent<SliderProps>;
 export const Table: React.FC<TableProps>;

package/index.js

@@ -2185,7 +2185,7 @@ const PresenceContext = createContext(null);
 
 const isBrowser$9 = typeof document !== "undefined";
 
-const useIsomorphicLayoutEffect$3 = isBrowser$9 ? useLayoutEffect : useEffect;
+const useIsomorphicLayoutEffect$2 = isBrowser$9 ? useLayoutEffect : useEffect;
 
 const LazyContext = createContext({ strict: false });
 
@@ -2220,7 +2220,7 @@ function useVisualElement(Component, visualState, props, createVisualElement) {
      * was present on initial render - it will be deleted after this.
      */
     const canHandoff = useRef(Boolean(window.HandoffAppearAnimations));
-    useIsomorphicLayoutEffect$3(() => {
+    useIsomorphicLayoutEffect$2(() => {
         if (!visualElement)
             return;
         visualElement.render();
@@ -6846,11 +6846,11 @@ class AnimationFeature extends Feature {
     unmount() { }
 }
 
-let id$4 = 0;
+let id$3 = 0;
 class ExitAnimationFeature extends Feature {
     constructor() {
         super(...arguments);
-        this.id = id$4++;
+        this.id = id$3++;
     }
     update() {
         if (!this.node.presenceContext)
@@ -8520,7 +8520,7 @@ const transformAxes = ["", "X", "Y", "Z"];
  * which has a noticeable difference in spring animations
  */
 const animationTarget = 1000;
-let id$3 = 0;
+let id$2 = 0;
 /**
  * Use a mutable data object for debug data so as to not create a new
  * object every frame.
@@ -8537,7 +8537,7 @@ function createProjectionNode({ attachResizeListener, defaultParent, measureScro
             /**
              * A unique ID generated for every projection node.
              */
-            this.id = id$3++;
+            this.id = id$2++;
             /**
              * An id that represents a unique session instigated by startUpdate.
              */
@@ -11028,7 +11028,7 @@ const motion = /*@__PURE__*/ createMotionProxy((Component, config) => createDomM
 
 function useIsMounted() {
     const isMounted = useRef(false);
-    useIsomorphicLayoutEffect$3(() => {
+    useIsomorphicLayoutEffect$2(() => {
         isMounted.current = true;
         return () => {
             isMounted.current = false;
@@ -11238,7 +11238,7 @@ const AnimatePresence = ({ children, custom, initial = true, onExitComplete, exi
     // If this is the initial component render, just deal with logic surrounding whether
     // we play onMount animations or not.
     const isInitialRender = useRef(true);
-    useIsomorphicLayoutEffect$3(() => {
+    useIsomorphicLayoutEffect$2(() => {
         isInitialRender.current = false;
         updateChildLookup(filteredChildren, allChildren);
         presentChildren.current = childrenToRender;
@@ -15343,7 +15343,7 @@ function deepPreserveProps(instanceProps, componentProps) {
   });
 }
 
-var useIsomorphicLayoutEffect$2 = isBrowser$7 ? useLayoutEffect : useEffect;
+var useIsomorphicLayoutEffect$1 = isBrowser$7 ? useLayoutEffect : useEffect;
 function useMutableBox(initialValue) {
   // Using refs instead of state as it's recommended to not store imperative
   // values in state due to memory problems in React(?)
@@ -15482,7 +15482,7 @@ function TippyGenerator(tippy) {
 
     var deps = [reference].concat(children ? [children.type] : []); // CREATE
 
-    useIsomorphicLayoutEffect$2(function () {
+    useIsomorphicLayoutEffect$1(function () {
       var element = reference;
 
       if (reference && reference.hasOwnProperty('current')) {
@@ -15517,7 +15517,7 @@ function TippyGenerator(tippy) {
       };
     }, deps); // UPDATE
 
-    useIsomorphicLayoutEffect$2(function () {
+    useIsomorphicLayoutEffect$1(function () {
       var _instance$popperInsta;
 
       // Prevent this effect from running on 1st render
@@ -15553,7 +15553,7 @@ function TippyGenerator(tippy) {
         });
       }
     });
-    useIsomorphicLayoutEffect$2(function () {
+    useIsomorphicLayoutEffect$1(function () {
       var _instance$props$poppe;
 
       if (!render) {
@@ -17660,6 +17660,11 @@ SwitchTransition.defaultProps = {
   mode: modes.out
 };
 
+var useId = function useId(defaultId) {
+  var id = useId$1();
+  return defaultId || id;
+};
+
 var useOnClickOutside = function useOnClickOutside(insideRef, outsideRef, handler) {
   useEffect(function () {
     var listener = function listener(event) {
@@ -18998,147 +19003,6 @@ var Callout = function Callout(_ref) {
   })), children);
 };
 
-function canUseDOM$1() {
-  return !!(typeof window !== "undefined" && window.document && window.document.createElement);
-}
-
-/**
- * React currently throws a warning when using useLayoutEffect on the server. To
- * get around it, we can conditionally useEffect on the server (no-op) and
- * useLayoutEffect in the browser. We occasionally need useLayoutEffect to
- * ensure we don't get a render flash for certain operations, but we may also
- * need affected components to render on the server. One example is when setting
- * a component's descendants to retrieve their index values.
- *
- * Important to note that using this hook as an escape hatch will break the
- * eslint dependency warnings unless you rename the import to `useLayoutEffect`.
- * Use sparingly only when the effect won't effect the rendered HTML to avoid
- * any server/client mismatch.
- *
- * If a useLayoutEffect is needed and the result would create a mismatch, it's
- * likely that the component in question shouldn't be rendered on the server at
- * all, so a better approach would be to lazily render those in a parent
- * component after client-side hydration.
- *
- * https://gist.github.com/gaearon/e7d97cdf38a2907924ea12e4ebdf3c85
- * https://github.com/reduxjs/react-redux/blob/master/src/utils/useIsomorphicLayoutEffect.js
- *
- * @param effect
- * @param deps
- */
-
-var useIsomorphicLayoutEffect$1 = /*#__PURE__*/canUseDOM$1() ? useLayoutEffect : useEffect;
-
-/*
- * Welcome to @reach/auto-id!
-
- * Let's see if we can make sense of why this hook exists and its
- * implementation.
- *
- * Some background:
- *   1. Accessibiliy APIs rely heavily on element IDs
- *   2. Requiring developers to put IDs on every element in Reach UI is both
- *      cumbersome and error-prone
- *   3. With a component model, we can generate IDs for them!
- *
- * Solution 1: Generate random IDs.
- *
- * This works great as long as you don't server render your app. When React (in
- * the client) tries to reuse the markup from the server, the IDs won't match
- * and React will then recreate the entire DOM tree.
- *
- * Solution 2: Increment an integer
- *
- * This sounds great. Since we're rendering the exact same tree on the server
- * and client, we can increment a counter and get a deterministic result between
- * client and server. Also, JS integers can go up to nine-quadrillion. I'm
- * pretty sure the tab will be closed before an app never needs
- * 10 quadrillion IDs!
- *
- * Problem solved, right?
- *
- * Ah, but there's a catch! React's concurrent rendering makes this approach
- * non-deterministic. While the client and server will end up with the same
- * elements in the end, depending on suspense boundaries (and possibly some user
- * input during the initial render) the incrementing integers won't always match
- * up.
- *
- * Solution 3: Don't use IDs at all on the server; patch after first render.
- *
- * What we've done here is solution 2 with some tricks. With this approach, the
- * ID returned is an empty string on the first render. This way the server and
- * client have the same markup no matter how wild the concurrent rendering may
- * have gotten.
- *
- * After the render, we patch up the components with an incremented ID. This
- * causes a double render on any components with `useId`. Shouldn't be a problem
- * since the components using this hook should be small, and we're only updating
- * the ID attribute on the DOM, nothing big is happening.
- *
- * It doesn't have to be an incremented number, though--we could do generate
- * random strings instead, but incrementing a number is probably the cheapest
- * thing we can do.
- *
- * Additionally, we only do this patchup on the very first client render ever.
- * Any calls to `useId` that happen dynamically in the client will be
- * populated immediately with a value. So, we only get the double render after
- * server hydration and never again, SO BACK OFF ALRIGHT?
- */
-var serverHandoffComplete = false;
-var id$2 = 0;
-
-var genId = function genId() {
-  return ++id$2;
-};
-/**
- * useId
- *
- * Autogenerate IDs to facilitate WAI-ARIA and server rendering.
- *
- * Note: The returned ID will initially be `null` and will update after a
- * component mounts. Users may need to supply their own ID if they need
- * consistent values for SSR.
- *
- * @see Docs https://reach.tech/auto-id
- */
-
-
-function useId(idFromProps) {
-  /*
-   * If this instance isn't part of the initial render, we don't have to do the
-   * double render/patch-up dance. We can just generate the ID and return it.
-   */
-  var initialId = idFromProps || (serverHandoffComplete ? genId() : null);
-
-  var _React$useState = useState(initialId),
-      id = _React$useState[0],
-      setId = _React$useState[1];
-
-  useIsomorphicLayoutEffect$1(function () {
-    if (id === null) {
-      /*
-       * Patch the ID after render. We do this in `useLayoutEffect` to avoid any
-       * rendering flicker, though it'll make the first render slower (unlikely
-       * to matter, but you're welcome to measure your app and let us know if
-       * it's a problem).
-       */
-      setId(genId());
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
-
-  }, []);
-  useEffect(function () {
-    if (serverHandoffComplete === false) {
-      /*
-       * Flag all future uses of `useId` to skip the update dance. This is in
-       * `useEffect` because it goes after `useLayoutEffect`, ensuring we don't
-       * accidentally bail out of the patch-up dance prematurely.
-       */
-      serverHandoffComplete = true;
-    }
-  }, []);
-  return id != null ? String(id) : undefined;
-}
-
 var _excluded$v = ["children", "className", "required", "helpIconProps"],
   _excluded2$3 = ["onClick", "icon", "tooltipProps", "className"];
 var Label = function Label(_ref) {
@@ -29118,8 +28982,7 @@ var Slider = function Slider(_ref) {
     error = _ref.error,
     helpText = _ref.helpText,
     otherProps = _objectWithoutProperties$1(_ref, _excluded$c);
-  var _id = useId$1();
-  var id = otherProps.id || _id;
+  var id = useId(otherProps.id);
   var errorId = "error_".concat(id);
   var helpTextId = "helpText_".concat(id);
   return /*#__PURE__*/React__default.createElement(_ConfigProvider, {
@@ -29180,6 +29043,36 @@ var Slider = function Slider(_ref) {
   }, helpText)));
 };
 
+var Stepper = function Stepper(_ref) {
+  var steps = _ref.steps,
+    activeIndex = _ref.activeIndex,
+    setActiveIndex = _ref.setActiveIndex;
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: "neeto-ui-stepper__wrapper"
+  }, steps.map(function (_ref2, index) {
+    var id = _ref2.id,
+      label = _ref2.label;
+    return /*#__PURE__*/React__default.createElement("div", {
+      "data-testid": "stepper-item-".concat(id),
+      key: id,
+      className: classnames$1("neeto-ui-stepper-item__wrapper", {
+        "neeto-ui-stepper-item__wrapper--active": index === activeIndex,
+        "neeto-ui-stepper-item__wrapper--done": index < activeIndex
+      })
+    }, /*#__PURE__*/React__default.createElement("button", {
+      className: "neeto-ui-stepper-item",
+      onClick: function onClick() {
+        return setActiveIndex(index);
+      }
+    }, /*#__PURE__*/React__default.createElement("span", {
+      className: "neeto-ui-stepper-item__stage"
+    }, /*#__PURE__*/React__default.createElement("span", null, id)), /*#__PURE__*/React__default.createElement("span", {
+      className: "neeto-ui-stepper-item__label",
+      "data-text": label
+    }, label)));
+  }));
+};
+
 var _excluded$b = ["label", "required", "className", "error", "onChange", "labelProps", "children"];
 var Switch = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
   var _ref$label = _ref.label,
@@ -38777,8 +38670,7 @@ var TimePickerInput = function TimePickerInput(_ref) {
     _ref$error = _ref.error,
     error = _ref$error === void 0 ? "" : _ref$error,
     otherProps = _objectWithoutProperties$1(_ref, _excluded$2);
-  var _id = useId$1();
-  var id = otherProps.id || _id;
+  var id = useId(otherProps.id);
   var errorId = "error_".concat(id);
   var handleChange = function handleChange(value) {
     var date = dayjs(value, "HH:mm:ss");
@@ -41708,5 +41600,5 @@ var TreeSelect = /*#__PURE__*/forwardRef$1(function (_ref, ref) {
 });
 TreeSelect.displayName = "TreeSelect";
 
-export { Accordion, ActionDropdown, Alert, Avatar, Button, Callout, Checkbox, ColorPicker, DatePicker, Dropdown, Input$3 as Input, Kbd, Label, Modal, MultiEmailInput, NoData, Pagination, Pane, Popover, Radio, Select, Slider, Spinner, Switch, Tab, Table, Tag, Textarea, TimePicker$1 as TimePicker, TimePickerInput, Toastr, Tooltip, TreeSelect, Typography };
+export { Accordion, ActionDropdown, Alert, Avatar, Button, Callout, Checkbox, ColorPicker, DatePicker, Dropdown, Input$3 as Input, Kbd, Label, Modal, MultiEmailInput, NoData, Pagination, Pane, Popover, Radio, Select, Slider, Spinner, Stepper, Switch, Tab, Table, Tag, Textarea, TimePicker$1 as TimePicker, TimePickerInput, Toastr, Tooltip, TreeSelect, Typography };
 //# sourceMappingURL=index.js.map