@semcore/accordion 4.3.36 → 5.0.0-beta.1

package/CHANGELOG.md

@@ -2,11 +2,11 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-## [4.3.36] - 2023-06-30
+## [5.0.0] - 2023-07-15
 
-### Changed
+### Break
 
-- Version patch update due to children dependencies update (`@semcore/utils` [3.54.0 ~> 3.54.1]).
+- Strict, backward incompatible typings.
 
 ## [4.3.35] - 2023-06-28
 

package/lib/cjs/Accordion.js

@@ -23,12 +23,12 @@ var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/e
 var _uniqueID = _interopRequireDefault(require("@semcore/utils/lib/uniqueID"));
 var _useCssVariable = require("@semcore/utils/lib/useCssVariable");
 /*__reshadow-styles__:"./style/accordion.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SItemToggle_19vej_gg_{cursor:pointer;outline:0}.___SItemToggle_19vej_gg_.__keyboardFocused_19vej_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SItemToggle_19vej_gg_.__disabled_19vej_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default}.___SItemChevron_19vej_gg_{transform:rotate(0deg);transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out}.___SItemChevron_19vej_gg_.__selected_19vej_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_19vej_gg_{transition:none}}" /*__inner_css_end__*/, "19vej_gg_") /*__reshadow_css_end__*/, {
-  "__SItemToggle": "___SItemToggle_19vej_gg_",
-  "_keyboardFocused": "__keyboardFocused_19vej_gg_",
-  "_disabled": "__disabled_19vej_gg_",
-  "__SItemChevron": "___SItemChevron_19vej_gg_",
-  "_selected": "__selected_19vej_gg_"
+var style = ( /*__reshadow_css_start__*/_core.sstyled.insert( /*__inner_css_start__*/".___SItemToggle_p9q69_gg_{cursor:pointer;outline:0}.___SItemToggle_p9q69_gg_.__keyboardFocused_p9q69_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SItemToggle_p9q69_gg_.__disabled_p9q69_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default}.___SItemChevron_p9q69_gg_{transform:rotate(0deg);transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out}.___SItemChevron_p9q69_gg_.__selected_p9q69_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_p9q69_gg_{transition:none}}" /*__inner_css_end__*/, "p9q69_gg_") /*__reshadow_css_end__*/, {
+  "__SItemToggle": "___SItemToggle_p9q69_gg_",
+  "_keyboardFocused": "__keyboardFocused_p9q69_gg_",
+  "_disabled": "__disabled_p9q69_gg_",
+  "__SItemChevron": "___SItemChevron_p9q69_gg_",
+  "_selected": "__selected_p9q69_gg_"
 });
 var RootAccordion = /*#__PURE__*/function (_Component) {
   (0, _inherits2["default"])(RootAccordion, _Component);

package/lib/cjs/index.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { Box, IFlexProps } from '@semcore/flex-box';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { ICollapseProps } from '@semcore/animation';\n\nexport type AccordionValue = null | number | string | Array<number | string | null>;\n\nexport interface IAccordionProps<T extends AccordionValue = AccordionValue> extends IFlexProps {\n  /** Value for the active tab. Can be set as stroke, number, null or as array.\n   * @type AccordionValue\n   * */\n  value?: T;\n  /**\n   * Value of the active tabs selected by default\n   * @type AccordionValue\n   * @default []\n   */\n  defaultValue?: T;\n  /** Called when the selection is changed\n   * @type (value: AccordionValue, event?: React.SyntheticEvent) => void\n   * */\n  onChange?: (value: T, event?: React.SyntheticEvent) => void;\n  /** Animation duration of each Accordion.Item inside\n   * @default 350 */\n  duration?: number;\n}\n\nexport interface IAccordionContext {\n  getItemProps: PropGetterFn;\n}\n\nexport interface IAccordionHandlers {\n  value: (value: AccordionValue) => void;\n}\n\nexport interface IAccordionItemProps {\n  /** Tab value */\n  value: string | number;\n  /** Disabling selection changes */\n  disabled?: boolean;\n  /** Animation duration\n   * @default 350 */\n  duration?: number;\n}\n\nexport interface IAccordionItemContext {\n  getToggleProps?: PropGetterFn;\n  getCollapseProps?: PropGetterFn;\n  getChevronProps?: PropGetterFn;\n  selected?: boolean;\n}\n\ndeclare const Accordion: (<T, V extends AccordionValue = AccordionValue>(\n  props: CProps<IAccordionProps<V> & T, IAccordionContext, IAccordionHandlers>,\n) => ReturnEl) & {\n  Item: (<T>(\n    props: CProps<IAccordionItemProps & T, IAccordionItemContext, IAccordionHandlers>,\n  ) => ReturnEl) & {\n    Toggle: typeof Box;\n    Chevron: typeof Box;\n    Collapse: <T>(props: ICollapseProps & T) => ReturnEl;\n  };\n};\n\nexport default Accordion;\n"],"mappings":""}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { Box, BoxProps, FlexProps } from '@semcore/flex-box';\nimport { PropGetterFn, Intergalactic, UnknownProperties } from '@semcore/core';\nimport { CollapseProps } from '@semcore/animation';\nimport { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type AccordionValue = null | number | string | Array<number | string | null>;\n\nexport type AccordionProps<T extends AccordionValue = AccordionValue> = FlexProps & {\n  /** Value for the active tab. Can be set as stroke, number, null or as array.\n   * @type AccordionValue\n   * */\n  value?: T;\n  /**\n   * Value of the active tabs selected by default\n   * @type AccordionValue\n   * @default []\n   */\n  defaultValue?: T;\n  /** Called when the selection is changed\n   * @type (value: AccordionValue, event?: React.SyntheticEvent) => void\n   * */\n  onChange?:\n    | ((value: T, event?: React.SyntheticEvent) => void)\n    | React.Dispatch<React.SetStateAction<T>>;\n  /** Animation duration of each Accordion.Item inside\n   * @default 350 */\n  duration?: number;\n};\n\nexport interface IAccordionProps<T extends AccordionValue = AccordionValue>\n  extends AccordionProps<T> {}\n\n/** @deprecated */\nexport interface IAccordionContext extends AccordionContext, UnknownProperties {}\nexport type AccordionContext = {\n  getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface IAccordionHandlers extends AccordionHandlers, UnknownProperties {}\nexport type AccordionHandlers = {\n  value: (value: AccordionValue) => void;\n};\n\n/** @deprecated */\nexport interface IAccordionItemProps extends AccordionItemProps, UnknownProperties {}\nexport type AccordionItemProps = {\n  /** Tab value */\n  value: string | number;\n  /** Disabling selection changes */\n  disabled?: boolean;\n  /** Animation duration\n   * @default 350 */\n  duration?: number;\n};\n\n/** @deprecated */\nexport interface IAccordionItemContext extends AccordionItemContext, UnknownProperties {}\nexport type AccordionItemContext = {\n  getToggleProps?: PropGetterFn;\n  getCollapseProps?: PropGetterFn;\n  getChevronProps?: PropGetterFn;\n  selected?: boolean;\n};\n\nexport type AccordionItemToggleProps = BoxProps & KeyboardFocusProps;\n\ntype IntergalacticAccordionComponent = (<\n  Value extends AccordionValue,\n  Tag extends Intergalactic.Tag = 'div',\n>(\n  props: Intergalactic.InternalTypings.ComponentProps<\n    Tag,\n    AccordionProps<Value>,\n    AccordionContext & { value: Value },\n    [handlers: AccordionHandlers]\n  >,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div'>;\n\ndeclare const Accordion: IntergalacticAccordionComponent & {\n  Item: Intergalactic.Component<\n    'div',\n    AccordionItemProps,\n    AccordionItemContext,\n    [handlers: AccordionHandlers]\n  > & {\n    Toggle: Intergalactic.Component<'div', AccordionItemToggleProps>;\n    Chevron: typeof Box;\n    Collapse: Intergalactic.Component<'div', CollapseProps>;\n  };\n};\n\nexport default Accordion;\n"],"mappings":""}

