@danske/sapphire-react-lab 0.88.1 → 0.89.0

package/build/cjs/index.js

@@ -39,8 +39,8 @@ var toast = require('@react-aria/toast');
 var styles$7 = require('@danske/sapphire-css/components/toast/toast.module.css');
 var styles$8 = require('@danske/sapphire-css/components/accordion/accordion.module.css');
 var accordion = require('@react-aria/accordion');
-var tree = require('@react-stately/tree');
 var collections = require('@react-stately/collections');
+var tree = require('@react-stately/tree');
 var styles$9 = require('@danske/sapphire-css/components/text/text.module.css');
 var label = require('@react-aria/label');
 var styles$a = require('@danske/sapphire-css/components/dropzone/dropzone.module.css');
@@ -2476,6 +2476,17 @@ const useShowToast = () => {
   };
 };
 
+const AccordionContext = React__default["default"].createContext({
+  sidePadding: void 0
+});
+function useAccordionContext() {
+  const context = React.useContext(AccordionContext);
+  if (context) {
+    return context;
+  }
+  throw new Error("Accordion context can only be used within Accordion component.");
+}
+
 var __defProp$h = Object.defineProperty;
 var __defProps$f = Object.defineProperties;
 var __getOwnPropDescs$f = Object.getOwnPropertyDescriptors;
@@ -2495,46 +2506,13 @@ var __spreadValues$h = (a, b) => {
   return a;
 };
 var __spreadProps$f = (a, b) => __defProps$f(a, __getOwnPropDescs$f(b));
-function useTreeState(props) {
-  const state = tree.useTreeState(props);
-  const onToggle = (key) => {
-    state.setExpandedKeys(toggleKey(state.expandedKeys, key, props.expansionMode));
-  };
-  return __spreadProps$f(__spreadValues$h({}, state), { toggleKey: onToggle });
-}
-function toggleKey(set, key, expansionMode = "multiple") {
-  const res = new Set(set);
-  if (res.has(key)) {
-    res.delete(key);
-  } else {
-    if (expansionMode === "single")
-      res.clear();
-    res.add(key);
-  }
-  return res;
-}
-
-var __defProp$g = Object.defineProperty;
-var __defProps$e = Object.defineProperties;
-var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
-var __hasOwnProp$g = Object.prototype.hasOwnProperty;
-var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
-var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues$g = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp$g.call(b, prop))
-      __defNormalProp$g(a, prop, b[prop]);
-  if (__getOwnPropSymbols$g)
-    for (var prop of __getOwnPropSymbols$g(b)) {
-      if (__propIsEnum$g.call(b, prop))
-        __defNormalProp$g(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
+const customPaddingStyleProps = (sidePadding) => ({
+  paddingLeft: typeof sidePadding === "string" ? sidePadding : `${sidePadding}px`,
+  paddingRight: typeof sidePadding === "string" ? sidePadding : `${sidePadding}px`
+});
 function _AccordionItem(props) {
   const { state, item } = props;
+  const { sidePadding } = useAccordionContext();
   const isOpen = state.expandedKeys.has(item.key);
   const isDisabled = state.disabledKeys.has(item.key);
   const { isHovered, hoverProps } = interactions.useHover({ isDisabled });
@@ -2553,25 +2531,65 @@ function _AccordionItem(props) {
   }, /* @__PURE__ */ React__default["default"].createElement("div", {
     role: "heading",
     "aria-level": props.headerLevel
-  }, /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$e(__spreadValues$g({}, utils$1.mergeProps(buttonProps, hoverProps, pressProps, focusProps)), {
+  }, /* @__PURE__ */ React__default["default"].createElement("button", __spreadProps$f(__spreadValues$h({}, utils$1.mergeProps(buttonProps, hoverProps, pressProps, focusProps)), {
     "aria-disabled": isDisabled,
     ref,
     className: clsx__default["default"](styles__default$8["default"]["sapphire-accordion__item-header"], styles__default$8["default"]["js-focus"], styles__default$8["default"]["js-hover"], {
       [styles__default$8["default"]["is-focus"]]: isFocusVisible,
       [styles__default$8["default"]["is-hover"]]: isHovered,
       [styles__default$8["default"]["is-active"]]: isPressed
-    })
+    }),
+    style: sidePadding ? customPaddingStyleProps(sidePadding) : {}
   }), item.props.heading, /* @__PURE__ */ React__default["default"].createElement("div", {
     className: clsx__default["default"](styles__default$8["default"]["sapphire-accordion__item-arrow"])
-  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, null, /* @__PURE__ */ React__default["default"].createElement(react.ChevronDown, null))))), /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$e(__spreadValues$g({}, utils$1.mergeProps(regionProps, { onKeyDown })), {
+  }, /* @__PURE__ */ React__default["default"].createElement(sapphireReact.Icon, null, /* @__PURE__ */ React__default["default"].createElement(react.ChevronDown, null))))), /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$f(__spreadValues$h({}, utils$1.mergeProps(regionProps, { onKeyDown })), {
     "aria-hidden": !isOpen,
     className: clsx__default["default"](styles__default$8["default"]["sapphire-accordion__item-content-wrapper"])
   }), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: clsx__default["default"](styles__default$8["default"]["sapphire-accordion__item-content"])
