@semcore/accordion 4.0.6 → 4.0.7

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
+## [4.0.7] - 2022-07-21
+
+### Changed
+
+- Version patch update due to children dependencies update (`@semcore/icon` [2.28.0 ~> 2.29.0]).
+
 ## [4.0.6] - 2022-07-07
 
 ### Changed

package/README.md

@@ -42,21 +42,23 @@ of the components that is discussed below. There should only be one version of t
 
 You can use the package the same way but without `/ui/` in the import path.
 
- </details>
-
 ```jsx
 import Accordion from '@semcore/accordion';
 ```
 
+</details>
+
 ## 👤 Author
 
-[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS) and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
+[UI-kit team](https://github.com/semrush/intergalactic/blob/master/MAINTAINERS)
+and [others ❤️](https://github.com/semrush/intergalactic/graphs/contributors)
 
 ## 🤝 Contributing
 
 Contributions, issues and feature requests are welcome!
 
-Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at the [contributing guide](https://github.com/semrush/intergalactic/blob/master/CONTRIBUTING.md).
+Feel free to check [issues page](https://github.com/semrush/intergalactic/issues). You can also take a look at
+the [contributing guide](https://github.com/semrush/intergalactic/blob/master/CONTRIBUTING.md).
 
 ## Show your support
 

package/lib/cjs/Accordion.js

@@ -54,16 +54,16 @@ var style = (
 /*__reshadow_css_start__*/
 _core.sstyled.insert(
 /*__inner_css_start__*/
-".___SItemToggle_14cb0_gg_{cursor:pointer;outline:0}.___SItemToggle_14cb0_gg_.__keyboardFocused_14cb0_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SItemToggle_14cb0_gg_.__disabled_14cb0_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SItemChevron_14cb0_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_14cb0_gg_.__selected_14cb0_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_14cb0_gg_{transition:none}}"
+".___SItemToggle_imtam_gg_{cursor:pointer;outline:0}.___SItemToggle_imtam_gg_.__keyboardFocused_imtam_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SItemToggle_imtam_gg_.__disabled_imtam_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SItemChevron_imtam_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_imtam_gg_.__selected_imtam_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_imtam_gg_{transition:none}}"
 /*__inner_css_end__*/
-, "1l8o65w_gg_")
+, "imtam_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SItemToggle": "___SItemToggle_14cb0_gg_",
-  "_keyboardFocused": "__keyboardFocused_14cb0_gg_",
-  "_disabled": "__disabled_14cb0_gg_",
-  "__SItemChevron": "___SItemChevron_14cb0_gg_",
-  "_selected": "__selected_14cb0_gg_"
+  "__SItemToggle": "___SItemToggle_imtam_gg_",
+  "_keyboardFocused": "__keyboardFocused_imtam_gg_",
+  "_disabled": "__disabled_imtam_gg_",
+  "__SItemChevron": "___SItemChevron_imtam_gg_",
+  "_selected": "__selected_imtam_gg_"
 });
 
 var RootAccordion = /*#__PURE__*/function (_Component) {

package/lib/es6/Accordion.js

@@ -31,16 +31,16 @@ var style = (
 /*__reshadow_css_start__*/
 _sstyled.insert(
 /*__inner_css_start__*/
-".___SItemToggle_14cb0_gg_{cursor:pointer;outline:0}.___SItemToggle_14cb0_gg_.__keyboardFocused_14cb0_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SItemToggle_14cb0_gg_.__disabled_14cb0_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SItemChevron_14cb0_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_14cb0_gg_.__selected_14cb0_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_14cb0_gg_{transition:none}}"
+".___SItemToggle_imtam_gg_{cursor:pointer;outline:0}.___SItemToggle_imtam_gg_.__keyboardFocused_imtam_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SItemToggle_imtam_gg_.__disabled_imtam_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SItemChevron_imtam_gg_{transform:rotate(0deg);transition:transform .25s ease-out}.___SItemChevron_imtam_gg_.__selected_imtam_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_imtam_gg_{transition:none}}"
 /*__inner_css_end__*/
-, "1l8o65w_gg_")
+, "imtam_gg_")
 /*__reshadow_css_end__*/
 , {
-  "__SItemToggle": "___SItemToggle_14cb0_gg_",
-  "_keyboardFocused": "__keyboardFocused_14cb0_gg_",
-  "_disabled": "__disabled_14cb0_gg_",
-  "__SItemChevron": "___SItemChevron_14cb0_gg_",
-  "_selected": "__selected_14cb0_gg_"
+  "__SItemToggle": "___SItemToggle_imtam_gg_",
+  "_keyboardFocused": "__keyboardFocused_imtam_gg_",
+  "_disabled": "__disabled_imtam_gg_",
+  "__SItemChevron": "___SItemChevron_imtam_gg_",
+  "_selected": "__selected_imtam_gg_"
 });
 
 var RootAccordion = /*#__PURE__*/function (_Component) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/accordion",
   "description": "SEMRush Accordion Component",
-  "version": "4.0.6",
+  "version": "4.0.7",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",

package/src/Accordion.jsx

@@ -1,142 +0,0 @@
-import React from 'react';
-import createComponent, { Component, sstyled, Root } from '@semcore/core';
-import { Box } from '@semcore/flex-box';
-import { Collapse as CollapseAnimate } from '@semcore/animation';
-import ChevronRight from '@semcore/icon/ChevronRight/m';
-import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
-
-import style from './style/accordion.shadow.css';
-
-class RootAccordion extends Component {
-  static displayName = 'Accordion';
-  static style = style;
-  static defaultProps = {
-    defaultValue: [],
-    duration: 350,
-  };
-
-  uncontrolledProps() {
-    return {
-      value: null,
-    };
-  }
-
-  handleToggleInteraction = (newValue) => {
-    const { value } = this.asProps;
-
-    if (Array.isArray(value)) {
-      const indexOfNewValue = value.indexOf(newValue);
-      const result = [...value];
-      indexOfNewValue === -1 ? result.push(newValue) : result.splice(indexOfNewValue, 1);
-      this.handlers.value(result);
-    } else {
-      this.handlers.value(value === newValue ? null : newValue);
-    }
-  };
-
-  getItemProps({ value }) {
-    const { value: selectedValue, duration } = this.asProps;
-    const selected = Array.isArray(selectedValue)
-      ? selectedValue.includes(value)
-      : selectedValue === value;
-    return {
-      selected,
-      duration,
-      $handleInteraction: this.handleToggleInteraction,
-    };
-  }
-
-  render() {
-    const { Children } = this.asProps;
-    return <Children />;
-  }
-}
-
-export class RootItem extends Component {
-  static displayName = 'Item';
-  static style = style;
-
-  handleClick = () => {
-    const { value, $handleInteraction } = this.asProps;
-
-    $handleInteraction(value);
-  };
-
-  getToggleProps() {
-    const { value, selected, disabled } = this.asProps;
-    return {
-      disabled,
-      onClick: this.handleClick,
-      id: `trigger-${value}`,
-      role: 'button',
-      'aria-expanded': selected,
-      'aria-controls': `content-${value}`,
-    };
-  }
-
-  getCollapseProps() {
-    const { selected, duration, value } = this.asProps;
-    return {
-      selected,
-      duration,
-      id: `content-${value}`,
-      role: 'region',
-      'aria-labelledby': `trigger-${value}`,
-    };
-  }
-
-  getChevronProps() {
-    const { selected } = this.asProps;
-    return {
-      selected,
-    };
-  }
-
-  render() {
-    const { Children } = this.asProps;
-    return <Children />;
-  }
-}
-
-class Toggle extends Component {
-  static enhance = [keyboardFocusEnhance()];
-
-  handleKeyDown(e) {
-    switch (e.key) {
-      case 'Enter':
-      case ' ':
-        e.preventDefault();
-        e.currentTarget.click();
-    }
-  }
-
-  render() {
-    const { styles } = this.asProps;
-    const SItemToggle = Root;
-
-    return sstyled(styles)(<SItemToggle render={Box} onKeyDown={this.handleKeyDown} />);
-  }
-}
-
-function Chevron(props) {
-  const { styles } = props;
-  const SItemChevron = Root;
-  return sstyled(styles)(<SItemChevron render={ChevronRight} />);
-}
-
-function Collapse(props) {
-  const { selected } = props;
-  return <Root render={CollapseAnimate} visible={selected} interactive />;
-}
-
-const Item = createComponent(RootItem, {
-  Toggle,
-  Chevron,
-  Collapse,
-});
-
-const Accordion = createComponent(RootAccordion, {
-  Item,
-});
-
-export default Accordion;

package/src/index.d.ts

@@ -1,61 +0,0 @@
-import { Box, IFlexProps } from '@semcore/flex-box';
-import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
-import { ICollapseProps } from '@semcore/animation';
-
-export type AccordionValue = null | number | string | Array<number | string | null>;
-
-export interface IAccordionProps<T extends AccordionValue = AccordionValue> extends IFlexProps {
-  /** Value for the active tab. Can be set as stroke, number, null or as array.
-   * @type AccordionValue
-   * */
-  value?: T;
-  /**
-   * Value of the active tabs selected by default
-   * @type AccordionValue
-   * @default []
-   */
-  defaultValue?: T;
-  /** Called when the selection is changed
-   * @type (value: AccordionValue, event?: React.SyntheticEvent) => void
-   * */
-  onChange?: (value: T, event?: React.SyntheticEvent) => void;
-  /** Animation duration
-   * @default 350 */
-  duration?: number;
-}
-
-export interface IAccordionContext {
-  getItemProps: PropGetterFn;
-}
-
-export interface IAccordionHandlers {
-  value: (value: AccordionValue) => void;
-}
-
-export interface IAccordionItemProps {
-  /** Tab value */
-  value: string | number;
-  /** Disabling selection changes */
-  disabled?: boolean;
-}
-
-export interface IAccordionItemContext {
-  getToggleProps?: PropGetterFn;
-  getCollapseProps?: PropGetterFn;
-  getChevronProps?: PropGetterFn;
-  selected?: boolean;
-}
-
-declare const Accordion: (<T, V extends AccordionValue = AccordionValue>(
-  props: CProps<IAccordionProps<V> & T, IAccordionContext, IAccordionHandlers>,
-) => ReturnEl) & {
-  Item: (<T>(
-    props: CProps<IAccordionItemProps & T, IAccordionItemContext, IAccordionHandlers>,
-  ) => ReturnEl) & {
-    Toggle: typeof Box;
-    Chevron: typeof Box;
-    Collapse: <T>(props: ICollapseProps & T) => ReturnEl;
-  };
-};
-
-export default Accordion;

package/src/index.js

@@ -1,2 +0,0 @@
-export { default } from './Accordion';
-export * from './Accordion';

package/src/style/accordion.shadow.css

@@ -1,31 +0,0 @@
-@import '@semcore/utils/style/var.css';
-
-SItemToggle {
-  cursor: pointer;
-  outline: 0;
-}
-
-SItemToggle[keyboardFocused] {
-  box-shadow: var(--keyboard-focus);
-}
-
-SItemToggle[disabled] {
-  opacity: var(--disabled-opacity);
-  cursor: default;
-  pointer-events: none;
-}
-
-SItemChevron {
-  transform: rotate(0deg);
-  transition: transform 250ms ease-out;
-
-  &[selected] {
-    transform: rotate(90deg);
-  }
-}
-
-@media (prefers-reduced-motion) {
-  SItemChevron {
-    transition: none;
-  }
-}