@micromag/element-button 0.3.832 → 0.4.4

package/assets/css/styles.css

@@ -1 +1 @@
-.micromag-element-button-container{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;background-clip:padding-box;background-color:hsla(0,0%,100%,.1);border:0;border-radius:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:0;padding:5px 10px;position:relative}.micromag-element-button-container:focus-visible{-webkit-box-shadow:0 0 2px 0 #fff!important;box-shadow:0 0 2px 0 #fff!important;-webkit-box-shadow:0 0 2px 0 var(--micromag-focus-color,#fff)!important;box-shadow:0 0 2px 0 var(--micromag-focus-color,#fff)!important;outline:2px solid #000!important}.micromag-element-button-container.micromag-element-button-disabled,.micromag-element-button-container:disabled{cursor:auto}.micromag-element-button-container.micromag-element-button-rich{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:10px}.micromag-element-button-container.micromag-element-button-rich.micromag-element-button-layoutLabelBottom{-ms-flex-direction:column;flex-direction:column}.micromag-element-button-container.micromag-element-button-rich.micromag-element-button-layoutLabelTop{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.micromag-element-button-container.micromag-element-button-rich.micromag-element-button-layoutNoLabel{-ms-flex-direction:row;flex-direction:row}.micromag-element-button-container.micromag-element-button-rich.micromag-element-button-layoutLabelLeft{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.micromag-element-button-container.micromag-element-button-rich.micromag-element-button-layoutLabelRight{-ms-flex-direction:row;flex-direction:row}.micromag-element-button-container.micromag-element-button-rich.micromag-element-button-layoutLabelOver{position:relative}.micromag-element-button-container.micromag-element-button-rich.micromag-element-button-layoutLabelOver .micromag-element-button-text{background:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.7)),to(transparent));background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);bottom:0;left:0;padding:10px;position:absolute;right:0}.micromag-element-button-container.micromag-element-button-rich.micromag-element-button-textFullWidth .micromag-element-button-text{width:100%}.micromag-element-button-emptyButton{padding:10px 5px}.micromag-element-button-border{display:block}.micromag-element-button-visual{-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0;overflow:auto}.micromag-element-button-video{position:relative!important}
+.container{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;background-clip:padding-box;background-color:hsla(0,0%,100%,.1);border:0;border-radius:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:5px 10px;position:relative}.container:focus-visible{-webkit-box-shadow:0 0 2px 0 #fff!important;box-shadow:0 0 2px 0 #fff!important;-webkit-box-shadow:0 0 2px 0 var(--micromag-focus-color,#fff)!important;box-shadow:0 0 2px 0 var(--micromag-focus-color,#fff)!important;outline:2px solid #000!important}.container.disabled,.container:disabled{cursor:auto}.container.rich{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:10px}.container.rich.layoutLabelBottom{-ms-flex-direction:column;flex-direction:column}.container.rich.layoutLabelTop{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.container.rich.layoutNoLabel{-ms-flex-direction:row;flex-direction:row}.container.rich.layoutLabelLeft{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.container.rich.layoutLabelRight{-ms-flex-direction:row;flex-direction:row}.container.rich.layoutLabelOver{position:relative}.container.rich.layoutLabelOver .text{background:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.7)),to(transparent));background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);bottom:0;left:0;padding:10px;position:absolute;right:0}.container.rich.textFullWidth .text{width:100%}.emptyButton{padding:10px 5px}.border{display:block}.visual{overflow:auto;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0}.video{position:relative!important}

package/es/index.d.ts

@@ -0,0 +1,51 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+import { TextStyle, BoxStyle, TextElement, Media } from '@micromag/core';
+
+interface ButtonProps {
+    textStyle?: TextStyle | null;
+    buttonStyle?: BoxStyle | null;
+    type?: 'button' | 'submit';
+    disabled?: boolean;
+    focusable?: boolean;
+    inline?: boolean;
+    onClick?: ((...args: unknown[]) => void) | null;
+    children?: React.ReactNode | null;
+    className?: string | null;
+    withoutExternalBorder?: boolean;
+    refButton?: ((...args: unknown[]) => void | {
+        current?: unknown;
+    }) | null;
+    style?: Record<string, unknown> | null;
+}
+declare function Button({ textStyle, buttonStyle, type, disabled, focusable, inline, onClick, children, className, withoutExternalBorder, refButton, style, ...buttonProps }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+interface RichButtonProps {
+    label?: TextElement | null;
+    visual?: Media | null;
+    visualWidth?: number | string | null;
+    labelBoxStyle?: BoxStyle | null;
+    textStyle?: TextStyle | null;
+    buttonStyle?: BoxStyle | null;
+    resolution?: number | null;
+    shouldLoad?: boolean;
+    layout?: 'label-bottom' | 'label-top' | 'no-label' | 'label-over' | 'label-right';
+    type?: 'button' | 'submit';
+    disabled?: boolean;
+    focusable?: boolean;
+    inline?: boolean;
+    onClick?: ((...args: unknown[]) => void) | null;
+    className?: string | null;
+    textClassName?: string | null;
+    imageClassName?: string | null;
+    videoClassName?: string | null;
+    visualClassName?: string | null;
+    withoutExternalBorder?: boolean;
+    refButton?: ((...args: unknown[]) => void | {
+        current?: unknown;
+    }) | null;
+    children?: React.ReactNode | null;
+}
+declare function RichButton({ label, visual, visualWidth, labelBoxStyle, textStyle, buttonStyle, resolution, shouldLoad, layout, type, disabled, focusable, inline, onClick, className, textClassName, visualClassName, imageClassName, videoClassName, withoutExternalBorder, refButton, children, ...otherProps }: RichButtonProps): react_jsx_runtime.JSX.Element;
+
+export { RichButton, Button as default };

package/es/index.js

@@ -2,62 +2,42 @@ import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import React, { useMemo } from 'react';
-import { PropTypes as PropTypes$1 } from '@micromag/core';
 import { Button as Button$1, ScreenElement } from '@micromag/core/components';
 import { getStyleFromText, getStyleFromBox } from '@micromag/core/utils';
 import { FormattedMessage } from 'react-intl';
 import Text from '@micromag/element-text';
 import Visual from '@micromag/element-visual';
 
-var styles = {"container":"micromag-element-button-container","rich":"micromag-element-button-rich","layoutLabelBottom":"micromag-element-button-layoutLabelBottom","layoutLabelTop":"micromag-element-button-layoutLabelTop","layoutNoLabel":"micromag-element-button-layoutNoLabel","layoutLabelLeft":"micromag-element-button-layoutLabelLeft","layoutLabelRight":"micromag-element-button-layoutLabelRight","layoutLabelOver":"micromag-element-button-layoutLabelOver","text":"micromag-element-button-text","textFullWidth":"micromag-element-button-textFullWidth","emptyButton":"micromag-element-button-emptyButton","visual":"micromag-element-button-visual","video":"micromag-element-button-video"};
+var styles = {"container":"container","rich":"rich","layoutLabelBottom":"layoutLabelBottom","layoutLabelTop":"layoutLabelTop","layoutNoLabel":"layoutNoLabel","layoutLabelLeft":"layoutLabelLeft","layoutLabelRight":"layoutLabelRight","layoutLabelOver":"layoutLabelOver","text":"text","textFullWidth":"textFullWidth","emptyButton":"emptyButton","visual":"visual","video":"video"};
 
 var _excluded$1 = ["textStyle", "buttonStyle", "type", "disabled", "focusable", "inline", "onClick", "children", "className", "withoutExternalBorder", "refButton", "style"],
   _excluded2 = ["body"];
-var propTypes$1 = {
-  textStyle: PropTypes$1.textStyle,
-  buttonStyle: PropTypes$1.boxStyle,
-  type: PropTypes.oneOf(['button', 'submit']),
-  disabled: PropTypes.bool,
-  focusable: PropTypes.bool,
-  inline: PropTypes.bool,
-  onClick: PropTypes.func,
-  children: PropTypes.node,
-  className: PropTypes.string,
-  withoutExternalBorder: PropTypes.bool,
-  refButton: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any // eslint-disable-line
-  })]),
-  style: PropTypes.object // eslint-disable-line
-};
-var defaultProps$1 = {
-  textStyle: null,
-  buttonStyle: null,
-  type: 'button',
-  disabled: false,
-  focusable: true,
-  inline: false,
-  onClick: null,
-  children: null,
-  className: null,
-  withoutExternalBorder: true,
-  refButton: null,
-  style: null
-};
-var Button = function Button(_ref) {
-  var textStyle = _ref.textStyle,
-    buttonStyle = _ref.buttonStyle,
-    type = _ref.type,
-    disabled = _ref.disabled,
-    focusable = _ref.focusable,
-    inline = _ref.inline,
-    onClick = _ref.onClick,
-    children = _ref.children,
-    className = _ref.className,
-    withoutExternalBorder = _ref.withoutExternalBorder,
-    refButton = _ref.refButton,
-    style = _ref.style,
+function Button(_ref) {
+  var _ref$textStyle = _ref.textStyle,
+    textStyle = _ref$textStyle === void 0 ? null : _ref$textStyle,
+    _ref$buttonStyle = _ref.buttonStyle,
+    buttonStyle = _ref$buttonStyle === void 0 ? null : _ref$buttonStyle,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$focusable = _ref.focusable,
+    focusable = _ref$focusable === void 0 ? true : _ref$focusable,
+    _ref$inline = _ref.inline,
+    inline = _ref$inline === void 0 ? false : _ref$inline,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? null : _ref$onClick,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$withoutExternalB = _ref.withoutExternalBorder,
+    withoutExternalBorder = _ref$withoutExternalB === void 0 ? true : _ref$withoutExternalB,
+    _ref$refButton = _ref.refButton,
+    refButton = _ref$refButton === void 0 ? null : _ref$refButton,
+    _ref$style = _ref.style,
+    style = _ref$style === void 0 ? null : _ref$style,
     buttonProps = _objectWithoutProperties(_ref, _excluded$1);
   var finalStyles = style;
 
@@ -94,84 +74,54 @@ var Button = function Button(_ref) {
     focusable: focusable,
     withoutBootstrapStyles: true
   }, otherProps), children);
