@ably/ui 17.5.6 → 17.5.7-dev.a9e50464

package/core/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/core/Accordion.tsx"],"sourcesContent":["import React, {\n  ReactNode,\n  useMemo,\n  useState,\n  forwardRef,\n  useEffect,\n} from \"react\";\nimport {\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n  Accordion as RadixAccordion,\n} from \"@radix-ui/react-accordion\";\n\nimport Icon from \"./Icon\";\nimport type { IconName } from \"./Icon/types\";\nimport type {\n  AccordionData,\n  AccordionIcon,\n  AccordionIcons,\n  AccordionOptions,\n  AccordionTheme,\n} from \"./Accordion/types\";\nimport {\n  themeClasses,\n  isNonTransparentTheme,\n  isStaticTheme,\n} from \"./Accordion/utils\";\nimport cn from \"./utils/cn\";\n\ntype AccordionRowProps = {\n  children: ReactNode;\n  name: string;\n  rowIcon?: IconName | AccordionIcon;\n  theme: AccordionTheme;\n  toggleIcons: AccordionIcons;\n  options?: AccordionOptions;\n  index: number;\n  onClick: () => void;\n  openRowValues: string[];\n  rowInteractive?: boolean;\n};\n\nexport type AccordionProps = {\n  /**\n   * The data for the accordion items.\n   */\n  data: AccordionData[];\n\n  /**\n   * Icons for the accordion toggle.\n   */\n  icons?: AccordionIcons;\n\n  /**\n   * Theme for the accordion.\n   */\n  theme?: AccordionTheme;\n\n  /**\n   * Options for the accordion behavior.\n   */\n  options?: AccordionOptions;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst AccordionRow = ({\n  name,\n  children,\n  rowIcon,\n  options,\n  toggleIcons,\n  theme,\n  index,\n  onClick,\n  openRowValues,\n  rowInteractive = true,\n}: AccordionRowProps) => {\n  const { selectable, sticky } = options || {};\n  const rowKey = `accordion-item-${index}`;\n  const isOpen = openRowValues.includes(rowKey);\n\n  const {\n    text,\n    bg,\n    hoverBg,\n    selectableBg,\n    selectableText,\n    border,\n    toggleIconColor,\n  } = themeClasses[theme];\n\n  const textClass = (selectable && isOpen && selectableText) || text;\n\n  return (\n    <AccordionItem\n      value={rowKey}\n      className={cn({\n        [`${border}`]: border && !options?.hideBorders,\n      })}\n    >\n      <AccordionTrigger\n        onClick={onClick}\n        className={cn({\n          \"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none\":\n            true,\n          \"px-4 mb-4 rounded-lg\": isNonTransparentTheme(theme),\n          \"px-0 rounded-none\": !isNonTransparentTheme(theme),\n          \"pointer-events-none focus-visible:outline-none\":\n            isStaticTheme(theme),\n          \"focus-base\": !isStaticTheme(theme),\n          \"sticky top-0\": sticky,\n          [`${bg} ${hoverBg} ${text}`]: !(selectable && isOpen),\n          [`${selectableBg} ${selectableText}`]: selectable && isOpen,\n          [options?.headerCSS ?? \"\"]: options?.headerCSS,\n          [options?.selectedHeaderCSS ?? \"\"]:\n            options?.selectedHeaderCSS && isOpen,\n        })}\n      >\n        {rowIcon ? (\n          <Icon\n            name={typeof rowIcon === \"object\" ? rowIcon.name : rowIcon}\n            color={textClass}\n            additionalCSS={\n              typeof rowIcon === \"object\" && rowIcon.css ? rowIcon.css : \"\"\n            }\n            size={options?.rowIconSize ?? \"32px\"}\n          />\n        ) : null}\n        <span>{name}</span>\n        {!selectable && !isStaticTheme(theme) && rowInteractive ? (\n          <span className=\"flex-1 justify-end flex items-center\">\n            <Icon\n              name={isOpen ? toggleIcons.open.name : toggleIcons.closed.name}\n              color={toggleIconColor}\n              size={options?.iconSize ?? \"16px\"}\n            />\n          </span>\n        ) : null}\n      </AccordionTrigger>\n      {rowInteractive && (\n        <AccordionContent\n          className={cn({\n            \"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\":\n              true,\n            [options?.contentCSS ?? \"\"]: options?.contentCSS,\n          })}\n        >\n          <div className=\"pb-4\">{children}</div>\n        </AccordionContent>\n      )}\n    </AccordionItem>\n  );\n};\n\nconst Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  (\n    {\n      data,\n      theme = \"transparent\",\n      icons = {\n        closed: { name: \"icon-gui-plus-outline\" },\n        open: { name: \"icon-gui-minus-outline\" },\n      },\n      options,\n      ...props\n    },\n    ref,\n  ) => {\n    const openIndexes = useMemo(() => {\n      const indexValues = data.map((_, i) => `accordion-item-${i}`);\n      return options?.fullyOpen\n        ? indexValues\n        : indexValues.filter((_, index) =>\n            options?.defaultOpenIndexes?.includes(index),\n          );\n    }, [options?.defaultOpenIndexes, options?.fullyOpen, data.length]);\n\n    const [openRowValues, setOpenRowValues] = useState<string[]>(openIndexes);\n\n    useEffect(() => {\n      setOpenRowValues(openIndexes);\n    }, [openIndexes]);\n\n    const innerAccordion = data.map((item, index) => (\n      <AccordionRow\n        key={item.name}\n        name={item.name}\n        rowIcon={item.icon}\n        toggleIcons={icons}\n        theme={theme}\n        options={options}\n        index={index}\n        onClick={() => {\n          item.onClick?.(index);\n        }}\n        openRowValues={openRowValues}\n        rowInteractive={item.interactive}\n      >\n        {item.content}\n      </AccordionRow>\n    ));\n\n    return (\n      <div ref={ref} {...props}>\n        {options?.autoClose ? (\n          <RadixAccordion\n            type=\"single\"\n            collapsible\n            value={openRowValues[0]}\n            onValueChange={(values) => setOpenRowValues([values])}\n          >\n            {innerAccordion}\n          </RadixAccordion>\n        ) : (\n          <RadixAccordion\n            type=\"multiple\"\n            value={openRowValues}\n            onValueChange={(values) => setOpenRowValues(values)}\n          >\n            {innerAccordion}\n          </RadixAccordion>\n        )}\n      </div>\n    );\n  },\n);\n\nAccordion.displayName = \"Accordion\";\n\nexport default Accordion;\n"],"names":["React","useMemo","useState","forwardRef","useEffect","AccordionContent","AccordionItem","AccordionTrigger","Accordion","RadixAccordion","Icon","themeClasses","isNonTransparentTheme","isStaticTheme","cn","AccordionRow","name","children","rowIcon","options","toggleIcons","theme","index","onClick","openRowValues","rowInteractive","selectable","sticky","rowKey","isOpen","includes","text","bg","hoverBg","selectableBg","selectableText","border","toggleIconColor","textClass","value","className","hideBorders","headerCSS","selectedHeaderCSS","color","additionalCSS","css","size","rowIconSize","span","open","closed","iconSize","contentCSS","div","data","icons","props","ref","openIndexes","indexValues","map","_","i","fullyOpen","filter","defaultOpenIndexes","length","setOpenRowValues","innerAccordion","item","key","icon","interactive","content","autoClose","type","collapsible","onValueChange","values","displayName"],"mappings":"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"}
+{"version":3,"sources":["../../src/core/Accordion.tsx"],"sourcesContent":["import React, {\n  ReactNode,\n  useMemo,\n  useState,\n  forwardRef,\n  useEffect,\n} from \"react\";\nimport {\n  AccordionContent,\n  AccordionItem,\n  AccordionTrigger,\n  Accordion as RadixAccordion,\n} from \"@radix-ui/react-accordion\";\n\nimport Icon from \"./Icon\";\nimport type { IconName } from \"./Icon/types\";\nimport type {\n  AccordionData,\n  AccordionIcon,\n  AccordionIcons,\n  AccordionOptions,\n  AccordionTheme,\n} from \"./Accordion/types\";\nimport {\n  themeClasses,\n  isNonTransparentTheme,\n  isStaticTheme,\n} from \"./Accordion/utils\";\nimport cn from \"./utils/cn\";\n\ntype AccordionRowProps = {\n  children: ReactNode;\n  name: string;\n  rowIcon?: IconName | AccordionIcon;\n  theme: AccordionTheme;\n  toggleIcons: AccordionIcons;\n  options?: AccordionOptions;\n  index: number;\n  onClick: () => void;\n  openRowValues: string[];\n  rowInteractive?: boolean;\n};\n\nexport type AccordionProps = {\n  /**\n   * The data for the accordion items.\n   */\n  data: AccordionData[];\n\n  /**\n   * Icons for the accordion toggle.\n   */\n  icons?: AccordionIcons;\n\n  /**\n   * Theme for the accordion.\n   */\n  theme?: AccordionTheme;\n\n  /**\n   * Options for the accordion behavior.\n   */\n  options?: AccordionOptions;\n} & React.HTMLAttributes<HTMLDivElement>;\n\nconst AccordionRow = ({\n  name,\n  children,\n  rowIcon,\n  options,\n  toggleIcons,\n  theme,\n  index,\n  onClick,\n  openRowValues,\n  rowInteractive = true,\n}: AccordionRowProps) => {\n  const { selectable, sticky } = options || {};\n  const rowKey = `accordion-item-${index}`;\n  const isOpen = openRowValues.includes(rowKey);\n\n  const {\n    text,\n    bg,\n    hoverBg,\n    selectableBg,\n    selectableText,\n    border,\n    toggleIconColor,\n  } = themeClasses[theme];\n\n  const textClass = (selectable && isOpen && selectableText) || text;\n\n  return (\n    <AccordionItem\n      value={rowKey}\n      className={cn({\n        [`${border}`]: border && !options?.hideBorders,\n      })}\n    >\n      <AccordionTrigger\n        onClick={onClick}\n        className={cn({\n          \"flex w-full group/accordion-trigger py-4 ui-text-p1 font-bold text-left items-center gap-3 transition-colors focus:outline-none\": true,\n          \"px-4 mb-4 rounded-lg\": isNonTransparentTheme(theme),\n          \"px-0 rounded-none\": !isNonTransparentTheme(theme),\n          \"pointer-events-none focus-visible:outline-none\":\n            isStaticTheme(theme),\n          \"focus-base\": !isStaticTheme(theme),\n          \"sticky top-0\": sticky,\n          [`${bg} ${hoverBg} ${text}`]: !(selectable && isOpen),\n          [`${selectableBg} ${selectableText}`]: selectable && isOpen,\n          [options?.headerCSS ?? \"\"]: options?.headerCSS,\n          [options?.selectedHeaderCSS ?? \"\"]:\n            options?.selectedHeaderCSS && isOpen,\n        })}\n      >\n        {rowIcon ? (\n          <Icon\n            name={typeof rowIcon === \"object\" ? rowIcon.name : rowIcon}\n            color={textClass}\n            additionalCSS={\n              typeof rowIcon === \"object\" && rowIcon.css ? rowIcon.css : \"\"\n            }\n            size={options?.rowIconSize ?? \"32px\"}\n          />\n        ) : null}\n        <span>{name}</span>\n        {!selectable && !isStaticTheme(theme) && rowInteractive ? (\n          <span className=\"flex-1 justify-end flex items-center\">\n            <Icon\n              name={isOpen ? toggleIcons.open.name : toggleIcons.closed.name}\n              color={toggleIconColor}\n              size={options?.iconSize ?? \"16px\"}\n            />\n          </span>\n        ) : null}\n      </AccordionTrigger>\n      {rowInteractive && (\n        <AccordionContent\n          className={cn({\n            \"ui-text-p2 overflow-hidden transition-all data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\": true,\n            [options?.contentCSS ?? \"\"]: options?.contentCSS,\n          })}\n        >\n          <div className=\"pb-4\">{children}</div>\n        </AccordionContent>\n      )}\n    </AccordionItem>\n  );\n};\n\nconst Accordion = forwardRef<HTMLDivElement, AccordionProps>(\n  (\n    {\n      data,\n      theme = \"transparent\",\n      icons = {\n        closed: { name: \"icon-gui-plus-outline\" },\n        open: { name: \"icon-gui-minus-outline\" },\n      },\n      options,\n      ...props\n    },\n    ref,\n  ) => {\n    const openIndexes = useMemo(() => {\n      const indexValues = data.map((_, i) => `accordion-item-${i}`);\n      return options?.fullyOpen\n        ? indexValues\n        : indexValues.filter((_, index) =>\n            options?.defaultOpenIndexes?.includes(index),\n          );\n    }, [options?.defaultOpenIndexes, options?.fullyOpen, data.length]);\n\n    const [openRowValues, setOpenRowValues] = useState<string[]>(openIndexes);\n\n    useEffect(() => {\n      setOpenRowValues(openIndexes);\n    }, [openIndexes]);\n\n    const innerAccordion = data.map((item, index) => (\n      <AccordionRow\n        key={item.name}\n        name={item.name}\n        rowIcon={item.icon}\n        toggleIcons={icons}\n        theme={theme}\n        options={options}\n        index={index}\n        onClick={() => {\n          item.onClick?.(index);\n        }}\n        openRowValues={openRowValues}\n        rowInteractive={item.interactive}\n      >\n        {item.content}\n      </AccordionRow>\n    ));\n\n    return (\n      <div ref={ref} {...props}>\n        {options?.autoClose ? (\n          <RadixAccordion\n            type=\"single\"\n            collapsible\n            value={openRowValues[0]}\n            onValueChange={(values) => setOpenRowValues([values])}\n          >\n            {innerAccordion}\n          </RadixAccordion>\n        ) : (\n          <RadixAccordion\n            type=\"multiple\"\n            value={openRowValues}\n            onValueChange={(values) => setOpenRowValues(values)}\n          >\n            {innerAccordion}\n          </RadixAccordion>\n        )}\n      </div>\n    );\n  },\n);\n\nAccordion.displayName = \"Accordion\";\n\nexport default Accordion;\n"],"names":["React","useMemo","useState","forwardRef","useEffect","AccordionContent","AccordionItem","AccordionTrigger","Accordion","RadixAccordion","Icon","themeClasses","isNonTransparentTheme","isStaticTheme","cn","AccordionRow","name","children","rowIcon","options","toggleIcons","theme","index","onClick","openRowValues","rowInteractive","selectable","sticky","rowKey","isOpen","includes","text","bg","hoverBg","selectableBg","selectableText","border","toggleIconColor","textClass","value","className","hideBorders","headerCSS","selectedHeaderCSS","color","additionalCSS","css","size","rowIconSize","span","open","closed","iconSize","contentCSS","div","data","icons","props","ref","openIndexes","indexValues","map","_","i","fullyOpen","filter","defaultOpenIndexes","length","setOpenRowValues","innerAccordion","item","key","icon","interactive","content","autoClose","type","collapsible","onValueChange","values","displayName"],"mappings":"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"}

