@vygruppen/spor-react 8.2.1 → 8.3.0

package/.turbo/turbo-build.log

@@ -1,5 +1,5 @@
 
-> @vygruppen/spor-react@8.2.1 build
+> @vygruppen/spor-react@8.3.0 build
 > tsup src/index.tsx --dts --treeshake --format cjs,esm
 
 CLI Building entry: src/index.tsx
@@ -10,13 +10,13 @@
 ESM Build start
 "Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/index.js".
 DTS Build start
-"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-AKOJGLTQ.mjs".
-CJS dist/index.js 504.49 KB
-CJS ⚡️ Build success in 2019ms
+"Collapse" is imported from external module "@chakra-ui/react" but never used in "dist/chunk-42ZK3WXN.mjs".
+CJS dist/index.js 504.82 KB
+CJS ⚡️ Build success in 2190ms
 ESM dist/index.mjs                      2.01 KB
-ESM dist/CountryCodeSelect-NEASN3EC.mjs 1.19 KB
-ESM dist/chunk-AKOJGLTQ.mjs             396.46 KB
-ESM ⚡️ Build success in 2021ms
-DTS ⚡️ Build success in 10225ms
-DTS dist/index.d.ts  271.48 KB
-DTS dist/index.d.mts 271.48 KB
+ESM dist/CountryCodeSelect-DYAFPSID.mjs 1.19 KB
+ESM dist/chunk-42ZK3WXN.mjs             396.72 KB
+ESM ⚡️ Build success in 2192ms
+DTS ⚡️ Build success in 10757ms
+DTS dist/index.d.ts  271.82 KB
+DTS dist/index.d.mts 271.82 KB

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @vygruppen/spor-react
 
+## 8.3.0
+
+### Minor Changes
+
+- f984752: Expandable: Add defaultOpen, isOpen and onChange props, and remove undocumented defaultIndex and index props.
+
+  This might be breaking if you were using these props, so make sure to double check while updating.
+
 ## 8.2.1
 
 ### Patch Changes

package/dist/{CountryCodeSelect-NEASN3EC.mjs → CountryCodeSelect-DYAFPSID.mjs}

@@ -1,4 +1,4 @@
-import { createTexts, useTranslation, InfoSelect, Item } from './chunk-AKOJGLTQ.mjs';
+import { createTexts, useTranslation, InfoSelect, Item } from './chunk-42ZK3WXN.mjs';
 import React from 'react';
 import { getSupportedCallingCodes } from 'awesome-phonenumber';
 

package/dist/{chunk-AKOJGLTQ.mjs → chunk-42ZK3WXN.mjs}