-};
-Button.propTypes = propTypes$1;
-Button.defaultProps = defaultProps$1;
+}
 
 var _excluded = ["label", "visual", "visualWidth", "labelBoxStyle", "textStyle", "buttonStyle", "resolution", "shouldLoad", "layout", "type", "disabled", "focusable", "inline", "onClick", "className", "textClassName", "visualClassName", "imageClassName", "videoClassName", "withoutExternalBorder", "refButton", "children"];
-var propTypes = {
-  label: PropTypes$1.textElement,
-  visual: PropTypes$1.media,
-  visualWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  labelBoxStyle: PropTypes$1.boxStyle,
-  textStyle: PropTypes$1.textStyle,
-  buttonStyle: PropTypes$1.boxStyle,
-  resolution: PropTypes.number,
-  shouldLoad: PropTypes.bool,
-  layout: PropTypes.oneOf(['label-bottom', 'label-top', 'no-label', 'label-over', 'label-right']),
-  type: PropTypes.oneOf(['button', 'submit']),
-  disabled: PropTypes.bool,
-  focusable: PropTypes.bool,
-  inline: PropTypes.bool,
-  onClick: PropTypes.func,
-  className: PropTypes.string,
-  textClassName: PropTypes.string,
-  imageClassName: PropTypes.string,
-  videoClassName: PropTypes.string,
-  visualClassName: PropTypes.string,
-  withoutExternalBorder: PropTypes.bool,
-  refButton: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
-    current: PropTypes.any // eslint-disable-line
-  })]),
-  children: PropTypes.node
-};
-var defaultProps = {
-  label: null,
-  visual: null,
-  visualWidth: null,
-  labelBoxStyle: null,
-  textStyle: null,
-  buttonStyle: null,
-  resolution: null,
-  shouldLoad: true,
-  layout: 'label-bottom',
-  type: 'button',
-  disabled: false,
-  focusable: true,
-  inline: false,
-  onClick: null,
-  className: null,
-  textClassName: null,
-  imageClassName: null,
-  videoClassName: null,
-  visualClassName: null,
-  withoutExternalBorder: true,
-  refButton: null,
-  children: null
-};
-var RichButton = function RichButton(_ref) {
-  var label = _ref.label,
-    visual = _ref.visual,
-    visualWidth = _ref.visualWidth,
-    labelBoxStyle = _ref.labelBoxStyle,
-    textStyle = _ref.textStyle,
-    buttonStyle = _ref.buttonStyle,
-    resolution = _ref.resolution,
-    shouldLoad = _ref.shouldLoad,
-    layout = _ref.layout,
-    type = _ref.type,
-    disabled = _ref.disabled,
-    focusable = _ref.focusable,
-    inline = _ref.inline,
-    onClick = _ref.onClick,
-    className = _ref.className,
-    textClassName = _ref.textClassName,
-    visualClassName = _ref.visualClassName,
-    imageClassName = _ref.imageClassName,
-    videoClassName = _ref.videoClassName,
-    withoutExternalBorder = _ref.withoutExternalBorder,
-    refButton = _ref.refButton,
-    children = _ref.children,
+function RichButton(_ref) {
+  var _ref$label = _ref.label,
+    label = _ref$label === void 0 ? null : _ref$label,
+    _ref$visual = _ref.visual,
+    visual = _ref$visual === void 0 ? null : _ref$visual,
+    _ref$visualWidth = _ref.visualWidth,
+    visualWidth = _ref$visualWidth === void 0 ? null : _ref$visualWidth,
+    _ref$labelBoxStyle = _ref.labelBoxStyle,
+    labelBoxStyle = _ref$labelBoxStyle === void 0 ? null : _ref$labelBoxStyle,
+    _ref$textStyle = _ref.textStyle,
+    textStyle = _ref$textStyle === void 0 ? null : _ref$textStyle,
+    _ref$buttonStyle = _ref.buttonStyle,
+    buttonStyle = _ref$buttonStyle === void 0 ? null : _ref$buttonStyle,
+    _ref$resolution = _ref.resolution,
+    resolution = _ref$resolution === void 0 ? null : _ref$resolution,
+    _ref$shouldLoad = _ref.shouldLoad,
+    shouldLoad = _ref$shouldLoad === void 0 ? true : _ref$shouldLoad,
+    _ref$layout = _ref.layout,
+    layout = _ref$layout === void 0 ? 'label-bottom' : _ref$layout,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'button' : _ref$type,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$focusable = _ref.focusable,
+    focusable = _ref$focusable === void 0 ? true : _ref$focusable,
+    _ref$inline = _ref.inline,
+    inline = _ref$inline === void 0 ? false : _ref$inline,
+    _ref$onClick = _ref.onClick,
+    onClick = _ref$onClick === void 0 ? null : _ref$onClick,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? null : _ref$className,
+    _ref$textClassName = _ref.textClassName,
+    textClassName = _ref$textClassName === void 0 ? null : _ref$textClassName,
+    _ref$visualClassName = _ref.visualClassName,
+    visualClassName = _ref$visualClassName === void 0 ? null : _ref$visualClassName,
+    _ref$imageClassName = _ref.imageClassName,
+    imageClassName = _ref$imageClassName === void 0 ? null : _ref$imageClassName,
+    _ref$videoClassName = _ref.videoClassName,
+    videoClassName = _ref$videoClassName === void 0 ? null : _ref$videoClassName,
+    _ref$withoutExternalB = _ref.withoutExternalBorder,
+    withoutExternalBorder = _ref$withoutExternalB === void 0 ? true : _ref$withoutExternalB,
+    _ref$refButton = _ref.refButton,
+    refButton = _ref$refButton === void 0 ? null : _ref$refButton,
+    _ref$children = _ref.children,
+    children = _ref$children === void 0 ? null : _ref$children,
     otherProps = _objectWithoutProperties(_ref, _excluded);
   var Tag = useMemo(function () {
     switch (type) {
@@ -229,8 +179,6 @@ var RichButton = function RichButton(_ref) {
     body: body,
     className: classNames([styles.text, _defineProperty({}, textClassName, textClassName !== null)])
   }) : null, children));
-};
-RichButton.propTypes = propTypes;
-RichButton.defaultProps = defaultProps;
+}
 
 export { RichButton, Button as default };