package/core/styles.components.css

@@ -38,51 +38,19 @@
      in a way that handles margin collapsing as well (hence not an exact opposite) */
   .ui-section-spacing-collapse,
   .ui-section-spacing-collapse-full {
-    @apply -my-4 sm:-my-8 md:-my-16;
+    @apply -my-4 sm:-my-8 md:-my-16 first:-mb-8 sm:first:-mb-16 md:first:-mb-32 last:-mt-8 sm:last:-mt-16 md:last:-mt-32;
   }
 
   .ui-section-spacing-collapse-half {
-    @apply -my-2 sm:-my-4 md:-my-8;
+    @apply -my-2 sm:-my-4 md:-my-8 first:-mb-4 sm:first:-mb-8 md:first:-mb-16 last:-mt-4 sm:last:-mt-8 md:last:-mt-16;
   }
 
   .ui-section-spacing-collapse-quarter {
-    @apply -my-1 sm:-my-2 md:-my-4;
+    @apply -my-1 sm:-my-2 md:-my-4 first:-mb-2 sm:first:-mb-4 md:first:-mb-8 last:-mt-2 sm:last:-mt-4 md:last:-mt-8;
   }
 
   .ui-section-spacing-collapse-eighth {
-    @apply -my-0.5 sm:-my-1 md:-my-2;
-  }
-
-  .ui-section-spacing-collapse-order-first-full {
-    @apply -mb-8 sm:-mb-16 md:-mb-32;
-  }
-
-  .ui-section-spacing-collapse-order-first-half {
-    @apply -mb-4 sm:-mb-8 md:-mb-16;
-  }
-
-  .ui-section-spacing-collapse-order-first-quarter {
-    @apply -mb-2 sm:-mb-4 md:-mb-8;
-  }
-
-  .ui-section-spacing-collapse-order-first-eighth {
-    @apply -mb-1 sm:-mb-2 md:-mb-4;
-  }
-
-  .ui-section-spacing-collapse-order-last-full {
-    @apply -mt-8 sm:-mt-16 md:-mt-32;
-  }
-
-  .ui-section-spacing-collapse-order-last-half {
-    @apply -mt-4 sm:-mt-8 md:-mt-16;
-  }
-
-  .ui-section-spacing-collapse-order-last-quarter {
-    @apply -mt-2 sm:-mt-4 md:-mt-8;
-  }
-
-  .ui-section-spacing-collapse-order-last-eighth {
-    @apply -mt-1 sm:-mt-2 md:-mt-4;
+    @apply -my-0.5 sm:-my-1 md:-my-2 first:-mb-1 sm:first:-mb-2 md:first:-mb-4 last:-mt-1 sm:last:-mt-2 md:last:-mt-4;
   }
 
   .ui-content-spacing {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ably/ui",
-  "version": "17.5.6",
+  "version": "17.5.7-dev.a9e50464",
   "description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
   "repository": {
     "type": "git",