@nest-ui/carousel - npm Package Compare versions

Comparing version 0.0.4 to 0.1.0

CHANGELOG.md

@@ -13,2 +13,10 @@ # CHANGELOG
 <!-- Start of Current Changelog -->
+## 0.1.0 `2023-04-18`
+### Component Changes
+#### Carousel
+- :rocket: Add property `methodsRef` [#167](https://github.com/tokopedia/nest/pull/167)
+
+Milestone: https://github.com/tokopedia/nest/milestone/27?closed=1
+<!-- End of Current Changelog -->
+
 ## 0.0.4 `2023-03-31`
@@ -18,4 +26,5 @@ ### Component Changes
 - :star2: Update theme key core [#142](https://github.com/tokopedia/nest/pull/142)
-<!-- End of Current Changelog -->
 
+Milestone: https://github.com/tokopedia/nest/milestone/19?closed=1
+
 ## 0.0.3 `2023-03-21`
@@ -26,2 +35,4 @@ ### Component Changes
 
+Milestone: https://github.com/tokopedia/nest/milestone/18?closed=1
+
 ## 0.0.2 `2023-02-17`
@@ -32,2 +43,4 @@ ### General
 
+Milestone: https://github.com/tokopedia/nest/milestone/17?closed=1
+
 ## 0.0.1 `2023-02-09`
@@ -37,1 +50,3 @@ ### Initial Release
 - :rocket: Nest Carousel [#103](https://github.com/tokopedia/nest/pull/103)
+
+Milestone: https://github.com/tokopedia/nest/milestone/7?closed=1

dist/@types/emotion.d.js

@@ -1,1 +0,1 @@
-import '@emotion/react';
+import "@emotion/react";

dist/Carousel/index.d.ts

 /// <reference types="react" />
 import type { CarouselProps } from './type';
-declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<CarouselProps & import("react").RefAttributes<import("./type").CarouselParams & {
-    element: HTMLDivElement;
-}>>>;
+declare const _default: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<CarouselProps & import("react").RefAttributes<HTMLDivElement>>>;
 export default _default;

dist/Carousel/index.js

@@ -1,187 +0,187 @@
-function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
-
-function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
-
-function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-
-/* eslint-disable @typescript-eslint/prefer-optional-chain */
-import { Children, forwardRef, isValidElement, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from 'react';
-import { useControlled } from '@nest-ui/core';
-import { useTheme } from '@emotion/react';
+/* eslint-disable @typescript-eslint/prefer-optional-chain */ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "@emotion/react/jsx-runtime";
+import { Children, forwardRef, isValidElement, memo, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { useControlled } from "@nest-ui/core";
+import { useTheme } from "@emotion/react";
 import { initCarousel } from "./utils";
 import { cssSlideGroup, cssSlideItem, cssSlider, cssWrapper } from "./style";
-import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { Fragment as _Fragment } from "@emotion/react/jsx-runtime";
-import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
-var Carousel = /*#__PURE__*/forwardRef(function (props, ref) {
-  var append = props.append,
-      _props$autoplay = props.autoplay,
-      autoplay = _props$autoplay === void 0 ? 0 : _props$autoplay,
-      children = props.children,
-      _props$defaultValue = props.defaultValue,
-      defaultValue = _props$defaultValue === void 0 ? 0 : _props$defaultValue,
-      _props$gutter = props.gutter,
-      gutter = _props$gutter === void 0 ? 0 : _props$gutter,
-      _props$outerGutter = props.outerGutter,
-      outerGutter = _props$outerGutter === void 0 ? 0 : _props$outerGutter,
-      _props$step = props.step,
-      _step = _props$step === void 0 ? 1 : _props$step,
-      propValue = props.value,
-      _props$visibleCells = props.visibleCells,
-      _visible = _props$visibleCells === void 0 ? 1 : _props$visibleCells,
-      onChange = props.onChange;
-
-  var _useTheme = useTheme(),
-      breakpoints = _useTheme['base-breakpoints'];
-
-  var arrVisible = [_visible].flat();
-  var arrStep = [_step].flat();
-
-  var _useControlled = useControlled(propValue, defaultValue),
-      _useControlled2 = _slicedToArray(_useControlled, 2),
-      value = _useControlled2[0],
-      _setValue = _useControlled2[1];
-
-  var _useState = useState(0),
-      _useState2 = _slicedToArray(_useState, 2),
-      breakpointIdx = _useState2[0],
-      setBreakpointIdx = _useState2[1];
-
-  useEffect(function () {
-    if (arrStep.length === 1 && arrVisible.length === 1) return;
-    var safeBreakpoints = breakpoints || [0];
-
-    var calcCurrBreakpoint = function calcCurrBreakpoint() {
-      var currWidth = window.innerWidth;
-
-      for (var i = safeBreakpoints.length - 1; i >= 0; i--) {
-        var minWidth = safeBreakpoints[i];
-
-        if (currWidth >= minWidth) {
-          setBreakpointIdx(i);
-          break;
+const Carousel = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { append , autoplay =0 , children , defaultValue =0 , gutter =0 , methodsRef , outerGutter =0 , step: _step = 1 , value: propValue , visibleCells: _visible = 1 , onChange ,  } = props;
+    const { 'base-breakpoints': breakpoints  } = useTheme();
+    const arrVisible = [
+        _visible
+    ].flat();
+    const arrStep = [
+        _step
+    ].flat();
+    const [value, _setValue] = useControlled(propValue, defaultValue);
+    const [breakpointIdx, setBreakpointIdx] = useState(0);
+    useEffect(()=>{
+        if (arrStep.length === 1 && arrVisible.length === 1) return;
+        const safeBreakpoints = breakpoints || [
+            0
+        ];
+        const calcCurrBreakpoint = ()=>{
+            const currWidth = window.innerWidth;
+            for(let i = safeBreakpoints.length - 1; i >= 0; i--){
+                const minWidth = safeBreakpoints[i];
+                if (currWidth >= minWidth) {
+                    setBreakpointIdx(i);
+                    break;
+                }
+            }
+        };
+        calcCurrBreakpoint();
+        window.addEventListener('resize', calcCurrBreakpoint);
+        return ()=>{
+            window.removeEventListener('resize', calcCurrBreakpoint);
+        };
+    }, [
+        breakpoints,
+        arrVisible.length,
+        arrStep.length
+    ]);
+    let visibleCells = 0;
+    let step = 0;
+    // get from greater index. when undefined will fallback to smaller index as min-width media query works.
+    for(let i = breakpointIdx; i >= 0; i--){
+        if (visibleCells && step) break;
+        visibleCells = visibleCells || arrVisible[i] || 0;
+        step = step || arrStep[i] || 0;
+    }
+    visibleCells = visibleCells || 1;
+    step = step || 1;
+    let length = 0;
+    const slides = Children.map(children, (child)=>{
+        if (/*#__PURE__*/ isValidElement(child)) {
+            length += 1;
+            return /*#__PURE__*/ _jsx("div", {
+                css: cssSlideItem,
+                children: child
+            });
         }
-      }
-    };
-
-    calcCurrBreakpoint();
-    window.addEventListener('resize', calcCurrBreakpoint);
-    return function () {
-      window.removeEventListener('resize', calcCurrBreakpoint);
-    };
-  }, [breakpoints, arrVisible.length, arrStep.length]);
-  var visibleCells = 0;
-  var step = 0; // get from greater index. when undefined will fallback to smaller index as min-width media query works.
-
-  for (var i = breakpointIdx; i >= 0; i--) {
-    if (visibleCells && step) break;
-    visibleCells = visibleCells || arrVisible[i] || 0;
-    step = step || arrStep[i] || 0;
-  }
-
-  visibleCells = visibleCells || 1;
-  step = step || 1;
-  var length = 0;
-  var slides = Children.map(children, function (child) {
-    if ( /*#__PURE__*/isValidElement(child)) {
-      length += 1;
-      return _jsx("div", {
-        css: cssSlideItem,
-        children: child
-      });
-    }
-
-    return null;
-  }); // navigation target
-
-  var min = 0;
-  var max = Math.max(length - visibleCells, 0);
-  var setValue = useCallback(function (val) {
-    _setValue(val);
-
-    if (onChange) onChange(val);
-  }, [_setValue, onChange]);
-  var stepAuto = useCallback(function () {
-    setValue(value === max ? min : Math.min(value + step, max));
-  }, [setValue, min, max, step, value]);
-  var stepDown = useCallback(function () {
-    setValue(Math.max(value - step, min));
-  }, [setValue, min, step, value]);
-  var stepUp = useCallback(function () {
-    setValue(Math.min(value + step, max));
-  }, [setValue, max, step, value]); // ref forwarding
-
-  var wrapper = useRef(null);
-  useImperativeHandle(ref, function () {
-    return {
-      max: max,
-      min: min,
-      step: step,
-      value: value,
-      visibleCells: visibleCells,
-      setValue: setValue,
-      stepDown: stepDown,
-      stepUp: stepUp,
-      element: wrapper.current
-    };
-  }, [max, min, step, value, visibleCells, setValue, stepDown, stepUp]); // re-adjust value after screen resize (for last slide)
-
-  useEffect(function () {
-    if (value > max) setValue(max);
-  }, [value, max, setValue]);
-  var slideGroup = useRef(null);
-  useEffect(function () {
-    var wrapperDOM = wrapper.current;
-    var slideGroupDOM = slideGroup.current;
-
-    if (wrapperDOM && slideGroupDOM) {
-      var carousel = initCarousel({
-        wrapperDOM: wrapperDOM,
-        slideGroupDOM: slideGroupDOM,
-        autoplay: autoplay,
-        max: max,
-        min: min,
-        value: value,
-        stepAuto: stepAuto,
-        stepDown: stepDown,
-        stepUp: stepUp
-      });
-      return carousel.destroy;
-    }
-
-    return;
-  }, [autoplay, max, min, value, stepAuto, stepDown, stepUp]);
-  return _jsxs(_Fragment, {
-    children: [_jsx("div", {
-      ref: wrapper,
-      css: cssWrapper(outerGutter),
-      children: _jsx("div", {
-        css: cssSlider(gutter),
-        children: _jsx("div", {
-          ref: slideGroup,
-          css: cssSlideGroup(arrVisible),
-          style: {
-            transform: "translate3d(".concat(-value * 100, "%,0,0)")
-          },
-          children: slides
-        })
-      })
-    }), append && append({
-      max: max,
-      min: min,
-      step: step,
-      value: value,
-      visibleCells: visibleCells,
-      setValue: setValue,
-      stepDown: stepDown,
-      stepUp: stepUp
-    })]
-  });
+        return null;
+    });
+    // navigation target
+    const min = 0;
+    const max = Math.max(length - visibleCells, 0);
+    const setValue = useCallback((val)=>{
+        _setValue(val);
+        if (onChange) onChange(val);
+    }, [
+        _setValue,
+        onChange
+    ]);
+    const stepAuto = useCallback(()=>{
+        setValue(value === max ? min : Math.min(value + step, max));
+    }, [
+        setValue,
+        min,
+        max,
+        step,
+        value
+    ]);
+    const stepDown = useCallback(()=>{
+        setValue(Math.max(value - step, min));
+    }, [
+        setValue,
+        min,
+        step,
+        value
+    ]);
+    const stepUp = useCallback(()=>{
+        setValue(Math.min(value + step, max));
+    }, [
+        setValue,
+        max,
+        step,
+        value
+    ]);
+    // ref forwarding
+    const wrapper = useRef(null);
+    useImperativeHandle(ref, ()=>wrapper.current, []);
+    useImperativeHandle(methodsRef, ()=>({
+            max,
+            min,
+            step,
+            value,
+            visibleCells,
+            setValue,
+            stepDown,
+            stepUp
+        }), [
+        max,
+        min,
+        step,
+        value,
+        visibleCells,
+        setValue,
+        stepDown,
+        stepUp
+    ]);
+    // re-adjust value after screen resize (for last slide)
+    useEffect(()=>{
+        if (value > max) setValue(max);
+    }, [
+        value,
+        max,
+        setValue
+    ]);
+    const slideGroup = useRef(null);
+    useEffect(()=>{
+        const wrapperDOM = wrapper.current;
+        const slideGroupDOM = slideGroup.current;
+        if (wrapperDOM && slideGroupDOM) {
+            const carousel = initCarousel({
+                wrapperDOM,
+                slideGroupDOM,
+                autoplay,
+                max,
+                min,
+                value,
+                stepAuto,
+                stepDown,
+                stepUp
+            });
+            return carousel.destroy;
+        }
+        return;
+    }, [
+        autoplay,
+        max,
+        min,
+        value,
+        stepAuto,
+        stepDown,
+        stepUp
+    ]);
+    return /*#__PURE__*/ _jsxs(_Fragment, {
+        children: [
+            /*#__PURE__*/ _jsx("div", {
+                ref: wrapper,
+                css: cssWrapper(outerGutter),
+                children: /*#__PURE__*/ _jsx("div", {
+                    css: cssSlider(gutter),
+                    children: /*#__PURE__*/ _jsx("div", {
+                        ref: slideGroup,
+                        css: cssSlideGroup(arrVisible),
+                        style: {
+                            transform: `translate3d(${-value * 100}%,0,0)`
+                        },
+                        children: slides
+                    })
+                })
+            }),
+            append && append({
+                max,
+                min,
+                step,
+                value,
+                visibleCells,
+                setValue,
+                stepDown,
+                stepUp
+            })
+        ]
+    });
 });
-export default /*#__PURE__*/memo(Carousel);
+export default /*#__PURE__*/ memo(Carousel);

dist/Carousel/style.js

@@ -1,58 +0,57 @@
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
-
-function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
-
-import { css } from '@emotion/react';
-import { cssScreen, sizeVar } from '@nest-ui/core';
-export var cssWrapper = function cssWrapper(_outerGutter) {
-  return function (theme) {
-    var breakpoints = theme['base-breakpoints'] || [0];
-    var outerGutter = [_outerGutter].flat();
-    return /*#__PURE__*/css.apply(void 0, ["user-select:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent;"].concat(_toConsumableArray(cssScreen(breakpoints, function (idx) {
-      return {
-        marginLeft: outerGutter[idx],
-        marginRight: outerGutter[idx]
-      };
-    }))));
-  };
-};
-export var cssSlider = function cssSlider(_gutter) {
-  return function (theme) {
-    var breakpoints = theme['base-breakpoints'] || [0];
-    var gutter = [_gutter].flat();
-    return /*#__PURE__*/css.apply(void 0, ["margin-left:calc(var(--carousel-gutter) / -2);margin-right:calc(var(--carousel-gutter) / -2);"].concat(_toConsumableArray(cssScreen(breakpoints, function (idx) {
-      return {
-        '--carousel-gutter': sizeVar(gutter[idx])
-      };
-    }))));
-  };
-};
-export var cssSlideGroup = function cssSlideGroup(arrActiveLength) {
-  return function (theme) {
-    var breakpoints = theme['base-breakpoints'] || [0];
-    return /*#__PURE__*/css.apply(void 0, ["display:flex;flex-wrap:nowrap;transition:transform .2s ease-out;margin-right:calc((var(--carousel-active-len) - 1) / var(--carousel-active-len) * 100%);&[data-touchmove]{transition:none;*{pointer-events:none;}}"].concat(_toConsumableArray(cssScreen(breakpoints, function (idx) {
-      return {
-        '--carousel-active-len': arrActiveLength[idx]
-      };
-    }))));
-  };
-};
-export var cssSlideItem = process.env.NODE_ENV === "production" ? {
-  name: "1lhevxp",
-  styles: "width:100%;flex-shrink:0;padding-left:calc(var(--carousel-gutter) / 2);padding-right:calc(var(--carousel-gutter) / 2)"
-} : {
-  name: "w9na8k-cssSlideItem",
-  styles: "width:100%;flex-shrink:0;padding-left:calc(var(--carousel-gutter) / 2);padding-right:calc(var(--carousel-gutter) / 2);label:cssSlideItem;",
-  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbInN0eWxlLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXNENEIiLCJmaWxlIjoic3R5bGUudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9yZWFjdCc7XG5pbXBvcnQgdHlwZSB7IFRoZW1lIH0gZnJvbSAnQGVtb3Rpb24vcmVhY3QnO1xuaW1wb3J0IHsgY3NzU2NyZWVuLCBzaXplVmFyIH0gZnJvbSAnQG5lc3QtdWkvY29yZSc7XG5pbXBvcnQgdHlwZSB7IENhcm91c2VsUHJvcHMgfSBmcm9tICcuL3R5cGUnO1xuXG5leHBvcnQgY29uc3QgY3NzV3JhcHBlciA9IChfb3V0ZXJHdXR0ZXI6IENhcm91c2VsUHJvcHNbJ291dGVyR3V0dGVyJ10pID0+ICh0aGVtZTogVGhlbWUpID0+IHtcbiAgY29uc3QgYnJlYWtwb2ludHMgPSB0aGVtZVsnYmFzZS1icmVha3BvaW50cyddIHx8IFswXTtcbiAgY29uc3Qgb3V0ZXJHdXR0ZXIgPSBbX291dGVyR3V0dGVyXS5mbGF0KCk7XG5cbiAgcmV0dXJuIGNzcyhcbiAgICB7XG4gICAgICB1c2VyU2VsZWN0OiAnbm9uZScsXG4gICAgICB0b3VjaEFjdGlvbjogJ3Bhbi15JyxcbiAgICAgIFdlYmtpdFRhcEhpZ2hsaWdodENvbG9yOiAndHJhbnNwYXJlbnQnLFxuICAgIH0sXG4gICAgLi4uY3NzU2NyZWVuKGJyZWFrcG9pbnRzLCBpZHggPT4gKHtcbiAgICAgIG1hcmdpbkxlZnQ6IG91dGVyR3V0dGVyW2lkeF0sXG4gICAgICBtYXJnaW5SaWdodDogb3V0ZXJHdXR0ZXJbaWR4XSxcbiAgICB9KSksXG4gICk7XG59O1xuXG5leHBvcnQgY29uc3QgY3NzU2xpZGVyID0gKF9ndXR0ZXI6IENhcm91c2VsUHJvcHNbJ2d1dHRlciddKSA9PiAodGhlbWU6IFRoZW1lKSA9PiB7XG4gIGNvbnN0IGJyZWFrcG9pbnRzID0gdGhlbWVbJ2Jhc2UtYnJlYWtwb2ludHMnXSB8fCBbMF07XG4gIGNvbnN0IGd1dHRlciA9IFtfZ3V0dGVyXS5mbGF0KCk7XG5cbiAgcmV0dXJuIGNzcyhcbiAgICB7XG4gICAgICBtYXJnaW5MZWZ0OiAnY2FsYyh2YXIoLS1jYXJvdXNlbC1ndXR0ZXIpIC8gLTIpJyxcbiAgICAgIG1hcmdpblJpZ2h0OiAnY2FsYyh2YXIoLS1jYXJvdXNlbC1ndXR0ZXIpIC8gLTIpJyxcbiAgICB9LFxuICAgIC4uLmNzc1NjcmVlbihicmVha3BvaW50cywgaWR4ID0+ICh7XG4gICAgICAnLS1jYXJvdXNlbC1ndXR0ZXInOiBzaXplVmFyKGd1dHRlcltpZHhdKSxcbiAgICB9KSksXG4gICk7XG59O1xuXG5leHBvcnQgY29uc3QgY3NzU2xpZGVHcm91cCA9IChhcnJBY3RpdmVMZW5ndGg6IEFycmF5PG51bWJlciB8IHVuZGVmaW5lZD4pID0+ICh0aGVtZTogVGhlbWUpID0+IHtcbiAgY29uc3QgYnJlYWtwb2ludHMgPSB0aGVtZVsnYmFzZS1icmVha3BvaW50cyddIHx8IFswXTtcbiAgcmV0dXJuIGNzcyhcbiAgICB7XG4gICAgICBkaXNwbGF5OiAnZmxleCcsXG4gICAgICBmbGV4V3JhcDogJ25vd3JhcCcsXG4gICAgICB0cmFuc2l0aW9uOiAndHJhbnNmb3JtIC4ycyBlYXNlLW91dCcsXG4gICAgICBtYXJnaW5SaWdodDogJ2NhbGMoKHZhcigtLWNhcm91c2VsLWFjdGl2ZS1sZW4pIC0gMSkgLyB2YXIoLS1jYXJvdXNlbC1hY3RpdmUtbGVuKSAqIDEwMCUpJyxcbiAgICAgICcmW2RhdGEtdG91Y2htb3ZlXSc6IHtcbiAgICAgICAgdHJhbnNpdGlvbjogJ25vbmUnLFxuICAgICAgICAnKic6IHsgcG9pbnRlckV2ZW50czogJ25vbmUnIH0sXG4gICAgICB9LFxuICAgIH0sXG4gICAgLi4uY3NzU2NyZWVuKGJyZWFrcG9pbnRzLCBpZHggPT4gKHsgJy0tY2Fyb3VzZWwtYWN0aXZlLWxlbic6IGFyckFjdGl2ZUxlbmd0aFtpZHhdIH0pKSxcbiAgKTtcbn07XG5cbmV4cG9ydCBjb25zdCBjc3NTbGlkZUl0ZW0gPSBjc3Moe1xuICB3aWR0aDogJzEwMCUnLFxuICBmbGV4U2hyaW5rOiAwLFxuICBwYWRkaW5nTGVmdDogJ2NhbGModmFyKC0tY2Fyb3VzZWwtZ3V0dGVyKSAvIDIpJyxcbiAgcGFkZGluZ1JpZ2h0OiAnY2FsYyh2YXIoLS1jYXJvdXNlbC1ndXR0ZXIpIC8gMiknLFxufSk7XG4iXX0= */",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
+import { css } from "@emotion/react";
+import { cssScreen, sizeVar } from "@nest-ui/core";
+export const cssWrapper = (_outerGutter)=>(theme)=>{
+        const breakpoints = theme['base-breakpoints'] || [
+            0
+        ];
+        const outerGutter = [
+            _outerGutter
+        ].flat();
+        return css({
+            userSelect: 'none',
+            touchAction: 'pan-y',
+            WebkitTapHighlightColor: 'transparent'
+        }, ...cssScreen(breakpoints, (idx)=>({
+                marginLeft: outerGutter[idx],
+                marginRight: outerGutter[idx]
+            })));
+    };
+export const cssSlider = (_gutter)=>(theme)=>{
+        const breakpoints = theme['base-breakpoints'] || [
+            0
+        ];
+        const gutter = [
+            _gutter
+        ].flat();
+        return css({
+            marginLeft: 'calc(var(--carousel-gutter) / -2)',
+            marginRight: 'calc(var(--carousel-gutter) / -2)'
+        }, ...cssScreen(breakpoints, (idx)=>({
+                '--carousel-gutter': sizeVar(gutter[idx])
+            })));
+    };
+export const cssSlideGroup = (arrActiveLength)=>(theme)=>{
+        const breakpoints = theme['base-breakpoints'] || [
+            0
+        ];
+        return css({
+            display: 'flex',
+            flexWrap: 'nowrap',
+            transition: 'transform .2s ease-out',
+            marginRight: 'calc((var(--carousel-active-len) - 1) / var(--carousel-active-len) * 100%)',
+            '&[data-touchmove]': {
+                transition: 'none',
+                '*': {
+                    pointerEvents: 'none'
+                }
+            }
+        }, ...cssScreen(breakpoints, (idx)=>({
+                '--carousel-active-len': arrActiveLength[idx]
+            })));
+    };
+export const cssSlideItem = css({
+    width: '100%',
+    flexShrink: 0,
+    paddingLeft: 'calc(var(--carousel-gutter) / 2)',
+    paddingRight: 'calc(var(--carousel-gutter) / 2)'
+});

dist/Carousel/type.d.ts

@@ -1,2 +0,2 @@
-import type { CSSProperties, HTMLAttributes, ReactElement, ReactNode } from 'react';
+import type { CSSProperties, HTMLAttributes, MutableRefObject, ReactElement, ReactNode } from 'react';
 export interface CarouselParams {
@@ -12,5 +12,2 @@ max: number;
 }
-export declare type CarouselRef = (CarouselParams & {
-    element: HTMLDivElement;
-}) | null;
 export interface CarouselProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
@@ -20,4 +17,5 @@ append?: (params: CarouselParams) => ReactNode;
     children?: ReactElement | ReactElement[];
+    defaultValue?: number;
     gutter?: CSSProperties['paddingLeft'] | Array<CSSProperties['paddingLeft']>;
-    defaultValue?: number;
+    methodsRef?: MutableRefObject<CarouselParams | null>;
     outerGutter?: CSSProperties['marginLeft'] | Array<CSSProperties['marginLeft']>;
@@ -24,0 +22,0 @@ step?: number | Array<number | undefined>;

dist/Carousel/type.js

@@ -1,1 +0,1 @@
-export {};
+export { };

dist/Carousel/utils.js

@@ -1,86 +0,75 @@
-export var initCarousel = function initCarousel(params) {
-  var wrapperDOM = params.wrapperDOM,
-      slideGroupDOM = params.slideGroupDOM,
-      autoplay = params.autoplay,
-      max = params.max,
-      min = params.min,
-      value = params.value,
-      stepAuto = params.stepAuto,
-      stepDown = params.stepDown,
-      stepUp = params.stepUp;
-  var timeout; // utils variables;
-
-  var touchStarted;
-  var initialTouch;
-  var startPosX;
-  var startPosY;
-  var pxTranslate;
-  var initialTransform;
-
-  var startAutoSlide = function startAutoSlide() {
-    if (autoplay) timeout = setTimeout(stepAuto, autoplay);
-  };
-
-  var handleTouchStart = function handleTouchStart(e) {
-    clearTimeout(timeout);
-    initialTouch = true;
-    touchStarted = true;
-    startPosX = ('touches' in e ? e.touches[0].clientX : e.clientX) || 0;
-    startPosY = ('touches' in e ? e.touches[0].clientY : e.clientY) || 0;
-    initialTransform = slideGroupDOM.style.transform;
-    pxTranslate = -value * slideGroupDOM.offsetWidth;
-  };
-
-  var handleTouchEnd = function handleTouchEnd(e) {
-    if (touchStarted) {
-      var lastPosX = ('changedTouches' in e ? e.changedTouches[0].clientX : e.clientX) || 0;
-      if (lastPosX < startPosX - 50 && value < max) stepUp();else if (lastPosX > startPosX + 50 && value > min) stepDown();else {
-        slideGroupDOM.style.transform = initialTransform;
-        startAutoSlide();
-      }
-      slideGroupDOM.removeAttribute('data-touchmove');
-      touchStarted = false;
-    }
-  };
-
-  var handleTouchMove = function handleTouchMove(e) {
-    if (touchStarted) {
-      var movementX = startPosX - ('touches' in e ? e.touches[0].clientX : e.clientX) || 0;
-      var movementY = startPosY - ('touches' in e ? e.touches[0].clientY : e.clientY) || 0; // multi axis lock - detect initial movement axis, if move to Y means it's a page scroll
-
-      if (initialTouch && Math.abs(movementX) < Math.abs(movementY)) handleTouchEnd(e);else {
-        if (initialTouch) {
-          initialTouch = false;
-          slideGroupDOM.setAttribute('data-touchmove', '');
+export const initCarousel = (params)=>{
+    const { wrapperDOM , slideGroupDOM , autoplay , max , min , value , stepAuto , stepDown , stepUp  } = params;
+    let timeout;
+    // utils variables;
+    let touchStarted;
+    let initialTouch;
+    let startPosX;
+    let startPosY;
+    let pxTranslate;
+    let initialTransform;
+    const startAutoSlide = ()=>{
+        if (autoplay) timeout = setTimeout(stepAuto, autoplay);
+    };
+    const handleTouchStart = (e)=>{
+        clearTimeout(timeout);
+        initialTouch = true;
+        touchStarted = true;
+        startPosX = ('touches' in e ? e.touches[0].clientX : e.clientX) || 0;
+        startPosY = ('touches' in e ? e.touches[0].clientY : e.clientY) || 0;
+        initialTransform = slideGroupDOM.style.transform;
+        pxTranslate = -value * slideGroupDOM.offsetWidth;
+    };
+    const handleTouchEnd = (e)=>{
+        if (touchStarted) {
+            const lastPosX = ('changedTouches' in e ? e.changedTouches[0].clientX : e.clientX) || 0;
+            if (lastPosX < startPosX - 50 && value < max) stepUp();
+            else if (lastPosX > startPosX + 50 && value > min) stepDown();
+            else {
+                slideGroupDOM.style.transform = initialTransform;
+                startAutoSlide();
+            }
+            slideGroupDOM.removeAttribute('data-touchmove');
+            touchStarted = false;
         }
-
-        slideGroupDOM.style.transform = "translate3d(".concat(pxTranslate - Math.round(movementX), "px,0,0)");
-      }
-    }
-  };
-
-  startAutoSlide();
-  wrapperDOM.addEventListener('touchstart', handleTouchStart, {
-    passive: true
-  });
-  wrapperDOM.addEventListener('touchmove', handleTouchMove);
-  wrapperDOM.addEventListener('touchend', handleTouchEnd);
-  wrapperDOM.addEventListener('touchcancel', handleTouchEnd);
-  wrapperDOM.addEventListener('mousedown', handleTouchStart);
-  document.addEventListener('mousemove', handleTouchMove);
-  document.addEventListener('mouseup', handleTouchEnd);
-  document.addEventListener('mouseleave', handleTouchEnd);
-  return {
-    destroy: function destroy() {
-      clearTimeout(timeout);
-      wrapperDOM.removeEventListener('touchstart', handleTouchStart);
-      wrapperDOM.removeEventListener('touchmove', handleTouchMove);
-      wrapperDOM.removeEventListener('touchend', handleTouchEnd);
-      wrapperDOM.removeEventListener('touchcancel', handleTouchEnd);
-      wrapperDOM.removeEventListener('mousedown', handleTouchStart);
-      document.removeEventListener('mousemove', handleTouchMove);
-      document.removeEventListener('mouseup', handleTouchEnd);
-      document.removeEventListener('mouseleave', handleTouchEnd);
-    }
-  };
-};
+    };
+    const handleTouchMove = (e)=>{
+        if (touchStarted) {
+            const movementX = startPosX - ('touches' in e ? e.touches[0].clientX : e.clientX) || 0;
+            const movementY = startPosY - ('touches' in e ? e.touches[0].clientY : e.clientY) || 0;
+            // multi axis lock - detect initial movement axis, if move to Y means it's a page scroll
+            if (initialTouch && Math.abs(movementX) < Math.abs(movementY)) handleTouchEnd(e);
+            else {
+                if (initialTouch) {
+                    initialTouch = false;
+                    slideGroupDOM.setAttribute('data-touchmove', '');
+                }
+                slideGroupDOM.style.transform = `translate3d(${pxTranslate - Math.round(movementX)}px,0,0)`;
+            }
+        }
+    };
+    startAutoSlide();
+    wrapperDOM.addEventListener('touchstart', handleTouchStart, {
+        passive: true
+    });
+    wrapperDOM.addEventListener('touchmove', handleTouchMove);
+    wrapperDOM.addEventListener('touchend', handleTouchEnd);
+    wrapperDOM.addEventListener('touchcancel', handleTouchEnd);
+    wrapperDOM.addEventListener('mousedown', handleTouchStart);
+    document.addEventListener('mousemove', handleTouchMove);
+    document.addEventListener('mouseup', handleTouchEnd);
+    document.addEventListener('mouseleave', handleTouchEnd);
+    return {
+        destroy: ()=>{
+            clearTimeout(timeout);
+            wrapperDOM.removeEventListener('touchstart', handleTouchStart);
+            wrapperDOM.removeEventListener('touchmove', handleTouchMove);
+            wrapperDOM.removeEventListener('touchend', handleTouchEnd);
+            wrapperDOM.removeEventListener('touchcancel', handleTouchEnd);
+            wrapperDOM.removeEventListener('mousedown', handleTouchStart);
+            document.removeEventListener('mousemove', handleTouchMove);
+            document.removeEventListener('mouseup', handleTouchEnd);
+            document.removeEventListener('mouseleave', handleTouchEnd);
+        }
+    };
+};

index.d.ts

 export { default as Carousel } from './dist/Carousel';
-export type { CarouselParams, CarouselRef, CarouselProps } from './dist/Carousel/type';
+export type { CarouselParams, CarouselProps } from './dist/Carousel/type';

index.js

@@ -1,1 +0,1 @@
-export { default as Carousel } from "./dist/Carousel";
+export { default as Carousel } from "./dist/Carousel";

package.json

 {
   "name": "@nest-ui/carousel",
-  "version": "0.0.4",
+  "version": "0.1.0",
   "description": "NEST Carousel",
@@ -10,3 +10,3 @@ "license": "ISC",
     "build": "sh ../../scripts/build/prebuild-single.sh -p carousel -d dist -s false",
-    "build:clean": "pnpm run clean && pnpm run build",
+    "build:clean": "pnpm run clean && pnpm run build && pnpm run typecheck",
     "clean": "rm -rf dist index.js index.d.ts style.js style.d.ts type.d.ts",
@@ -17,7 +17,7 @@ "deploy": "node ../../scripts/deploy/deploy-all.js",
     "movepack": "sh ../../scripts/build/movepack.sh",
-    "prepublishOnly": "pnpm run test && pnpm run typecheck && pnpm run build:clean",
+    "prepublishOnly": "pnpm run test && pnpm run build:clean",
     "release:dev": "npm publish --tag dev --access=public",
     "release:prod": "npm publish --access=public",
     "test": "echo \"To Do: will add a test script soon!\"",
-    "typecheck": "echo \"To Do: will add a typecheck script soon!\""
+    "typecheck": "sh ../../scripts/build/typecheck.sh"
   },
@@ -24,0 +24,0 @@ "devDependencies": {

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of package files

16

increased by6.67%

Lines of code

382

increased by4.66%

Number of low supply chain risk alerts

1

decreased by-66.67%

Worsened metrics

Total package byte prevSize

17297

decreased by-23.78%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes