baseui 16.0.0 → 16.1.0

package/checkbox-v2/checkbox.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { CheckboxProps } from './types';
+declare const Checkbox: {
+    (props: CheckboxProps): React.JSX.Element;
+    displayName: string;
+};
+export default Checkbox;

package/checkbox-v2/checkbox.js

@@ -0,0 +1,202 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _overrides = require("../helpers/overrides");
+var _styledComponents = require("./styled-components");
+var _focusVisible = require("../utils/focusVisible");
+var _constants = require("./constants");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+const stopPropagation = e => e.stopPropagation();
+const Checkbox = props => {
+  const {
+    overrides = {},
+    checked = false,
+    containsInteractiveElement = false,
+    disabled = false,
+    autoFocus = false,
+    isIndeterminate = false,
+    error = false,
+    labelPlacement = _constants.LABEL_PLACEMENT.right,
+    onChange = () => {},
+    onMouseEnter = () => {},
+    onMouseLeave = () => {},
+    onMouseDown = () => {},
+    onMouseUp = () => {},
+    onFocus = () => {},
+    onBlur = () => {},
+    onKeyDown,
+    // don't add fallback no-op to allow native keydown behavior if not customized.
+    onKeyUp,
+    // don't add fallback no-op to allow native keyup behavior if not customized.
+    value,
+    id,
+    name,
+    children,
+    required,
+    title,
+    inputRef
+  } = props;
+  const [isFocused, setIsFocused] = React.useState(autoFocus);
+  const [isFocusVisible, setIsFocusVisible] = React.useState(false);
+  const [isHovered, setIsHovered] = React.useState(false);
+  const [isActive, setIsActive] = React.useState(false);
+  const fallbackInputRef = React.useRef(null);
+  const internalInputRef = inputRef || fallbackInputRef;
+  React.useEffect(() => {
+    if (autoFocus) {
+      internalInputRef.current?.focus();
+    }
+  }, [autoFocus, internalInputRef]);
+  React.useEffect(() => {
+    if (internalInputRef.current) {
+      // Have to disable eslint for this case since indeterminate can only be set via JS
+      // We don't need to explicitly add aria-checked because the checked attribute and this indeterminate property have the same effect
+      // eslint-disable-next-line react-compiler/react-compiler
+      internalInputRef.current.indeterminate = isIndeterminate;
+    }
+  }, [isIndeterminate, internalInputRef]);
+  const onMouseEnterHandler = React.useCallback(e => {
+    setIsHovered(true);
+    onMouseEnter(e);
+  }, [onMouseEnter]);
+  const onMouseLeaveHandler = React.useCallback(e => {
+    setIsHovered(false);
+    setIsActive(false);
+    onMouseLeave(e);
+  }, [onMouseLeave]);
+  const onMouseDownHandler = React.useCallback(e => {
+    setIsActive(true);
+    onMouseDown(e);
+  }, [onMouseDown]);
+  const onMouseUpHandler = React.useCallback(e => {
+    setIsActive(false);
+    onMouseUp(e);
+  }, [onMouseUp]);
+  const onFocusHandler = React.useCallback(e => {
+    setIsFocused(true);
+    onFocus(e);
+    if ((0, _focusVisible.isFocusVisible)(e)) {
+      setIsFocusVisible(true);
+    }
+  }, [onFocus]);
+  const onBlurHandler = React.useCallback(e => {
+    setIsFocused(false);
+    onBlur(e);
+    if (!(0, _focusVisible.isFocusVisible)(e)) {
+      setIsFocusVisible(false);
+    }
+  }, [onBlur]);
+  const onKeyUpHandler = React.useCallback(event => {
+    /**
+     * Handles 'Enter' key press to toggle the checkbox.
+     */
+
+    if (event.key === ' ') {
+      setIsActive(false);
+    }
+    if (event.key === 'Enter') {
+      setIsActive(false);
+      onChange?.({
+        ...event,
+        currentTarget: {
+          ...event.currentTarget,
+          checked: !checked
+        },
+        target: {
+          ...event.target,
+          checked: !checked
+        }
+      });
+    }
+    onKeyUp?.(event);
+  }, [onKeyUp, onChange, checked]);
+  const onKeyDownHandler = React.useCallback(event => {
+    if (event.key === 'Enter' || event.key === ' ') {
+      setIsActive(true);
+    }
+    onKeyDown?.(event);
+  }, [onKeyDown]);
+  const {
+    Root: RootOverride,
+    Checkmark: CheckmarkOverride,
+    Label: LabelOverride,
+    Input: InputOverride,
+    CheckmarkContainer: CheckmarkContainerOverride
+  } = overrides;
+  const Root = (0, _overrides.getOverride)(RootOverride) || _styledComponents.Root;
+  const CheckmarkContainer = (0, _overrides.getOverride)(CheckmarkContainerOverride) || _styledComponents.CheckmarkContainer;
+  const Checkmark = (0, _overrides.getOverride)(CheckmarkOverride) || _styledComponents.Checkmark;
+  const Label = (0, _overrides.getOverride)(LabelOverride) || _styledComponents.Label;
+  const Input = (0, _overrides.getOverride)(InputOverride) || _styledComponents.Input;
+  const inputEvents = {
+    onChange,
+    onFocus: onFocusHandler,
+    onBlur: onBlurHandler,
+    onKeyDown: onKeyDownHandler,
+    onKeyUp: onKeyUpHandler
+  };
+  const mouseEvents = {
+    onMouseEnter: onMouseEnterHandler,
+    onMouseLeave: onMouseLeaveHandler,
+    onMouseDown: onMouseDownHandler,
+    onMouseUp: onMouseUpHandler
+  };
+  const sharedProps = {
+    $isFocused: isFocused,
+    $isFocusVisible: isFocusVisible,
+    $isHovered: isHovered,
+    $isActive: isActive,
+    $error: error,
+    $checked: checked,
+    $isIndeterminate: isIndeterminate,
+    $required: required,
+    $disabled: disabled,
+    $value: value
+  };
+  const labelComp = children && /*#__PURE__*/React.createElement(Label, _extends({
+    $labelPlacement: labelPlacement
+  }, sharedProps, (0, _overrides.getOverrideProps)(LabelOverride)), containsInteractiveElement ?
+  /*#__PURE__*/
+  // Prevents the event from bubbling up to the label and moving focus to the radio button
+  // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
+  React.createElement("div", {
+    onClick: e => e.preventDefault()
+  }, children) : children);
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    "data-baseweb": "checkbox-v2",
+    title: title || null,
+    $labelPlacement: labelPlacement
+  }, sharedProps, mouseEvents, (0, _overrides.getOverrideProps)(RootOverride)), labelPlacement === _constants.LABEL_PLACEMENT.left && labelComp, /*#__PURE__*/React.createElement(CheckmarkContainer, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(CheckmarkContainerOverride)), /*#__PURE__*/React.createElement(Checkmark, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(CheckmarkOverride)))), /*#__PURE__*/React.createElement(Input, _extends({
+    value: value,
+    id: id,
+    name: name,
+    checked: checked,
+    required: required,
+    "aria-label": props['aria-label'] || props.ariaLabel,
+    "aria-describedby": props['aria-describedby'],
+    "aria-errormessage": props['aria-errormessage'],
+    "aria-invalid": error || null,
+    "aria-required": required || null,
+    "aria-controls": props['aria-controls'] || null,
+    disabled: disabled,
+    type: "checkbox",
+    ref: internalInputRef
+    // Prevent a second click event from firing when label is clicked.
+    // See https://github.com/uber/baseweb/issues/3847
+    ,
+    onClick: stopPropagation
+  }, sharedProps, inputEvents, (0, _overrides.getOverrideProps)(InputOverride))), labelPlacement === _constants.LABEL_PLACEMENT.right && labelComp);
+};
+Checkbox.displayName = 'Checkbox';
+var _default = exports.default = Checkbox;

