@nextui-org/react 1.0.1-alpha.7 → 1.0.2-alpha.2

package/esm/col/col.styles.js

@@ -0,0 +1,16 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports.StyledCol = void 0;
+
+var _stitches = require("../theme/stitches.config");
+
+const StyledCol = (0, _stitches.styled)('div', {
+  float: 'left',
+  boxSizing: 'border-box',
+  pl: 'calc($$rowGap / 2)',
+  pr: 'calc($$rowGap / 2)'
+});
+exports.StyledCol = StyledCol;
+var _default = StyledCol;
+exports.default = _default;

package/esm/col/index.d.ts

@@ -0,0 +1,5 @@
+import Col from './col';
+export type { ColProps } from './col';
+export { StyledCol } from './col.styles';
+export type { ColVariantsProps } from './col.styles';
+export default Col;

package/esm/col/index.js

@@ -0,0 +1,14 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = exports.StyledCol = void 0;
+
+var _col = _interopRequireDefault(require("./col"));
+
+var _col2 = require("./col.styles");
+
+exports.StyledCol = _col2.StyledCol;
+var _default = _col.default;
+exports.default = _default;

package/esm/collapse/collapse-context.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface CollapseConfig {
+    values: Array<number>;
+    divider?: boolean;
+    animated?: boolean;
+    updateValues?: Function;
+}
+export declare const CollapseContext: React.Context<CollapseConfig>;
+export declare const useCollapseContext: () => CollapseConfig;

package/esm/collapse/collapse-context.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.useCollapseContext = exports.CollapseContext = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+const defaultContext = {
+  values: []
+};
+
+const CollapseContext = /*#__PURE__*/_react.default.createContext(defaultContext);
+
+exports.CollapseContext = CollapseContext;
+
+const useCollapseContext = () => _react.default.useContext(CollapseContext);
+
+exports.useCollapseContext = useCollapseContext;

package/esm/collapse/collapse-group.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { CSS } from '../theme/stitches.config';
+import { CollapseGroupVariantsProps } from './collapse.styles';
+interface Props {
+    accordion?: boolean;
+    animated?: boolean;
+    divider?: boolean;
+    onChange?: (index?: number | undefined, value?: boolean) => void;
+    as?: keyof JSX.IntrinsicElements;
+}
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type CollapseGroupProps = Props & NativeAttrs & CollapseGroupVariantsProps & {
+    css?: CSS;
+};
+declare const _default: React.ComponentType<Partial<{
+    accordion: boolean;
+}> & Omit<React.PropsWithChildren<CollapseGroupProps>, "accordion">>;
+export default _default;

package/esm/collapse/collapse-group.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _collapseContext = require("./collapse-context");
+
+var _useCurrentState = _interopRequireDefault(require("../use-current-state"));
+
+var _useTheme = _interopRequireDefault(require("../use-theme"));
+
+var _collections = require("../utils/collections");
+
+var _collapse = require("./collapse.styles");
+
+var _collapse2 = _interopRequireDefault(require("./collapse"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const defaultProps = {
+  accordion: true
+};
+
+const CollapseGroup = ({
+  children,
+  accordion,
+  animated,
+  divider,
+  onChange,
+  ...props
+}) => {
+  const [state, setState, stateRef] = (0, _useCurrentState.default)([]);
+  const {
+    isDark
+  } = (0, _useTheme.default)();
+
+  const updateValues = (currentIndex, nextState) => {
+    const hasChild = stateRef.current.find(val => val === currentIndex);
+    onChange && onChange(currentIndex, nextState);
+
+    if (accordion) {
+      if (nextState) return setState([currentIndex]);
+      return setState([]);
+    }
+
+    if (nextState) {
+      // In a few cases, the user will set Collapse Component state manually.
+      // If the user incorrectly set the state, Group component should ignore it.
+
+      /* istanbul ignore if */
+      if (hasChild) return;
+      return setState([...stateRef.current, currentIndex]);
+    }
+
+    setState(stateRef.current.filter(item => item !== currentIndex));
+  };
+
+  const initialValue = (0, _react.useMemo)(() => ({
+    values: state,
+    updateValues,
+    divider,
+    animated
+  }), [state.join(',')]);
+  const hasIndexChildren = (0, _react.useMemo)(() => (0, _collections.setChildrenIndex)(children, [_collapse2.default]), [children]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapseContext.CollapseContext.Provider, {
+    value: initialValue,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapse.StyledCollapseGroup, {
+      isDark: isDark,
+      ...props,
+      children: hasIndexChildren
+    })
+  });
+};
+
+CollapseGroup.toString = () => '.nextui-collapse-group';
+
+var _default = (0, _withDefaults.default)(CollapseGroup, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;

package/esm/collapse/collapse-icon.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+declare const MemoCollapseIcon: React.NamedExoticComponent<import("@stitches/react/types/styled-component").TransformProps<{}, {
+    xs: string;
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    xsMax: string;
+    smMax: string;
+    mdMax: string;
+    lgMax: string;
+    xlMax: string;
+    motion: string;
+    safari: string;
+    hover: string;
+    dark: string;
+    light: string;
+}>>;
+export default MemoCollapseIcon;

package/esm/collapse/collapse-icon.js

@@ -0,0 +1,41 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _collapse = require("./collapse.styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+const CollapseIcon = ({ ...props
+}) => {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapse.StyledCollapseIcon, {
+    role: "presentation",
+    focusable: "false",
+    className: "nextui-collapse-icon",
+    width: "20",
+    height: "20",
+    fill: "none",
+    viewBox: "0 0 24 24",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...props,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
+      d: "M15.5 19l-7-7 7-7",
+      strokeWidth: 1.5,
+      strokeLinecap: "round",
+      strokeLinejoin: "round"
+    })
+  });
+};
+
+CollapseIcon.toString = () => '.nextui-collapse-icon';
+
+const MemoCollapseIcon = /*#__PURE__*/_react.default.memo(CollapseIcon);
+
+var _default = MemoCollapseIcon;
+exports.default = _default;
+module.exports = exports.default;