package/lib/es6/Accordion.js

@@ -19,12 +19,12 @@ import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhan
 import uniqueIDEnhancement from '@semcore/utils/lib/uniqueID';
 import { cssVariableEnhance } from '@semcore/utils/lib/useCssVariable';
 /*__reshadow-styles__:"./style/accordion.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SItemToggle_19vej_gg_{cursor:pointer;outline:0}.___SItemToggle_19vej_gg_.__keyboardFocused_19vej_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SItemToggle_19vej_gg_.__disabled_19vej_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default}.___SItemChevron_19vej_gg_{transform:rotate(0deg);transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out}.___SItemChevron_19vej_gg_.__selected_19vej_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_19vej_gg_{transition:none}}" /*__inner_css_end__*/, "19vej_gg_") /*__reshadow_css_end__*/, {
-  "__SItemToggle": "___SItemToggle_19vej_gg_",
-  "_keyboardFocused": "__keyboardFocused_19vej_gg_",
-  "_disabled": "__disabled_19vej_gg_",
-  "__SItemChevron": "___SItemChevron_19vej_gg_",
-  "_selected": "__selected_19vej_gg_"
+var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SItemToggle_p9q69_gg_{cursor:pointer;outline:0}.___SItemToggle_p9q69_gg_.__keyboardFocused_p9q69_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5))}.___SItemToggle_p9q69_gg_.__disabled_p9q69_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default}.___SItemChevron_p9q69_gg_{transform:rotate(0deg);transition:transform calc(var(--intergalactic-duration-accordion, 200)*1ms) ease-out}.___SItemChevron_p9q69_gg_.__selected_p9q69_gg_{transform:rotate(90deg)}@media (prefers-reduced-motion){.___SItemChevron_p9q69_gg_{transition:none}}" /*__inner_css_end__*/, "p9q69_gg_") /*__reshadow_css_end__*/, {
+  "__SItemToggle": "___SItemToggle_p9q69_gg_",
+  "_keyboardFocused": "__keyboardFocused_p9q69_gg_",
+  "_disabled": "__disabled_p9q69_gg_",
+  "__SItemChevron": "___SItemChevron_p9q69_gg_",
+  "_selected": "__selected_p9q69_gg_"
 });
 var RootAccordion = /*#__PURE__*/function (_Component) {
   _inherits(RootAccordion, _Component);

package/lib/es6/index.d.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { Box, IFlexProps } from '@semcore/flex-box';\nimport { CProps, PropGetterFn, ReturnEl } from '@semcore/core';\nimport { ICollapseProps } from '@semcore/animation';\n\nexport type AccordionValue = null | number | string | Array<number | string | null>;\n\nexport interface IAccordionProps<T extends AccordionValue = AccordionValue> extends IFlexProps {\n  /** Value for the active tab. Can be set as stroke, number, null or as array.\n   * @type AccordionValue\n   * */\n  value?: T;\n  /**\n   * Value of the active tabs selected by default\n   * @type AccordionValue\n   * @default []\n   */\n  defaultValue?: T;\n  /** Called when the selection is changed\n   * @type (value: AccordionValue, event?: React.SyntheticEvent) => void\n   * */\n  onChange?: (value: T, event?: React.SyntheticEvent) => void;\n  /** Animation duration of each Accordion.Item inside\n   * @default 350 */\n  duration?: number;\n}\n\nexport interface IAccordionContext {\n  getItemProps: PropGetterFn;\n}\n\nexport interface IAccordionHandlers {\n  value: (value: AccordionValue) => void;\n}\n\nexport interface IAccordionItemProps {\n  /** Tab value */\n  value: string | number;\n  /** Disabling selection changes */\n  disabled?: boolean;\n  /** Animation duration\n   * @default 350 */\n  duration?: number;\n}\n\nexport interface IAccordionItemContext {\n  getToggleProps?: PropGetterFn;\n  getCollapseProps?: PropGetterFn;\n  getChevronProps?: PropGetterFn;\n  selected?: boolean;\n}\n\ndeclare const Accordion: (<T, V extends AccordionValue = AccordionValue>(\n  props: CProps<IAccordionProps<V> & T, IAccordionContext, IAccordionHandlers>,\n) => ReturnEl) & {\n  Item: (<T>(\n    props: CProps<IAccordionItemProps & T, IAccordionItemContext, IAccordionHandlers>,\n  ) => ReturnEl) & {\n    Toggle: typeof Box;\n    Chevron: typeof Box;\n    Collapse: <T>(props: ICollapseProps & T) => ReturnEl;\n  };\n};\n\nexport default Accordion;\n"],"mappings":""}
+{"version":3,"file":"index.d.js","names":[],"sources":["../../src/index.d.ts"],"sourcesContent":["import { Box, BoxProps, FlexProps } from '@semcore/flex-box';\nimport { PropGetterFn, Intergalactic, UnknownProperties } from '@semcore/core';\nimport { CollapseProps } from '@semcore/animation';\nimport { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nexport type AccordionValue = null | number | string | Array<number | string | null>;\n\nexport type AccordionProps<T extends AccordionValue = AccordionValue> = FlexProps & {\n  /** Value for the active tab. Can be set as stroke, number, null or as array.\n   * @type AccordionValue\n   * */\n  value?: T;\n  /**\n   * Value of the active tabs selected by default\n   * @type AccordionValue\n   * @default []\n   */\n  defaultValue?: T;\n  /** Called when the selection is changed\n   * @type (value: AccordionValue, event?: React.SyntheticEvent) => void\n   * */\n  onChange?:\n    | ((value: T, event?: React.SyntheticEvent) => void)\n    | React.Dispatch<React.SetStateAction<T>>;\n  /** Animation duration of each Accordion.Item inside\n   * @default 350 */\n  duration?: number;\n};\n\nexport interface IAccordionProps<T extends AccordionValue = AccordionValue>\n  extends AccordionProps<T> {}\n\n/** @deprecated */\nexport interface IAccordionContext extends AccordionContext, UnknownProperties {}\nexport type AccordionContext = {\n  getItemProps: PropGetterFn;\n};\n\n/** @deprecated */\nexport interface IAccordionHandlers extends AccordionHandlers, UnknownProperties {}\nexport type AccordionHandlers = {\n  value: (value: AccordionValue) => void;\n};\n\n/** @deprecated */\nexport interface IAccordionItemProps extends AccordionItemProps, UnknownProperties {}\nexport type AccordionItemProps = {\n  /** Tab value */\n  value: string | number;\n  /** Disabling selection changes */\n  disabled?: boolean;\n  /** Animation duration\n   * @default 350 */\n  duration?: number;\n};\n\n/** @deprecated */\nexport interface IAccordionItemContext extends AccordionItemContext, UnknownProperties {}\nexport type AccordionItemContext = {\n  getToggleProps?: PropGetterFn;\n  getCollapseProps?: PropGetterFn;\n  getChevronProps?: PropGetterFn;\n  selected?: boolean;\n};\n\nexport type AccordionItemToggleProps = BoxProps & KeyboardFocusProps;\n\ntype IntergalacticAccordionComponent = (<\n  Value extends AccordionValue,\n  Tag extends Intergalactic.Tag = 'div',\n>(\n  props: Intergalactic.InternalTypings.ComponentProps<\n    Tag,\n    AccordionProps<Value>,\n    AccordionContext & { value: Value },\n    [handlers: AccordionHandlers]\n  >,\n) => Intergalactic.InternalTypings.ComponentRenderingResults) &\n  Intergalactic.InternalTypings.ComponentAdditive<'div'>;\n\ndeclare const Accordion: IntergalacticAccordionComponent & {\n  Item: Intergalactic.Component<\n    'div',\n    AccordionItemProps,\n    AccordionItemContext,\n    [handlers: AccordionHandlers]\n  > & {\n    Toggle: Intergalactic.Component<'div', AccordionItemToggleProps>;\n    Chevron: typeof Box;\n    Collapse: Intergalactic.Component<'div', CollapseProps>;\n  };\n};\n\nexport default Accordion;\n"],"mappings":""}

package/lib/types/index.d.ts

@@ -1,10 +1,11 @@
-import { Box, IFlexProps } from '@semcore/flex-box';
-import { CProps, PropGetterFn, ReturnEl } from '@semcore/core';
-import { ICollapseProps } from '@semcore/animation';
+import { Box, BoxProps, FlexProps } from '@semcore/flex-box';
+import { PropGetterFn, Intergalactic, UnknownProperties } from '@semcore/core';
+import { CollapseProps } from '@semcore/animation';
+import { KeyboardFocusProps } from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
 
 export type AccordionValue = null | number | string | Array<number | string | null>;
 
-export interface IAccordionProps<T extends AccordionValue = AccordionValue> extends IFlexProps {
+export type AccordionProps<T extends AccordionValue = AccordionValue> = FlexProps & {
   /** Value for the active tab. Can be set as stroke, number, null or as array.
    * @type AccordionValue
    * */
@@ -18,21 +19,32 @@ export interface IAccordionProps<T extends AccordionValue = AccordionValue> exte
   /** Called when the selection is changed
    * @type (value: AccordionValue, event?: React.SyntheticEvent) => void
    * */
-  onChange?: (value: T, event?: React.SyntheticEvent) => void;
+  onChange?:
+    | ((value: T, event?: React.SyntheticEvent) => void)
+    | React.Dispatch<React.SetStateAction<T>>;
   /** Animation duration of each Accordion.Item inside
    * @default 350 */
   duration?: number;
-}
+};
+
+export interface IAccordionProps<T extends AccordionValue = AccordionValue>
+  extends AccordionProps<T> {}
 
-export interface IAccordionContext {
+/** @deprecated */
+export interface IAccordionContext extends AccordionContext, UnknownProperties {}
+export type AccordionContext = {
   getItemProps: PropGetterFn;
-}
+};
 
-export interface IAccordionHandlers {
+/** @deprecated */
+export interface IAccordionHandlers extends AccordionHandlers, UnknownProperties {}
+export type AccordionHandlers = {
   value: (value: AccordionValue) => void;
-}
+};
 
-export interface IAccordionItemProps {
+/** @deprecated */
+export interface IAccordionItemProps extends AccordionItemProps, UnknownProperties {}
+export type AccordionItemProps = {
   /** Tab value */
   value: string | number;
   /** Disabling selection changes */
@@ -40,24 +52,42 @@ export interface IAccordionItemProps {
   /** Animation duration
    * @default 350 */
   duration?: number;
-}
+};
 
-export interface IAccordionItemContext {
+/** @deprecated */
+export interface IAccordionItemContext extends AccordionItemContext, UnknownProperties {}
+export type AccordionItemContext = {
   getToggleProps?: PropGetterFn;
   getCollapseProps?: PropGetterFn;
   getChevronProps?: PropGetterFn;
   selected?: boolean;
-}
+};
+
+export type AccordionItemToggleProps = BoxProps & KeyboardFocusProps;
+
+type IntergalacticAccordionComponent = (<
+  Value extends AccordionValue,
+  Tag extends Intergalactic.Tag = 'div',
+>(
+  props: Intergalactic.InternalTypings.ComponentProps<
+    Tag,
+    AccordionProps<Value>,
+    AccordionContext & { value: Value },
+    [handlers: AccordionHandlers]
+  >,
+) => Intergalactic.InternalTypings.ComponentRenderingResults) &
+  Intergalactic.InternalTypings.ComponentAdditive<'div'>;
 
-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;
+declare const Accordion: IntergalacticAccordionComponent & {
+  Item: Intergalactic.Component<
+    'div',
+    AccordionItemProps,
+    AccordionItemContext,
+    [handlers: AccordionHandlers]
+  > & {
+    Toggle: Intergalactic.Component<'div', AccordionItemToggleProps>;
     Chevron: typeof Box;
-    Collapse: <T>(props: ICollapseProps & T) => ReturnEl;
+    Collapse: Intergalactic.Component<'div', CollapseProps>;
   };
 };
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@semcore/accordion",
   "description": "Semrush Accordion Component",
-  "version": "4.3.36",
+  "version": "5.0.0-beta.1",
   "main": "lib/cjs/index.js",
   "module": "lib/es6/index.js",
   "typings": "lib/types/index.d.ts",
@@ -9,13 +9,13 @@
   "author": "UI-kit team <ui-kit-team@semrush.com>",
   "license": "MIT",
   "dependencies": {
-    "@semcore/animation": "^1.2",
-    "@semcore/flex-box": "^4",
-    "@semcore/icon": "2.16 - 3",
-    "@semcore/utils": "^3.17"
+    "@semcore/animation": "2.0.0-beta.1",
+    "@semcore/flex-box": "5.0.0-beta.1",
+    "@semcore/icon": "4.0.0-beta.1",
+    "@semcore/utils": "4.0.0-beta.1"
   },
   "peerDependencies": {
-    "@semcore/core": "^1.11",
+    "@semcore/core": "2.0.0-beta.1",
     "react": "16.8 - 18",
     "react-dom": "16.8 - 18"
   },