@@ -814,17 +814,32 @@ var Expandable = ({
   title,
   leftIcon,
   size: size2 = "md",
+  defaultOpen,
+  isOpen,
+  onChange = () => {
+  },
   ...rest
 }) => {
-  return /* @__PURE__ */ React69__default.createElement(Accordion, { ...rest, size: size2 }, /* @__PURE__ */ React69__default.createElement(
-    ExpandableItem,
+  return /* @__PURE__ */ React69__default.createElement(
+    Accordion,
     {
-      headingLevel,
-      title,
-      leftIcon
+      ...rest,
+      index: isOpen ? 0 : void 0,
+      defaultIndex: defaultOpen ? 0 : void 0,
+      allowMultiple: true,
+      size: size2,
+      onChange: (expandedIndex) => onChange(expandedIndex === 0)
     },
-    children
-  ));
+    /* @__PURE__ */ React69__default.createElement(
+      ExpandableItem,
+      {
+        headingLevel,
+        title,
+        leftIcon
+      },
+      children
+    )
+  );
 };
 var ExpandableItem = ({
   children,
@@ -3435,7 +3450,7 @@ var texts14 = createTexts({
     sv: "Telefonnummer"
   }
 });
-var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-NEASN3EC.mjs'));
+var LazyCountryCodeSelect = React69__default.lazy(() => import('./CountryCodeSelect-DYAFPSID.mjs'));
 var Radio = forwardRef((props, ref) => {
   return /* @__PURE__ */ React69__default.createElement(Radio$1, { ...props, ref });
 });

package/dist/index.d.mts

@@ -81,7 +81,7 @@ type AccordionProps = Omit<AccordionProps$1, "variant" | "size"> & {
 declare const Accordion: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", AccordionProps>;
 
 type HeadingLevel = "h2" | "h3" | "h4" | "h5" | "h6";
-type ExpandableProps = Omit<AccordionProps, "title"> & {
+type ExpandableProps = Omit<AccordionProps, "title" | "index" | "defaultIndex" | "onChange"> & {
     /** The hidden content */
     children: React.ReactNode;
     /** The title that's shown inside the toggle button */
@@ -97,6 +97,12 @@ type ExpandableProps = Omit<AccordionProps, "title"> & {
      * If the size is set to `lg`, the icon should be 30px.
      */
     leftIcon?: React.ReactNode;
+    /** Controlled value of whether the accordion is open or not */
+    isOpen?: boolean;
+    /** Default value of when the accordion is open or not */
+    defaultOpen?: boolean;
+    /** Callback for when the expandable opens or closes */
+    onChange?: (isOpen: boolean) => void;
 };
 /**
  * A standalone expandable component.
@@ -110,7 +116,7 @@ type ExpandableProps = Omit<AccordionProps, "title"> & {
  * </Expandable>
  * ```
  */
-declare const Expandable: ({ children, headingLevel, title, leftIcon, size, ...rest }: ExpandableProps) => React.JSX.Element;
+declare const Expandable: ({ children, headingLevel, title, leftIcon, size, defaultOpen, isOpen, onChange, ...rest }: ExpandableProps) => React.JSX.Element;
 type ExpandableItemProps = Omit<AccordionItemProps, "title"> & {
     /** The hidden content */
     children: React.ReactNode;

package/dist/index.d.ts

@@ -81,7 +81,7 @@ type AccordionProps = Omit<AccordionProps$1, "variant" | "size"> & {
 declare const Accordion: _chakra_ui_system_dist_system_types.ComponentWithAs<"div", AccordionProps>;
 
 type HeadingLevel = "h2" | "h3" | "h4" | "h5" | "h6";
-type ExpandableProps = Omit<AccordionProps, "title"> & {
+type ExpandableProps = Omit<AccordionProps, "title" | "index" | "defaultIndex" | "onChange"> & {
     /** The hidden content */
     children: React.ReactNode;
     /** The title that's shown inside the toggle button */
@@ -97,6 +97,12 @@ type ExpandableProps = Omit<AccordionProps, "title"> & {
      * If the size is set to `lg`, the icon should be 30px.
      */
     leftIcon?: React.ReactNode;
+    /** Controlled value of whether the accordion is open or not */
+    isOpen?: boolean;
+    /** Default value of when the accordion is open or not */
+    defaultOpen?: boolean;
+    /** Callback for when the expandable opens or closes */
+    onChange?: (isOpen: boolean) => void;
 };
 /**
  * A standalone expandable component.
@@ -110,7 +116,7 @@ type ExpandableProps = Omit<AccordionProps, "title"> & {
  * </Expandable>
  * ```
  */
-declare const Expandable: ({ children, headingLevel, title, leftIcon, size, ...rest }: ExpandableProps) => React.JSX.Element;
+declare const Expandable: ({ children, headingLevel, title, leftIcon, size, defaultOpen, isOpen, onChange, ...rest }: ExpandableProps) => React.JSX.Element;
 type ExpandableItemProps = Omit<AccordionItemProps, "title"> & {
     /** The hidden content */
     children: React.ReactNode;

package/dist/index.js

@@ -149,17 +149,32 @@ var init_Expandable = __esm({
       title,
       leftIcon,
       size: size2 = "md",
+      defaultOpen,
+      isOpen,
+      onChange = () => {
+      },
       ...rest
     }) => {
-      return /* @__PURE__ */ React69__namespace.default.createElement(exports.Accordion, { ...rest, size: size2 }, /* @__PURE__ */ React69__namespace.default.createElement(
-        exports.ExpandableItem,
+      return /* @__PURE__ */ React69__namespace.default.createElement(
+        exports.Accordion,
         {
-          headingLevel,
-          title,
-          leftIcon
+          ...rest,
+          index: isOpen ? 0 : void 0,
+          defaultIndex: defaultOpen ? 0 : void 0,
+          allowMultiple: true,
+          size: size2,
+          onChange: (expandedIndex) => onChange(expandedIndex === 0)
         },
-        children
-      ));
+        /* @__PURE__ */ React69__namespace.default.createElement(
+          exports.ExpandableItem,
+          {
+            headingLevel,
+            title,
+            leftIcon
+          },
+          children
+        )
+      );
     };
     exports.ExpandableItem = ({
       children,

package/dist/index.mjs

@@ -1 +1 @@
-export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-AKOJGLTQ.mjs';
+export { Accordion, AccordionButton, AccordionIcon, AccordionItem, AccordionPanel, AttachedInputs, Badge, Box, Brand, Breadcrumb, BreadcrumbItem, BreadcrumbLink, Button, ButtonGroup, Card, CardSelect, Center, Checkbox, CheckboxGroup, ChoiceChip, ClosableAlert, CloseButton, Code, ColorInlineLoader, ColorSpinner, Combobox, Container, ContentLoader, DarkFullScreenLoader, DarkInlineLoader, DarkMode, DarkSpinner, DatePicker, DateRangePicker, Divider, Drawer, DrawerBody, DrawerCloseButton, DrawerContent, DrawerFooter, ModalHeader as DrawerHeader, DrawerOverlay, Expandable, ExpandableAlert, ExpandableItem, Fade, Flex, FloatingActionButton, FormControl, FormErrorMessage, FormHelperText, FormLabel, Grid, GridItem, HStack, Heading, IconButton, Image, Img, InfoSelect, InfoTag, Input, InputGroup, InputLeftElement, InputRightElement, Item, ItemDescription, ItemLabel, JumpButton, Language, LanguageProvider, LightFullScreenLoader, LightInlineLoader, LightMode, LightSpinner, LineIcon, ListBox, ListItem, Modal, ModalBody, ModalCloseButton, ModalContent, ModalFooter, ModalHeader, ModalOverlay, NativeSelect, Nudge, NumericStepper, OrderedList, PasswordInput, PhoneNumberInput, PlayPauseButton, Portal, ProgressBar, ProgressIndicator, ProgressLoader, Radio, RadioGroup, ScaleFade, SearchInput, Section, SimpleDrawer, SimpleGrid, Skeleton, SkeletonCircle, SkeletonText, SkipButton, Slide, SlideFade, Spacer, SporProvider, Stack, StaticAlert, Stepper, StepperStep, Switch, Tab, TabList, TabPanel, TabPanels, Table, TableCaption, Tabs, Tbody, Td, Text, TextLink, Textarea, Tfoot, Th, Thead, Time, TimePicker, Tooltip, Tr, TravelTag, UnorderedList, VStack, VyLogo, WizardNudge, Wrap, WrapItem, brandTheme, createTexts, defineStyleConfig, extendTheme, fontFaces, slugify, theme, tokens, useBreakpointValue, useClipboard, useColorMode, useColorModePreference, useColorModeValue, useControllableProp, useDisclosure, useMediaQuery, useMergeRefs, useOutsideClick, usePrefersReducedMotion, useSize, useTheme, useToast, useToken, useTranslation } from './chunk-42ZK3WXN.mjs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vygruppen/spor-react",
-  "version": "8.2.1",
+  "version": "8.3.0",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",

package/src/accordion/Expandable.tsx

@@ -12,7 +12,10 @@ import { Accordion, AccordionProps } from "./Accordion";
 import { useAccordionContext } from "./AccordionContext";
 
 type HeadingLevel = "h2" | "h3" | "h4" | "h5" | "h6";
-type ExpandableProps = Omit<AccordionProps, "title"> & {
+type ExpandableProps = Omit<
+  AccordionProps,
+  "title" | "index" | "defaultIndex" | "onChange"
+> & {
   /** The hidden content */
   children: React.ReactNode;
   /** The title that's shown inside the toggle button */
@@ -28,6 +31,13 @@ type ExpandableProps = Omit<AccordionProps, "title"> & {
    * If the size is set to `lg`, the icon should be 30px.
    */
   leftIcon?: React.ReactNode;
+
+  /** Controlled value of whether the accordion is open or not */
+  isOpen?: boolean;
+  /** Default value of when the accordion is open or not */
+  defaultOpen?: boolean;
+  /** Callback for when the expandable opens or closes */
+  onChange?: (isOpen: boolean) => void;
 };
 /**
  * A standalone expandable component.
@@ -47,10 +57,20 @@ export const Expandable = ({
   title,
   leftIcon,
   size = "md",
+  defaultOpen,
+  isOpen,
+  onChange = () => {},
   ...rest
 }: ExpandableProps) => {
   return (
-    <Accordion {...rest} size={size}>
+    <Accordion
+      {...rest}
+      index={isOpen ? 0 : undefined}
+      defaultIndex={defaultOpen ? 0 : undefined}
+      allowMultiple={true}
+      size={size}
+      onChange={(expandedIndex) => onChange(expandedIndex === 0)}
+    >
       <ExpandableItem
         headingLevel={headingLevel}
         title={title}