package/esm/collapse/collapse.d.ts

@@ -0,0 +1,41 @@
+import React from 'react';
+import CollapseGroup from './collapse-group';
+import { CSS } from '../theme/stitches.config';
+import { CollapseVariantsProps } from './collapse.styles';
+interface Props {
+    title: React.ReactNode | string;
+    subtitle?: React.ReactNode | string;
+    divider?: boolean;
+    animated?: boolean;
+    bordered?: boolean;
+    arrowIcon?: React.ReactNode;
+    contentLeft?: React.ReactNode;
+    initialExpanded?: boolean;
+    showArrow?: boolean;
+    shadow?: boolean;
+    index?: number;
+    disabled?: boolean;
+    preventDefault?: boolean;
+    onChange?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>, index?: number | undefined, value?: boolean) => void;
+    as?: keyof JSX.IntrinsicElements;
+}
+declare const defaultProps: {
+    shadow: boolean;
+    divider: boolean;
+    bordered: boolean;
+    showArrow: boolean;
+    animated: boolean;
+    disabled: boolean;
+    preventDefault: boolean;
+    initialExpanded: boolean;
+};
+declare type NativeAttrs = Omit<React.HTMLAttributes<unknown>, keyof Props>;
+export declare type CollapseProps = Props & typeof defaultProps & CollapseVariantsProps & NativeAttrs & {
+    css?: CSS;
+};
+declare type CollapseComponent<P = {}> = React.FC<P> & {
+    Group: typeof CollapseGroup;
+};
+declare type ComponentProps = Partial<typeof defaultProps> & Omit<Props, keyof typeof defaultProps> & CollapseVariantsProps & NativeAttrs;
+declare const _default: CollapseComponent<ComponentProps>;
+export default _default;

package/esm/collapse/collapse.js