+    className: clsx__default["default"](styles__default$8["default"]["sapphire-accordion__item-content"]),
+    style: sidePadding ? customPaddingStyleProps(sidePadding) : {}
   }, item.props.children)));
 }
 const AccordionItem = collections.Item;
 
+var __defProp$g = Object.defineProperty;
+var __defProps$e = Object.defineProperties;
+var __getOwnPropDescs$e = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols$g = Object.getOwnPropertySymbols;
+var __hasOwnProp$g = Object.prototype.hasOwnProperty;
+var __propIsEnum$g = Object.prototype.propertyIsEnumerable;
+var __defNormalProp$g = (obj, key, value) => key in obj ? __defProp$g(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues$g = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp$g.call(b, prop))
+      __defNormalProp$g(a, prop, b[prop]);
+  if (__getOwnPropSymbols$g)
+    for (var prop of __getOwnPropSymbols$g(b)) {
+      if (__propIsEnum$g.call(b, prop))
+        __defNormalProp$g(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps$e = (a, b) => __defProps$e(a, __getOwnPropDescs$e(b));
+function useTreeState(props) {
+  const state = tree.useTreeState(props);
+  const onToggle = (key) => {
+    state.setExpandedKeys(toggleKey(state.expandedKeys, key, props.expansionMode));
+  };
+  return __spreadProps$e(__spreadValues$g({}, state), { toggleKey: onToggle });
+}
+function toggleKey(set, key, expansionMode = "multiple") {
+  const res = new Set(set);
+  if (res.has(key)) {
+    res.delete(key);
+  } else {
+    if (expansionMode === "single")
+      res.clear();
+    res.add(key);
+  }
+  return res;
+}
+
 var __defProp$f = Object.defineProperty;
 var __defProps$d = Object.defineProperties;
 var __getOwnPropDescs$d = Object.getOwnPropertyDescriptors;
@@ -2607,29 +2625,39 @@ const _Accordion$1 = (_a, ref) => {
   var _b = _a, {
     expansionMode = "multiple",
     headerLevel = 5,
-    hideLastDivider = false
+    hideLastDivider = false,
+    hasNegativeSideMargin = false,
+    sidePadding
   } = _b, props = __objRest$d(_b, [
     "expansionMode",
     "headerLevel",
-    "hideLastDivider"
+    "hideLastDivider",
+    "hasNegativeSideMargin",
+    "sidePadding"
   ]);
   sapphireReact.useThemeCheck();
   const { styleProps } = sapphireReact.useSapphireStyleProps(props);
   const state = useTreeState(__spreadProps$d(__spreadValues$f({}, props), { expansionMode }));
   const forwardedRef = utils$1.useObjectRef(ref);
   const { accordionProps } = accordion.useAccordion(props, state, forwardedRef);
-  return /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$d(__spreadValues$f({}, utils$1.mergeProps(accordionProps, utils$1.filterDOMProps(props, { labelable: true }))), {
+  return /* @__PURE__ */ React__default["default"].createElement(AccordionContext.Provider, {
+    value: { sidePadding }
+  }, /* @__PURE__ */ React__default["default"].createElement("div", __spreadProps$d(__spreadValues$f({}, utils$1.mergeProps(accordionProps, utils$1.filterDOMProps(props, { labelable: true }))), {
+    ref: forwardedRef,
     className: clsx__default["default"](styles__default$8["default"]["sapphire-accordion"], {
-      [styles__default$8["default"]["sapphire-accordion--without-last-divider"]]: hideLastDivider
+      [styles__default$8["default"]["sapphire-accordion--without-last-divider"]]: hideLastDivider,
+      [styles__default$8["default"]["sapphire-accordion--negative-margin-self"]]: !sidePadding && hasNegativeSideMargin
     }, styleProps.className),
-    ref: forwardedRef,
-    style: styleProps.style
+    style: __spreadValues$f(__spreadValues$f({}, sidePadding && hasNegativeSideMargin ? {
+      marginLeft: typeof sidePadding === "string" ? `calc(${sidePadding} * -1)` : `-${sidePadding}px`,
+      width: `calc(100% + calc(${sidePadding} * 2${typeof sidePadding === "string" ? "" : "px"}))`
+    } : {}), styleProps.style)
   }), [...state.collection].map((item) => /* @__PURE__ */ React__default["default"].createElement(_AccordionItem, {
     headerLevel,
     key: item.key,
     item,
     state
-  })));
+  }))));
 };
 const Accordion = React.forwardRef(_Accordion$1);
 
@@ -3796,6 +3824,7 @@ Object.defineProperty(exports, 'useLocale', {
   get: function () { return i18n.useLocale; }
 });
 exports.Accordion = _Accordion;
+exports.AccordionContext = AccordionContext;
 exports.AlertDialog = AlertDialog;
 exports.Avatar = Avatar;
 exports.Calendar = Calendar;