package/checkbox-v2/constants.d.ts

@@ -0,0 +1,7 @@
+export declare const STATE_TYPE: {
+    readonly change: "CHANGE";
+};
+export declare const LABEL_PLACEMENT: Readonly<{
+    readonly right: "right";
+    readonly left: "left";
+}>;

package/checkbox-v2/constants.js

@@ -0,0 +1,23 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.STATE_TYPE = exports.LABEL_PLACEMENT = void 0;
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+const STATE_TYPE = exports.STATE_TYPE = {
+  change: 'CHANGE'
+};
+
+// Note: top and bottom label placements are deprecated from checkbox v2.
+// Alternatives: Change design to use left or right placement; use checkbox control only and add your own container and label to realize the top/bottom placements
+const LABEL_PLACEMENT = exports.LABEL_PLACEMENT = Object.freeze({
+  right: 'right',
+  left: 'left'
+});

package/checkbox-v2/index.d.ts

@@ -0,0 +1,6 @@
+export { default as StatefulCheckbox } from './stateful-checkbox';
+export { default as StatefulContainer } from './stateful-checkbox-container';
+export { default as Checkbox } from './checkbox';
+export { Root as StyledRoot, Checkmark as StyledCheckmark, CheckmarkContainer as StyledCheckmarkContainer, Label as StyledLabel, Input as StyledInput, } from './styled-components';
+export { STATE_TYPE, LABEL_PLACEMENT } from './constants';
+export * from './types';