@@ -0,0 +1,190 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _collapseIcon = _interopRequireDefault(require("./collapse-icon"));
+
+var _expand = _interopRequireDefault(require("../utils/expand"));
+
+var _collapseContext = require("./collapse-context");
+
+var _useCurrentState = _interopRequireDefault(require("../use-current-state"));
+
+var _useWarning = _interopRequireDefault(require("../use-warning"));
+
+var _useTheme = _interopRequireDefault(require("../use-theme"));
+
+var _collections = require("../utils/collections");
+
+var _useKeyboard = _interopRequireWildcard(require("../use-keyboard"));
+
+var _collapse = require("./collapse.styles");
+
+var _clsx = _interopRequireDefault(require("../utils/clsx"));
+
+var _withDefaults = _interopRequireDefault(require("../utils/with-defaults"));
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const defaultProps = {
+  shadow: false,
+  divider: true,
+  bordered: false,
+  showArrow: true,
+  animated: true,
+  disabled: false,
+  preventDefault: true,
+  initialExpanded: false
+};
+const preClass = 'nextui-collapse';
+
+const Collapse = ({
+  children,
+  title,
+  subtitle,
+  initialExpanded,
+  shadow,
+  className,
+  divider,
+  arrowIcon,
+  showArrow,
+  disabled,
+  onChange,
+  bordered,
+  contentLeft,
+  preventDefault,
+  animated: animatedProp,
+  borderWeight,
+  index,
+  ...props
+}) => {
+  const [visible, setVisible, visibleRef] = (0, _useCurrentState.default)(initialExpanded);
+  const {
+    isDark
+  } = (0, _useTheme.default)();
+  const {
+    values,
+    divider: groupDivider,
+    animated: groupAnimated,
+    updateValues
+  } = (0, _collapseContext.useCollapseContext)();
+
+  if (!title) {
+    (0, _useWarning.default)('"title" is required.', 'Collapse');
+  }
+
+  (0, _react.useEffect)(() => {
+    if (!values.length) return;
+    const isActive = !!values.find(item => item === index);
+    setVisible(isActive);
+  }, [values.join(',')]);
+  const arrowComponent = (0, _react.useMemo)(() => {
+    if (!showArrow) return null;
+    return arrowIcon ? arrowIcon : /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapseIcon.default, {});
+  }, [arrowIcon, showArrow]);
+  const withDivider = groupDivider === undefined ? divider : groupDivider;
+  const animated = (0, _react.useMemo)(() => {
+    return groupAnimated === undefined ? animatedProp : groupAnimated;
+  }, [groupAnimated, animatedProp]);
+  const {
+    ariaLabelledById,
+    ariaControlId
+  } = (0, _react.useMemo)(() => {
+    const nextuiId = (0, _collections.getId)();
+    return {
+      ariaLabelledById: `${preClass}-button-${nextuiId}`,
+      ariaControlId: `${preClass}-${nextuiId}`
+    };
+  }, []);
+
+  const handleChange = event => {
+    if (disabled) return;
+    const next = !visibleRef.current;
+    setVisible(next);
+    updateValues && updateValues(index, next);
+    onChange && onChange(event, index, next);
+  };
+
+  const {
+    bindings
+  } = (0, _useKeyboard.default)(event => {
+    handleChange(event);
+  }, [_useKeyboard.KeyCode.Enter, _useKeyboard.KeyCode.Space], {
+    disableGlobalEvent: true,
+    preventDefault
+  });
+  const getState = (0, _react.useMemo)(() => {
+    return visible ? 'open' : 'closed';
+  }, [visible]);
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_collapse.StyledCollapse, {
+    tabIndex: disabled ? -1 : 0,
+    shadow: shadow,
+    bordered: bordered,
+    animated: animated,
+    divider: withDivider,
+    borderWeight: borderWeight,
+    visible: visible,
+    "data-state": getState,
+    className: (0, _clsx.default)(className, preClass, `${preClass}--${getState}`),
+    isDark: isDark,
+    ...props,
+    ...bindings,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_collapse.StyledCollapseView, {
+      role: "button",
+      tabIndex: -1,
+      id: ariaLabelledById,
+      className: `${preClass}-view`,
+      "data-state": getState,
+      disabled: disabled,
+      "aria-disabled": disabled,
+      "aria-expanded": visible,
+      "aria-controls": ariaControlId,
+      onClick: handleChange,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+        className: (0, _clsx.default)(`${preClass}-title`),
+        children: [contentLeft && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: `${preClass}-title-content-left`,
+          children: contentLeft
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: `${preClass}-title-content`,
+          children: [/*#__PURE__*/_react.default.isValidElement(title) ? title : /*#__PURE__*/(0, _jsxRuntime.jsx)("h3", {
+            children: title
+          }), subtitle && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: `${preClass}-subtitle`,
+            children: subtitle
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+          className: `${preClass}-title-content-right`,
+          children: arrowComponent
+        })]
+      })
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_expand.default, {
+      isExpanded: visible,
+      animated: animated,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_collapse.StyledCollapseContent, {
+        role: "region",
+        tabIndex: -1,
+        id: ariaControlId,
+        "aria-labelledby": ariaLabelledById,
+        className: `${preClass}-content`,
+        children: children
+      })
+    })]
+  });
+};
+
+Collapse.toString = () => '.nextui-collapse';
+
+var _default = (0, _withDefaults.default)(Collapse, defaultProps);
+
+exports.default = _default;
+module.exports = exports.default;