package/es/styles.css

@@ -0,0 +1 @@
+.container{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;background-clip:padding-box;background-color:hsla(0,0%,100%,.1);border:0;border-radius:0;color:inherit;cursor:pointer;display:inline-block;font-family:inherit;padding:5px 10px;position:relative}.container:focus-visible{-webkit-box-shadow:0 0 2px 0 #fff!important;box-shadow:0 0 2px 0 #fff!important;-webkit-box-shadow:0 0 2px 0 var(--micromag-focus-color,#fff)!important;box-shadow:0 0 2px 0 var(--micromag-focus-color,#fff)!important;outline:2px solid #000!important}.container.disabled,.container:disabled{cursor:auto}.container.rich{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;gap:10px}.container.rich.layoutLabelBottom{-ms-flex-direction:column;flex-direction:column}.container.rich.layoutLabelTop{-ms-flex-direction:column-reverse;flex-direction:column-reverse}.container.rich.layoutNoLabel{-ms-flex-direction:row;flex-direction:row}.container.rich.layoutLabelLeft{-ms-flex-direction:row-reverse;flex-direction:row-reverse}.container.rich.layoutLabelRight{-ms-flex-direction:row;flex-direction:row}.container.rich.layoutLabelOver{position:relative}.container.rich.layoutLabelOver .text{background:-webkit-gradient(linear,left bottom,left top,from(rgba(0,0,0,.7)),to(transparent));background:linear-gradient(0deg,rgba(0,0,0,.7),transparent);bottom:0;left:0;padding:10px;position:absolute;right:0}.container.rich.textFullWidth .text{width:100%}.emptyButton{padding:10px 5px}.border{display:block}.visual{overflow:auto;-ms-flex-positive:1;flex-grow:1;-ms-flex-negative:0;flex-shrink:0}.video{position:relative!important}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/element-button",
-    "version": "0.3.832",
+    "version": "0.4.4",
     "private": false,
     "description": "",
     "keywords": [
@@ -34,6 +34,7 @@
     "module": "es/index.js",
     "exports": {
         ".": {
+            "types": "./es/index.d.ts",
             "import": "./es/index.js"
         },
         "./assets/css/styles": "./assets/css/styles.css",
@@ -47,29 +48,29 @@
     "scripts": {
         "clean": "rm -rf es && rm -rf lib && rm -rf assets",
         "prepublishOnly": "npm run build",
-        "build": "../../scripts/prepare-package.sh"
+        "build": "../../scripts/prepare-package.sh --types"
     },
     "devDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "react": "^19.2.0",
+        "react-dom": "^18.3.0 || ^19.0.0"
     },
     "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+        "react": "^19.2.0",
+        "react-dom": "^18.3.0 || ^19.0.0"
     },
     "dependencies": {
         "@babel/runtime": "^7.13.10",
-        "@micromag/core": "^0.3.832",
-        "@micromag/element-text": "^0.3.832",
-        "@micromag/element-visual": "^0.3.832",
+        "@micromag/core": "^0.4.4",
+        "@micromag/element-text": "^0.4.4",
+        "@micromag/element-visual": "^0.4.4",
         "classnames": "^2.2.6",
-        "prop-types": "^15.7.2",
-        "react-intl": "^6.6.4",
+        "react-intl": "^8.1.3",
         "uuid": "^9.0.0"
     },
     "publishConfig": {
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "4969d64e304334cfd47321e624e5914e0694c55f"
+    "gitHead": "04b8519c3a3ddace5a21497e22faa11865d57f6d",
+    "types": "es/index.d.ts"
 }