package/checkbox-v2/index.js

@@ -0,0 +1,95 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  StatefulCheckbox: true,
+  StatefulContainer: true,
+  Checkbox: true,
+  StyledRoot: true,
+  StyledCheckmark: true,
+  StyledCheckmarkContainer: true,
+  StyledLabel: true,
+  StyledInput: true,
+  STATE_TYPE: true,
+  LABEL_PLACEMENT: true
+};
+Object.defineProperty(exports, "Checkbox", {
+  enumerable: true,
+  get: function () {
+    return _checkbox.default;
+  }
+});
+Object.defineProperty(exports, "LABEL_PLACEMENT", {
+  enumerable: true,
+  get: function () {
+    return _constants.LABEL_PLACEMENT;
+  }
+});
+Object.defineProperty(exports, "STATE_TYPE", {
+  enumerable: true,
+  get: function () {
+    return _constants.STATE_TYPE;
+  }
+});
+Object.defineProperty(exports, "StatefulCheckbox", {
+  enumerable: true,
+  get: function () {
+    return _statefulCheckbox.default;
+  }
+});
+Object.defineProperty(exports, "StatefulContainer", {
+  enumerable: true,
+  get: function () {
+    return _statefulCheckboxContainer.default;
+  }
+});
+Object.defineProperty(exports, "StyledCheckmark", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.Checkmark;
+  }
+});
+Object.defineProperty(exports, "StyledCheckmarkContainer", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.CheckmarkContainer;
+  }
+});
+Object.defineProperty(exports, "StyledInput", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.Input;
+  }
+});
+Object.defineProperty(exports, "StyledLabel", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.Label;
+  }
+});
+Object.defineProperty(exports, "StyledRoot", {
+  enumerable: true,
+  get: function () {
+    return _styledComponents.Root;
+  }
+});
+var _statefulCheckbox = _interopRequireDefault(require("./stateful-checkbox"));
+var _statefulCheckboxContainer = _interopRequireDefault(require("./stateful-checkbox-container"));
+var _checkbox = _interopRequireDefault(require("./checkbox"));
+var _styledComponents = require("./styled-components");
+var _constants = require("./constants");
+var _types = require("./types");
+Object.keys(_types).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _types[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _types[key];
+    }
+  });
+});
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/checkbox-v2/stateful-checkbox-container.d.ts

@@ -0,0 +1,3 @@
+import type { StatefulContainerProps } from './types';
+declare const StatefulCheckboxContainer: (props: StatefulContainerProps) => any;
+export default StatefulCheckboxContainer;

package/checkbox-v2/stateful-checkbox-container.js

@@ -0,0 +1,102 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _constants = require("./constants");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+const defaultStateReducer = (type, nextState, currentState) => ({
+  ...currentState,
+  ...nextState
+});
+const StatefulCheckboxContainer = props => {
+  const {
+    initialState = {
+      checked: false,
+      isIndeterminate: false
+    },
+    stateReducer = defaultStateReducer,
+    onChange = () => {},
+    onMouseEnter = () => {},
+    onMouseLeave = () => {},
+    onMouseDown = () => {},
+    onMouseUp = () => {},
+    onFocus = () => {},
+    onBlur = () => {},
+    onKeyDown = () => {},
+    onKeyUp = () => {},
+    children = childProps => null,
+    ...restProps
+  } = props;
+  const [checked, setChecked] = React.useState(initialState.checked);
+  const [isIndeterminate, setIsIndeterminate] = React.useState(initialState.isIndeterminate);
+  const updateState = React.useCallback((type, e) => {
+    let nextState = {};
+    switch (type) {
+      case _constants.STATE_TYPE.change:
+        nextState = {
+          checked: e.target.checked
+        };
+        break;
+    }
+    const newState = stateReducer(type, nextState, {
+      checked,
+      isIndeterminate
+    }, e);
+    setChecked(newState.checked);
+    setIsIndeterminate(newState.isIndeterminate);
+  }, [checked, isIndeterminate, stateReducer]);
+  const onChangeHandler = React.useCallback(e => {
+    updateState(_constants.STATE_TYPE.change, e);
+    onChange && onChange(e);
+  }, [updateState, onChange]);
+  const onMouseEnterHandler = React.useCallback(e => {
+    onMouseEnter && onMouseEnter(e);
+  }, [onMouseEnter]);
+  const onMouseLeaveHandler = React.useCallback(e => {
+    onMouseLeave && onMouseLeave(e);
+  }, [onMouseLeave]);
+  const onFocusHandler = React.useCallback(e => {
+    onFocus && onFocus(e);
+  }, [onFocus]);
+  const onBlurHandler = React.useCallback(e => {
+    onBlur && onBlur(e);
+  }, [onBlur]);
+  const onMouseDownHandler = React.useCallback(e => {
+    onMouseDown && onMouseDown(e);
+  }, [onMouseDown]);
+  const onMouseUpHandler = React.useCallback(e => {
+    onMouseUp && onMouseUp(e);
+  }, [onMouseUp]);
+  const onKeyDownHandler = React.useCallback(event => {
+    onKeyDown && onKeyDown(event);
+  }, [onKeyDown]);
+  const onKeyUpHandler = React.useCallback(event => {
+    onKeyUp && onKeyUp(event);
+  }, [onKeyUp]);
+  return children({
+    ...restProps,
+    checked,
+    isIndeterminate,
+    onChange: onChangeHandler,
+    onMouseEnter: onMouseEnterHandler,
+    onMouseLeave: onMouseLeaveHandler,
+    onMouseDown: onMouseDownHandler,
+    onMouseUp: onMouseUpHandler,
+    onFocus: onFocusHandler,
+    onBlur: onBlurHandler,
+    onKeyDown: onKeyDownHandler,
+    onKeyUp: onKeyUpHandler
+  });
+};
+var _default = exports.default = StatefulCheckboxContainer;

package/checkbox-v2/stateful-checkbox.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { StatefulCheckboxProps } from './types';
+declare const StatefulCheckbox: {
+    (props: StatefulCheckboxProps): React.JSX.Element;
+    displayName: string;
+};
+export default StatefulCheckbox;

package/checkbox-v2/stateful-checkbox.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _statefulCheckboxContainer = _interopRequireDefault(require("./stateful-checkbox-container"));
+var _checkbox = _interopRequireDefault(require("./checkbox"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+
+// Styled elements
+
+const StatefulCheckbox = function (props) {
+  return /*#__PURE__*/React.createElement(_statefulCheckboxContainer.default, props, childrenProps => /*#__PURE__*/React.createElement(_checkbox.default, childrenProps, props.children));
+};
+StatefulCheckbox.displayName = 'StatefulCheckbox';
+var _default = exports.default = StatefulCheckbox;

package/checkbox-v2/styled-components.d.ts

@@ -0,0 +1,6 @@
+import type { SharedStyleProps } from './types';
+export declare const Root: import("styletron-react").StyletronComponent<"label", SharedStyleProps>;
+export declare const CheckmarkContainer: import("styletron-react").StyletronComponent<"span", SharedStyleProps>;
+export declare const Checkmark: import("styletron-react").StyletronComponent<"span", SharedStyleProps>;
+export declare const Label: import("styletron-react").StyletronComponent<"div", SharedStyleProps>;
+export declare const Input: import("styletron-react").StyletronComponent<"input", {}>;